:root {
  --bg: #0a1020;
  --bg2: #121d36;
  --panel: #101a31;
  --line: #243656;
  --text: #e8efff;
  --muted: #9db0d0;
  --accent: #55a5ff;
  --accent2: #7ce2c0;
  --glow1: #1a2c54;
  --glow2: #143c59;
  --panel-grad-start: rgba(22, 34, 60, 0.9);
  --panel-grad-end: rgba(11, 19, 37, 0.9);
  --card-bg: rgba(20, 33, 60, 0.72);
  --card-border: rgba(58, 88, 138, 0.45);
  --card-active-bg: rgba(85, 165, 255, 0.22);
  --pill-bg: rgba(124, 226, 192, 0.24);
  --pill-border: rgba(124, 226, 192, 0.5);
  --pinned-border: rgba(124, 226, 192, 0.35);
  --pinned-start: rgba(22, 45, 75, 0.85);
  --pinned-end: rgba(14, 27, 50, 0.92);
  --input-bg: #0e1730;
  --btn-bg: #1a2747;
  --note-bg: rgba(21, 35, 65, 0.6);
  --group-border: rgba(36, 54, 86, 0.8);
  --group-bg: rgba(16, 27, 49, 0.45);
  --pinned-item-border: rgba(124, 226, 192, 0.45);
  --toast-bg: rgba(13, 24, 44, 0.95);
  --dialog-bg: #0f1a33;
}

[data-theme="dark"] {
  --bg: #0a1020;
  --bg2: #121d36;
  --panel: #101a31;
  --line: #243656;
  --text: #e8efff;
  --muted: #9db0d0;
  --accent: #55a5ff;
  --accent2: #7ce2c0;
  --glow1: #1a2c54;
  --glow2: #143c59;
  --panel-grad-start: rgba(22, 34, 60, 0.9);
  --panel-grad-end: rgba(11, 19, 37, 0.9);
  --card-bg: rgba(20, 33, 60, 0.72);
  --card-border: rgba(58, 88, 138, 0.45);
  --card-active-bg: rgba(85, 165, 255, 0.22);
  --pill-bg: rgba(124, 226, 192, 0.24);
  --pill-border: rgba(124, 226, 192, 0.5);
  --pinned-border: rgba(124, 226, 192, 0.35);
  --pinned-start: rgba(22, 45, 75, 0.85);
  --pinned-end: rgba(14, 27, 50, 0.92);
  --input-bg: #0e1730;
  --btn-bg: #1a2747;
  --note-bg: rgba(21, 35, 65, 0.6);
  --group-border: rgba(36, 54, 86, 0.8);
  --group-bg: rgba(16, 27, 49, 0.45);
  --pinned-item-border: rgba(124, 226, 192, 0.45);
  --toast-bg: rgba(13, 24, 44, 0.95);
  --dialog-bg: #0f1a33;
}

[data-theme="light"] {
  --bg: #e8eef9;
  --bg2: #d7e4fb;
  --panel: #f7f9ff;
  --line: #8faad7;
  --text: #0f2347;
  --muted: #2f507f;
  --accent: #2c62c4;
  --accent2: #3da387;
  --glow1: #aac2ea;
  --glow2: #c0d5f7;
  --panel-grad-start: rgba(244, 248, 255, 0.98);
  --panel-grad-end: rgba(227, 238, 255, 0.98);
  --card-bg: rgba(228, 238, 253, 0.98);
  --card-border: rgba(131, 162, 214, 0.9);
  --card-active-bg: rgba(183, 207, 245, 0.96);
  --pill-bg: rgba(77, 166, 133, 0.2);
  --pill-border: rgba(46, 130, 100, 0.45);
  --pinned-border: rgba(90, 140, 210, 0.5);
  --pinned-start: rgba(236, 244, 255, 0.98);
  --pinned-end: rgba(219, 233, 253, 0.98);
  --input-bg: #f7fbff;
  --btn-bg: #dde8fa;
  --note-bg: rgba(231, 240, 255, 0.98);
  --group-border: rgba(143, 170, 215, 0.9);
  --group-bg: rgba(236, 244, 255, 0.96);
  --pinned-item-border: rgba(63, 148, 116, 0.55);
  --toast-bg: rgba(245, 250, 255, 0.98);
  --dialog-bg: #f4f8ff;
}

