/* 保留必要的自定义样式，大部分已迁移到Tailwind */

/* Modal显示控制 - 使用Tailwind的hidden类，但保留此样式以防JS直接操作style.display */
.modal {
  display: none;
}

.modal.show {
  display: block;
}

/* 选项网格项样式 - 用于动态生成的元素 */
.option-item {
  padding: 10px;
  border: 2px solid #e5e7eb;
  border-radius: 0.375rem;
  text-align: center;
  cursor: pointer;
  background: white;
  transition: all 0.2s;
}

.option-item:hover {
  background: #e8f5e9;
  border-color: #4CAF50;
}

.option-item.selected {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

/* 手风琴和chord-grid样式已移除 - 已改用Tailwind布局 */

/* 已选择项样式 */
.selected-item {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: #4CAF50;
  color: white;
  border-radius: 0.375rem;
  position: relative;
}

.selected-item .remove {
  margin-left: 0.5rem;
  cursor: pointer;
  font-weight: bold;
}

.selected-item .remove:hover {
  color: #ffebee;
}

/* 轨道样式 */
.track {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0.75rem 0;
  background: #f9fafb;
}

.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.track-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.weight-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.weight-control input {
  width: 60px;
}

.pattern-weights {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: white;
  border-radius: 0.375rem;
}

/* 和弦选择器弹出菜单样式 */
.chord-popup {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

.chord-popup::-webkit-scrollbar {
  width: 6px;
}

.chord-popup::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.chord-popup::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.chord-popup::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* 移动端优化 */
@media (max-width: 640px) {
  .chord-popup {
    max-height: 60vh !important;
    width: calc(100vw - 2rem) !important;
    max-width: 320px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    position: fixed !important;
    z-index: 60 !important;
  }
}

/* 确保弹出菜单在所有情况下都可见 */
.chord-popup:not(.hidden) {
  z-index: 60 !important;
  /* position 由 JavaScript 控制，不在此处强制设置 */
}

@media (max-width: 640px) {
  .chord-popup:not(.hidden) {
    position: fixed !important;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .chord-root-button {
    min-height: 44px; /* 确保触摸目标足够大 */
  }
}


@keyframes beat-editing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.beat-editing-blink {
  animation: beat-editing-blink 1.5s ease-in-out infinite;
}
/* ABCJS 高亮和光标样式 */
.abcjs-highlight {
  fill: #0a9ecc;
}
.abcjs-cursor {
  stroke: red;
  stroke-width: 2;
}

/* chatgpt样式 */

:root{
  --ui-bg: rgba(255,255,255,.06);
  --ui-bg2: rgba(255,255,255,.08);
  --ui-border: rgba(255,255,255,.10);
  --ui-border2: rgba(255,255,255,.14);
  --ui-text: rgba(255,255,255,.92);
  --ui-muted: rgba(255,255,255,.60);

  --ui-primary: #7c3aed; /* purple */
  --ui-secondary: #38bdf8; /* cyan */
  --ui-danger: #ef4444; /* red */
  --ui-success: #22c55e; /* green */
}

/* 浅色主题变量 */
html.light:root,
:root.light {
  --ui-bg: rgba(0,0,0,.04);
  --ui-bg2: rgba(0,0,0,.06);
  --ui-border: rgba(0,0,0,.12);
  --ui-border2: rgba(0,0,0,.18);
  --ui-text: rgba(0,0,0,.92);
  --ui-muted: rgba(0,0,0,.60);
}

/* 基础 */
*{ box-sizing: border-box; }
html, body { height: 100%; }
body { color: var(--ui-text); }
/* 浅色主题下的body背景 */
html.light body {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9 25%, #f8fafc) !important;
  color: rgba(0,0,0,.92);
}
/* 浅色主题下的header样式 */
html.light header,
html.light .sticky.top-0 {
  background: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(0,0,0,.12) !important;
  backdrop-filter: blur(12px) !important;
}
html.light .sticky.top-0 [class*="text-white"] {
  color: rgba(0,0,0,.92) !important;
}
html.light .sticky.top-0 [class*="text-white/55"],
html.light .sticky.top-0 [class*="text-white\\/55"] {
  color: rgba(0,0,0,.55) !important;
}
html.light .sticky.top-0 .bg-white\/5 {
  background: rgba(0,0,0,.05) !important;
}
html.light .sticky.top-0 .border-white\/10 {
  border-color: rgba(0,0,0,.1) !important;
}
/* 浅色主题下的文本颜色覆盖 */
html.light [class*="text-white"],
html.light [class*="text-white/"] {
  color: rgba(0,0,0,.92) !important;
}
html.light [class*="text-white/60"],
html.light [class*="text-white\\/60"] {
  color: rgba(0,0,0,.60) !important;
}
html.light [class*="text-white/55"],
html.light [class*="text-white\\/55"] {
  color: rgba(0,0,0,.55) !important;
}
html.light [class*="text-white/45"],
html.light [class*="text-white\\/45"] {
  color: rgba(0,0,0,.45) !important;
}
html.light [class*="text-white/80"],
html.light [class*="text-white\\/80"] {
  color: rgba(0,0,0,.80) !important;
}
html.light [class*="text-white/90"],
html.light [class*="text-white\\/90"] {
  color: rgba(0,0,0,.90) !important;
}

/* 通用组件 */
.ui-card{
  border: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 60px rgba(0,0,0,.55);
  border-radius: 22px;
  padding: 18px;
}
html.light .ui-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.98));
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 60px rgba(0,0,0,.12);
}

