/* ==========================================================================
   OBS Track — 全站樣式
   --------------------------------------------------------------------------
   取代原本 commit 進 repo 的 Tailwind 編譯檔（css/styles.css）。
   這份檔案是手寫的，不需要任何 build step，直接改就會生效。

   改顏色 → 只要動下面「設計 token」那一段。
   改某個元件 → 往下找對應的區塊註解。
   ========================================================================== */


/* ==========================================================================
   1. 設計 token
   ========================================================================== */

:root {
    /* 底色與表面：由深到淺，四階就夠用 */
    --bg: #0d0f13;
    --surface: #15181e;
    --surface-2: #1c2027;
    --border: #262b34;
    --border-strong: #363d49;

    /* 文字：三階。dim 只給不影響理解的說明文字 */
    --text: #e8eaed;
    --text-muted: #a3abb8;
    --text-dim: #7d8695;

    /* 主色。預設是品牌藍，平台頁會在下面被覆寫 */
    --accent: #91beff;
    --accent-solid: #3c6fd0;
    --accent-ink: #ffffff;
    --accent-soft: rgba(145, 190, 255, .1);
    --accent-line: rgba(145, 190, 255, .28);

    /* 狀態色。這些不跟著平台主色變，因為它們代表語意不是品牌 */
    --info: #91beff;
    --info-soft: rgba(145, 190, 255, .08);
    --info-line: rgba(145, 190, 255, .22);
    --warn: #f0c274;
    --warn-soft: rgba(240, 194, 116, .08);
    --warn-line: rgba(240, 194, 116, .25);
    --danger: #ff8a80;
    --danger-solid: #b3261e;
    --danger-soft: rgba(255, 138, 128, .08);
    --danger-line: rgba(255, 138, 128, .25);
    --ok: #3ddc84;

    /* 圓角：只有兩個值。不要每個元件各自發明 */
    --r: 8px;
    --r-sm: 4px;

    /* 間距節奏 */
    --gap: 16px;
    --gap-lg: 32px;

    /* 陰影只給真的浮在頁面上的東西（回饋按鈕、toast） */
    --shadow: 0 4px 16px rgba(0, 0, 0, .4);

    --font: "Noto Sans JP", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Microsoft JhengHei", sans-serif;
    --font-mono: Consolas, "SF Mono", "Cascadia Mono", ui-monospace, monospace;

    --wrap: 56rem;

    /* 圖示：用 CSS mask 上色，元件裡就不用重複貼 SVG */
    --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a5 5 0 0 0-3 9v1.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5V9A5 5 0 0 0 8 0zM5.5 12.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zm.5 2h4a2 2 0 0 1-4 0z'/%3E%3C/svg%3E");
    --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.1 1.7a1 1 0 0 1 1.8 0l6 11A1 1 0 0 1 14 14.2H2a1 1 0 0 1-.9-1.5zM8 5a.75.75 0 0 0-.75.8l.2 3a.55.55 0 0 0 1.1 0l.2-3A.75.75 0 0 0 8 5zm0 7a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8z'/%3E%3C/svg%3E");

    /* 複製圖示（給 .chip--copy 用 mask 上色） */
    --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5A1.5 1.5 0 0 1 5.5 1h5A1.5 1.5 0 0 1 12 2.5V3h.5A1.5 1.5 0 0 1 14 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 4 13.5V13h-.5A1.5 1.5 0 0 1 2 11.5v-9A1.5 1.5 0 0 1 3.5 1H4zm1 10.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5z'/%3E%3C/svg%3E");
}

/* 平台主題：只換主色，其他 token 全部共用 --------------------------------- */

.t-youtube {
    --accent: #ff7a73;
    --accent-solid: #d92d20;
    --accent-ink: #ffffff;
    --accent-soft: rgba(255, 122, 115, .09);
    --accent-line: rgba(255, 122, 115, .26);
}

.t-spotify {
    --accent: #1db954;
    --accent-solid: #1db954;
    --accent-ink: #06120a;
    --accent-soft: rgba(29, 185, 84, .09);
    --accent-line: rgba(29, 185, 84, .26);
}


