:root {
            --ink: #1a1a1a;
            --ink-light: #4a4a4a;
            --paper: #f5f0e8;
            --paper-dark: #e8e0d0;
            --vermilion: #c41e3a;
            --gold: #b8860b;
            --jade: #2e8b57;
            --jade-light: #e8f4ed;
            --border: #d4c4a8;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Noto Serif SC', serif;
            background: var(--paper);
            color: var(--ink);
            min-height: 100vh;
            line-height: 1.7;
        }
        .container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
        @media (max-width: 600px) { .container { padding: 1rem; } }
        header { text-align: center; padding: 2.5rem 0 2rem; margin-bottom: 2rem; position: relative; }
        header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background: linear-gradient(90deg, var(--vermilion), var(--gold)); border-radius: 2px; }
        .header-title { font-family: 'Ma Shan Zheng', cursive; font-size: 2.6rem; color: var(--ink); letter-spacing: 0.15em; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
        .header-subtitle { color: var(--ink-light); font-size: 1rem; margin-top: 0.6rem; letter-spacing: 0.05em; }
        .nav-container { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 1.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(201,168,76,0.3); }
        .nav { display: flex; justify-content: center; gap: 0.5rem; padding: 0; border: none; }
        .nav a { color: var(--vermilion); text-decoration: none; font-size: 0.95rem; padding: 0.4rem 1rem; border-radius: 20px; transition: all 0.2s; }
        .nav a:hover { background: var(--vermilion); color: #fff; }
        .nav a.active { background: var(--vermilion); color: #fff; }
        .quote-banner { background: linear-gradient(135deg, #fff 0%, var(--paper) 50%, #fff 100%); padding: 1.5rem 2rem; margin: 2rem 0; border-left: 4px solid var(--gold); border-right: 4px solid var(--gold); font-style: italic; color: var(--ink-light); text-align: center; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2.2rem; margin-bottom: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        @media (max-width: 600px) { .card { padding: 1.5rem; border-radius: 12px; } }
        .card-title { font-family: 'Ma Shan Zheng', cursive; font-size: 1.5rem; color: var(--ink); margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--vermilion); display: inline-block; }
        .steps { display: flex; justify-content: center; align-items: center; margin-bottom: 2.5rem; gap: 0.5rem; }
        .step { display: flex; flex-direction: column; align-items: center; color: var(--ink-light); padding: 0 1.2rem; transition: all 0.3s; }
        @media (max-width: 600px) { .step { padding: 0 0.6rem; } }
        .step-num { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.95rem; transition: all 0.3s; }
        @media (max-width: 600px) { .step-num { width: 30px; height: 30px; font-size: 0.85rem; } }
        .step div:last-child { font-size: 0.9rem; }
        @media (max-width: 600px) { .step div:last-child { font-size: 0.75rem; } }
        .step.active { color: var(--vermilion); }
        .step.active .step-num { border-color: var(--vermilion); background: var(--vermilion); color: #fff; box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3); }
        .step.completed { color: var(--jade); }
        .step.completed .step-num { border-color: var(--jade); background: var(--jade); color: #fff; }
        .step-line { width: 50px; height: 2px; background: var(--border); margin-bottom: 1.5rem; border-radius: 1px; }
        @media (max-width: 600px) { .step-line { width: 25px; margin-bottom: 1.2rem; } }
        /* Form styles */
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
        @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; gap: 1rem; } }
        .form-group { display: flex; flex-direction: column; }
        .form-group.full { grid-column: 1 / -1; }
        .form-label { font-weight: 600; margin-bottom: 0.5rem; color: var(--ink); font-size: 0.95rem; }
        .form-input, .form-select { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; font-family: inherit; background: var(--paper); color: var(--ink); transition: all 0.2s; }
        .form-input:focus, .form-select:focus { outline: none; border-color: var(--vermilion); background: #fff; box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1); }
        .form-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 0.8rem; }
        @media (max-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
        /* Question type grid */
        .question-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
        @media (max-width: 800px) { .question-type-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } }
        @media (max-width: 500px) { .question-type-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }
        .question-type-item { background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 0.8rem; text-align: center; cursor: pointer; transition: all 0.3s; }
        .question-type-item:hover { border-color: var(--vermilion); background: #fff; }
        .question-type-item.selected { border-color: var(--vermilion); background: var(--vermilion); color: #fff; }
        .question-type-item .icon { font-size: 1.6rem; margin-bottom: 0.4rem; }
        .question-type-item .label { font-weight: 600; font-size: 0.95rem; }
        .question-type-item .sub-label { font-size: 0.75rem; margin-top: 0.2rem; color: var(--ink-light); }
        .question-type-item.selected .sub-label { color: rgba(255,255,255,0.8); }
        /* Nine palace grid */
        .jiugong-container { background: linear-gradient(135deg, #fff 0%, var(--paper) 100%); border: 2px solid var(--gold); border-radius: 16px; padding: 1.5rem; margin: 1.5rem 0; }
        .jiugong-title { text-align: center; font-family: 'Ma Shan Zheng', cursive; font-size: 1.3rem; color: var(--gold); margin-bottom: 1.2rem; }
        .jiugong { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 400px; margin: 0 auto; }
        .gong { background: linear-gradient(145deg, #fff, var(--paper)); border: 2px solid var(--border); border-radius: 10px; padding: 0.8rem 0.5rem; text-align: center; min-height: 110px; display: flex; flex-direction: column; justify-content: center; position: relative; transition: all 0.3s; }
        @media (max-width: 400px) { .gong { min-height: 90px; padding: 0.6rem 0.3rem; } }
        .gong.zhiyin { background: linear-gradient(145deg, #fff8e1, #fff); border-color: var(--gold); }
        .gong.yangdun { background: linear-gradient(145deg, #e8f5e9, #fff); border-color: var(--jade); }
        .gong.yindun { background: linear-gradient(145deg, #fce4ec, #fff); border-color: var(--vermilion); }
        .gong.center { background: linear-gradient(145deg, #fff3e0, #fff); border-color: var(--gold); border-style: dashed; }
        .gong-name { font-family: 'Ma Shan Zheng', cursive; font-size: 1rem; color: var(--ink); margin-bottom: 0.3rem; }
        .gong-men { font-size: 1.1rem; font-weight: 600; color: var(--vermilion); margin: 0.15rem 0; }
        .gong-xing { font-size: 0.95rem; color: var(--ink-light); margin: 0.1rem 0; }
        .gong-shen { font-size: 0.85rem; color: var(--gold); margin: 0.1rem 0; }
        .gong-wuxing { font-size: 0.8rem; color: var(--ink-light); }
        .gong-mark { position: absolute; top: 4px; right: 4px; font-size: 0.7rem; padding: 1px 4px; border-radius: 3px; }
        .gong-mark.ji { background: var(--jade-light); color: var(--jade); }
        .gong-mark.xiong { background: #fce4ec; color: var(--vermilion); }
        .gong-mark.ping { background: #fff8e1; color: var(--gold); }
        /* Info display */
        .info-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0; }
        .info-badge { background: var(--paper); border: 1px solid var(--border); border-radius: 20px; padding: 0.4rem 1rem; font-size: 0.9rem; }
        .info-badge strong { color: var(--vermilion); }
        /* Analysis sections */
        .analysis-section { margin: 1.5rem 0; padding: 1.2rem; background: var(--paper); border-left: 3px solid var(--vermilion); }
        .analysis-title { font-weight: 600; color: var(--ink); margin-bottom: 0.8rem; font-size: 1.05rem; }
        .analysis-content { color: var(--ink-light); line-height: 1.8; }
        .analysis-content .highlight { color: var(--vermilion); font-weight: 600; }
        .analysis-content .good { color: var(--jade); font-weight: 600; }
        .analysis-content .bad { color: #8b0000; font-weight: 600; }
        /* Suggestion cards */
        .suggestion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
        @media (max-width: 600px) { .suggestion-grid { grid-template-columns: 1fr; } }
        .suggestion-card { background: linear-gradient(145deg, #fff, var(--paper)); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
        .suggestion-card.good { border-color: var(--jade); background: linear-gradient(145deg, #e8f5e9, #fff); }
        .suggestion-card.bad { border-color: var(--vermilion); background: linear-gradient(145deg, #fce4ec, #fff); }
        .suggestion-card .card-icon { font-size: 1.4rem; margin-bottom: 0.5rem; }
        .suggestion-card .card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
        .suggestion-card .card-text { font-size: 0.85rem; color: var(--ink-light); }
        /* Buttons */
        .btn { padding: 14px 36px; border-radius: 25px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 0.5rem; }
        .btn-primary { background: linear-gradient(135deg, var(--vermilion), #a01830); color: #fff; box-shadow: 0 4px 15px rgba(196, 30, 58, 0.25); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196, 30, 58, 0.35); }
        .btn-primary:active { transform: translateY(0); }
        .btn-primary:disabled { background: var(--border); cursor: not-allowed; box-shadow: none; transform: none; }
        .btn-secondary { background: var(--paper); color: var(--ink); border: 2px solid var(--border); }
        .btn-secondary:hover { background: var(--paper-dark); border-color: var(--ink-light); }
        .btn-row { text-align: center; margin-top: 1.5rem; }
        .hidden { display: none !important; }
        /* Final verdict */
        .final-verdict { background: var(--ink); color: #fff; padding: 2rem; border-radius: 4px; text-align: center; margin-top: 2rem; }
        .verdict-title { font-family: 'Ma Shan Zheng', cursive; font-size: 1.2rem; opacity: 0.8; margin-bottom: 0.5rem; }
        .verdict-conclusion { font-size: 1.8rem; font-weight: 700; margin: 1rem 0; }
        .verdict-quote { font-style: italic; opacity: 0.9; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2); }
        /* Palace labels */
        .palace-label { display: inline-block; font-size: 0.7rem; padding: 1px 4px; border-radius: 2px; margin-right: 0.3rem; }
        .palace-label.tian { background: #e3f2fd; color: #1565c0; }
        .palace-label.di { background: #f3e5f5; color: #7b1fa2; }
        .palace-label.fang { background: #e8f5e9; color: #2e7d32; }
        .palace-label.wu { background: #fff3e0; color: #e65100; }
        .palace-label.ji { background: var(--jade-light); color: var(--jade); }
        .palace-label.xiong { background: #fce4ec; color: var(--vermilion); }
        footer { text-align: center; padding: 2rem 0; color: var(--ink-light); font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 2rem; }
        /* Yixiang tooltips */
        .yixiang-tip { font-size: 0.8rem; color: var(--ink-light); margin-top: 0.3rem; }
        .yixiang-tip .tag { display: inline-block; padding: 1px 6px; border-radius: 10px; margin: 0 2px; font-size: 0.75rem; }
        .tag-ji { background: var(--jade-light); color: var(--jade); }
        .tag-xiong { background: #fce4ec; color: var(--vermilion); }
        .tag-ping { background: #fff8e1; color: var(--gold); }
        /* Loading */
        .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(245,240,232,0.95); z-index: 999; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        .loading-text { font-family: 'Ma Shan Zheng', cursive; font-size: 1.5rem; color: var(--vermilion); margin-top: 1rem; }
        .spinner { width: 60px; height: 60px; border: 4px solid var(--border); border-top-color: var(--vermilion); border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ========== 移动端优化 ========== */
        @media (max-width: 768px) {
            .container { padding: 1rem; }
            header { padding: 1.5rem 0 1rem; margin-bottom: 1rem; }
            .header-title { font-size: 1.8rem; }
            .header-subtitle { font-size: 0.9rem; margin-top: 0.4rem; }
            .nav-container { flex-direction: column; gap: 0; padding: 0.5rem 0; border-bottom: 1px solid rgba(201,168,76,0.3); }
            .nav { gap: 0.3rem; padding: 0.3rem 0; }
            .nav a { font-size: 0.8rem; padding: 0.3rem 0.6rem; margin: 0.1rem; }
            .card { padding: 1.5rem; margin-bottom: 1.5rem; }
        }
        @media (max-width: 480px) {
            .header-title { font-size: 1.5rem; letter-spacing: 0.1em; }
            .header-subtitle { font-size: 0.8rem; }
            .nav a { font-size: 0.75rem; padding: 0.25rem 0.5rem; margin: 0.05rem; border-radius: 15px; }
            .card { padding: 1rem; margin-bottom: 1rem; }
        }
        @media (hover: none) and (pointer: coarse) {
            .nav a:active { background: var(--vermilion); color: #fff; }
            .btn:active, .form-input:active, .form-select:active { opacity: 0.8; }
        }
    
/* ===== QIMEN 2.0 ENHANCED ===== */
@keyframes palaceFadeIn { from { opacity:0; transform:scale(0.8) rotateY(90deg); } to { opacity:1; transform:scale(1) rotateY(0deg); } }
@keyframes scoreGlow { 0%,100% { box-shadow:0 0 5px var(--gold); } 50% { box-shadow:0 0 20px var(--gold),0 0 40px rgba(184,134,11,0.3); } }
@keyframes cardSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes quoteFadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.gong { animation:palaceFadeIn 0.6s ease-out both; transition:all 0.3s; }
.gong:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.gong:nth-child(1) { animation-delay:0.05s; }
.gong:nth-child(2) { animation-delay:0.1s; }
.gong:nth-child(3) { animation-delay:0.15s; }
.gong:nth-child(4) { animation-delay:0.2s; }
.gong:nth-child(5) { animation-delay:0.25s; }
.gong:nth-child(6) { animation-delay:0.3s; }
.gong:nth-child(7) { animation-delay:0.35s; }
.gong:nth-child(8) { animation-delay:0.4s; }
.gong:nth-child(9) { animation-delay:0.45s; }
.suggestion-card { animation:cardSlideUp 0.5s ease-out both; }
.suggestion-card:nth-child(1),.suggestion-card:nth-child(2),.suggestion-card:nth-child(3),.suggestion-card:nth-child(4),.suggestion-card:nth-child(5),.suggestion-card:nth-child(6) { animation-delay:0.1s; }
.suggestion-card:nth-child(2) { animation-delay:0.2s; }
.suggestion-card:nth-child(3) { animation-delay:0.3s; }
.suggestion-card:nth-child(4) { animation-delay:0.4s; }
.suggestion-card:nth-child(5) { animation-delay:0.5s; }
.suggestion-card:nth-child(6) { animation-delay:0.6s; }
.final-verdict { animation:scoreGlow 2s ease-in-out infinite; }
.case-card { animation:cardSlideUp 0.4s ease-out both; }
.quote-banner { animation:quoteFadeIn 0.5s ease-out; }
.palace-label { display:inline-block; padding:0.05rem 0.3rem; border-radius:4px; font-size:0.65rem; font-weight:600; }
.palace-label.tian { background:var(--vermilion); color:#fff; }
.palace-label.di { background:var(--gold); color:#fff; }
.palace-label.ji { background:var(--jade); color:#fff; }
.gong-mark { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; font-size:0.5rem; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.gong-mark.ji { background:var(--jade); }
.gong-mark.xiong { background:var(--vermilion); }
.gong-mark.ping { background:var(--gold); }
.gong-labels { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; margin-bottom:2px; min-height:18px; }
.good { color:var(--jade) !important; }
.bad { color:var(--vermilion) !important; }
.highlight { color:var(--gold); font-weight:600; }
.method-item { cursor:pointer; padding:0.3rem 1rem; border-radius:15px; font-size:0.85rem; transition:all 0.3s; border:1px solid var(--border); background:var(--paper); }
.method-item.selected { background:var(--vermilion); color:#fff; border-color:var(--vermilion); }

/* ===== QIMEN 2.2 MORE CSS ===== */
@keyframes shimmer { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes tcmPulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }
@keyframes expandIn { from{max-height:0;opacity:0;} to{max-height:500px;opacity:1;} }
.tcm-section { margin-top:2rem; background:linear-gradient(135deg,#f0fff0,#fff); border-radius:12px; padding:1.2rem; border:1px solid var(--jade); }
.tcm-title { font-family:'Ma Shan Zheng',cursive; font-size:1.3rem; color:var(--jade); margin-bottom:1rem; }
.tcm-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.tcm-item { background:var(--paper-dark); border-radius:8px; padding:0.6rem; transition:all 0.3s; }
.tcm-item:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.tcm-label { font-size:0.75rem; color:var(--ink-light); }
.tcm-value { font-size:1rem; font-weight:600; margin-top:0.2rem; }
.verdict-badge { display:inline-block; padding:0.3rem 1rem; border-radius:20px; font-weight:700; }
.bazi-tip { background:var(--paper); border-left:3px solid var(--gold); padding:0.5rem 1rem; margin:1rem 0; border-radius:0 6px 6px 0; font-size:0.9rem; }

/* ====== V2.3 CSS 增强 ====== */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 5px rgba(221,36,36,0.3); }
  50% { box-shadow:0 0 15px rgba(221,36,36,0.6); }
}
@keyframes cardSlideIn {
  from { opacity:0; transform:translateX(-20px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.gong-cell {
  transition:all 0.3s ease;
  position:relative;
}
.gong-cell:hover {
  transform:scale(1.03);
  box-shadow:0 0 20px rgba(221,36,36,0.3);
  z-index:10;
}
.gong-cell.animated {
  animation:fadeIn 0.5s ease both;
}
.gong-cell .tianpan-tag {
  transition:all 0.3s ease;
}
.gong-cell:hover .tianpan-tag {
  background:rgba(221,36,36,0.4) !important;
}
.case-card {
  transition:all 0.3s ease;
  cursor:pointer;
}
.case-card:hover {
  transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
.suggestion-card {
  animation:cardSlideIn 0.4s ease both;
}
.jieqi-info-panel {
  animation:fadeIn 0.6s ease both;
}
.info-badge {
  display:inline-block;
  padding:0.25rem 0.6rem;
  background:var(--paper);
  border:1px solid var(--gold);
  border-radius:15px;
  font-size:0.85rem;
  margin:0.2rem;
}
/* 响应式增强 */
@media (max-width:768px) {
  .gong-cell { font-size:0.78rem !important; }
  .gong-cell:hover { transform:scale(1.02); }
  .info-badge { font-size:0.75rem; padding:0.15rem 0.4rem; }
}
@media (max-width:480px) {
  .info-badge { display:block; text-align:center; margin:0.15rem 0; }
}

/* 九宫交互增强 */
.gong { cursor:pointer; position:relative; }
.gong-tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:rgba(26,21,16,0.95); color:#fff; padding:0.5rem 0.8rem; border-radius:8px; font-size:0.8rem; white-space:nowrap; z-index:100; pointer-events:none; opacity:0; transition:opacity 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.gong-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:rgba(26,21,16,0.95); }
.gong:hover .gong-tooltip { opacity:1; }
.gong-detail-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:480px; max-height:85vh; overflow-y:auto; background:var(--paper); border-radius:16px; padding:1.5rem; z-index:200; box-shadow:0 20px 60px rgba(0,0,0,0.4); display:none; }
.gong-detail-popup.show { display:block; animation:fadeIn 0.3s ease; }
.gong-detail-popup .popup-title { font-size:1.3rem; font-weight:700; color:var(--vermilion); margin-bottom:1rem; text-align:center; }
.gong-detail-popup .popup-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.gong-detail-popup .popup-row { background:#fff; padding:0.6rem 0.8rem; border-radius:8px; }
.gong-detail-popup .popup-row .label { font-size:0.8rem; color:var(--ink-light); margin-bottom:0.2rem; }
.gong-detail-popup .popup-row .value { font-weight:600; font-size:1rem; }
.gong-detail-popup .popup-detail { margin-top:1rem; background:#fff; padding:1rem; border-radius:8px; line-height:1.9; }
.gong-detail-popup .popup-detail h5 { color:var(--gold); margin-bottom:0.5rem; }
.gong-detail-popup .close-btn { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--ink-light); }
.gong-detail-popup .close-btn:hover { color:var(--vermilion); }
#gongPopupOverlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:199; display:none; }
#gongPopupOverlay.show { display:block; }


/* 2026-06-26 unified single-row navigation */
.nav-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: center; gap: 0 !important; }
.nav-container::-webkit-scrollbar { display: none; }
.nav { flex-wrap: nowrap !important; white-space: nowrap; align-items: center; gap: 0.35rem !important; }
.nav a { flex: 0 0 auto; font-size: clamp(0.72rem, 1.15vw, 0.9rem) !important; padding: 0.34rem 0.68rem !important; line-height: 1.2; }
@media (max-width: 768px) {
  .nav-container { flex-direction: row !important; justify-content: flex-start !important; padding: 0.5rem 0.25rem !important; }
  .nav { justify-content: flex-start !important; }
  .nav a { font-size: 0.76rem !important; padding: 0.3rem 0.52rem !important; margin: 0 !important; }
}