:root{--liuyao-primary:#1a3a5c;--liuyao-primary-light:#2d5a87;--liuyao-primary-dark:#0f2540;--liuyao-accent:#d4a520;--liuyao-accent-light:#f0c040;--liuyao-accent-dark:#b8941f;--liuyao-bg:#1a3a5c;--liuyao-bg-gradient-start:#1a3a5c;--liuyao-bg-gradient-mid:#2d5a87;--liuyao-bg-gradient-end:#1a4a6c;--liuyao-card-bg:#1a3a5cb3;--liuyao-card-border:#d4a5204d;--liuyao-text:#fff;--liuyao-text-secondary:#fffc;--liuyao-text-muted:#ffffff80;--success:#2e8b57;--warning:#d4a520;--error:#e94560;--info:#4a90d9;--header-height:64px;--sidebar-width:240px;--footer-height:48px;--radius:8px;--radius-lg:12px;--transition:all .3s ease;--shadow:0 2px 8px #0003;--shadow-hover:0 4px 16px #0000004d;--shadow-gold:0 0 20px #d4a5204d}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}html{height:100dvh}body{background:linear-gradient(135deg, var(--liuyao-bg-gradient-start) 0%, var(--liuyao-bg-gradient-mid) 50%, var(--liuyao-bg-gradient-end) 100%);color:var(--liuyao-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Noto Serif SC,PingFang SC,Microsoft YaHei,serif;line-height:1.6}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#d4a52066;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#d4a52099}.layout-container{min-height:100vh;background:linear-gradient(135deg, var(--liuyao-bg-gradient-start) 0%, var(--liuyao-bg-gradient-mid) 50%, var(--liuyao-bg-gradient-end) 100%);flex-direction:column;min-height:100dvh;display:flex}.layout-header{height:var(--header-height);border-bottom:2px solid var(--liuyao-accent);backdrop-filter:blur(10px);z-index:1000;padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));background:#0f2540f2;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.header-content{justify-content:space-between;align-items:center;width:100%;max-width:1400px;margin:0 auto;display:flex}.logo{color:var(--liuyao-accent);letter-spacing:3px;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;min-width:0;max-width:100%;font-family:Ma Shan Zheng,cursive;font-size:1.5rem;text-decoration:none;display:flex;overflow:hidden}.logo:hover{color:var(--liuyao-accent-light)}.navigation{align-items:center;display:flex}.navigation ul{gap:4px;margin:0;padding:0;list-style:none;display:flex}.navigation li{position:relative}.navigation a{color:var(--liuyao-text);border-radius:var(--radius);white-space:nowrap;transition:var(--transition);align-items:center;gap:4px;padding:8px 16px;font-size:.9rem;text-decoration:none;display:flex}.navigation a:hover{color:var(--liuyao-accent-light);background:#d4a52026}.navigation a.active{color:var(--liuyao-accent);background:#d4a52033;font-weight:600}.navigation a.active:after{content:"";background:var(--liuyao-accent);height:2px;position:absolute;bottom:-2px;left:16px;right:16px}.nav-home{border:1px solid #d4a52066;margin-left:8px;color:var(--liuyao-accent)!important}.nav-home:hover{border-color:var(--liuyao-accent);background:#d4a52033!important}.sidebar-toggle{min-width:44px;min-height:44px;color:var(--liuyao-accent);background:#0f2540b8;border:1px solid #d4a52061;padding:8px 12px;display:none}.sidebar-toggle span{justify-content:center;align-items:center;min-width:20px;font-size:1.35rem;line-height:1;display:inline-flex}.mobile-sidebar-backdrop{display:none}.layout-body{margin-top:var(--header-height);height:calc(100vh - var(--header-height) - var(--footer-height));height:calc(100dvh - var(--header-height) - var(--footer-height));flex:1;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--liuyao-card-border);backdrop-filter:blur(8px);transition:var(--transition);background:#0f2540cc;flex-shrink:0;overflow-y:auto}.sidebar-content{padding:20px 16px}.sidebar-title{color:var(--liuyao-accent);border-bottom:1px solid var(--liuyao-card-border);margin-bottom:16px;padding-bottom:8px;font-family:Ma Shan Zheng,cursive;font-size:1.1rem}.sidebar-section{margin-bottom:24px}.sidebar-section-title{color:var(--liuyao-text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding-left:8px;font-size:.8rem}.sidebar-menu{list-style:none}.sidebar-menu li{margin-bottom:2px}.sidebar-menu a{color:var(--liuyao-text-secondary);border-radius:var(--radius);transition:var(--transition);align-items:center;gap:10px;padding:8px 12px;font-size:.9rem;text-decoration:none;display:flex}.sidebar-menu a:hover{color:var(--liuyao-text);background:#d4a5201a}.sidebar-menu a.active{color:var(--liuyao-accent);border-left:3px solid var(--liuyao-accent);background:#d4a52026}.sidebar-menu .icon{text-align:center;width:24px;font-size:1.1rem}.content-area{background:#1a3a5c4d;flex:1;padding:24px;overflow-y:auto}.content-area-inner{width:100%;max-width:1200px;margin:0 auto}.layout-footer{height:var(--footer-height);border-top:1px solid var(--liuyao-card-border);color:var(--liuyao-text-muted);background:#0f2540e6;justify-content:center;align-items:center;font-size:.85rem;display:flex}.layout-footer a{color:var(--liuyao-accent);text-decoration:none}.layout-footer a:hover{color:var(--liuyao-accent-light)}.card{background:var(--liuyao-card-bg);border:1px solid var(--liuyao-card-border);border-radius:var(--radius-lg);backdrop-filter:blur(8px);transition:var(--transition);padding:20px}.card:hover{box-shadow:var(--shadow-gold);border-color:#d4a52080}.card-title{color:var(--liuyao-accent);margin-bottom:12px;font-family:Ma Shan Zheng,cursive;font-size:1.2rem}.btn{border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-family:inherit;font-size:.95rem;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--liuyao-accent) 0%, var(--liuyao-accent-light) 50%, var(--liuyao-accent) 100%);color:var(--liuyao-primary-dark);font-weight:600}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #d4a52066}.btn-secondary{color:var(--liuyao-text);border:1px solid var(--liuyao-card-border);background:#ffffff1a}.btn-secondary:hover{border-color:var(--liuyao-accent);background:#d4a52026}.btn-ghost{color:var(--liuyao-text-secondary);background:0 0}.btn-ghost:hover{color:var(--liuyao-text);background:#ffffff0d}.page-header{border-bottom:1px solid var(--liuyao-card-border);margin-bottom:24px;padding-bottom:16px}.page-title{color:var(--liuyao-accent);margin-bottom:4px;font-family:Ma Shan Zheng,cursive;font-size:1.8rem}.page-subtitle{color:var(--liuyao-text-muted);font-size:.9rem}.grid{gap:16px;display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}img,svg,canvas,video,pre{max-width:100%}h1,h2,h3,h4,h5,h6,p{overflow-wrap:anywhere;word-break:break-word}pre,.tab-block,.vexflow-container,.score-renderer,.fretboard-svg,.diagram-panel,.panel{overflow-x:auto}@media (width<=1024px){.sidebar-toggle{display:inline-flex}.sidebar{left:0;top:var(--header-height);bottom:var(--footer-height);z-index:900;width:min(82vw,320px);position:fixed;transform:translate(-100%);box-shadow:18px 0 48px #00000059}.sidebar.open{transform:translate(0)}.mobile-sidebar-backdrop{top:var(--header-height);right:0;bottom:var(--footer-height);z-index:850;pointer-events:none;cursor:default;opacity:0;background:#030d1800;border:0;transition:opacity .22s,background .22s;display:block;position:fixed;left:0}.mobile-sidebar-backdrop.open{pointer-events:auto;opacity:1;background:#030d188a}.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.navigation{display:none}}@media (width<=768px){:root{--header-height:56px;--footer-height:42px}html,body,#root{height:100dvh}.layout-header{padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))}.header-content{gap:10px}.logo{letter-spacing:1.5px;white-space:nowrap;min-width:0;font-size:1.16rem}.navigation a{padding:6px 10px;font-size:.8rem}.navigation a span{display:none}.content-area{padding:14px max(12px, env(safe-area-inset-right)) 14px max(12px, env(safe-area-inset-left));-webkit-overflow-scrolling:touch}.content-area-inner{max-width:none}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.page-title{font-size:1.4rem}.page-header{margin-bottom:16px;padding-bottom:12px}.card{border-radius:10px;padding:16px}.home-page>.card:first-child{margin-bottom:16px!important;padding:22px 14px!important}.home-page>.card:first-child h1{line-height:1.18;letter-spacing:2px!important;font-size:clamp(1.48rem,8vw,1.95rem)!important}.home-page>.card:first-child p{letter-spacing:1px!important;font-size:.86rem!important}.home-page h2{margin-bottom:12px!important;font-size:1.12rem!important}.home-page .grid{gap:12px!important}.home-page .grid .card{min-height:92px;padding:16px!important}.home-page .grid-2 .card{align-items:flex-start!important}.btn,.primary-button,.secondary-button,.audio-button,.metronome-button,.back-button{min-height:44px}input,select,textarea{min-height:44px;font-size:16px}.audio-controls,.tuner-actions,.example-row,.ai-example-row,.progression-toolbar,.api-key-actions,.control-grid,.diatonic-grid,.coach-plan-grid,.progression-version-grid,.progression-chord-grid,.style-template-grid,.tuner-settings,.tuner-targets,.custom-preset-row,.practice-settings-grid,.editor-layout,.score-controls{flex-wrap:wrap;gap:10px;display:flex}.ai-progression-form,.chord-form,.audio-settings,.tuner-reference-row,.profile-settings-grid{grid-template-columns:1fr;gap:10px;display:grid}.tuner-dial,.tuner-dial-orbit,.tuner-dial-svg{max-width:min(100%,330px);margin-inline:auto}.layout-footer{min-height:var(--footer-height);height:var(--footer-height);text-align:center;padding:0 10px;font-size:.75rem}.layout-footer p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}@media (width<=480px){:root{--sidebar-width:280px}.logo{letter-spacing:.8px;font-size:1.02rem}.logo span:first-child{font-size:1.15rem}.sidebar{width:min(88vw,300px)}.sidebar-content{max-height:calc(100dvh - var(--header-height) - var(--footer-height));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 12px 20px;overflow-y:auto}.sidebar-menu a{min-height:42px;padding:9px 10px}.content-area{padding-top:12px}.home-instrument-group{margin-bottom:18px}.home-instrument-category{color:#a0b4c8;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding-left:4px;font-size:.78rem;font-weight:600}.home-page .grid-2 .card,.home-page .grid-3 .card{gap:12px!important}.home-page .grid-2 .card>div:first-child{font-size:2rem!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s fadeIn}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.loading{background:linear-gradient(90deg,#0000,#d4a5201a,#0000) 0 0/200% 100%;animation:1.5s infinite shimmer}.dynamics-panel{color:#e0e0e0;background-color:#16213e;border:1px solid #0f3460;border-radius:8px;margin:10px 20px;padding:20px}.dynamics-panel h3{color:#e94560;margin:0 0 16px;font-size:18px}.dynamics-panel h4{color:#a0a0a0;border-bottom:1px solid #0f3460;margin:16px 0 8px;padding-bottom:4px;font-size:14px}.control-section{margin-bottom:16px}.bpm-control{align-items:center;gap:12px;display:flex}.bpm-control input[type=range]{-webkit-appearance:none;background:#0f3460;border-radius:3px;outline:none;flex:1;height:6px}.bpm-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#e94560;border-radius:50%;width:16px;height:16px}.bpm-value{color:#e94560;min-width:80px;font-weight:600}.dynamic-selector select{color:#e0e0e0;background-color:#1a1a2e;border:1px solid #0f3460;border-radius:4px;width:100%;padding:8px 12px;font-size:14px}.beat-inputs{gap:16px;margin:12px 0;display:flex}.beat-inputs label{align-items:center;gap:8px;font-size:13px;display:flex}.beat-inputs input[type=number]{color:#e0e0e0;text-align:center;background-color:#1a1a2e;border:1px solid #0f3460;border-radius:4px;width:60px;padding:6px}.add-btn{color:#fff;cursor:pointer;background-color:#e94560;border:none;border-radius:6px;padding:8px 20px;font-weight:600;transition:all .2s}.add-btn:hover{background-color:#ff6b6b;transform:translateY(-1px)}.marks-list{margin-top:16px}.empty-hint{color:#666;text-align:center;padding:12px;font-style:italic}.mark-item{background-color:#1a1a2e;border:1px solid #0f3460;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:6px;padding:8px 12px;display:flex}.mark-item.dynamic{border-left:3px solid #e94560}.mark-item.tempo{border-left:3px solid #f0a500}.mark-type{color:#e0e0e0;font-weight:600}.mark-position{color:#a0a0a0;font-size:12px}.remove-mark{color:#e94560;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px}.remove-mark:hover{color:#ff6b6b}.score-renderer{background-color:#faf8f0;border-radius:8px;margin:10px 20px;overflow:hidden}.score-controls{background-color:#16213e;border-bottom:1px solid #0f3460;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.score-controls button{color:#fff;cursor:pointer;background-color:#e94560;border:none;border-radius:4px;padding:6px 16px;font-size:13px}.score-info{color:#a0a0a0;font-size:13px}.vexflow-container{min-height:400px}.vexflow-container svg{margin:0 auto;display:block}

/* Mobile scroll fix - 2026-07-13 修复手机端不能滚动 */
@media (max-width: 768px) {
  html, body, #root {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .layout-body {
    height: auto !important;
    overflow: visible !important;
    min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  }
  .content-area {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (max-width: 480px) {
  html, body, #root {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .layout-body {
    height: auto !important;
    overflow: visible !important;
    min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  }
  .content-area {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* Layout fix 2026-07-13 16:30 - 区分 desktop 和 mobile */

/* 默认（mobile + desktop 都生效）：让 layout-container 真正限制高度 */
.layout-body {
  min-height: 0 !important;
}

/* Desktop only: 完整布局（> 768px）*/
@media (min-width: 769px) {
  .layout-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .content-area {
    min-height: 0 !important;
  }
}

/* Mobile only: 完全自然滚动（<= 768px）*/
@media (max-width: 768px) {
  html, body, #root {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .layout-container {
    height: auto !important;
    min-height: 100dvh !important;
  }
  .layout-body {
    height: auto !important;
    overflow: visible !important;
  }
  .content-area {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  html, body, #root {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .layout-container {
    height: auto !important;
    min-height: 100dvh !important;
  }
  .layout-body {
    height: auto !important;
    overflow: visible !important;
  }
  .content-area {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}