/* Your own bands, the ＋ key, the beam chip and the band-maker card. Uses app.css tokens. */
.bands button.mine { background: linear-gradient(#eef7ff, #c9dff0); color: #1f4f78; box-shadow: 0 5px 0 #8fb2cf, 0 6px 6px rgba(0,0,0,.25); }
.bands button.mine[aria-pressed="true"] { background: linear-gradient(#6fc0ff, #2f8ad8); color: #fff; box-shadow: 0 1px 0 #1d5d95, 0 2px 3px rgba(0,0,0,.3); }
.bands button.add { font-size: 16px; color: #7a6a58; background: repeating-linear-gradient(135deg, #f4ecd9 0 6px, #eadfc6 6px 12px); }

.speaker-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.open-x.beam { border: 0; cursor: pointer; background: #1b2a4a; color: #cfe6ff; transform: rotate(1.4deg); }
.open-x.transmit { background: #3a2410; color: #ffd9a8; transform: rotate(-0.8deg); }

.bandmaker { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 24px); }
.bandmaker::backdrop { background: rgba(10, 6, 4, .72); backdrop-filter: blur(3px); }
.bm-card { width: min(420px, calc(100vw - 24px)); background: var(--paper); color: var(--paper-ink); padding: 22px 22px 18px;
  border-radius: 6px; box-shadow: 0 24px 40px rgba(0,0,0,.5); font-family: var(--mono); }
.bm-kicker { margin: 0; font: 700 11px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--orange); }
.bm-card h2 { font: 26px/1.1 Bungee, var(--mono); margin: 6px 0 8px; }
.bm-lede { font-size: 13px; margin: 0 0 12px; }
.bm-form { display: grid; gap: 10px; }
.bm-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.bm-field input { font: inherit; font-weight: 400; font-size: 15px; border: 2px solid var(--paper-ink); background: #fffaf0;
  padding: 9px 10px; border-radius: 3px; color: var(--paper-ink); min-width: 0; }
.bm-save, .bm-close { border: 0; padding: 11px; border-radius: 3px; cursor: pointer; font: 700 13px var(--mono); letter-spacing: .1em; }
.bm-save { background: var(--paper-ink); color: var(--paper); }
.bm-close { width: 100%; margin-top: 12px; background: transparent; border: 2px solid var(--paper-ink); color: var(--paper-ink); }
.bm-msg { min-height: 1.3em; margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--red); }
.bm-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; }
.bm-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted rgba(43,34,27,.35); }
.bm-list button { border: 0; background: none; color: var(--red); cursor: pointer; font: inherit; text-decoration: underline; padding: 0 0 0 8px; min-height: 32px; }