#instant-music-page,
.im-mask,
#im-together,
.im-together-home,
.im-widget {
  --im-theme-accent: var(--sea-accent);
  --im-theme-ink: var(--sea-ink);
  --im-theme-bg: var(--sea-bg);
  --im-bg: var(--sea-bg);
  --im-paper: var(--sea-surface-strong, var(--sea-bg-secondary));
  --im-ink: var(--im-theme-ink);
  --im-muted: var(--sea-muted);
  --im-accent: var(--im-theme-accent);
  --im-line: var(--sea-border);
  color: var(--im-ink);
}
#instant-music-page,
#instant-music-page .music-sheet,
#instant-music-page .music-search {
  --ta-color: var(--im-accent);
  --ta-soft: color-mix(in srgb, var(--im-theme-bg) 88%, var(--im-accent) 12%);
  --paper: var(--im-paper); --surface: var(--im-paper);
  --ink: var(--im-ink); --ink-soft: var(--im-muted); --muted: var(--im-muted); --muted2: var(--im-muted);
  --line: var(--im-line); --blue: var(--im-accent); --pink: var(--im-accent);
  --pink-soft: color-mix(in srgb, var(--im-theme-bg) 84%, var(--im-accent) 16%);
  --lilac-soft: var(--im-paper); --shadow-soft: var(--sea-shadow, 0 10px 30px rgba(0,0,0,.10));
}
#instant-music-page {
  background: var(--im-bg);
}
.im-login-lead {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
  color: var(--im-ink);
}
.im-login-lead b { font-size: 17px; font-weight: 600; }
.im-login-lead span { color: var(--im-muted); font-size: 12px; }
#im-content {
  position: relative;
  padding: 0 0 130px;
  background: var(--im-bg);
  overflow: auto;
}
#instant-music-top .top-bar-back {
  border: 0;
  background: transparent;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
