:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f1eb; color: #22201d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #fff8e9 0, transparent 38%), #f4f1eb; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0; display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
.panel { background: rgba(255,255,255,.78); border: 1px solid #e4dfd5; border-radius: 8px; padding: 30px; box-shadow: 0 16px 42px rgba(60, 49, 35, .08); }
.login-panel { text-align: left; align-self: start; position: sticky; top: 24px; }
.eyebrow { margin: 0 0 16px; color: #b45137; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
h1, h2 { margin: 0 0 10px; font-weight: 700; letter-spacing: 0; }
h1 { font-size: 24px; } h2 { font-size: 28px; }
.side-now-playing { display: block; margin: 24px 0 18px; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.muted, .message { color: #81796f; font-size: 14px; line-height: 1.6; }
.qr { display: block; width: 210px; height: 210px; margin: 24px auto 18px; object-fit: contain; background: #fff; }
button { border: 0; border-radius: 5px; padding: 13px 17px; background: #bd4935; color: #fff; font-weight: 700; cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .5; }
.secondary { background: #ede8df; color: #514a42; }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.source-grid label { color: #81796f; font-size: 12px; }
select.source-select {
  width: 100%;
  border: 1px solid #d8d0c5;
  border-radius: 5px;
  background: #fff;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  margin-bottom: 10px;
  appearance: auto;
}
select.source-select:focus { border-color: #bd4935; }
.search-form { display: flex; gap: 10px; margin: 16px 0 12px; }
input { min-width: 0; flex: 1; border: 1px solid #d8d0c5; border-radius: 5px; background: #fff; padding: 13px 14px; font-size: 15px; outline: none; }
input:focus { border-color: #bd4935; }
.message { min-height: 23px; margin: 0 0 12px; }
.results { display: grid; gap: 8px; }
.song { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; background: #faf8f4; color: #2b2722; border: 1px solid #e6e0d7; }
.song:hover { border-color: #bd4935; }
.song-info { min-width: 0; } .song-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .song-meta { display: block; margin-top: 4px; color: #91877c; font-size: 12px; font-weight: 400; }
.now-playing { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding: 16px 0 12px; border-top: 1px solid #e5ded4; color: #8b8176; font-size: 13px; }
.now-playing strong { color: #27221e; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
audio { width: 100%; }
@media (max-width: 700px) { .shell { grid-template-columns: 1fr; padding: 24px 0 40px; } .login-panel { position: static; padding: 24px; } h2 { font-size: 24px; } .source-grid { grid-template-columns: 1fr; } .search-form { flex-direction: column; } .search-form button { width: 100%; } }