/* ============================================================
   格律智创 · 全局设计系统 v2
   Apple 式柔和毛玻璃：保留米白 / 深棕 / 暖金色系，
   全面柔化圆角、阴影、边框与导航，去硬朗化。
   本文件以 !important 覆盖各页面内联类样式，全站生效。
   ============================================================ */

:root {
  --gelv-bg: #faf3e7;
  --gelv-ink: #43301d;
  --gelv-ink-soft: #6b543c;
  --gelv-brown: #7a4a21;
  --gelv-gold: #c9972f;
  --gelv-gold-deep: #8a5a14;
  --gelv-glass-bg: rgba(255, 252, 246, .62);
  --gelv-glass-bg-strong: rgba(255, 253, 248, .86);
  --gelv-glass-line: rgba(122, 74, 33, .10);
  --gelv-glass-highlight: rgba(255, 255, 255, .85);
  --gelv-shadow: 0 24px 60px -16px rgba(96, 58, 24, .12), 0 4px 16px rgba(96, 58, 24, .05);
  --gelv-shadow-hover: 0 34px 84px -16px rgba(96, 58, 24, .18), 0 6px 20px rgba(96, 58, 24, .07);
  --gelv-shadow-soft: 0 12px 34px -10px rgba(96, 58, 24, .10);
  --gelv-radius: 26px;
  --gelv-radius-sm: 18px;
  --gelv-radius-xs: 13px;
  --gelv-ease: cubic-bezier(.22, .9, .28, 1);
}

/* ---------------- 背景：轻盈暖雾 ---------------- */
html { background: var(--gelv-bg); }
body {
  background-color: var(--gelv-bg) !important;
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(240, 201, 109, .20), transparent 62%),
    radial-gradient(1000px 700px at 105% 18%, rgba(190, 120, 60, .10), transparent 60%),
    radial-gradient(900px 900px at 50% 115%, rgba(218, 165, 32, .08), transparent 65%),
    linear-gradient(180deg, #fbf5ea 0%, #f8efdf 48%, #f6ecda 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(218, 165, 32, .28); color: #3a2612; }

body::before, body::after {
  content: ""; position: fixed; z-index: -2; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
body::before { width: 420px; height: 420px; left: -140px; top: 12vh; background: rgba(240, 201, 109, .16); }
body::after  { width: 520px; height: 520px; right: -200px; bottom: 2vh; background: rgba(150, 96, 50, .10); }

/* ---------------- 卡片 / 面板：柔雾玻璃 ---------------- */
.card, .panel, .metric-card, .feature-card, .tool-card, .stat-card, .result-card,
.config-panel, .sidebar, .content-card, .analysis-card, .search-card, .table-card,
.section-card, .modal, .modal-content, .rag-context, .generation-panel,
.validation-panel, .profile-card, .overview-card, .ov-card, .step, .formula-box,
.callout, .facet-panel, .filter-panel, .glass-card,
.editor-panel, .result-panel, .input-panel, .control-panel, .settings-panel,
.info-card, .detail-card, .list-card, .form-card, .kpi-card, .poem-card, .input-card,
.question-card, .answer-card, .notice-box, .tip-box, .empty-state {
  background: linear-gradient(150deg, rgba(255, 255, 255, .78), var(--gelv-glass-bg)) !important;
  -webkit-backdrop-filter: saturate(165%) blur(26px) !important;
  backdrop-filter: saturate(165%) blur(26px) !important;
  border: 1px solid var(--gelv-glass-line) !important;
  border-top-color: var(--gelv-glass-highlight) !important;
  border-radius: var(--gelv-radius) !important;
  box-shadow: var(--gelv-shadow) !important;
}

.card, .panel, .feature-card, .tool-card, .ov-card, .step, .glass-card, .poem-card {
  transition: transform .34s var(--gelv-ease), box-shadow .34s var(--gelv-ease), border-color .34s ease !important;
}
.card:hover, .feature-card:hover, .tool-card:hover, .ov-card:hover, .glass-card:hover, .poem-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--gelv-shadow-hover) !important;
  border-color: rgba(201, 151, 47, .28) !important;
}

/* ---------------- Hero：深暖底 + 柔光（保持白字可读） ---------------- */
.hero:not(.hero-light), .hero-section, .page-hero {
  background-image:
    radial-gradient(1000px 520px at 78% -12%, rgba(240, 201, 109, .30), transparent 62%),
    radial-gradient(820px 500px at 8% 112%, rgba(166, 59, 42, .22), transparent 58%),
    linear-gradient(155deg, #503219 0%, #3a2412 55%, #2b1a0d 100%) !important;
}
.hero-content, .hero-in { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .10)); }