/* ==========================================================================
   2. 基礎
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection {
    background: var(--accent);
    color: var(--bg);
}


/* ==========================================================================
   3. 版面
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 40px 20px 64px;
}

/* 置中單卡片用（moved.html、首頁） */
.wrap--center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 置中版面裡的區塊要撐滿寬度，而不是縮成內容寬 */
.wrap--center > * {
    align-self: stretch;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: var(--gap-lg);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0;
    color: var(--text);
}

.brand a {
    color: inherit;
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.nav a {
    color: var(--text-muted);
}

.nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

/* 導覽列裡指向另一個平台的連結，用該平台的顏色標示 */
.nav .to-youtube {
    color: #ff7a73;
}

.nav .to-spotify {
    color: #1db954;
}


/* ==========================================================================
   4. 文字層級
   層級靠字級與留白，不靠顏色。標題一律用 --text。
   ========================================================================== */

.page-title {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0 0 8px;
}

.page-title .mark {
    width: 1em;
    height: 1em;
    vertical-align: -.12em;
    margin-right: .4em;
    fill: var(--accent);
}

.lede {
    color: var(--text-muted);
    font-size: 17px;
    margin: 0;
}

.page-head {
    margin: var(--gap-lg) 0 24px;
}

h2,
h3 {
    color: var(--text);
    letter-spacing: -.005em;
}

.muted {
    color: var(--text-muted);
}


/* ==========================================================================
   5. 卡片 / 區塊
   1px 邊框 + 一階表面色。沒有 blur、沒有大陰影、沒有 hover 位移。
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px;
    margin-bottom: var(--gap);
}

.card > :first-child {
    margin-top: 0;
}

.card > :last-child {
    margin-bottom: 0;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
}

/* 標題底下還有一行說明時，把兩者包在 .card-head 裡 */
.card-head {
    margin-bottom: 20px;
}

.card-head .card-title,
.card-head .card-sub {
    margin: 0;
}

.card-head .card-sub {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: 4px;
}

/* 卡片內的次級標題 */
.sub-title {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 6px;
}

.sub-title:first-child {
    margin-top: 0;
}

/* 卡片內的分隔（除錯 Q&A 這種一問一答） */
.qa + .qa {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.qa p {
    color: var(--text-muted);
    margin: 6px 0 0;
}


/* ==========================================================================
   6. 清單
   數字掛在文字區塊外面，多行才不會縮排跑掉（原本 list-inside 的問題）。
   ========================================================================== */

.steps,
.bullets {
    margin: 0;
    padding-left: 1.6em;
    color: var(--text-muted);
}

.steps > li,
.bullets > li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.steps > li::marker {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.bullets > li::marker {
    color: var(--text-dim);
}

.steps > li > :last-child,
.bullets > li > :last-child {
    margin-bottom: 0;
}

/* 步驟裡夾圖片時，讓圖片自己成一段 */
.steps figure,
.steps .figure {
    margin: 10px 0 18px;
}


/* ==========================================================================
   7. 行內程式碼片段
   .chip        = 只是要引用介面上的字（唯讀）
   .chip--copy  = 真的可以點的複製按鈕，長得要不一樣
   ========================================================================== */

.chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .9em;
    line-height: 1.5;
    padding: 1px 7px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    word-break: break-word;
}

button.chip {
    font-size: .9em;
}

.chip--copy {
    font-family: var(--font);
    cursor: pointer;
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    padding: 2px 9px;
}

.chip--copy::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 7px;
    vertical-align: -1px;
    background-color: currentColor;
    -webkit-mask: var(--icon-copy) center / contain no-repeat;
    mask: var(--icon-copy) center / contain no-repeat;
}

.chip--copy:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.chip--copy:disabled {
    cursor: default;
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-dim);
}

.chip--copy:disabled::after {
    display: none;
}


/* ==========================================================================
   8. 程式碼區塊
   ========================================================================== */

.code {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    margin: 0;
    overflow-x: auto;
    color: var(--text);
    tab-size: 4;
}

.code .c-comment {
    color: var(--text-dim);
    font-style: italic;
}

.code .c-key {
    color: #7dc4ff;
}

.code .c-prop {
    color: #9bdca0;
}

.code .c-val {
    color: #e5b06a;
}

.code .c-str {
    color: #9bdca0;
}

.code .c-imp {
    color: #7dc4ff;
}

.code mark {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 0 5px;
}


/* 一組提示框，跟上方內容拉開距離 */
.notes {
    margin-top: var(--gap-lg);
}


