/* 按钮、选择框、卡片、表格、标签页、提示来自界面 SDK（/developer/sdk/v1/ui.css）；这里只写这个应用的版面。 */

.wm { max-width: 90rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.wm-intro { max-width: 52rem; margin-bottom: 1.25rem; }
.wm-kicker { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--signal); }
.wm-intro h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.2; letter-spacing: -0.02em; }
.wm-intro p { margin: 0; line-height: 1.6; }
.wm-h { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); }

.wm-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; }

/* 世界列表 */
.wm-world-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wm-world { display: flex; gap: 0.625rem; align-items: center; width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.wm-world:hover { border-color: var(--foreground); }
.wm-world.is-active { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.wm-world img, .wm-thumb-empty { width: 4.5rem; height: 3rem; flex: none; border-radius: var(--radius); object-fit: cover; background: var(--muted); }
.wm-world__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.wm-world__title { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-world__meta { font-size: 0.75rem; color: var(--muted-foreground); }

/* 查看器 */
.wm-stage { position: relative; height: min(68vh, 40rem); min-height: 22rem; border-radius: calc(var(--radius) + 6px); overflow: hidden; background: #0d0f0e; }
.wm-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(13, 15, 14, 0.72); color: #fff; }
.wm-overlay[hidden] { display: none; }
.wm-overlay .aidc-loader { color: #fff; }
.wm-live { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.25rem 0.5rem; border-radius: var(--radius); background: rgba(10, 10, 10, 0.6); color: #fff; font-size: 0.6875rem; letter-spacing: 0.04em; pointer-events: none; }
.wm-message { display: flex; flex-direction: column; gap: 0.375rem; max-width: 26rem; padding: 1rem 1.25rem; text-align: center; line-height: 1.5; }
.wm-message span { font-size: 0.8125rem; opacity: 0.8; }
.wm-fallback { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 90%; }
.wm-fallback img { max-width: 100%; max-height: 16rem; border-radius: var(--radius); }
.wm-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.wm-quality { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.wm-quality .aidc-select { width: auto; }
.wm-hint { margin: 0.5rem 0 0; font-size: 0.75rem; }
.wm-about { margin-top: 1rem; }
.wm-facts { display: grid; gap: 0.5rem; margin: 0; font-size: 0.8125rem; }
.wm-facts div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.75rem; }
.wm-facts dt { color: var(--muted-foreground); }
.wm-facts dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.wm-caption summary { cursor: pointer; color: var(--muted-foreground); }
.wm-caption p { margin: 0.375rem 0 0; }

/* 侧栏：锚点 / 报价 / 开发 */
.wm-side .aidc-tabs__panel { padding-top: 0.75rem; }
.wm-note { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.55; }
.wm-note code, .wm-anchor code { font-size: 0.75rem; }
.wm-anchors { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.wm-anchor { border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--card); }
.wm-anchor.is-active { border-color: var(--signal); }
.wm-anchor__head { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.625rem 0.75rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wm-anchor__dot { width: 0.625rem; height: 0.625rem; flex: none; border-radius: 999px; background: var(--signal); }
.wm-anchor__dot.is-unverified { background: transparent; box-shadow: 0 0 0 2px var(--signal) inset; }
.wm-anchor__label { flex: 1; font-weight: 600; font-size: 0.875rem; }
.wm-anchor__body { display: flex; flex-direction: column; gap: 0.375rem; padding: 0 0.75rem 0.75rem 1.875rem; font-size: 0.8125rem; }
.wm-mono { font-family: var(--font-mono); font-size: 0.75rem; }
.wm-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.75rem; margin: 0; }
.wm-meta dt { font-size: 0.6875rem; color: var(--muted-foreground); }
.wm-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.wm-sim { align-self: flex-start; }
.wm-quote { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; }
.wm-quote .aidc-table td { padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.8125rem; }
.wm-total td { font-weight: 600; }
.wm-code { margin: 0.75rem 0 0; padding: 0.75rem; overflow-x: auto; border-radius: calc(var(--radius) + 2px); background: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; white-space: pre; }
.wm-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; counter-reset: step; }
.wm-flow li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.75rem; counter-increment: step; }
.wm-flow li b { font-size: 0.8125rem; }
.wm-flow li b::before { content: counter(step) ". "; color: var(--signal); }
.wm-flow li span { color: var(--muted-foreground); }
.wm-foot { margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.6; }

@media (max-width: 1100px) {
  .wm-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .wm-worlds { grid-column: 1 / -1; }
  .wm-world-list { flex-direction: row; overflow-x: auto; padding-bottom: 0.25rem; }
  .wm-world { width: auto; min-width: 15rem; }
}

@media (max-width: 720px) {
  #version { display: none; }
  .wm { padding: 1rem 1rem 2.5rem; }
  .wm-grid { grid-template-columns: minmax(0, 1fr); }
  .wm-stage { height: 56vh; min-height: 18rem; }
  .wm-controls { flex-direction: column; align-items: stretch; }
  .wm-quality { justify-content: space-between; }
}