.ui-subcard{
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(14px);
}
html.light .ui-subcard {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
}

.ui-score{
  border: 1px solid var(--ui-border);
  background: #ffffff !important; /* 乐谱区域保持浅色背景 */
  border-radius: 18px;
  padding: 14px;
  overflow-x: auto;
}
/* 乐谱区域保持浅色背景，音符使用深色 */
.ui-score svg text,
.ui-score svg path,
.ui-score svg line {
  stroke: #1f2937 !important;
  fill: #1f2937 !important;
}
.ui-score svg .abcjs-note {
  fill: #1f2937 !important;
}

.ui-modal{
  border: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(10,15,31,.92), rgba(5,7,18,.92));
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.75);
  backdrop-filter: blur(18px);
}
html.light .ui-modal {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95));
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 24px 80px rgba(0,0,0,.2);
}

.ui-sidebar{
  height: 100%;
  border-left: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(10,15,31,.92), rgba(5,7,18,.92));
  box-shadow: -10px 0 40px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
}
html.light .ui-sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95));
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
  border-left: 1px solid rgba(0,0,0,.12);
}

/* 表单 */
.ui-label{
  display:block;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 600;
}
html.light .ui-label {
  color: rgba(0,0,0,.70);
}

.ui-help{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
html.light .ui-help {
  color: rgba(0,0,0,.55);
}

.ui-select{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  outline: none;
}
.ui-select:focus{
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}
html.light .ui-select {
  background: rgba(255,255,255,.95);
  color: rgba(0,0,0,.90);
  border: 1px solid rgba(0,0,0,.12);
}
html.light .ui-select:focus {
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}
/* 下拉菜单选项样式 - 深色主题 */
.ui-select option {
  background: rgba(10,15,31,.98);
  color: rgba(255,255,255,.92);
  padding: 8px;
}
/* 浅色主题下的下拉菜单选项 */
html.light .ui-select option {
  background: #ffffff;
  color: #1f2937;
}

.ui-textarea{
  width:100%;
  min-height: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  outline: none;
  resize: vertical;
}
.ui-textarea:focus{
  border-color: rgba(56,189,248,.65);
  box-shadow: 0 0 0 4px rgba(56,189,248,.16);
}
html.light .ui-textarea {
  background: rgba(255,255,255,.95);
  color: rgba(0,0,0,.90);
  border: 1px solid rgba(0,0,0,.12);
}

/* 按钮体系 */
.ui-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  user-select:none;
}
.ui-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: var(--ui-border2);
  transform: translateY(-1px);
}
.ui-btn:active{
  transform: translateY(0px);
  opacity: .92;
}
html.light .ui-btn {
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.92);
  border: 1px solid rgba(0,0,0,.12);
}
html.light .ui-btn:hover {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.18);
}
.ui-btn-primary{
  border-color: rgba(124,58,237,.45);
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(124,58,237,.18));
  box-shadow: 0 0 0 1px rgba(124,58,237,.18), 0 16px 40px rgba(0,0,0,.45);
}
.ui-btn-primary:hover{
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 18px 55px rgba(0,0,0,.55);
}
.ui-btn-secondary{
  border-color: rgba(56,189,248,.45);
  background: linear-gradient(180deg, rgba(56,189,248,.25), rgba(56,189,248,.10));
}
.ui-btn-secondary:hover{
  border-color: rgba(56,189,248,.65);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}
.ui-btn-danger{
  border-color: rgba(239,68,68,.45);
  background: linear-gradient(180deg, rgba(239,68,68,.26), rgba(239,68,68,.10));
}
.ui-btn-danger:hover{
  border-color: rgba(239,68,68,.65);
  box-shadow: 0 0 0 4px rgba(239,68,68,.14);
}
.ui-btn-ghost{
  background: rgba(255,255,255,.03);
}
.ui-btn-sm{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}

/* icon button */
.ui-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.ui-icon-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: var(--ui-border2);
  transform: translateY(-1px);
}

/* pills */
.ui-pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 700;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.ui-pill:hover{
  background: rgba(255,255,255,.07);
  border-color: var(--ui-border2);
  transform: translateY(-1px);
}

/* alerts */
.ui-alert{
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px 14px;
  color: rgba(255,255,255,.85);
}
.ui-alert-danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(255,255,255,.92);
}
html.light .ui-alert {
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.85);
  border: 1px solid rgba(0,0,0,.12);
}
html.light .ui-alert-danger {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.15);
  color: rgba(0,0,0,.92);
}

/* slider */
.ui-slider-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.ui-slider-label{
  width: 92px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}
html.light .ui-slider-label {
  color: rgba(0,0,0,.65);
}
.ui-slider{
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ui-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ui-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ui-slider-value{
  width: 46px;
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
html.light .ui-slider-value {
  color: rgba(0,0,0,.72);
}

/* ABCJS 乐谱在深色主题下使用深色音符（已在.ui-score中定义） */