/* ==========================================================================
   9. 提示框
   兩種語意：note（可以做的事）/ warn（不做會出事）。
   靠底色與圖示區分，不用左側色條。
   ========================================================================== */

.note {
    display: flex;
    gap: 12px;
    background: var(--info-soft);
    border: 1px solid var(--info-line);
    border-radius: var(--r);
    padding: 16px 18px;
    margin-bottom: var(--gap);
    color: var(--text-muted);
    font-size: 15px;
}

.note::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    background-color: var(--info);
    -webkit-mask: var(--icon-info) center / contain no-repeat;
    mask: var(--icon-info) center / contain no-repeat;
}

.note p {
    margin: 0 0 8px;
}

.note-body {
    min-width: 0;
}

.note-body > :last-child {
    margin-bottom: 0;
}

.note strong {
    color: var(--text);
}

.note--warn {
    background: var(--warn-soft);
    border-color: var(--warn-line);
}

.note--warn::before {
    background-color: var(--warn);
    -webkit-mask-image: var(--icon-warn);
    mask-image: var(--icon-warn);
}

.note--warn strong {
    color: var(--warn);
}


/* ==========================================================================
   10. 按鈕
   hover 只換顏色，不放大、不位移。
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding: 11px 20px;
    border-radius: var(--r);
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--primary {
    background: var(--accent-solid);
    color: var(--accent-ink);
}

.btn--primary:hover {
    filter: brightness(1.12);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--text-dim);
}

.btn--danger {
    background: transparent;
    border-color: var(--danger-line);
    color: var(--danger);
}

.btn--danger:hover {
    background: var(--danger-solid);
    border-color: var(--danger-solid);
    color: #fff;
}

.btn--discord {
    background: #5865f2;
    color: #fff;
}

.btn--discord:hover {
    background: #4752c4;
}

.btn .btn-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: none;
}


/* ==========================================================================
   11. 表單
   ========================================================================== */

.field {
    margin-bottom: 18px;
}

.field:last-of-type {
    margin-bottom: 0;
}

.field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.field .req {
    color: var(--danger);
    margin-left: 2px;
}

.field input {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 15px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
    transition: border-color .15s ease;
}

.field input::placeholder {
    color: var(--text-dim);
    font-family: var(--font);
}

.field input:hover {
    border-color: var(--text-dim);
}

.field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input[readonly] {
    color: var(--text-muted);
    background: var(--surface-2);
}

.field .hint {
    font-size: 13px;
    color: var(--text-dim);
    margin: 6px 0 0;
}

.form-actions {
    margin-top: 20px;
}


/* ==========================================================================
   12. 錯誤訊息
   ========================================================================== */

.alert {
    display: flex;
    gap: 12px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: var(--gap);
    color: var(--danger);
    font-size: 15px;
}

.alert::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    background-color: var(--danger);
    -webkit-mask: var(--icon-warn) center / contain no-repeat;
    mask: var(--icon-warn) center / contain no-repeat;
}

.alert p {
    margin: 0;
}


/* ==========================================================================
   13. 目前播放
   ========================================================================== */

.now-playing {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px;
}

.now-playing .cover {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface-2);
}

.now-playing .meta {
    flex: 1;
    min-width: 0;
}

.now-playing .track-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.now-playing .track-artist {
    font-size: 15px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.now-playing.is-error .track-name {
    color: var(--danger);
}

.progress {
    height: 3px;
    border-radius: 2px;
    background: var(--border-strong);
    overflow: hidden;
    margin: 10px 0;
}

.progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .5s linear;
}

.track-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* 首頁載入中 */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
}

.loading::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 載入骨架 */
.skeleton {
    height: 126px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--border);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        opacity: .55;
    }
}


/* ==========================================================================
   14. 圖片與主題預覽
   ========================================================================== */

.figure {
    margin: 16px 0 0;
}

.figure img {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.figure figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 8px;
}

.figure--narrow img {
    max-width: 480px;
    margin: 0 auto;
}

/* 主題產生器下面那張「貼到哪裡」的示意圖 */
.theme-intro {
    margin: 0 0 28px;
}


/* ==========================================================================
   14.5 主題產生器
   選主題／配色／標題處理，組出 OBS 要貼的網址。
   ========================================================================== */