/* ---------------- 徽章 / 标签：胶囊玻璃 ---------------- */
.hero-badge, .pill, .badge, .tag, .chip, .a-chip, .score-badge, .status-badge {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 999px !important;
}

/* ---------------- 按钮：胶囊 + 柔和浮起 ---------------- */
button, .btn, .btn-primary, .btn-outline, .btn-gold, .btn-danger, .btn-secondary,
.action-btn, .submit-btn, .search-btn, .pill-btn {
  border-radius: 999px !important;
  transition: transform .22s var(--gelv-ease), box-shadow .22s var(--gelv-ease),
              background .22s ease, color .22s ease, border-color .22s ease !important;
}
button:hover, .btn:hover, .btn-primary:hover, .btn-outline:hover, .btn-gold:hover,
.action-btn:hover, .submit-btn:hover, .search-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px -8px rgba(96, 58, 24, .22) !important;
}
button:active, .btn:active, .btn-primary:active {
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 4px 12px -4px rgba(96, 58, 24, .18) !important;
}
.btn-primary {
  box-shadow: 0 10px 24px -8px rgba(111, 66, 29, .32) !important;
}
.btn-outline, .btn-ghost {
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ptab, .type-item, .poet-item, .tab-btn, .nav-tab, .filter-tab {
  border-radius: 14px !important;
}

/* ---------------- 输入控件：半透明白 + 柔焦光环 ---------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=file]),
select, textarea, .select-input, .search-input {
  background: rgba(255, 255, 255, .66) !important;
  border: 1px solid rgba(122, 74, 33, .16) !important;
  border-radius: var(--gelv-radius-xs) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(96, 58, 24, .04) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea { border-radius: var(--gelv-radius-sm) !important; }
input:focus, select:focus, textarea:focus, .select-input:focus, .search-input:focus {
  outline: none !important;
  background: rgba(255, 255, 255, .85) !important;
  border-color: rgba(201, 151, 47, .60) !important;
  box-shadow: 0 0 0 4px rgba(218, 165, 32, .14) !important;
}

/* ---------------- 表格：轻柔分隔 ---------------- */
table { border-collapse: separate !important; border-spacing: 0 !important; }
thead th {
  background: rgba(255, 250, 240, .78) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(122, 74, 33, .12) !important;
  font-weight: 600;
}
tbody tr { transition: background .18s ease; }
tbody tr:hover td { background: rgba(218, 165, 32, .06) !important; }

hr { border: none !important; height: 1px !important; background: rgba(122, 74, 33, .12) !important; }

/* ---------------- 主导航 #gelvNav：Apple 式浅色毛玻璃 ---------------- */
#gelvNav {
  height: 56px !important;
  background: rgba(252, 247, 238, .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  border-bottom: 1px solid rgba(122, 74, 33, .10) !important;
  box-shadow: 0 12px 32px -18px rgba(96, 58, 24, .18) !important;
}
#gelvNav.scrolled {
  background: rgba(252, 247, 238, .88) !important;
  box-shadow: 0 16px 40px -18px rgba(96, 58, 24, .22) !important;
}
#gelvNav .in { max-width: 1240px !important; gap: 18px !important; }
#gelvNav .brand { color: var(--gelv-ink) !important; font-weight: 700 !important; }
#gelvNav .brand img { border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(122, 74, 33, .14) !important; }
#gelvNav .lk { color: #5d4630 !important; border-radius: 999px !important; padding: 7px 13px !important; }
#gelvNav .lk:hover { color: var(--gelv-gold-deep) !important; background: rgba(201, 151, 47, .12) !important; }
#gelvNav .lk.on { color: var(--gelv-gold-deep) !important; background: rgba(201, 151, 47, .16) !important; }
#gelvNav .dd {
  background: rgba(253, 249, 242, .93) !important;
  -webkit-backdrop-filter: saturate(170%) blur(26px) !important;
  backdrop-filter: saturate(170%) blur(26px) !important;
  border: 1px solid rgba(122, 74, 33, .12) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 54px -12px rgba(96, 58, 24, .22) !important;
}
#gelvNav .dd a { color: #5d4630 !important; border-radius: 12px !important; }
#gelvNav .dd a:hover, #gelvNav .dd a.on { background: rgba(201, 151, 47, .12) !important; color: var(--gelv-gold-deep) !important; }
#gelvNav .right a { color: #5d4630 !important; }
#gelvNav .right a:hover { color: var(--gelv-gold-deep) !important; }
#gelvNav .right .login {
  color: var(--gelv-gold-deep) !important;
  border: 1px solid rgba(201, 151, 47, .45) !important;
  background: rgba(255, 255, 255, .45) !important;
  border-radius: 999px !important;
}
#gelvNav .right .login:hover { background: rgba(201, 151, 47, .14) !important; }
#gelvNav .admin-badge {
  border: 1px solid rgba(201, 151, 47, .40) !important;
  color: var(--gelv-gold-deep) !important;
  border-radius: 999px !important;
}
#gelvNav .burger { color: #5d4630 !important; }
#gelvNav .mob {
  background: rgba(252, 247, 238, .97) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}
