/* 设计系统：系统字体与苹方，纯白主画布，阿里蓝主操作、日落橙点缀；8px 间距。
   单一主操作、渐进展开、作品详情、持续播放。 */
:root {
  --ink:#242424;
  --blue:#1677ff;
  --blue-deep:#0a48c7;
  --blue-soft:#eaf1ff;
  --orange:#ff7a00;
  --orange-soft:#fff0e9;
  --muted:#737373;
  --line:#e9e9e9;
  --soft:#f7f7f7;
  --green:#1677ff;
  --sidebar:224px;
  --shadow:0 8px 36px #20202007,0 1px 4px #20202005}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased}
button,input,textarea,select {
  font:inherit;
  color:inherit}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer;
  border:0;
  background:none}
button:disabled {
  cursor:not-allowed;
  opacity:.4}
a {
  color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #8eacdf;
  outline-offset:3px}
input:focus,textarea:focus,select:focus {
  outline:0}
input:focus-visible,select:focus-visible {
  box-shadow:0 0 0 3px #dbe9ff}
svg {
  width:20px;
  height:20px;
  flex-shrink:0;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  vertical-align:middle}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:32px;
  letter-spacing:-1px;
  font-weight:600;
  line-height:1.4}
h2 {
  font-size:20px;
  letter-spacing:-.4px;
  font-weight:600}
h3 {
  font-size:15px;
  font-weight:600}
small,.muted {
  color:var(--muted)}
[hidden] {
  display:none!important}
.icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%}
.icon:hover {
  background:#ededed}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 17px;
  border-radius:24px;
  font-weight:500;
  white-space:nowrap}
.primary {
  background:var(--blue);
  color:#fff}
.primary:hover {
  background:var(--blue-deep)}
.secondary {
  background:var(--soft);
  border:1px solid var(--line)}
.textbtn {
  color:var(--muted);
  font-size:13px;
  padding:8px 0;
  min-height:40px}
.textbtn:hover {
  color:var(--ink)}
.row {
  display:flex;
  align-items:center;
  gap:12px}
.spread {
  justify-content:space-between}
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 10px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap}
.dot {
  width:5px;
  height:5px;
  background:#ff7a00;
  border-radius:50%;
  display:inline-block}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  padding:28px 16px 18px;
  background:#fff;
  border-right:1px solid #ededed;
  z-index:40;
  display:flex;
  flex-direction:column}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 10px 34px}