[data-theme="sunset"] {
  --bg: #1a0f13;
  --bg2: #2a1722;
  --panel: #2a1a28;
  --line: #5c3551;
  --text: #ffe7db;
  --muted: #e2b8a6;
  --accent: #ff8a5b;
  --accent2: #ffc261;
  --glow1: #4a2037;
  --glow2: #553127;
  --panel-grad-start: rgba(48, 28, 46, 0.92);
  --panel-grad-end: rgba(35, 20, 33, 0.92);
  --card-bg: rgba(54, 33, 51, 0.74);
  --card-border: rgba(132, 84, 112, 0.45);
  --card-active-bg: rgba(255, 138, 91, 0.24);
  --pill-bg: rgba(255, 194, 97, 0.24);
  --pill-border: rgba(255, 194, 97, 0.52);
  --pinned-border: rgba(255, 194, 97, 0.36);
  --pinned-start: rgba(67, 36, 57, 0.9);
  --pinned-end: rgba(50, 25, 44, 0.92);
  --input-bg: #26162b;
  --btn-bg: #40254a;
  --note-bg: rgba(58, 35, 56, 0.66);
  --group-border: rgba(105, 61, 87, 0.85);
  --group-bg: rgba(50, 28, 48, 0.52);
  --pinned-item-border: rgba(255, 194, 97, 0.5);
  --toast-bg: rgba(44, 24, 39, 0.95);
  --dialog-bg: #2d1b2d;
}

[data-theme="forest"] {
  --bg: #0f1c16;
  --bg2: #1a2a22;
  --panel: #1b2d24;
  --line: #365846;
  --text: #e8f7ec;
  --muted: #afceb7;
  --accent: #59c587;
  --accent2: #97e3c2;
  --glow1: #234433;
  --glow2: #1f4b3e;
  --panel-grad-start: rgba(30, 47, 39, 0.92);
  --panel-grad-end: rgba(21, 34, 28, 0.92);
  --card-bg: rgba(33, 51, 42, 0.74);
  --card-border: rgba(70, 111, 91, 0.48);
  --card-active-bg: rgba(89, 197, 135, 0.24);
  --pill-bg: rgba(151, 227, 194, 0.24);
  --pill-border: rgba(151, 227, 194, 0.5);
  --pinned-border: rgba(151, 227, 194, 0.36);
  --pinned-start: rgba(37, 61, 49, 0.9);
  --pinned-end: rgba(28, 47, 38, 0.92);
  --input-bg: #17261f;
  --btn-bg: #274133;
  --note-bg: rgba(35, 55, 44, 0.66);
  --group-border: rgba(59, 92, 76, 0.86);
  --group-bg: rgba(31, 47, 40, 0.54);
  --pinned-item-border: rgba(151, 227, 194, 0.5);
  --toast-bg: rgba(24, 38, 31, 0.95);
  --dialog-bg: #1a2c22;
}

[data-theme="daylight"] {
  --bg: #f4f8ff;
  --bg2: #e8f1ff;
  --panel: #ffffff;
  --line: #b2c8ea;
  --text: #102746;
  --muted: #46648f;
  --accent: #2a70d6;
  --accent2: #2fb89c;
  --glow1: #dce9ff;
  --glow2: #d6f2ef;
  --panel-grad-start: rgba(255, 255, 255, 0.98);
  --panel-grad-end: rgba(238, 246, 255, 0.98);
  --card-bg: rgba(244, 250, 255, 0.98);
  --card-border: rgba(141, 173, 218, 0.82);
  --card-active-bg: rgba(180, 206, 243, 0.85);
  --pill-bg: rgba(47, 184, 156, 0.18);
  --pill-border: rgba(37, 145, 124, 0.44);
  --pinned-border: rgba(88, 141, 215, 0.45);
  --pinned-start: rgba(241, 248, 255, 0.98);
  --pinned-end: rgba(225, 238, 255, 0.98);
  --input-bg: #ffffff;
  --btn-bg: #e8f1ff;
  --note-bg: rgba(236, 245, 255, 0.96);
  --group-border: rgba(157, 186, 226, 0.85);
  --group-bg: rgba(244, 250, 255, 0.95);
  --pinned-item-border: rgba(47, 184, 156, 0.5);
  --toast-bg: rgba(248, 252, 255, 0.98);
  --dialog-bg: #f8fbff;
}