.builder {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px;
    margin-bottom: 20px;
}

/* fieldset 預設的框跟內距要清掉才好排版 */
.builder-row {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 6px 16px;
    align-items: start;
    border: 0;
    margin: 0;
    padding: 0;
}

.builder-row + .builder-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.builder-label {
    grid-column: 1;
    padding: 7px 0 0;
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.4;
}

.builder-row > :not(.builder-label) {
    grid-column: 2;
}

.builder-hint {
    font-size: 13px;
    color: var(--text-dim);
    margin: 2px 0 0;
}

/* 分段選擇器 ------------------------------------------------------------- */

.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seg-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.seg-option span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.seg-option span:hover {
    border-color: var(--text-dim);
    color: var(--text);
}

.seg-option input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.seg-option input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.seg-option input:disabled + span {
    opacity: .4;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--text-dim);
    background: transparent;
}

/* .builder-row 有設 display，hidden 屬性要另外補 */
.builder-row[hidden] {
    display: none;
}

/* 純文字主題的顯示格式 --------------------------------------------------- */

.builder-format input {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.builder-format input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.token {
    padding: 4px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.token:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.token code {
    font-family: var(--font-mono);
}

.builder-format-preview {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 產出的網址 ------------------------------------------------------------- */

.builder-out {
    display: flex;
    gap: 8px;
}

.builder-out input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.builder-out input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.builder-out .btn {
    flex: none;
    padding: 8px 18px;
    font-size: 14px;
}

.builder-out .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* 預覽圖：直式與橫式比例差很多，用高度收斂比較不會忽大忽小 */
.builder-preview img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
}


/* ==========================================================================
   15. API 文件（self-code）
   ========================================================================== */

.api-rows {
    margin: 0;
}

.api-rows > div {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 4px 20px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

.api-rows > div:first-child {
    border-top: none;
    padding-top: 0;
}

.api-rows dt {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 500;
}

.api-rows dd {
    margin: 0;
    color: var(--text-muted);
}

.api-rows .optional {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 6px;
}

.api-rows .st-ok {
    color: var(--ok);
}

.api-rows .st-err {
    color: var(--danger);
}

.method {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--ok);
    color: #06120a;
    margin-right: 10px;
}

.endpoint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 15px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    word-break: break-all;
}


/* ==========================================================================
   16. 平台選擇（首頁）
   ========================================================================== */

.platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap);
    margin: var(--gap-lg) 0;
    text-align: left;
}

.platform {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px;
    color: var(--text);
    transition: border-color .15s ease, background-color .15s ease;
}

.platform:hover {
    text-decoration: none;
    background: var(--surface-2);
    border-color: var(--platform-color, var(--accent));
}

.platform .platform-mark {
    width: 32px;
    height: 32px;
    fill: var(--platform-color);
    margin-bottom: 16px;
}

.platform h2 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 6px;
}

.platform p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.platform--spotify {
    --platform-color: #1db954;
}

.platform--youtube {
    --platform-color: #ff4b45;
}


/* ==========================================================================
   17. 頁尾與浮動回饋
   ========================================================================== */

.site-footer {
    margin-top: var(--gap-lg);
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.9;
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    color: var(--text-muted);
}

.feedback {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow);
}

.feedback:hover {
    text-decoration: none;
    background: var(--surface);
    border-color: var(--text-dim);
}

.feedback svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}


/* ==========================================================================
   18. 工具 class
   .hidden 是 JS 用 classList 切換的，一定要留。
   ========================================================================== */

.hidden,
[hidden] {
    display: none !important;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   19. 小螢幕
   ========================================================================== */

@media (max-width: 640px) {
    .wrap {
        padding: 24px 16px 56px;
    }

    .card {
        padding: 18px;
    }

    .now-playing {
        gap: 14px;
    }

    .now-playing .cover {
        width: 64px;
        height: 64px;
    }

    .api-rows > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    /* 窄螢幕改成上下堆疊，標籤欄不再吃掉一半寬度 */
    .builder-row {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .builder-row > :not(.builder-label) {
        grid-column: 1;
    }

    .builder-label {
        padding-top: 0;
        margin-bottom: 4px;
    }

    .builder-out {
        flex-direction: column;
    }

    .feedback {
        right: 12px;
        bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}