.brand-mark {
  height:34px;
  width:34px;
  border-radius:11px;
  background:#1677ff;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center}
.brand-name {
  font-weight:650;
  font-size:16px;
  letter-spacing:-.4px}
.brand small {
  display:block;
  font-size:10px;
  letter-spacing:1.8px;
  margin-top:1px}
.nav-btn {
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  min-height:44px;
  padding:0 13px;
  border-radius:9px;
  color:#666666;
  margin-bottom:5px}
.nav-btn.active {
  background:#eaf1ff;
  color:#0a48c7}
.nav-btn:hover {
  background:#f7f7f7}
.nav-btn .count {
  margin-left:auto;
  font-size:11px;
  background:#fff9;
  padding:1px 6px;
  border-radius:5px}
.side-section {
  padding:28px 13px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.5px;
  color:#8a8a8a}
.side-track {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  width:100%;
  padding:7px 13px;
  font-size:12px;
  color:#707070;
  text-align:left;
  border-radius:8px}
.side-track:hover {
  background:#eaf1ff}
.side-track svg {
  width:15px;
  height:15px}
.side-track span {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis}
.side-bottom {
  margin-top:auto}
.account {
  border-top:1px solid #ededed;
  padding:18px 7px 0;
  margin-top:12px}
.avatar {
  width:31px;
  height:31px;
  border:1px solid #d9d9d9;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:12px}
.account-copy {
  flex:1}
.account-copy strong {
  font-size:12px;
  font-weight:500;
  display:block}
.account-copy small {
  font-size:10px}
.main {
  margin-left:var(--sidebar);
  padding-bottom:60px}
.topbar {
  height:83px;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:13px;
  color:var(--muted)}
.breadcrumb span:last-child {
  color:var(--ink)}
.breadcrumb > svg {
  width:12px;
  height:12px;
  color:#a3a3a3}
.top-actions {
  display:flex;
  align-items:center;
  gap:14px}
.top-actions .textbtn {
  font-size:12px}
.content {
  width:min(790px,calc(100% - 100px));
  margin:0 auto}
.intro {
  text-align:center;
  padding-top:38px;
  margin-bottom:30px}
.soundmark {
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-bottom:22px}
.soundmark i {
  display:block;
  width:4px;
  background:#1677ff;
  border-radius:3px;
  height:11px}
.soundmark i:nth-child(2),.soundmark i:nth-child(6) {
  height:21px}
.soundmark i:nth-child(3),.soundmark i:nth-child(5) {
  height:31px}
.soundmark i:nth-child(4) {
  height:39px;
  background:var(--orange)}
.intro p {
  color:#737373;
  margin-top:10px;
  font-size:14px;
  letter-spacing:.15px}
.composer {
  border:1px solid #dedede;
  border-radius:22px;
  box-shadow:var(--shadow);
  background:white;
  overflow:visible}
.composer:focus-within {
  border-color:#96bdff;
  box-shadow:0 8px 36px #20202008,0 0 0 3px #eaf1ff}
.composer-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 21px 0}
.segmented {
  display:inline-flex;
  padding:3px;
  background:#f7f7f7;
  border-radius:10px;
  gap:2px}
.segmented button {
  font-size:12px;
  min-height:31px;
  padding:0 13px;
  border-radius:7px;
  color:#737373}
.segmented button[aria-selected=true] {
  background:white;
  color:#0a48c7;
  box-shadow:0 1px 3px #1a1a1a10}
.model-select {
  font-size:12px;
  color:#737373;
  background:none;
  border:0;
  padding:9px;
  max-width:140px;
  cursor:pointer}
.prompt-area {
  padding:20px 26px 9px}
textarea {
  resize:vertical;
  width:100%;
  border:0;
  background:transparent;
  line-height:1.85;
  font-size:15px;
  min-height:114px;
  padding:0}
textarea::placeholder {
  color:#858585}
.prompt-label {
  display:block;
  font-size:12px;
  margin-bottom:10px;
  color:var(--muted)}
.custom-title {
  width:100%;
  font-size:20px;
  border:0;
  border-bottom:1px solid var(--line);
  padding:0 0 12px;
  margin-bottom:15px;
  line-height:1.5}
.custom-title::placeholder {
  color:#aaa}
.custom-lyrics {
  min-height:165px;
  font-size:14px}
.style-input {
  border:0;
  border-top:1px solid var(--line);
  padding:14px 0 7px;
  width:100%;
  font-size:13px}
.composer-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 17px 17px;
  gap:12px}
.compose-options {
  display:flex;
  gap:3px;
  align-items:center}
.option-btn {
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  min-height:38px;
  font-size:12px;
  color:#737373;
  white-space:nowrap}
.option-btn:hover,.option-btn[aria-pressed=true] {
  background:#eaf1ff;
  color:#0a48c7}
.option-btn svg {
  height:16px;
  width:16px}
.composer-foot .primary {
  min-height:41px;
  font-size:13px}
.composer-foot .primary svg {
  width:16px;
  height:16px}
.settings-panel {
  border-top:1px solid var(--line);
  padding:18px 25px;
  background:#fafafa;
  border-radius:0 0 22px 22px}
.field label {
  display:block;
  font-size:12px;
  margin-bottom:7px;
  color:#525252}
.field input,.field select,.field textarea {
  width:100%;
  background:#fff;
  border:1px solid #dedede;
  border-radius:9px;
  padding:10px 12px;
  min-height:42px;
  font-size:13px}
.field textarea {
  min-height:100px}
.settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.settings-note {
  font-size:11px;
  color:var(--muted);
  margin-top:12px}
.error {
  font-size:12px;
  color:#b84c3d;
  padding:0 26px 13px}
.under-composer {
  display:flex;
  justify-content:space-between;
  padding:11px 6px;
  color:#737373;
  font-size:11px}
.under-composer button {
  font-size:11px;
  color:#737373;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px}
.suggestions {
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin:17px 0 32px}
.suggestion {
  min-height:35px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:0 14px;
  font-size:12px;
  color:#737373;
  display:flex;
  align-items:center;
  gap:7px}
.suggestion:hover {
  background:#f5f8ff;
  border-color:#b7d2ff}
.suggestion svg {
  height:14px;
  width:14px;
  color:var(--orange)}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 0 12px}
.section-title h2 {
  font-size:14px;
  letter-spacing:0;
  font-weight:550}
.section-title .textbtn {
  font-size:12px}
.track-list {
  border-top:1px solid var(--line)}
.track-row {
  display:flex;
  align-items:center;
  gap:15px;
  min-height:82px;
  padding:12px 6px;
  border-bottom:1px solid #f0f0f0;
  border-radius:4px}
.track-row:hover {
  background:#fafafa}
.cover {
  position:relative;
  flex-shrink:0;
  width:47px;
  height:47px;
  border-radius:8px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#f1f3f6;
  color:#1677ff}
.cover svg {
  width:23px;
  height:23px}
.cover.ochre {
  background:#fff0e9;
  color:#b45309}
.cover.blue {
  background:#eaf1ff;
  color:#1677ff}
.cover.pink {
  background:#fff0e9;
  color:#d55f00}
.cover .album-lines {
  position:absolute;
  inset:7px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.16}
.track-copy {
  flex:1;
  min-width:0;
  text-align:left;
  padding:0;
  min-height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center}
.track-title {
  font-size:14px;
  font-weight:550;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%}
.track-desc {
  font-size:12px;
  color:#737373;
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%}
.track-time {
  font-variant-numeric:tabular-nums;
  font-size:11px;
  color:#858585;
  width:40px;
  text-align:center}
.track-actions {
  display:flex;
  gap:2px}
.track-actions .icon {
  height:36px;
  width:36px;
  color:#737373}
.track-actions svg {
  width:17px;
  height:17px}
.track-actions .favorite[aria-pressed=true] {
  color:#ff7a00}
.track-actions .favorite[aria-pressed=true] svg {
  fill:#ff7a0022}
.play-cover {
  border-radius:8px;
  padding:0}
.play-cover:hover .cover {
  filter:brightness(.94)}
.generation-card {
  margin-bottom:24px;
  border:1px solid #d9e6ff;
  background:#f7faff;
  border-radius:15px;
  padding:19px 21px}
.generation-card p {
  font-size:12px;
  color:#737373;
  margin-top:5px}
.status-line {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:550}
.loader {
  width:14px;
  height:14px;
  border:1.7px solid #d9e6ff;
  border-top-color:#1677ff;
  border-radius:50%;
  animation:spin 1s linear infinite}
.progress {
  height:3px;
  background:#eaf1ff;
  border-radius:5px;
  margin-top:17px;
  overflow:hidden}
.progress i {
  display:block;
  height:100%;
  width:20%;
  background:#1677ff;
  transition:width 1.3s}
.generation-card.failed {
  background:#fcf6f3;
  border-color:#eedcd4}
.library-page {
  padding-top:35px}
.page-description {
  font-size:13px;
  color:var(--muted);
  margin-top:8px}
.library-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:29px 0 16px;
  gap:15px}
.tabs {
  display:flex;
  gap:6px}
.tabs button {
  padding:9px 14px;
  min-height:38px;
  font-size:12px;
  border-radius:20px;
  color:#737373}
.tabs button[aria-selected=true] {
  background:#eaf1ff;
  color:#0a48c7}
.search {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:20px;
  min-width:0;
  width:200px;
  padding:0 12px;
  min-height:37px}
.search svg {
  width:15px;
  height:15px;
  color:#aaa}
.search input {
  border:0;
  min-width:0;
  width:100%;
  font-size:12px;
  background:none}
.empty {
  text-align:center;
  color:var(--muted);
  padding:70px 20px}
.empty svg {
  width:32px;
  height:32px;
  color:#b5b5b5;
  margin-bottom:17px}
.empty h3 {
  color:#525252;
  margin-bottom:8px}
.empty p {
  font-size:12px}
.empty button {
  margin-top:22px}
.prototype-note {
  font-size:11px;
  text-align:center;
  color:#858585;
  margin:22px 0}
.player {
  position:fixed;
  bottom:20px;
  left:calc(var(--sidebar) + 28px);
  right:28px;
  z-index:45;
  border:1px solid #dedede;
  background:#fffffff2;
  backdrop-filter:blur(24px);
  border-radius:18px;
  box-shadow:0 8px 36px #2424240b;
  padding:13px 19px;
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(220px,1.3fr) minmax(135px,1fr);
  align-items:center;
  gap:20px}
.player-name {
  font-size:12px;
  font-weight:550;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis}
.player-meta {
  font-size:10px;
  color:#737373;
  margin-top:4px}
.player .cover {
  width:42px;
  height:42px}
.player-controls {
  display:flex;
  align-items:center;
  gap:14px}
.player-controls>.icon {
  background:#1677ff;
  color:#fff;
  width:35px;
  height:35px}
.player-controls>.icon svg {
  width:16px;
  height:16px}
.seek-wrap {
  flex:1}
.timecodes {
  display:flex;
  justify-content:space-between;
  color:#858585;
  font-size:9px;
  font-variant-numeric:tabular-nums;
  margin-top:4px}
.seek {
  display:block;
  width:100%;
  height:3px;
  accent-color:#1677ff;
  cursor:pointer}
.player-right {
  justify-content:flex-end;
  gap:8px}
.player-right .icon {
  height:32px;
  width:32px}
.player-right svg {
  width:16px;
  height:16px}
.volume {
  width:60px;
  height:3px;
  accent-color:#1677ff}
.has-player .main {
  padding-bottom:150px}
.toast {
  position:fixed;
  bottom:116px;
  left:calc(50% + var(--sidebar)/2);
  transform:translateX(-50%);
  padding:11px 19px;
  background:#242424f2;
  color:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  font-size:12px;
  z-index:100;
  max-width:90vw}
.mobile-menu {
  display:none}
.mobile-backdrop {
  position:fixed;
  inset:0;
  background:#2224;
  z-index:39}
dialog {
  padding:0;
  border:1px solid #e5e5e5;
  border-radius:22px;
  background:#fff;
  color:var(--ink);
  width:min(480px,calc(100vw - 32px));
  box-shadow:0 24px 90px #0002}
dialog::backdrop {
  background:#24242438;
  backdrop-filter:blur(3px)}
.dialog-inner {
  padding:27px}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px}
.dialog-head h2 {
  font-size:20px}
.dialog-head .icon {
  margin-right:-10px}
.dialog-inner>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:21px}
.dialog-inner .field {
  margin-bottom:16px}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:22px}
.drawer {
  position:fixed;
  max-width:100vw;
  inset:0 0 0 auto;
  margin:0;
  border-radius:0;
  width:390px;
  max-height:none;
  height:100dvh;
  border:0;
  border-left:1px solid var(--line);
  padding:26px 29px 120px;
  overflow:auto}
.drawer .cover {
  height:220px;
  width:100%;
  border-radius:14px;
  margin:18px 0 22px}
.drawer .cover svg {
  height:70px;
  width:70px;
  stroke-width:1}
.drawer .album-lines {
  inset:25px 55px;
  border-width:2px}
.drawer .track-desc {
  margin-top:8px}
.detail-actions {
  display:flex;
  gap:9px;
  margin:20px 0 25px}
.detail-block {
  border-top:1px solid var(--line);
  padding:20px 0}
.detail-block label {
  font-size:12px;
  font-weight:550;
  display:block;
  margin-bottom:11px}
.detail-block p {
  font-size:13px;
  color:#666666;
  white-space:pre-wrap;
  line-height:1.8;
  word-break:break-word}
.detail-info {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  font-size:12px}
.detail-info small {
  display:block;
  margin-bottom:5px;
  font-size:11px}
.detail-block .textbtn {
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  padding:10px 0;
  font-size:12px}
.detail-block .textbtn svg {
  height:15px;
  width:15px}
.detail-block details summary {
  font-size:12px;
  cursor:pointer;
  min-height:32px}
.task-id {
  font-size:10px;
  color:#858585;
  margin-top:14px;
  overflow-wrap:anywhere}
.state-choice {
  display:flex;
  gap:8px;
  margin:10px 0 18px}
.state-choice button {
  flex:1;
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px;
  font-size:12px}
.state-choice button[aria-pressed=true] {
  border-color:#1677ff;
  background:#eaf1ff}
.design-points {
  padding:0;
  list-style:none;
  margin:0 0 20px}
.design-points li {
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:13px}
.design-points small {
  display:block;
  font-size:12px;
  margin-top:5px}
.source-links {
  font-size:11px;
  line-height:1.8;
  color:#737373}
.source-links a {
  text-underline-offset:3px}
.saved-indicator {
  height:15px}
.switch {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted)}
.switch input {
  accent-color:#1677ff;
  width:16px;
  height:16px}
.fade-in {
  animation:fadeIn .2s ease-out}
@keyframes spin {
  to {
  transform:rotate(360deg)}
}
@keyframes fadeIn {
  from {
  opacity:0;
  transform:translateY(5px)}
to {
  opacity:1;
  transform:translateY(0)}
}

@media(min-width:1600px) {
  .intro {
  padding-top:90px}
.suggestions {
  margin-bottom:66px}
.content {
  width:850px}
}

@media(max-width:1100px) {
  :root {
  --sidebar:200px}
.content {
  width:calc(100% - 70px)}
.topbar {
  padding:0 30px}
.intro {
  padding-top:42px}
.player {
  grid-template-columns:1fr 1.3fr}
.player-right {
  display:none}
}

@media(max-width:760px) {
  :root {
  --sidebar:0px}
.sidebar {
  width:254px;
  transform:translateX(-100%);
  transition:transform .22s}
.sidebar.open {
  transform:translateX(0)}
.mobile-menu {
  display:inline-flex}
.main {
  margin:0}
.topbar {
  padding:0 17px;
  height:69px}
.top-actions {
  gap:9px}
.top-actions .textbtn {
  display:none}
.breadcrumb {
  gap:6px}
.content {
  width:calc(100% - 36px)}
.intro {
  padding-top:43px;
  margin-bottom:25px}
h1 {
  font-size:27px;
  letter-spacing:-.7px}
.intro p {
  font-size:12px}
.soundmark {
  margin-bottom:19px}
.composer-head {
  padding:15px 14px 0}
.segmented button {
  padding:0 10px;
  min-height:44px}
.model-select {
  font-size:11px;
  padding:10px 0;
  max-width:100px}
.prompt-area {
  padding:22px 19px 8px}
textarea {
  font-size:14px;
  min-height:140px}
.composer-foot {
  padding:7px 10px 13px;
  gap:3px;
  flex-wrap:wrap}
.option-btn {
  min-height:44px;
  font-size:11px;
  padding:0 7px;
  gap:4px}
.composer-foot .primary {
  min-height:44px;
  font-size:12px;
  padding:0 13px}
.settings-grid {
  grid-template-columns:1fr}
.settings-panel {
  padding:18px}
.under-composer {
  font-size:10px;
  padding:11px 4px}
.suggestions {
  gap:7px;
  margin:13px 0 36px}
.suggestion {
  font-size:11px;
  padding:0 10px;
  min-height:44px}
.track-row {
  gap:12px;
  padding:12px 2px;
  min-height:81px}
.track-time {
  display:none}
.track-actions {
  gap:0}
.track-actions .icon {
  height:44px;
  width:38px}
.track-title {
  font-size:13px}
.track-desc {
  font-size:11px}
.cover {
  width:43px;
  height:43px}
.track-actions .favorite {
  display:none}
.player {
  bottom:12px;
  left:10px;
  right:10px;
  padding:12px 14px;
  gap:10px;
  grid-template-columns:minmax(0,1fr) 125px;
  border-radius:15px}
.player .cover {
  width:36px;
  height:36px}
.player .row {
  gap:8px}
.player-controls {
  gap:10px}
.player-controls>.icon {
  height:40px;
  width:40px}
.player-info {
  min-width:0}
.player-name {
  font-size:11px}
.player-meta {
  font-size:9px}
.timecodes {
  font-size:8px}
.player .close-player {
  display:none}
.toast {
  left:50%;
  width:max-content;
  max-width:calc(100% - 30px);
  bottom:104px;
  text-align:center}
.library-page {
  padding-top:27px}
.library-toolbar {
  flex-wrap:wrap;
  gap:12px}
.search {
  width:100%}
.tabs button {
  min-height:44px}
.drawer {
  width:100vw;
  padding:20px 24px 110px}
.drawer .cover {
  height:200px}
.library-header {
  align-items:flex-start}
.library-header h1 {
  font-size:26px}
.library-header .btn {
  font-size:11px;
  min-height:40px;
  padding:0 10px}
.dialog-inner {
  padding:22px}
.icon {
  min-height:44px;
  min-width:44px}
.has-player .main {
  padding-bottom:135px}
.prototype-note {
  font-size:10px}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}


/* V2：与官网统一纯白底色，阿里蓝负责操作，日落橙仅点缀。 */
::selection {
  background:var(--blue-soft);
  color:var(--blue-deep)}

.pill .dot {
  background:var(--orange)}

.work-identity {
  margin:18px 0 10px;
  border-top:1px solid var(--line);
  padding-top:16px}

.identity-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  margin:0 0 8px}

.identity-label small {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap}

.identity-code {
  display:block;
  font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#666;
  overflow-wrap:anywhere;
  user-select:all;
  margin:6px 0 10px}

.identity-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap}

.identity-actions .btn {
  min-height:34px;
  padding:0 11px;
  font-size:11px;
  border-radius:8px}

.identity-actions .btn svg {
  width:14px;
  height:14px}

.identity-actions .official-link {
  color:var(--blue-deep);
  background:var(--blue-soft);
  border:1px solid transparent;
  text-decoration:none}

.clip-version {
  border-bottom:1px solid var(--line);
  padding:12px 0 15px}

.clip-version:last-child {
  border:0;
  padding-bottom:0}

.clip-version .identity-label .textbtn {
  width:auto;
  color:var(--blue-deep);
  font-size:12px;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:0}

.clip-version .identity-label .textbtn svg {
  height:14px;
  width:14px}

.detail-block .clip-note {
  font-size:11px;
  line-height:1.6;
  margin-top:12px;
  color:var(--muted)}

.id-query-entry {
  margin:7px 0 0;
  min-height:32px;
  font-size:12px;
  color:var(--blue-deep);
  display:inline-flex;
  align-items:center;
  gap:5px}

.id-query-entry svg {
  width:13px;
  height:13px}

#restoreStatus a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--blue-soft);
  color:var(--blue-deep);
  padding:9px 12px;
  border-radius:8px;
  text-decoration:none;
  margin-top:10px}

@media(max-width:760px) {
  .identity-actions .btn,.clip-version .identity-label .textbtn,.id-query-entry {
  min-height:44px}
}


/* 正式运行态：媒体面板、额度、任务反馈与移动端统一操作。 */
.brand {
  text-decoration:none}

.brand:focus-visible {
  border-radius:12px}

.sidebar .side-bottom {
  padding-top:14px}

.top-actions #refreshHealth {
  width:30px;
  height:30px;
  min-width:30px}

#healthBadge {
  font-size:11px;
  color:var(--muted)}

#healthBadge[data-state="ready"] {
  color:#157a58}

#healthBadge[data-state="error"] {
  color:#b8342d}

.header-health {
  display:flex;
  align-items:center;
  gap:5px}

.prototype-note:empty {
  display:none}

.account-copy a {
  font-size:11px;
  text-decoration:none;
  color:var(--muted)}

.quota-summary {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  max-width:64%;
  text-align:right}

#experienceNote {
  font-size:11px}

#experienceField[hidden] {
  display:none}

#experienceMode {
  display:inline-flex;
  font-size:12px;
  padding:4px 8px;
  background:var(--blue-soft);
  color:var(--blue-deep);
  border-radius:8px;
  margin-bottom:14px}

#quotaHint {
  line-height:1.8;
  font-size:13px;
  color:var(--muted)}

.help-copy p {
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
  margin:14px 0}

.help-copy h3 {
  margin-top:20px}

.form-meta-note {
  font-size:11px;
  color:var(--muted)}

.status-error,.failed .status-line {
  color:#b8342d}

.query-result {
  padding:10px 0;
  border-top:1px solid var(--line);
  overflow-wrap:anywhere;
  font-size:12px}

#restoreStatus {
  max-height:300px;
  overflow:auto;
  overflow-wrap:anywhere}

#restoreStatus:empty {
  display:none}

#exportResultLinks {
  display:grid;
  gap:10px;
  margin-top:14px}

#exportResultLinks a {
  color:var(--blue-deep);
  overflow-wrap:anywhere}

#operationResult {
  padding:14px;
  background:var(--soft);
  border-radius:10px;
  font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;
  overflow:auto;
  max-height:260px}

#operationResult:empty {
  display:none}

#exportDownload {
  margin-top:14px;
  text-decoration:none}

.clip-cover {
  object-fit:cover;
  max-width:100%;
  height:100%}

.cover img {
  width:100%;
  height:100%;
  object-fit:cover}

.detail-block audio,.detail-block video {
  max-width:100%}

.player {
  grid-template-columns:minmax(150px,1fr) minmax(220px,1.5fr) 40px}

.player-options {
  position:relative}

.player-options summary {
  list-style:none;
  cursor:pointer}

.player-options summary::-webkit-details-marker {
  display:none}

.player-options[open] summary {
  background:var(--blue-soft);
  color:var(--blue-deep)}

.player-options-panel {
  position:absolute;
  right:0;
  bottom:53px;
  width:248px;
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 8px 36px #24242416;
  display:grid;
  gap:9px}

.player-options-panel>label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 5px;
  min-height:36px;
  font-size:12px}

.player-options-panel select {
  padding:5px 9px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:8px}

.player-options-panel .volume {
  width:120px}

.player-options-panel button {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  font-size:12px;
  text-align:left;
  padding:0 10px;
  border-radius:8px}

.player-options-panel button:hover {
  background:var(--soft)}

.player-options-panel button[aria-pressed=true] {
  background:var(--blue-soft);
  color:var(--blue-deep)}

.player-options-panel svg {
  width:16px;
  height:16px}

.player:fullscreen {
  inset:0;
  width:100vw;
  height:100vh;
  padding:10vh 10vw;
  border:0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:50px;
  background:#fff}

.player:fullscreen>.row {
  flex-direction:column;
  gap:20px}

.player:fullscreen .cover {
  width:180px;
  height:180px;
  border-radius:22px}

.player:fullscreen .cover svg {
  width:80px;
  height:80px}

.player:fullscreen .player-name {
  font-size:25px;
  text-align:center}

.player:fullscreen .player-meta {
  text-align:center}

.player:fullscreen .player-controls {
  width:min(760px,100%);
  gap:26px}

.player:fullscreen .player-controls>.icon {
  width:60px;
  height:60px}

.player:fullscreen .player-options {
  position:absolute;
  right:36px;
  top:30px}

.player:fullscreen .player-options-panel {
  top:50px;
  bottom:auto}

@media(max-width:1100px) {
  .player {
  grid-template-columns:minmax(140px,1fr) minmax(180px,1.2fr) 40px}
}

@media(max-width:760px) {
  .header-health {
  display:none}
.player {
  grid-template-columns:minmax(0,1fr) 104px 36px;
  gap:7px}
.player-options summary {
  width:36px;
  height:40px;
  min-width:36px}
.player-controls {
  gap:8px}
.player-controls>.icon {
  min-width:36px;
  width:36px;
  min-height:40px}
.player-options-panel {
  right:-5px;
  bottom:53px}
.player-options-panel button {
  min-height:44px}
.player-options-panel label {
  min-height:44px}
.quota-summary {
  max-width:59%}
#experienceNote {
  font-size:10px}
.top-actions {
  gap:6px}
.under-composer {
  gap:10px;
  align-items:flex-start}
}