[data-theme="mint"] {
  --bg: #f2fbf6;
  --bg2: #e3f7ee;
  --panel: #ffffff;
  --line: #a8d8c2;
  --text: #12372b;
  --muted: #467664;
  --accent: #1f9b6c;
  --accent2: #4db5dc;
  --glow1: #d6f3e4;
  --glow2: #d5eef9;
  --panel-grad-start: rgba(253, 255, 254, 0.98);
  --panel-grad-end: rgba(235, 250, 243, 0.98);
  --card-bg: rgba(242, 253, 247, 0.98);
  --card-border: rgba(138, 191, 166, 0.8);
  --card-active-bg: rgba(172, 226, 202, 0.82);
  --pill-bg: rgba(31, 155, 108, 0.16);
  --pill-border: rgba(24, 122, 84, 0.42);
  --pinned-border: rgba(77, 181, 220, 0.42);
  --pinned-start: rgba(241, 253, 246, 0.98);
  --pinned-end: rgba(227, 248, 238, 0.98);
  --input-bg: #ffffff;
  --btn-bg: #e5f7ee;
  --note-bg: rgba(235, 250, 243, 0.96);
  --group-border: rgba(150, 200, 176, 0.83);
  --group-bg: rgba(243, 252, 247, 0.95);
  --pinned-item-border: rgba(31, 155, 108, 0.46);
  --toast-bg: rgba(248, 255, 251, 0.98);
  --dialog-bg: #f6fffa;
}

[data-theme="sand"] {
  --bg: #fff7ea;
  --bg2: #f6eddc;
  --panel: #fffdf8;
  --line: #d9c3a2;
  --text: #3c2a17;
  --muted: #7a6041;
  --accent: #c6792f;
  --accent2: #c8a84a;
  --glow1: #ffe8c8;
  --glow2: #f8e3bf;
  --panel-grad-start: rgba(255, 253, 247, 0.98);
  --panel-grad-end: rgba(249, 240, 221, 0.98);
  --card-bg: rgba(255, 250, 240, 0.98);
  --card-border: rgba(201, 170, 128, 0.82);
  --card-active-bg: rgba(240, 210, 166, 0.82);
  --pill-bg: rgba(198, 121, 47, 0.14);
  --pill-border: rgba(162, 95, 30, 0.4);
  --pinned-border: rgba(200, 168, 74, 0.46);
  --pinned-start: rgba(255, 248, 234, 0.98);
  --pinned-end: rgba(249, 238, 215, 0.98);
  --input-bg: #fffdf8;
  --btn-bg: #f5ead4;
  --note-bg: rgba(251, 242, 225, 0.96);
  --group-border: rgba(206, 177, 138, 0.84);
  --group-bg: rgba(255, 249, 238, 0.95);
  --pinned-item-border: rgba(198, 121, 47, 0.46);
  --toast-bg: rgba(255, 252, 245, 0.98);
  --dialog-bg: #fffaf0;
}