#instant-music-top small {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 5px;
}
.im-wrap {
  max-width: 540px;
  margin: auto;
  padding: 24px 20px 32px;
}
.im-hero {
  padding: 12px 4px 30px;
}
.im-hero > p {
  letter-spacing: 3px;
  font-size: 9px;
  color: var(--im-muted);
}
.im-hero h1 {
  font-weight: 500;
  font-size: 29px;
  letter-spacing: 3px;
  margin: 13px 0;
}
.im-hero h1 span {
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--im-accent);
  font-style: italic;
}
.im-hero > div {
  font-size: 12px;
  color: var(--im-muted);
  letter-spacing: 2px;
}
#instant-music-page button,
.im-mask button,
#im-together button,
.im-widget button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 40px;
  transition:
    background 0.18s,
    transform 0.18s;
  border-radius: 12px;
}
#instant-music-page button:active,
.im-mask button:active,
#im-together button:active {
  transform: scale(0.97);
}
#instant-music-page button:focus-visible,
.im-mask button:focus-visible,
#im-together button:focus-visible,
.im-widget button:focus-visible {
  outline: 2px solid var(--im-accent);
  outline-offset: 2px;
}
.im-search {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--im-line);
  background: var(--im-paper);
  border-radius: 18px;
  padding: 5px 8px;
  box-sizing: border-box;
  margin-bottom: 22px;
}
.im-search input,
.im-search select {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--im-ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.im-search input {
  flex: 1;
  width: 0;
  padding: 10px 5px;
}
.im-search:focus-within {
  outline: 2px solid var(--im-accent);
  outline-offset: 2px;
}
.im-search select {
  max-width: 94px;
  padding: 7px 3px;
}
.im-search > button {
  width: 36px;
  flex: none;
}
.im-search select option {
  color: var(--im-ink);
  background: var(--im-paper);
}
.im-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 28px;
}
.im-shortcuts button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px !important;
  white-space: nowrap;
}
.im-shortcuts i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--im-line);
  border-radius: 16px;
  color: var(--im-accent);
  background: var(--im-paper);
  font-size: 16px;
}
.im-companion {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(
    125deg,
    var(--im-paper),
    color-mix(in srgb, var(--im-accent) 15%, var(--im-bg))
  );
  border: 1px solid var(--im-line);
}
.im-companion > div {
  flex: 1;
  min-width: 0;
}
.im-companion small {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--im-muted);
}
.im-companion h2 {
  font-size: 19px;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 12px 0;
}
.im-companion p {
  font-size: 10px;
  line-height: 1.8;
  color: var(--im-muted);
  margin: 0;
}
.im-companion > button {
  width: 52px;
  height: 52px;
  border-radius: 50% !important;
  background: var(--im-accent) !important;
  color: var(--im-paper) !important;
  flex: none;
  font-size: 20px !important;
}
.im-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  color: var(--im-muted);
  font-size: 10px;
}
.im-options button {
  font-size: 10px !important;
  padding: 5px 9px;
}
.im-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.im-options input {
  accent-color: var(--im-accent);
}
.im-tabs {
  display: flex;
  gap: 20px;
  margin: 22px 0 18px;
  border-bottom: 1px solid var(--im-line);
}
.im-tabs button {
  font-size: 12px !important;
  border-radius: 0 !important;
  padding: 8px 0 14px;
  position: relative;
  color: var(--im-muted) !important;
}
.im-tabs button.active {
  color: var(--im-ink) !important;
}
.im-tabs button.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20%;
  width: 60%;
  height: 3px;
  border-radius: 3px;
  background: var(--im-accent);
}
.im-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.im-section-head h2 {
  font-size: 15px;
  font-weight: 500;
}
.im-section-head > button {
  width: 40px;
  font-size: 22px !important;
}
.im-song {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 10px 0;
  min-width: 0;
}
.im-song-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
  padding: 3px !important;
}
.im-cover {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  overflow: hidden;
  color: var(--im-accent);
  background: color-mix(in srgb, var(--im-accent) 12%, var(--im-paper));
}
.im-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-song-main > span:last-child {
  flex: 1;
  min-width: 0;
}
.im-song b,
.im-mini b {
  display: block;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-song small,
.im-mini small {
  display: block;
  font-size: 10px;
  color: var(--im-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
}
.im-song > button:last-child {
  width: 40px;
  flex: none;
  color: var(--im-muted) !important;
}
.im-empty {
  text-align: center;
  padding: 30px 15px;
  font-size: 12px;
  color: var(--im-muted);
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.im-empty > i {
  font-size: 32px;
  opacity: 0.5;
}
.im-hint {
  font-size: 10px;
  line-height: 1.8;
  color: var(--im-muted);
  margin-top: 20px;
}
#im-status {
  font-size: 11px;
  line-height: 1.8;
  color: var(--im-muted);
  overflow-wrap: anywhere;
}
.im-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: -115px;
  z-index: 5;
  padding: 12px 18px calc(10px + env(safe-area-inset-bottom));
  background: var(--im-paper);
  border-top: 1px solid var(--im-line);
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
}
.im-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.im-mini-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 5px;
}
.im-mini > button:not(.im-mini-title) {
  width: 36px;
  flex: none;
}
#instant-music-page #im-mini :is([data-im-mode],[data-im-shuffle]){width:34px;height:34px;min-width:34px;flex:0 0 34px;padding:0;display:grid;place-items:center}
#instant-music-page #im-mini :is([data-im-mode],[data-im-shuffle]) .im-icon{width:17px;height:17px}
#instant-music-page #im-mini :is([data-im-mode],[data-im-shuffle])[aria-pressed=true]{color:var(--im-accent);filter:drop-shadow(0 0 5px var(--im-accent))}
.im-player-controls [data-mode]{display:grid;place-items:center}
.im-player-controls [data-mode] .im-icon{width:20px;height:20px}
.im-player-controls [data-mode][aria-pressed=true]{color:var(--im-accent);filter:drop-shadow(0 0 6px var(--im-accent))}
.im-bottom > p {
  font-size: 9px;
  color: var(--im-muted);
  text-align: center;
  margin: 6px 0 0;
}
.im-mask {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: color-mix(in srgb, var(--im-theme-ink) 34%, transparent);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.im-sheet {
  background: var(--im-bg);
  border: 1px solid var(--im-line);
  border-radius: 28px;
  width: min(100%, 510px);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  box-shadow: var(--sea-shadow, 0 20px 70px color-mix(in srgb, var(--im-theme-ink) 20%, transparent));
}
.im-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.im-sheet h2 {
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: 500;
  margin: 0;
}
.im-sheet > header > button {
  width: 40px;
}
.im-sheet label {
  display: grid;
  gap: 10px;
  font-size: 12px;
  margin: 15px 0;
}
.im-sheet input:not([type="range"]),
.im-sheet select {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--im-line);
  border-radius: 12px;
  padding: 12px;
  background: var(--im-paper);
  color: var(--im-ink);
  font: inherit;
  font-size: 12px;
}
.im-sheet .im-search input,
.im-sheet .im-search select {
  border: 0;
  background: transparent;
}
.im-primary {
  background: var(--im-accent) !important;
  color: var(--im-paper) !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
}
.im-list-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px !important;
  width: 100%;
  margin: 8px 0;
  background: var(--im-paper) !important;
  text-align: left;
}
.im-list-button > span:not(.im-cover) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.im-list-button small {
  display: block;
  font-size: 10px;
  color: var(--im-muted);
  margin-top: 5px;
}
.im-list-button > i {
  color: var(--im-accent);
}
.im-menu {
  display: grid;
  gap: 10px;
}
.im-menu button {
  background: var(--im-paper);
  padding: 12px;
}
.im-sheet [data-status] {
  font-size: 11px;
  color: var(--im-muted);
  line-height: 1.8;
}
.im-account-qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 14px auto;
  padding: 16px;
  max-width: 280px;
  border: 1px solid var(--im-line);
  border-radius: 12px;
  background: var(--im-paper);
}
.im-account-qr img {
  display: block;
  width: min(68vw, 220px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}
.im-account-qr p { margin: 0; color: var(--im-muted); text-align: center; }
.im-player-art {
  display: grid;
  place-items: center;
  margin: 12px 0 24px;
}
.im-player-art .im-cover {
  width: 170px;
  height: 170px;
  border-radius: 30px;
  box-shadow: var(--sea-shadow, 0 16px 40px color-mix(in srgb, var(--im-theme-ink) 12%, transparent));
  font-size: 50px;
}
.im-centered {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}
.im-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 20px 0;
}
.im-player-controls button {
  min-width: 40px;
}
.im-player-controls [data-im-toggle] {
  background: var(--im-accent);
  color: var(--im-paper);
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.im-player-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
}
.im-player-actions button {
  font-size: 11px;
  padding: 8px 12px;
  background: var(--im-paper);
}
.im-sheet [data-im-seek] {
  width: 100%;
  accent-color: var(--im-accent);
}
#im-full-lyrics {
  min-height: 280px;
  max-height: min(58vh, 620px);
  overflow: auto;
  text-align: center;
  scroll-behavior: smooth;
  margin-top: 25px;
}
#im-full-lyrics button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 5px;
  font-size: 13px;
  line-height: 1.8;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--im-muted);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#im-full-lyrics .im-lyrics-hint { display:block; padding: 4px 10px 12px; font-size: 11px; color: var(--im-muted); text-align:center; opacity:.8; }
