:root {
  --bg: #eef1f5;
  --panel: #ffffff;
  --ink: #1d2330;
  --muted: #6b7385;
  --line: #d9dee7;
  --accent: #2f6fde;
  --left: #4f8ad8;
  --right: #6fbf3a;
  --sel: #e8761c;
  --dark: #2b2d31;
  --topbar: #1f2533;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.mg, .clef, .acc, .ks { font-family: "Noto Music", "Segoe UI Symbol", "Segoe UI", serif; }

/* ---------- Nút ---------- */
.btn {
  border: 1px solid #c9cfda;
  background: #fff;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #245bc0; color: #fff; }
.btn.icon { min-width: 40px; padding: 7px 10px; }
.btn-sm {
  border: 1px solid #c9cfda; background: #fff; border-radius: 6px;
  padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.danger:hover { border-color: #d33; color: #d33; }

/* ---------- Thanh trên ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--topbar); color: #fff;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.title-input {
  flex: 1; min-width: 160px; max-width: 420px;
  padding: 7px 10px; border-radius: 7px; border: 1px solid #3a4357;
  background: #2a3244; color: #fff; font: inherit;
}
.title-input::placeholder { color: #8e98ad; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.topbar .btn:not(.btn-primary) { background: #2a3244; border-color: #3a4357; color: #e6e9f0; }
.topbar .btn:not(.btn-primary):hover { border-color: #6f9cf0; color: #fff; }

/* ---------- Màn hình nhập ---------- */
#editor-view { padding: 14px 16px 150px; max-width: 1500px; margin: 0 auto; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.settings { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.settings label { display: flex; align-items: center; gap: 6px; }
.settings input[type=number] { width: 64px; }
.settings input, .settings select, .play-bar input[type=number] {
  padding: 5px 6px; border: 1px solid #c9cfda; border-radius: 6px; font: inherit; background: #fff;
}
.chk { cursor: pointer; user-select: none; }

.toolbar {
  position: sticky; top: 58px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  box-shadow: 0 2px 8px rgba(20, 30, 50, .06);
}
.tool-group { display: flex; gap: 4px; align-items: flex-end; padding-right: 14px; border-right: 1px solid var(--line); }
.tool-group:last-of-type { border-right: 0; }
.tool-title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px;
}
.tbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 58px; height: 54px; padding: 3px 2px;
  border: 1px solid #d3d8e2; background: #f8f9fb; border-radius: 8px; cursor: pointer; font: inherit;
  color: var(--ink);
}
.tbtn i { font-style: normal; font-size: 22px; line-height: 28px; height: 28px; }
.tbtn small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tbtn:hover { border-color: var(--accent); }
.tbtn.on { background: #e5eefc; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tbtn.on small { color: var(--accent); }
.tbtn:disabled { opacity: .4; cursor: default; }
.status { flex: 1; min-width: 220px; align-self: center; color: var(--muted); font-size: 13px; }
.status b { color: var(--ink); }
.hand-left { color: var(--left); }
.hand-right { color: var(--right); }

.help summary { cursor: pointer; font-weight: 600; }
.help ul { margin: 8px 0 2px; padding-left: 20px; line-height: 1.7; color: #3b4254; }

.sys-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 14px; overflow: hidden;
}
.sys-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: #fafbfd; font-size: 13px;
}
.sys-scroll { overflow-x: auto; padding: 0 6px; }
.sys-svg { display: block; user-select: none; }

.add-wrap { text-align: center; margin: 6px 0 20px; }
.btn-add {
  padding: 12px 26px; font-weight: 600; border: 2px dashed #9fb4dc; background: #f4f7fd; color: var(--accent);
}
.btn-add:hover { background: #e8effc; }

.editor-kb-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: #1a1c20; padding-top: 4px; box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
}
.kb-scroll, .piano-scroll { overflow-x: auto; }
.editor-kb-dock .kb { height: 100px; min-width: 900px; }

/* ---------- Ký hiệu nhạc (SVG) ---------- */
.staffline { stroke: #222; stroke-width: 1; }
.barline { stroke: #222; stroke-width: 1.2; }
.barline-thick { fill: #222; }
.brace { fill: none; stroke: #222; stroke-width: 2.6; }
.ledger { stroke: #222; stroke-width: 1.3; }
.stem { stroke: currentColor; stroke-width: 1.4; }
.flag, .rest-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rest-line.thin { stroke-width: 1.6; }
.head { fill: currentColor; }
.head.open { fill: #fff; stroke: currentColor; stroke-width: 1.8; }
.head.whole { stroke-width: 2.3; }
.dot, .restf, .rest { fill: currentColor; }
.acc { fill: currentColor; font-size: 17px; }
.ks { fill: #222; font-size: 17px; }
.clef { fill: #222; }
.clef.clickable { cursor: pointer; }
.clef.clickable:hover { fill: var(--accent); }
.timesig { font: 700 21px "Times New Roman", serif; fill: #222; }
.hand-label { font-size: 11px; font-weight: 700; fill: #8a93a6; }
.hand-label.left { fill: var(--left); }
.hand-label.right { fill: var(--right); }

.ev { color: #1b1b1b; }
.ev .hit { fill: transparent; cursor: pointer; }
.ev:hover .hit { fill: rgba(47, 111, 222, .07); }
.ev.sel { color: var(--sel); }
.ev.sel .hit { fill: rgba(232, 118, 28, .12); }
.ev.on.left { color: var(--left); }
.ev.on.right { color: var(--right); }
.ev.on .head.open { fill: #fff; }

.staff-bg { fill: transparent; cursor: crosshair; }
.staff-bg.active { fill: rgba(255, 200, 60, .10); }
.ghost { pointer-events: none; }
.ghost ellipse { fill: rgba(47, 111, 222, .5); }
.ghost .ledger { stroke: rgba(47, 111, 222, .6); }
.ghost text { font-size: 12px; font-weight: 700; fill: var(--accent); paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* ---------- Bàn phím ---------- */
.kb {
  position: relative; height: 130px;
  background: #111; border-top: 3px solid #b3261e;
  user-select: none; touch-action: none;
}
.key { position: absolute; top: 0; cursor: pointer; }
.key.white {
  height: 100%; z-index: 1;
  background: linear-gradient(#fdfdfb, #efebe1);
  border: 1px solid #8d8d8d; border-top: 0; border-radius: 0 0 4px 4px;
}
.key.black {
  height: 62%; z-index: 2;
  background: linear-gradient(#3a3a3a, #0c0c0c);
  border: 1px solid #000; border-top: 0; border-radius: 0 0 3px 3px;
}
.klabel {
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center; font-size: 10px; color: #666; pointer-events: none;
}
.klabel sub { font-size: 8px; }
.key.middle-c .klabel { color: #b3261e; font-weight: 700; }
.key.black .klabel { bottom: 5px; color: #fff; font-size: 9px; font-weight: 700; }
.key.press { filter: brightness(.85); }

.key.white.on-left { background: linear-gradient(#9cc2f7, var(--left)); }
.key.white.on-right { background: linear-gradient(#bfe89a, var(--right)); }
.key.black.on-left { background: linear-gradient(#6fa3ea, #2f64b3); }
.key.black.on-right { background: linear-gradient(#92d45c, #4c8f22); }
.key.on-left .klabel, .key.on-right .klabel { color: #10243f; font-weight: 700; }
.key.black.on-left .klabel, .key.black.on-right .klabel { color: #fff; }
.key.next-left { box-shadow: inset 0 0 0 3px var(--left); }
.key.next-right { box-shadow: inset 0 0 0 3px var(--right); }
.key.white.next-left { background: linear-gradient(#fff, #dfeafb); }
.key.white.next-right { background: linear-gradient(#fff, #e6f5d8); }

/* ---------- Màn hình phím đàn ---------- */
body.playing { overflow: hidden; }
body.playing .topbar { display: none; }
body.dragging, body.dragging * { cursor: ew-resize !important; }
#play-view { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h, 0px)); overflow: hidden; background: var(--dark); }
.play-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--topbar); color: #e6e9f0;
}
.play-bar label { display: flex; align-items: center; gap: 6px; }
.play-bar input[type=number] { width: 64px; }
.play-bar .btn:not(.btn-primary) { background: #2a3244; border-color: #3a4357; color: #e6e9f0; }
.play-bar .btn:not(.btn-primary):hover { border-color: #6f9cf0; color: #fff; }
#timeline { flex: 1; min-width: 140px; accent-color: var(--accent); }
.pos { min-width: 110px; font-variant-numeric: tabular-nums; color: #c5cbda; }

#sheet {
  position: relative; flex: 1 1 0; min-height: 100px;
  overflow: auto; background: #fff; padding: 4px 2px;
}
.piano-scroll { flex: 0 0 auto; min-height: 300px; }
.play-sys { position: relative; border-bottom: 1px solid #eee; }
.play-sys .sys-svg { cursor: ew-resize; touch-action: none; }
.sys-num { position: absolute; left: 6px; top: 26px; font-size: 12px; color: #777; font-style: italic; }
.cursor { fill: rgba(79, 138, 216, .22); }

.piano-area { position: relative; min-width: 1000px; min-height: 300px; display: flex; flex-direction: column; background: #2b2d31; }
.fall-wrap {
  position: relative; flex: 1 1 0; min-height: 160px; overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 54px, rgba(255, 255, 255, .03) 54px, rgba(255, 255, 255, .03) 55px),
    #2b2d31;
}
#fall { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.hint {
  position: absolute; left: 10px; top: 8px;
  background: rgba(15, 18, 24, .72); color: #e8ebf2;
  padding: 7px 10px; border-radius: 8px; font-size: 13px; line-height: 1.8; pointer-events: none;
}
.hint .hl { display: inline-block; width: 74px; color: #9aa4b8; font-size: 12px; }
.hint .muted { color: #7c8598; }
.chip { display: inline-block; padding: 0 8px; margin-right: 6px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.chip.left { background: rgba(79, 138, 216, .3); color: #b9d3fb; }
.chip.right { background: rgba(111, 191, 58, .3); color: #cdefad; }
.kb.big { height: 140px; flex: 0 0 auto; }

/* ---------- Tài khoản / hộp thoại ---------- */
.user-box { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.user-name { color: #c5cbda; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 24, .55); padding: 16px;
}
.modal-box {
  background: var(--panel); color: var(--ink); border-radius: 12px; padding: 18px;
  width: 100%; max-width: 380px; max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.modal-box.wide { max-width: 560px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tabs { display: flex; gap: 4px; }
.tab { border: 0; background: none; font: inherit; font-weight: 600; padding: 6px 10px; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.fld input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; color: var(--ink); }
.form-error { color: #c62828; font-size: 13px; }
.form-error:empty { display: none; }
.song-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.song-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.song-list .song-info { flex: 1; min-width: 0; }
.song-list .song-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-list .song-meta { font-size: 12px; color: var(--muted); }
.song-list .empty { justify-content: center; color: var(--muted); border-style: dashed; }

/* ---------- Màn hình nhỏ (điện thoại / máy tính bảng): chỉ giữ thanh tua, nốt rơi và phím đàn ---------- */
@media (max-width: 1024px), (max-height: 600px) {
  #play-view { height: calc(100vh - var(--nav-h, 0px)); height: calc(100dvh - var(--nav-h, 0px)); }
  #play-view .play-bar { flex: 0 0 auto; gap: 6px; padding: 6px 8px; }
  #play-view .play-bar .btn { padding: 5px 9px; }
  #play-view .play-bar label,
  #play-view #btn-export2,
  #play-view #play-pos { display: none; }
  #play-view #timeline { order: 0; flex: 1 1 120px; min-width: 100px; height: 28px; margin: 0; }
  #play-view #sheet { display: none; }
  #play-view .piano-scroll { flex: 1 1 0; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; }
  #play-view .piano-area { flex: 1 1 auto; min-height: 0; min-width: 900px; }
  #play-view .fall-wrap { min-height: 0; }
  #play-view .hint { display: none; }
  #play-view .kb.big { height: clamp(70px, 26vh, 140px); }
}