[data-theme="graphite"] {
  --bg: #121417;
  --bg2: #1b2129;
  --panel: #1c2530;
  --line: #394a5f;
  --text: #ecf2ff;
  --muted: #a7b8d3;
  --accent: #6ba4ff;
  --accent2: #78d1be;
  --glow1: #283647;
  --glow2: #2b3b53;
  --panel-grad-start: rgba(31, 40, 54, 0.92);
  --panel-grad-end: rgba(22, 29, 41, 0.92);
  --card-bg: rgba(35, 46, 63, 0.74);
  --card-border: rgba(83, 107, 138, 0.5);
  --card-active-bg: rgba(107, 164, 255, 0.24);
  --pill-bg: rgba(120, 209, 190, 0.22);
  --pill-border: rgba(120, 209, 190, 0.5);
  --pinned-border: rgba(120, 209, 190, 0.36);
  --pinned-start: rgba(40, 54, 73, 0.9);
  --pinned-end: rgba(30, 42, 58, 0.92);
  --input-bg: #192330;
  --btn-bg: #243245;
  --note-bg: rgba(37, 50, 69, 0.66);
  --group-border: rgba(70, 92, 120, 0.86);
  --group-bg: rgba(33, 45, 62, 0.54);
  --pinned-item-border: rgba(120, 209, 190, 0.5);
  --toast-bg: rgba(24, 33, 47, 0.95);
  --dialog-bg: #1a2432;
}

[data-theme="aurora"] {
  --bg: #0f1827;
  --bg2: #11263a;
  --panel: #17253a;
  --line: #35567d;
  --text: #e8f6ff;
  --muted: #9cc4de;
  --accent: #4fa9ff;
  --accent2: #4de0c2;
  --glow1: #193751;
  --glow2: #1a4e5f;
  --panel-grad-start: rgba(23, 42, 64, 0.92);
  --panel-grad-end: rgba(16, 31, 49, 0.92);
  --card-bg: rgba(26, 47, 71, 0.74);
  --card-border: rgba(67, 106, 149, 0.48);
  --card-active-bg: rgba(79, 169, 255, 0.24);
  --pill-bg: rgba(77, 224, 194, 0.22);
  --pill-border: rgba(77, 224, 194, 0.52);
  --pinned-border: rgba(77, 224, 194, 0.38);
  --pinned-start: rgba(27, 55, 83, 0.9);
  --pinned-end: rgba(20, 40, 62, 0.92);
  --input-bg: #142741;
  --btn-bg: #214066;
  --note-bg: rgba(28, 51, 79, 0.66);
  --group-border: rgba(58, 92, 131, 0.86);
  --group-bg: rgba(24, 44, 69, 0.54);
  --pinned-item-border: rgba(77, 224, 194, 0.5);
  --toast-bg: rgba(18, 34, 54, 0.95);
  --dialog-bg: #152a42;
}

[data-theme="rose"] {
  --bg: #fff3f7;
  --bg2: #fbe8ef;
  --panel: #fff9fb;
  --line: #dbaec1;
  --text: #4a1e32;
  --muted: #865067;
  --accent: #c94f7d;
  --accent2: #d88fb1;
  --glow1: #ffdceb;
  --glow2: #f7dbe8;
  --panel-grad-start: rgba(255, 252, 254, 0.98);
  --panel-grad-end: rgba(251, 238, 245, 0.98);
  --card-bg: rgba(255, 245, 250, 0.98);
  --card-border: rgba(211, 160, 184, 0.82);
  --card-active-bg: rgba(243, 197, 217, 0.82);
  --pill-bg: rgba(201, 79, 125, 0.14);
  --pill-border: rgba(164, 62, 102, 0.4);
  --pinned-border: rgba(216, 143, 177, 0.46);
  --pinned-start: rgba(255, 246, 251, 0.98);
  --pinned-end: rgba(250, 234, 243, 0.98);
  --input-bg: #fffafb;
  --btn-bg: #f8e5ee;
  --note-bg: rgba(251, 238, 245, 0.96);
  --group-border: rgba(215, 171, 191, 0.84);
  --group-bg: rgba(255, 247, 251, 0.95);
  --pinned-item-border: rgba(201, 79, 125, 0.44);
  --toast-bg: rgba(255, 250, 253, 0.98);
  --dialog-bg: #fff6fa;
}

