:root {
  --bg: #f7f7f7;
  --fg: #222;
  --accent: #ff7a00;
  --panel: #fff;
  --border: #ddd;
}
body.dark {
  --bg: #15181c;
  --fg: #e8e8e8;
  --panel: #1c2127;
  --border: #2a2f36;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.app { height: 100vh; display: flex; flex-direction: column; }
.menu-bar { display: flex; gap: 16px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--panel); align-items: center; }
.menu-group { display: flex; gap: 8px; align-items: center; }
.file-btn { position: relative; overflow: hidden; display: inline-block; }
.file-btn input { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.workspace { flex: 1; display: grid; grid-template-columns: 390px minmax(0, 1fr) 340px; gap: 12px; padding: 12px; min-height: 0; }
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; grid-template-rows: 5.8fr 3.2fr 1.2fr; padding: 4px; }
  .editor { order: 1; }
  .tools-panel { order: 2; }
  .settings-panel { order: 3; }
  .menu-bar { overflow-x: auto; flex-wrap: nowrap; gap: 12px; }
  .menu-group { flex-shrink: 0; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .menu-bar { flex-wrap: wrap; gap: 8px; padding: 6px 8px; }
  .workspace { padding: 6px; gap: 6px; }
}
.tools-panel, .settings-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.panel-title { font-weight: 600; margin-bottom: 8px; }
.editor { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.title-area { padding: 10px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.title-input { font-size: 18px; padding: 10px; text-align: center; }
.desc-input { font-size: 14px; padding: 8px; opacity: 0.9; resize: none; font-family: inherit; min-height: 34px; overflow: hidden; }
.track-toolbar { padding: 4px 8px; border-bottom: 1px solid var(--border); min-height: 0; }
.track-row { display: flex; gap: 8px; align-items: center; }
.track-row span { min-width: 72px; }
.track-row input { flex: 1; }
.score-scroll { flex: 1; position: relative; overflow-y: auto; overflow-x: hidden; }
#scoreCanvas { width: 100%; display: block; }
.lyrics-input { position: absolute; display: none; padding: 4px 10px; resize: none; box-sizing: border-box; overflow: hidden; line-height: 1.5; font-size: 14px; }
.rhythm-list { flex: 1; overflow: auto; border: 1px dashed var(--border); border-radius: 6px; padding: 4px; display: grid; grid-template-columns: 1fr; gap: 4px; }
.rhythm-item { display: grid; grid-template-columns: 186px 1fr auto; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--border); border-radius: 6px; }
.rhythm-name { margin-left: 16px; }
.rhythm-card { width: 186px; height: 52px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; background: var(--panel); }
.rhythm-card canvas { width: 182px; height: 48px; }
.mapping-list { display: grid; gap: 6px; }
.mapping-item { display: grid; grid-template-columns: 80px 1fr; gap: 6px; align-items: center; }
.repeat-group { border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: grid; gap: 6px; max-width: 320px; }
.repeat-group.color-1 { border-color: #4a86e8; background-color: rgba(74, 134, 232, 0.1); }
.repeat-group.color-2 { border-color: #e67e22; background-color: rgba(230, 126, 34, 0.1); }
.repeat-group.color-3 { border-color: #2ecc71; background-color: rgba(46, 204, 113, 0.1); }
.repeat-group.color-4 { border-color: #e74c3c; background-color: rgba(231, 76, 60, 0.1); }
.repeat-group.color-5 { border-color: #9b59b6; background-color: rgba(155, 89, 182, 0.1); }
.repeat-group.color-6 { border-color: #1abc9c; background-color: rgba(26, 188, 156, 0.1); }
.repeat-group.color-7 { border-color: #f39c12; background-color: rgba(243, 156, 18, 0.1); }
.repeat-group.color-8 { border-color: #3498db; background-color: rgba(52, 152, 219, 0.1); }
.repeat-range { display: grid; grid-template-columns: auto auto auto auto; gap: 6px; align-items: center; }
.repeat-range input[type=number] { width: 72px; }
button, input, select { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: var(--panel); color: var(--fg); }
button { cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; }
button:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }
.menu-bar .menu-group button { border-radius: 999px; padding: 6px 14px; border-color: transparent; background: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.04); }
.menu-bar .menu-group button:hover:not(:disabled) { background: rgba(0,0,0,0.04); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.menu-bar .menu-group button:active:not(:disabled) { transform: translateY(1px); background: rgba(0,0,0,0.08); }
.menu-bar .menu-group button.is-active { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent); }
.menu-bar .menu-group button.is-active:active:not(:disabled) { background: #e86f00; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.highlight { outline: 2px solid var(--accent); }
.tap-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); z-index: 1000; }
.tap-dialog { background: var(--panel); border-radius: 10px; border: 1px solid var(--border); padding: 16px 18px 14px; min-width: 260px; max-width: 320px; box-shadow: 0 18px 35px rgba(0,0,0,0.18); display: grid; gap: 10px; }
.tap-title { font-weight: 600; font-size: 15px; }
.tap-body { display: grid; gap: 8px; }
.tap-info { font-size: 13px; opacity: 0.8; }
.tap-area { width: 100%; padding: 18px 10px; border-radius: 8px; background: rgba(0,0,0,0.04); }
.tap-result { font-size: 14px; min-height: 18px; }
.tap-actions { display: flex; justify-content: flex-end; gap: 8px; }
.open-song-list { margin-top: 10px; max-height: 260px; overflow: auto; display: grid; gap: 8px; }
.open-song-item { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; }
.open-song-item:hover { background: var(--hover); }
.open-song-item-content { flex: 1; display: grid; gap: 2px; }
.open-song-item-title { font-size: 14px; }
.open-song-item-meta { font-size: 12px; opacity: 0.8; }
.open-song-item.selected { background: var(--accent-bg); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.open-song-item.selected .open-song-item-title { font-weight: 600; color: var(--accent); }
.open-song-item-delete { padding: 4px 12px; font-size: 12px; border: 1px solid #ff4444; background: #ff4444; color: white; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.open-song-item-delete:hover { background: #cc0000; border-color: #cc0000; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 6px; }
.auth-tab-btn { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 13px; }
.auth-tab-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.auth-field { display: grid; gap: 4px; margin-bottom: 6px; }
.auth-field input { width: 100%; }
.setting-row.setting-row-range { display: flex; align-items: center; gap: 8px; }
.setting-row.setting-row-range label { width: 120px; transform: translateY(-2px); }
.setting-row.setting-row-range input[type=range] { flex: 1; }
.setting-row.setting-row-range span { width: 56px; text-align: right; }
.fullscreen-play-overlay { position: fixed; inset: 0; display: none; background: var(--bg); z-index: 2000; flex-direction: column; }
.fullscreen-play-overlay.active { display: flex; }
.fullscreen-play-container { flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%; }
.fullscreen-play-header { padding: 20px; text-align: center; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.fullscreen-title { font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--fg); }
.fullscreen-desc { font-size: 14px; opacity: 0.8; color: var(--fg); }
.fullscreen-play-controls { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 16px 20px; background: var(--panel); border-top: 1px solid var(--border); flex-shrink: 0; }
.fullscreen-play-controls button { border-radius: 999px; padding: 10px 20px; border-color: transparent; background: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.04); font-size: 16px; }
.fullscreen-play-controls button:hover:not(:disabled) { background: rgba(0,0,0,0.04); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.fullscreen-play-controls button.is-active { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent); }
.fullscreen-bpm-control { display: flex; align-items: center; gap: 12px; }
.fullscreen-bpm-control label { font-size: 16px; font-weight: 500; min-width: 50px; }
.fullscreen-bpm-control input[type=range] { width: 200px; }
.fullscreen-bpm-control span { min-width: 50px; text-align: center; font-size: 16px; font-weight: 500; }
.fullscreen-bar-control { display: flex; align-items: center; gap: 12px; }
.fullscreen-bar-control label { font-size: 16px; font-weight: 500; min-width: 80px; }
.fullscreen-bar-control input[type=number] { width: 80px; text-align: center; font-size: 16px; }
.fullscreen-play-content { flex: 1; position: relative; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 20px; min-height: 0; }
#fullscreenScoreCanvas { max-width: 100%; display: block; }
.number-input-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.number-input-group button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.number-input-group button:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.number-input-group input {
  width: 60px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--fg);
}

@media (max-width: 900px) {
  .fullscreen-play-header { padding: 12px; }
  .fullscreen-title { font-size: 20px; }
  .fullscreen-desc { font-size: 12px; }
  .fullscreen-play-controls { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .fullscreen-play-controls button { padding: 8px 16px; font-size: 14px; }
  .fullscreen-bpm-control { flex-wrap: wrap; justify-content: center; }
  .fullscreen-bpm-control input[type=range] { width: 150px; }
  .fullscreen-bar-control { flex-wrap: wrap; justify-content: center; }
  .number-input-group input { width: 50px; }
  .fullscreen-play-content { padding: 10px; }
}