#im-full-lyrics .im-lyric-check { width: 22px; height: 22px; flex: 0 0 22px; display:grid; place-items:center; border:1px solid var(--im-line); border-radius:50%; font-size:12px; }
#im-full-lyrics .im-lyric-text { flex:1; min-width:0; }
#im-full-lyrics .im-lyric-row.is-selected { color: var(--im-ink); background: color-mix(in srgb, var(--im-accent) 15%, transparent); border-color: color-mix(in srgb, var(--im-accent) 48%, var(--im-line)); transform: translateY(-1px); }
#im-full-lyrics .im-lyric-row.is-selected .im-lyric-check { color: var(--im-paper); background: var(--im-accent); border-color: var(--im-accent); }
#im-full-lyrics .im-lyric-text small { display:block; margin-top:4px; color:var(--im-muted); font-size:11px; font-weight:400; }
#im-full-lyrics .is-current {
  color: var(--im-accent);
  font-weight: 600;
  font-size: 15px;
}
#im-together.im-locked { touch-action: none; }
#im-together.im-locked > * { pointer-events: none; }
#im-together.im-locked [data-im-pin] { pointer-events: auto; touch-action: none; }
.im-code {
  display: flex;
  gap: 8px;
}
.im-code input {
  width: 0;
  flex: 1;
}
.im-phone-login {
  padding-top: 15px;
  border-top: 1px solid var(--im-line);
}
.im-phone-login summary {
  font-size: 12px;
  padding: 12px;
  cursor: pointer;
}
#im-login-qr .oe-title {
  font-size: 15px;
}
#im-login-qr p {
  font-size: 11px;
  line-height: 1.8;
  color: var(--im-muted);
}
#im-login-qr button {
  background: var(--im-paper);
  padding: 10px 14px;
}
#im-login-qr img {
  display: block;
  width: 190px;
  max-width: 100%;
  border-radius: 20px;
  margin: 15px auto;
}
.is-music-card {
  padding: 0 !important;
  background: var(--sea-surface) !important;
  max-width: min(285px, 72vw) !important;
  overflow: hidden;
}
.im-chat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--sea-ink, #283b40);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.im-chat-card.im-lyrics-card { display:grid; grid-template-columns:56px 1fr auto; grid-template-areas:"cover meta action" "quote quote quote"; gap:10px; align-items:center; padding:12px; text-align:left; }
.im-lyrics-card .im-card-cover { grid-area:cover; }
.im-lyrics-card .im-card-meta { grid-area:meta; min-width:0; }
.im-lyrics-card .im-card-action { grid-area:action; }
.im-lyrics-card .im-card-quote { grid-area:quote; margin:2px 0 0; padding:12px 14px; border-left:3px solid var(--im-accent); border-radius:12px; background:color-mix(in srgb,var(--im-paper) 72%,transparent); color:var(--im-ink); line-height:1.75; white-space:normal; overflow-wrap:anywhere; }
.im-lyrics-card .im-card-quote small { display:block; margin-top:4px; color:var(--im-muted); }
.im-chat-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.im-chat-card b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-chat-card small,
.im-chat-card em {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  color: var(--sea-muted, #788889);
  font-style: normal;
  margin-top: 5px;
}
.im-chat-card .im-cover {
  width: 42px;
  height: 42px;
}
.im-chat-card > i {
  color: var(--sea-accent, #749b99);
}
#im-together {
  position: fixed;
  right: 14px;
  top: calc(100px + env(safe-area-inset-top));
  width: 235px;
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  z-index: 10020;
  --im-panel-alpha: .86;
  --im-avatar-alpha: 1;
  --im-text-alpha: 1;
  --im-lyrics-alpha: 1;
  --im-border-alpha: .75;
  border: 1px solid color-mix(in srgb, var(--im-line) calc(var(--im-border-alpha) * 100%), transparent);
  background: color-mix(
    in srgb,
    var(--im-paper) calc(var(--im-panel-alpha) * 100%),
    transparent
  );
  backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 10px 14px;
  box-shadow: var(--sea-shadow);
}
#im-together[data-size=medium] { width: min(360px, calc(100vw - 24px)); padding: 7px 12px; border-radius: 18px; }
#im-together[data-size=medium] .im-pair { display: none; }
#im-together[data-size=medium] .im-three { display: flex; gap: 8px; align-items: center; }
#im-together[data-size=medium] .im-three p { flex: 1; margin: 0; height: 18px; }
#im-together[data-size=mini] { width: 36px; height: 36px; padding: 2px; border-radius: 50%; overflow: hidden; }
#im-together[data-size=mini] .im-float-handle, #im-together[data-size=mini] .im-three, #im-together[data-size=mini] .im-float-actions { display: none; }
#im-together[data-size=mini] .im-pair { margin: 0; width: 100%; height: 100%; }
#im-together[data-size=mini] .im-pair svg { width: 20px; height: 20px; position: absolute; }
#im-together[data-size=mini] .im-person { width: 34px; height: 34px; margin-left: -14px; opacity: var(--im-avatar-alpha); }
.im-together-home { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--im-line) calc(var(--im-border-alpha) * 100%), transparent); border-radius: 18px; background: color-mix(in srgb, var(--im-paper) calc(var(--im-panel-alpha) * 100%), transparent); padding: 7px; color: color-mix(in srgb, var(--im-ink) calc(var(--im-text-alpha) * 100%), transparent); overflow: hidden; }
.im-together-home[hidden] { display: none; }
.im-together-home .im-pair { margin: 0; transform: scale(.78); }
.im-together-home .im-three p { margin: 1px 0; height: 14px; font-size: 9px; color: color-mix(in srgb, var(--im-muted) calc(var(--im-lyrics-alpha) * 100%), transparent); }
.im-together-home .im-float-actions { margin-top: 2px; }
.im-person { opacity: var(--im-avatar-alpha); }
.im-float-handle, .im-float-actions, .im-together-home { color: color-mix(in srgb, var(--im-ink) calc(var(--im-text-alpha) * 100%), transparent); }
.im-three { opacity: var(--im-lyrics-alpha); }
#im-together[hidden] {
  display: none !important;
}
.im-float-handle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  cursor: grab;
  touch-action: none;
  font-size: 9px;
  color: var(--im-muted);
}
.im-float-handle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-float-handle button {
  width: 28px;
  min-height: 28px !important;
}
.im-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 7px;
}
.im-person {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--im-bg);
  display: grid;
  place-items: center;
  border: 2px solid var(--im-paper);
  font-size: 12px;
}
.im-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-pair svg {
  width: 90px;
  height: 45px;
  fill: none;
  stroke: var(--im-accent);
  stroke-width: 1.4;
}
.im-three p {
  text-align: center;
  font-size: 10px;
  line-height: 1.6;
  margin: 6px 0;
  color: var(--im-muted);
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-three .is-current {
  font-size: 12px;
  color: var(--im-ink);
  height: 20px;
}
.im-float-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.im-float-actions input {
  min-width: 0;
  flex: 1;
  accent-color: var(--im-accent);
  height: 18px;
}
.im-float-actions button {
  min-height: 28px !important;
  width: 28px;
}
.home-widget[data-widget-type="instant_music"] {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.im-widget {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(8px, 2vw, 16px);
  border: 1px solid var(--im-line);
  border-radius: 24px;
  background: var(--im-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.im-widget-head {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--im-muted);
  white-space: nowrap;
}
.im-widget-head span {
  font-size: 9px;
  font-style: italic;
  letter-spacing: 0;
}
.im-widget .im-cover {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.im-widget .im-mini {
  gap: 4px;
}
.im-widget .im-mini > button:not(.im-mini-title) {
  width: 30px;
  min-height: 32px;
}
.im-widget .im-mini b {
  font-size: 11px;
}
.im-widget .im-mini small {
  font-size: 9px;
}
.im-widget .im-mini-title {
  padding: 2px;
}
#btn-func-music {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#instant-music-page.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#instant-music-page #im-content {
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
}
.im-wrap {
  width: 100%;
  box-sizing: border-box;
  flex: 1;
  padding-bottom: 30px;
}
.im-bottom {
  margin-top: 0;
  flex: none;
  width: 100%;
  background: var(--im-paper);
}
.im-icon {
  display: inline-grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.im-shortcuts .im-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--im-line);
  border-radius: 16px;
  color: var(--im-accent);
  background: var(--im-paper);
}
.im-companion > button .im-icon {
  font-size: 24px;
}
.im-widget .im-icon {
  font-size: 20px;
}
.im-empty > .im-icon {
  font-size: 32px;
  opacity: 0.5;
}
@media (max-width: 360px) {
  .im-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .im-options label {
    margin-left: 0;
  }
  .im-companion {
    padding: 18px;
  }
  .im-player-actions {
    gap: 4px;
  }
  .im-widget .im-cover {
    display: none;
  }
  .im-widget .im-mini > button:not(.im-mini-title) {
    width: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .im-mask *,
  .im-widget *,
  #instant-music-page *,
  #im-together * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.im-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
#btn-func-music .im-icon {
  width: 24px;
  height: 24px;
}
.im-shortcuts .im-icon {
  box-sizing: border-box;
  padding: 10px;
  width: 44px;
  height: 44px;
}

/* 一起听：桌面与浮层共用主题和轻量图标控件。 */
:is(#im-together, .im-together-home) button {
  appearance: none; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 30px;
  width: 30px; height: 30px; min-height: 30px !important;
  padding: 6px; margin: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; line-height: 1;
  box-shadow: none; cursor: pointer; touch-action: manipulation;
  transition: background .18s ease, transform .18s ease;
}
:is(#im-together, .im-together-home) button:active {
  transform: scale(.92); background: color-mix(in srgb, var(--im-accent) 12%, transparent);
}
:is(#im-together, .im-together-home) button:focus-visible { outline: 2px solid var(--im-accent); outline-offset: 2px; }
:is(#im-together, .im-together-home) button .im-icon { width: 18px; height: 18px; flex: none; }
.im-float-buttons { display: flex; align-items: center; gap: 2px; }
:is(#im-together, .im-together-home) .im-float-handle { min-width: 0; gap: 4px; color: inherit; }
:is(#im-together, .im-together-home) .im-float-handle > span { flex: 1; min-width: 0; font-size: 10px; letter-spacing: .03em; }
:is(#im-together, .im-together-home) .im-float-actions { color: inherit; }
:is(#im-together, .im-together-home) [data-im-toggle] {
  width: 34px; height: 34px; flex-basis: 34px;
  background: color-mix(in srgb, var(--im-accent) 10%, transparent);
}
:is(#im-together, .im-together-home) [aria-pressed=true] { color: var(--im-accent); }
.im-together-home {
  box-sizing: border-box; width: 100%; padding: 10px 14px; gap: 2px;
  border-radius: 24px; backdrop-filter: blur(14px);
  --im-panel-alpha: .86; --im-avatar-alpha: 1; --im-text-alpha: 1;
  --im-lyrics-alpha: 1; --im-border-alpha: .75;
}
.im-together-home .im-pair { transform: none; margin: 0; min-height: 42px; }
.im-together-home .im-person { width: 32px; height: 32px; }
.im-together-home .im-pair svg { width: 74px; height: 36px; }
.im-together-home .im-three p { height: 15px; line-height: 15px; font-size: 10px; margin: 2px 0; color: var(--im-muted); }
.im-together-home .im-three .is-current { font-size: 11px; color: var(--im-ink); }
.im-together-home .im-float-actions { gap: 14px; margin-top: 2px; }
#im-together[data-size=mini] .im-pair { position: relative; }
#im-together[data-size=mini] .im-person { position: absolute; top: 3px; left: 0; width: 24px; height: 24px; margin: 0; }
#im-together[data-size=mini] .im-person:last-child { left: 8px; }
#im-together[data-size=mini].im-locked .im-float-actions { display: contents; }
#im-together[data-size=mini].im-locked .im-float-actions > button:not([data-im-pin]) { display: none; }
#im-together[data-size=mini].im-locked [data-im-pin] { position: absolute; inset: 2px; background: var(--im-paper); z-index: 1; }

#im-together.im-pinned-away { visibility: hidden; pointer-events: none; }

#im-together { touch-action: none; }
#im-together { transition: width .18s ease, padding .18s ease, border-radius .18s ease; }
@media (prefers-reduced-motion: reduce) { #im-together { transition: none; } }
/* Music messages retain their app card surface across chat themes. */
#chat-detail-page .chat-msg-row .msg-card-shell.is-music-card {
  --im-paper: var(--sea-surface-strong, var(--sea-bg-secondary));
  --im-ink: var(--sea-ink); --im-muted: var(--sea-muted);
  --im-accent: var(--sea-accent); --im-line: var(--sea-border);
  box-sizing: border-box; position: relative; cursor: pointer;
  font-size: 16px; line-height: 1.5; overflow-wrap: anywhere;
  width: min(290px, 100%); max-width: 100% !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--im-line) !important; border-radius: 16px !important;
  background: var(--im-paper) !important; color: var(--im-ink) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; transform: none !important; text-shadow: none !important; overflow: hidden;
}
#chat-detail-page .msg-card-shell.is-music-card::before,
#chat-detail-page .msg-card-shell.is-music-card::after { display: none !important; }
#chat-detail-page .is-music-card .im-chat-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px;
  grid-template-areas: 'cover meta action' 'footer footer footer';
  gap: 12px; padding: 12px 12px 0; border-radius: inherit;
  color: var(--im-ink); background: var(--im-paper); line-height: 1.5; white-space: normal;
}
#chat-detail-page .is-music-card .im-card-cover { grid-area: cover; }
#chat-detail-page .is-music-card .im-cover { width: 64px; height: 64px; border-radius: 10px; }
#chat-detail-page .is-music-card .im-card-meta { grid-area: meta; min-width: 0; }
#chat-detail-page .is-music-card .im-card-action { grid-area: action; color: var(--im-accent); }
#chat-detail-page .is-music-card .im-card-action svg { width: 26px; height: 26px; }
#chat-detail-page .is-music-card b { font-size: 15px; font-weight: 600; }
#chat-detail-page .is-music-card small { font-size: 12px; color: var(--im-muted); }
#chat-detail-page .is-music-card .im-card-footer {
  grid-area: footer; display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 9px 0; border-top: 1px solid var(--im-line); color: var(--im-muted); font-size: 11px; text-align: left;
}
#chat-detail-page .is-music-card .im-card-footer svg { width: 14px; height: 14px; flex-shrink: 0; }
#chat-detail-page .is-music-card .im-card-footer span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#chat-detail-page .is-music-card .im-lyrics-card { grid-template-areas: 'cover meta action' 'quote quote quote'; padding-bottom: 12px; }
#chat-detail-page .is-music-card .im-card-quote { color: var(--im-ink); text-align: left; }

/* Playback stays uncluttered; lyric selection is an explicit mode. */
.im-lyrics-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 18px 0 8px; }
.im-sheet .im-lyrics-tools button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 10px 16px; border: 1px solid var(--im-line); border-radius: 14px;
  background: color-mix(in srgb, var(--im-accent) 10%, var(--im-paper)); color: var(--im-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--im-accent) 8%, transparent);
  transition: transform .15s ease, background .15s ease;
}
.im-sheet .im-lyrics-tools button:active { transform: scale(.96); }
.im-sheet .im-lyrics-tools button:disabled { opacity: .45; cursor: default; }
.im-sheet .im-lyrics-tools button[hidden] { display: none !important; }
.im-sheet .im-player-actions button, .im-sheet .im-lyrics-tools button { width: 37px; height: 37px; min-height: 37px; padding: 8px; flex: 0 0 37px; border-radius: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.im-sheet .im-player-actions .im-icon, .im-sheet .im-lyrics-tools .im-icon, .im-sheet [data-mode] .im-icon { width: 18px; height: 18px; }
.im-sheet .im-player-actions button:active, .im-sheet .im-lyrics-tools button:active, .im-sheet .im-player-controls button:active { transform: scale(.9); background: color-mix(in srgb, var(--im-accent) 24%, var(--im-paper)); color: var(--im-accent); }
.im-sheet .im-player-actions button.im-click-feedback, .im-sheet .im-lyrics-tools button.im-click-feedback, .im-sheet .im-player-controls button.im-click-feedback { background: color-mix(in srgb, var(--im-accent) 22%, var(--im-paper)); color: var(--im-accent); border-color: var(--im-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 18%, transparent); }
.im-sheet .im-player-actions button[aria-pressed="true"] { background: color-mix(in srgb, var(--im-accent) 26%, var(--im-paper)); color: var(--im-accent); border-color: var(--im-accent); }
.im-selection-count { position: absolute; top: -4px; right: -6px; min-width: 18px; padding: 1px 3px; border-radius: 10px; font-size: 10px; line-height: 16px; background: var(--im-paper); color: var(--im-ink); border: 1px solid var(--im-line); }
.im-sheet .im-lyrics-tools [data-share-selected-lyrics] { background: var(--im-accent); color: var(--im-paper); }
#im-full-lyrics { position: relative; overscroll-behavior: contain; }
#im-full-lyrics .im-lyric-row { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
#im-full-lyrics:not(.is-selecting) .im-lyric-check { display: none; }
#im-full-lyrics:not(.is-selecting) .im-lyric-row { text-align: center; justify-content: center; padding: 15px 10px; }
#im-full-lyrics.is-selecting { scroll-behavior: auto; }
#chat-detail-page .chat-msg-row .msg-card-shell.is-music-card:has(.im-lyrics-card) {
  border-radius: 16px !important; overflow: visible;
  background: transparent !important; border: 0 !important;
}
#chat-detail-page .is-music-card .im-lyrics-card {
  position: relative; padding: 22px 16px 18px;
  background: var(--im-note-paper, color-mix(in srgb, var(--im-accent) 12%, var(--im-paper)));
  border: 1px solid var(--im-line); border-radius: 16px !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--im-ink) 10%, transparent);
  grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 10px;
}
#chat-detail-page .is-music-card .im-lyrics-card::before {
  content: ''; position: absolute; width: 68px; height: 15px; top: -7px; left: calc(50% - 34px);
  background: color-mix(in srgb, var(--im-accent) 28%, var(--im-paper)); opacity: .85;
  border: 1px solid var(--im-line); transform: rotate(-3deg); border-radius: 2px; pointer-events: none;
}
#chat-detail-page .is-music-card .im-lyrics-card .im-cover { width: 42px; height: 42px; border-radius: 8px; }
#chat-detail-page .is-music-card .im-lyrics-card .im-card-quote {
  padding: 12px 0 0; border: 0; border-top: 1px dashed var(--im-line); border-radius: 0;
  background: transparent; font-size: 14px; line-height: 1.9;
}
#chat-detail-page .is-music-card .im-card-quote > span { display: block; margin: 5px 0; }
@media (prefers-reduced-motion: reduce) { .im-sheet .im-lyrics-tools button { transition: none; } }