[data-theme="sky"] {
  --bg: #eef7ff;
  --bg2: #e1f0ff;
  --panel: #f8fcff;
  --line: #a9c8e8;
  --text: #183759;
  --muted: #4e729a;
  --accent: #2f8fe0;
  --accent2: #57b8e6;
  --glow1: #d5eaff;
  --glow2: #d6f2ff;
  --panel-grad-start: rgba(251, 254, 255, 0.98);
  --panel-grad-end: rgba(233, 245, 255, 0.98);
  --card-bg: rgba(241, 249, 255, 0.98);
  --card-border: rgba(149, 188, 224, 0.82);
  --card-active-bg: rgba(189, 221, 247, 0.82);
  --pill-bg: rgba(47, 143, 224, 0.14);
  --pill-border: rgba(37, 114, 178, 0.4);
  --pinned-border: rgba(87, 184, 230, 0.46);
  --pinned-start: rgba(244, 251, 255, 0.98);
  --pinned-end: rgba(229, 243, 255, 0.98);
  --input-bg: #fdfefe;
  --btn-bg: #e5f3ff;
  --note-bg: rgba(236, 247, 255, 0.96);
  --group-border: rgba(162, 196, 228, 0.84);
  --group-bg: rgba(246, 252, 255, 0.95);
  --pinned-item-border: rgba(47, 143, 224, 0.44);
  --toast-bg: rgba(250, 254, 255, 0.98);
  --dialog-bg: #f4fbff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Trebuchet MS", "Gill Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, var(--glow1), transparent 35%),
    radial-gradient(circle at 85% 20%, var(--glow2), transparent 25%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(4px);
}

h1, h2, h3 {
  margin: 0;
}

.brand-heading {
  margin: 0;
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: 72px;
  width: auto;
}

.admin-heading {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 14px;
  padding: 14px;
  height: calc(100vh - 92px);
  min-height: 0;
}

body.left-pane-collapsed .layout {
  grid-template-columns: 18px minmax(0, 1fr) 340px;
}

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--panel-grad-start), var(--panel-grad-end));
  border-radius: 10px;
  overflow: hidden auto;
  min-height: 0;
  height: 100%;
}

.panel-title {
  font-size: 28px;
  font-weight: 700;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

body.left-pane-collapsed .songs-panel {
  width: 280px;
  transform: translateX(calc(-100% + 18px));
  transition: transform 180ms ease;
  z-index: 20;
}

body.left-pane-collapsed .songs-panel:hover,
body.left-pane-collapsed .songs-panel:focus-within {
  transform: translateX(0);
}

.songs-list {
  padding: 6px;
}

#songs-band-filter-wrap {
  padding: 10px 10px 0;
}

#songs-status-filter-wrap {
  padding: 10px 10px 0;
}

.song-item {
  width: 100%;
  text-align: left;
  color: var(--text);
  background: var(--card-bg);
  appearance: none;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  margin-bottom: 6px;
  cursor: pointer;
}

.song-item.active {
  border-color: var(--accent);
  background: var(--card-active-bg);
}

.song-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.status-pill {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
}

.detail-panel, .notes-panel {
  padding: 16px;
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.detail-head-main {
  min-width: 260px;
  flex: 1 1 280px;
}

.detail-head-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 420px;
}

.band-link {
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 8px;
}

.meta {
  color: var(--muted);
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 14px;
}

.block {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.pinned-block {
  border: 1px solid var(--pinned-border);
  border-radius: 10px;
  padding: 16px;
  background: linear-gradient(160deg, var(--pinned-start), var(--pinned-end));
}

.current-pinned-block {
  border: 1px solid var(--accent2);
  border-radius: 10px;
  padding: 16px;
  background: linear-gradient(160deg, rgba(26, 62, 76, 0.5), rgba(18, 36, 64, 0.65));
}

.upload-helper-copy {
  margin: 8px 0 10px;
}

.upload-options-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.upload-option-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--note-bg);
}

#upload-drop-zone {
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

#upload-drop-zone.drag-active {
  border-color: var(--accent);
  background: var(--card-active-bg);
  box-shadow: 0 0 0 2px rgba(82, 153, 255, 0.18) inset;
}

.upload-option-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
}

.upload-option-card .muted {
  margin: 0 0 8px;
}

#admin-more-panel {
  margin-top: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.notes-scope-label {
  min-width: 100px;
}

.metadata-field {
  display: grid;
  gap: 6px;
  min-width: 220px;
  flex: 1;
}