#gelvNav .mob a { color: #5d4630 !important; border-bottom-color: rgba(122, 74, 33, .10) !important; }
body { padding-top: 56px !important; }

/* ---------------- 青少导航 .gelv-navbar：同款浅色玻璃 ---------------- */
.gelv-navbar {
  background: rgba(252, 247, 238, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  box-shadow: 0 1px 0 rgba(122, 74, 33, .10), 0 14px 34px -18px rgba(96, 58, 24, .16) !important;
}
.gelv-logo, .gelv-logo-text { color: var(--gelv-ink) !important; }
.gelv-logo-icon {
  background: linear-gradient(135deg, #e2b654, #cf9a2e) !important;
  color: #fffdf6 !important;
  border-radius: 11px !important;
  box-shadow: 0 4px 12px -3px rgba(160, 110, 30, .35) !important;
}
.gelv-nav-item { color: #5d4630 !important; border-radius: 999px !important; }
.gelv-nav-item:hover { color: var(--gelv-gold-deep) !important; background: rgba(201, 151, 47, .12) !important; }
.gelv-nav-item.active { color: var(--gelv-gold-deep) !important; background: rgba(201, 151, 47, .16) !important; }
.gelv-nav-item.highlight {
  background: rgba(201, 151, 47, .10) !important;
  border: 1px solid rgba(201, 151, 47, .32) !important;
  color: var(--gelv-gold-deep) !important;
}
.gelv-nav-item.highlight:hover { background: rgba(201, 151, 47, .18) !important; }
.gelv-nav-item.highlight.active { background: rgba(201, 151, 47, .22) !important; }
.gelv-btn-ghost, .gelv-user-trigger { background: rgba(122, 74, 33, .08) !important; color: #5d4630 !important; }
.gelv-btn-ghost:hover, .gelv-user-trigger:hover { background: rgba(201, 151, 47, .16) !important; }
.gelv-menu-toggle { color: #5d4630 !important; }
.gelv-nav-dropdown-menu, .gelv-user-dropdown {
  background: rgba(253, 249, 242, .94) !important;
  border: 1px solid rgba(122, 74, 33, .12) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 54px -12px rgba(96, 58, 24, .22) !important;
  -webkit-backdrop-filter: saturate(170%) blur(24px);
  backdrop-filter: saturate(170%) blur(24px);
}
.gelv-nav-dropdown-menu::before {
  background: rgba(253, 249, 242, .94) !important;
  border-left-color: rgba(122, 74, 33, .12) !important;
  border-top-color: rgba(122, 74, 33, .12) !important;
}
.gelv-dropdown-link { border-radius: 12px !important; }
.gelv-dropdown-link:hover { background: rgba(201, 151, 47, .10) !important; }
.gelv-dropdown-link.active { background: rgba(201, 151, 47, .12) !important; }
.gelv-dropdown-link .icon {
  border-radius: 9px !important;
  background: rgba(201, 151, 47, .12) !important;
  color: var(--gelv-gold-deep) !important;
}
.gelv-mobile-menu {
  background: rgba(250, 244, 232, .97) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}
.gelv-mobile-menu a { color: var(--gelv-ink) !important; border-radius: 12px !important; }
.gelv-mobile-menu a:hover { background: rgba(201, 151, 47, .10) !important; color: var(--gelv-gold-deep) !important; }
.gelv-mobile-group { background: rgba(255, 255, 255, .55) !important; border-radius: 16px !important; }
.gelv-mobile-group-title { color: var(--gelv-gold) !important; }
.gelv-mobile-menu-close { background: rgba(122, 74, 33, .08) !important; color: #5d4630 !important; }
.gelv-mobile-menu a.youth-link {
  background: linear-gradient(135deg, #d9a83c, #c9972f) !important;
  color: #fffdf6 !important;
}
.gelv-mobile-menu a.login-link {
  background: rgba(201, 151, 47, .16) !important;
  color: var(--gelv-gold-deep) !important;
}

/* ---------------- 滚动条 ---------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(122, 74, 33, .28) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(122, 74, 33, .22); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(122, 74, 33, .34); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 响应式与动效 ---------------- */
@media (max-width: 760px) {
  :root { --gelv-radius: 20px; }
  #gelvNav { height: 52px !important; }
  body { padding-top: 52px !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
}
/* ---------------- 登录/注册页：分屏柔化 ---------------- */
.auth-form-section {
  background: linear-gradient(150deg, rgba(255, 253, 248, .94), rgba(250, 243, 231, .90)) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
}
.auth-visual {
  background-image:
    radial-gradient(720px 420px at 80% -8%, rgba(240, 201, 109, .28), transparent 60%),
    linear-gradient(155deg, #503219 0%, #3a2412 55%, #2b1a0d 100%) !important;
}
/* ---------------- 按钮精修 v2.1 ---------------- */
button, .btn, .btn-primary, .btn-outline, .btn-gold, .btn-danger, .btn-secondary,
.action-btn, .submit-btn, .search-btn, .pill-btn {
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.btn-primary, button.primary, .primary-btn {
  background: linear-gradient(135deg, #8a5426, #6f421d) !important;
  color: #fdf6e9 !important;
  border: none !important;
  box-shadow: 0 10px 24px -8px rgba(111, 66, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.btn-primary:hover, button.primary:hover, .primary-btn:hover {
  background: linear-gradient(135deg, #96602e, #7a4a21) !important;
}
.btn-gold {
  background: linear-gradient(135deg, #e2b654, #cf9a2e) !important;
  color: #3a2414 !important;
  box-shadow: 0 10px 24px -8px rgba(160, 110, 30, .32), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-gold:hover { background: linear-gradient(135deg, #eac267, #d9a83c) !important; }
.btn-danger {
  background: linear-gradient(135deg, #c05b4a, #a63b2a) !important;
  color: #fdf1ec !important;
  border: none !important;
}
button:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid rgba(201, 151, 47, .55) !important;
  outline-offset: 2px !important;
}
/* ============================================================
   格律智创 · 全局设计系统 v3
   多端可用性、触控尺寸、视觉密度与无障碍精修。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body { min-width: 280px; overflow-x: hidden; color: var(--gelv-ink); }
img, video, canvas, svg { max-width: 100%; }
:where(p, li, td, th, label, .message, .description) { overflow-wrap: anywhere; }
:where(main, section, article, [id]) { scroll-margin-top: 76px; }


/* 操作状态与语义反馈 */
button:disabled, .btn:disabled, [aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .56 !important;
  transform: none !important;
  box-shadow: none !important;
}
[aria-busy="true"] { cursor: progress !important; }
:where(.error, .alert-error, .status-error) { color: #8f3327; }
:where(.success, .alert-success, .status-success) { color: #4f6e3e; }

/* 长表格与研究数据在窄屏可横向浏览，不挤坏页面。 */
:where(.table-container, .table-wrap, .table-responsive, .data-table-wrap) {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--gelv-radius-sm);
}
:where(.table-container, .table-wrap, .table-responsive, .data-table-wrap) table {
  min-width: max-content;
}

/* 毛玻璃性能：低性能/窄屏设备降低模糊半径，保留层次但减少重绘。 */
@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  body { background-attachment: scroll !important; }
  body::before, body::after { filter: blur(48px); opacity: .72; }
  h1 { font-size: clamp(1.72rem, 8vw, 2.45rem); line-height: 1.18; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.9rem); line-height: 1.25; }
  input, select, textarea { font-size: 16px !important; }
  button, .btn, .btn-primary, .btn-outline, .btn-gold, .btn-danger, .btn-secondary,
  .action-btn, .submit-btn, .search-btn, .pill-btn { min-height: 44px; }
  .action-btn { min-width: 44px; padding-inline: 10px !important; }
  .card, .panel, .metric-card, .feature-card, .tool-card, .stat-card, .result-card,
  .content-card, .analysis-card, .section-card, .glass-card, .poem-card {
    -webkit-backdrop-filter: saturate(145%) blur(18px) !important;
    backdrop-filter: saturate(145%) blur(18px) !important;
    box-shadow: 0 16px 42px -18px rgba(96, 58, 24, .18) !important;
  }
  .modal, .modal-content { max-width: calc(100vw - 16px) !important; max-height: 92dvh; }
}

@media (pointer: coarse) {
  :where(a, button, input, select, textarea, summary, [role="button"]) { touch-action: manipulation; }
  :where(button, .btn, .action-btn, .nav-item, .tab-btn) { min-height: 44px; }
}

@media (hover: none) {
  .card:hover, .feature-card:hover, .tool-card:hover, .ov-card:hover, .glass-card:hover, .poem-card:hover,
  button:hover, .btn:hover, .btn-primary:hover, .btn-outline:hover, .btn-gold:hover,
  .action-btn:hover, .submit-btn:hover, .search-btn:hover { transform: none !important; }
}

@media (prefers-contrast: more) {
  :root { --gelv-glass-line: rgba(88, 52, 22, .28); }
  button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible { outline: 3px solid #8a5a14 !important; outline-offset: 3px !important; }
}