/* Keep the music app's controls and content independent from phone top and bottom art. */
#instant-music-page{--im-clean-border:var(--sea-border,#bac9ed);--im-clean-ink:var(--sea-ink,#354571)}
#instant-music-top{border-image:none!important;border:1px solid var(--im-clean-border)!important;border-radius:14px!important;background:rgba(246,248,255,.96)!important;box-shadow:none!important}
#instant-music-top::before,#instant-music-top::after{content:none!important;display:none!important}
#instant-music-page .im-search,#instant-music-page .im-search select,#instant-music-page .im-search input,#instant-music-page .im-search button{border-image:none!important;box-shadow:none!important;background-image:none!important}
#instant-music-page :is(.im-quick,.im-primary,.im-list-button,.im-tabs button,.im-player-controls button,.im-player-quick-actions button,.im-float-actions button,.im-mini button){border-image:none!important;background-image:none!important;box-shadow:none!important;border:1px solid var(--im-clean-border)!important;border-radius:14px!important}
#instant-music-page :is(.im-mini-player,.im-player-bar,.im-bottom-player){background-image:none!important;border-image:none!important;box-shadow:none!important;border-top:1px solid var(--im-clean-border)!important}
.im-provider-picker{display:none}.im-provider-menu[hidden]{display:none!important}

.im-mini :is([data-im-mode],[data-im-shuffle]) {display:grid;place-items:center;flex:0 0 30px;width:30px;min-width:30px;height:36px;padding:0}
.im-mini :is([data-im-mode],[data-im-shuffle]) .im-icon {width:24px;height:24px}
.im-player-controls [data-im-shuffle]{display:grid;place-items:center}
.im-player-controls [data-im-shuffle] .im-icon{width:20px;height:20px}
.im-player-controls [data-im-shuffle][aria-pressed=true],.im-mini [aria-pressed=true]{filter:drop-shadow(0 0 5px var(--im-accent))}