.audio {
  width: 100%;
  margin-top: 10px;
}

textarea, input, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
}

#lyrics-input {
  min-height: 520px;
}

.tabs-preview {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.4;
}

#guitar-tabs-modal {
  width: min(96vw, 1500px);
  max-width: 96vw;
  height: 92vh;
  max-height: 92vh;
  padding: 10px;
}

.tabs-modal {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tabs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tabs-modal-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tabs-modal-grid > div {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabs-modal-grid.single {
  grid-template-columns: 1fr;
}

#guitar-tabs-preview {
  height: 100%;
  min-height: 260px;
}

.tabs-upload-row {
  margin-top: 10px;
  align-items: stretch;
}

.tabs-upload-row select,
.tabs-upload-row input[type="text"] {
  min-width: 160px;
  flex: 1;
}

.tabs-upload-row input[type="file"] {
  flex: 1.2;
}

#guitar-tabs-select {
  flex: 1;
}

.btn {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--btn-bg);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}

.btn.small {
  padding: 6px 10px;
  font-size: 12px;
}

.btn.primary {
  background: linear-gradient(120deg, #3569ce, #2c5db6);
}

.auth-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.auth-wrap input {
  width: 180px;
}

.theme-select {
  width: 150px;
}

.inline-form {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.inline-form.stack {
  flex-direction: column;
  align-items: stretch;
}

.inline-form input[type="file"] {
  flex: 1;
}

.note-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.notes-list, .history-list {
  display: grid;
  gap: 10px;
}

.note-version-meta {
  font-size: 12px;
  margin-top: 2px;
}

.note-item, .history-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--note-bg);
}

.recording-group {
  border: 1px solid var(--group-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--group-bg);
}

.recording-group h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.history-item.is-pinned {
  border-color: var(--pinned-item-border);
}

.muted {
  color: var(--muted);
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.row.wrap {
  flex-wrap: wrap;
}

.hidden {
  display: none;
}

.toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 50;
}

.toast {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--toast-bg);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

dialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--dialog-bg);
  color: var(--text);
  padding: 16px;
  width: min(420px, 92vw);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

#new-song-form {
  display: grid;
  gap: 10px;
}

@media (max-width: 1100px) {
  .layout {
    height: auto;
  }
  .layout {
    grid-template-columns: 1fr;
  }
  body.left-pane-collapsed .songs-panel {
    width: auto;
    transform: none;
  }
  .panel {
    min-height: auto;
    height: auto;
    overflow: visible;
  }
  .auth-wrap {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }
  .auth-wrap input {
    width: min(240px, 46vw);
  }
  .theme-select {
    width: 120px;
  }
}

@media (max-width: 820px) {
  .topbar {
    padding: 14px;
  }
  .layout {
    padding: 10px;
    gap: 10px;
  }
  .detail-panel,
  .notes-panel {
    padding: 12px;
  }
  .panel-title {
    font-size: 24px;
    padding: 12px;
  }
  .row {
    flex-wrap: wrap;
  }
  .btn {
    width: 100%;
  }
  .btn.small {
    width: auto;
  }
  .meta {
    flex-direction: column;
    gap: 4px;
  }
  .upload-options-grid {
    grid-template-columns: 1fr;
  }
  .detail-head-actions {
    justify-content: flex-start;
    flex-basis: 100%;
  }
  #lyrics-input {
    min-height: 300px;
  }
  .tabs-preview {
    font-size: 13px;
  }
  .tabs-modal-grid {
    grid-template-columns: 1fr;
  }
  #guitar-tabs-modal {
    width: 98vw;
    max-width: 98vw;
    height: 94vh;
    max-height: 94vh;
    padding: 8px;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    height: 52px;
  }
  .admin-heading {
    font-size: 24px;
  }
  .song-title {
    font-size: 16px;
  }
  .panel-title {
    font-size: 22px;
  }
  .auth-wrap input {
    width: 100%;
  }
  .theme-select {
    width: 100%;
  }
  .notes-list,
  .history-list {
    gap: 8px;
  }
}