/*
 * PostVault 網站版樣式
 *
 * 簡約原則：
 * - 一個畫面只有一個主角。首頁是「插圖、標題、輸入列」，有貼文之後是貼文本身。
 * - 顏色只有三種角色：墨色（文字與主要按鈕）、琥珀黃（唯一的強調色，只用在「現在該按這顆」的地方：
 *   貼上、送出，以及下載好之後再按一次存進手機的那一步）、翡翠綠（只在完成與進度出現）。其餘都是灰階。
 * - 不用卡片、陰影與底色區塊分組，靠留白與一條細線。
 * - 動態只留有用途的：插圖說明產品在做什麼，其餘都是對操作的回饋，長度不超過 0.35 秒。
 * 深淺色跟隨系統設定。
 *
 * 字級：主要使用者是長輩，所以預設就是大字。
 * - 所有字級與控制項尺寸都用 rem，跟著 html 的 font-size 一起縮放，分「標準、大、特大」三段（設定裡可以切換）。
 * - html 的 font-size 用百分比，使用者在瀏覽器或系統裡調過的字體大小會一併生效。
 * - 預設（大）下最小的字約 16.6px，內文 19px，主要按鈕 21px；按鈕與輸入列高度至少 2.75rem（約 52px）。
 * - 說明用的灰字對比至少 4.5:1，不用更淡的灰放文字。
 */

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --ink: #0f172a;
    --muted: #475569;
    --faint: #64748b;
    --line: #e9ecf1;
    --surface: #f4f5f7;
    --surface-2: #e4e7ec;
    --primary: #0f172a;
    --on-primary: #ffffff;
    --amber: #fbbf24;
    --on-amber: #0f172a;
    --mark: rgba(251, 191, 36, 0.5);
    --fill: #047857;
    --on-fill: #ffffff;
    --fill-soft: #d1fae5;
    --ok: #065f46;
    --warn: #92400e;
    --warn-soft: #fef3c7;
    --shade: rgba(15, 23, 42, 0.4);
    /* 滾動條：平常是淡的，滑鼠移上去才深一點；捲動區域邊緣的陰影提示「還有更多」 */
    --scroll-thumb: rgba(15, 23, 42, 0.26);
    --scroll-thumb-hover: rgba(15, 23, 42, 0.5);
    --scroll-shade: rgba(15, 23, 42, 0.16);
    /* 插圖：白底上的白色卡片需要描邊與較淡的陰影 */
    --scene-stroke: #e2e6ed;
    --scene-shadow: 0.16;
    --scene-glow: 0.75;
    --scene-trail: #94a3b8;
    --scene-spark: #f59e0b;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Hiragino Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0e14;
        --ink: #eef1f6;
        --muted: #a9b2c1;
        --faint: #8791a3;
        --line: #1c212b;
        --surface: #141922;
        --surface-2: #252c39;
        --primary: #eef1f6;
        --on-primary: #0b0e14;
        --mark: rgba(251, 191, 36, 0.36);
        --fill: #34d399;
        --on-fill: #0b0e14;
        --fill-soft: #122e29;
        --ok: #34d399;
        --warn: #fbbf6b;
        --warn-soft: #2d2720;
        --shade: rgba(0, 0, 0, 0.6);
        --scroll-thumb: rgba(238, 241, 246, 0.26);
        --scroll-thumb-hover: rgba(238, 241, 246, 0.5);
        --scroll-shade: rgba(0, 0, 0, 0.55);
        --scene-stroke: transparent;
        --scene-shadow: 0.5;
        --scene-glow: 1;
        --scene-trail: #667085;
        --scene-spark: #fde68a;
    }
}

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

html {
    /* 預設是「大」：1rem 約 19px。沒有 JavaScript 或設定還沒讀到時也是大字 */
    font-size: 118.75%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/*
 * 捲動手感
 * - scrollbar-gutter：滾動條的位置一直保留。開啟設定面板或放大預覽時頁面會暫時不能捲動、
 *   滾動條跟著消失，沒有保留的話整個版面會往右跳 15px。
 * - scroll-behavior：點「顯示全文」、回到頂端這類位移用滑的，不是瞬間跳過去。
 *   系統設定為減少動態效果的人在檔案最後面會被關掉。
 * - scroll-padding-bottom：手機上主要按鈕貼在畫面底部，輸入框或連結被聚焦、自動捲進畫面時
 *   不要被它遮住。
 */
html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-bottom: 8rem;
}

/* 滾動條配色跟著主題：細的淡色滑塊、沒有軌道底色（Chrome、Edge、Firefox、新版 Safari） */
* {
    scrollbar-color: var(--scroll-thumb) transparent;
}

/* 不支援上面標準寫法的瀏覽器退回 WebKit 的寫法，外觀一致 */
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar {
        width: 0.75rem;
        height: 0.75rem;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 999px;
        background: var(--scroll-thumb);
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover);
        background-clip: content-box;
    }
}

/* 滑鼠移到可捲動的區域上時，滑塊深一點，比較好抓（標準寫法沒有 hover 狀態，所以用整個區域的 hover 換色） */
@media (hover: hover) {
    html:hover,
    .sheet__panel:hover {
        scrollbar-color: var(--scroll-thumb-hover) transparent;
    }
}

html[data-text-size="standard"] {
    font-size: 100%;
}

html[data-text-size="xlarge"] {
    font-size: 137.5%;
}

/* 設定面板或放大預覽開著時，後面的頁面不跟著捲動 */
html:has(dialog[open]) {
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon,
.glyph {
    display: inline-flex;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.icon svg,
.glyph svg {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    max-width: 37.5rem;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 頂列 ---------- */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 37.5rem;
    margin: 0 auto;
    padding: calc(10px + env(safe-area-inset-top)) 10px 6px 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand__mark {
    display: block;
    border-radius: 8px;
}

/* 存好的時候標誌跳一下 */
.brand__mark.is-pop {
    animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes pop {
    40% {
        transform: scale(1.25) rotate(-6deg);
    }
}

.brand__name {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.top__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
}

.top__button:hover {
    background: var(--surface);
    color: var(--ink);
}

.top__actions {
    display: flex;
    align-items: center;
}

/* 只有圖示的按鈕不好懂，頂列的設定鈕帶文字 */
.top__button--labeled {
    gap: 6px;
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.top__button--labeled {
    white-space: nowrap;
}

/* 窄螢幕：頂列要放得下標誌與兩顆帶文字的按鈕 */
@media (max-width: 400px) {
    .top {
        padding-left: 14px;
        padding-right: 4px;
    }

    .top__button--labeled {
        gap: 4px;
        padding: 0 10px;
        font-size: 0.875rem;
    }
}

/* ---------- 首頁：插圖、標題、輸入列、支援平台 ---------- */

.hero {
    padding-top: clamp(4px, 5vh, 56px);
}

.hero__top {
    text-align: center;
}

.scene {
    width: min(100%, 330px, 46dvh);
    margin: 0 auto;
}

.scene svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.scene__paper {
    stroke: var(--scene-stroke);
    stroke-width: 1;
}

.scene__paper--thin {
    stroke-width: 0.5;
}

.scene__shadow {
    flood-opacity: var(--scene-shadow);
}

.scene__glow {
    opacity: var(--scene-glow);
}

.scene__trail {
    stroke: var(--scene-trail);
    stroke-opacity: 0.7;
}

.scene__spark {
    fill: var(--scene-spark);
}

.scene__chip-video {
    fill: var(--ink);
}

.scene__chip-play {
    fill: var(--bg);
}

.hero__title {
    margin: 4px 0 0;
    font-size: clamp(1.5rem, 7.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.hero__line {
    display: block;
}

/* 螢光筆劃過的效果：唯一用到強調色的文字 */
.hero__mark {
    padding: 0 0.1em;
    background: linear-gradient(transparent 58%, var(--mark) 0);
}

.bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 5px 5px 5px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color 0.15s, background-color 0.15s;
}

.bar:focus-within {
    border-color: var(--ink);
    background: var(--bg);
}

.bar__input {
    flex: 1;
    min-width: 0;
    height: 2.875rem;
    border: 0;
    outline: 0;
    background: transparent;
    /* 16px 以上 iOS 才不會在聚焦時自動放大頁面 */
    font-size: 1rem;
}

.bar__input::placeholder {
    color: var(--faint);
}

/* 整個畫面只有這兩顆按鈕是琥珀黃：輸入框空的時候是「貼上」，有內容之後是送出 */
.bar__paste,
.bar__submit {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 2.875rem;
    border: 0;
    border-radius: 999px;
    background: var(--amber);
    color: var(--on-amber);
    transition: transform 0.12s, filter 0.15s;
}

.bar__paste {
    gap: 6px;
    padding: 0 18px 0 14px;
    font-size: 1rem;
    font-weight: 650;
}

.bar__paste .icon,
.bar__submit .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.bar__submit {
    gap: 4px;
    padding: 0 14px 0 18px;
    font-size: 1rem;
    font-weight: 650;
}

.bar__paste:hover,
.bar__submit:hover {
    filter: brightness(1.06);
}

.bar__paste:active,
.bar__submit:active {
    transform: scale(0.96);
}

.bar__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
}

.bar__icon .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* 平台標籤：九個平台列在同一排。實心的是網站可以直接下載的，外框的要用擴充功能 */
.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 2rem;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 550;
}

.tag .glyph {
    width: 0.8125rem;
    height: 0.8125rem;
}

.tag--ext {
    border-color: var(--line);
    background: transparent;
    color: var(--muted);
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.tag--ext:hover {
    border-color: var(--surface-2);
    background: var(--surface);
    color: var(--ink);
}

/* 手指點的時候標籤本體維持小巧，可點範圍往上下各多 6px */
.tag--ext {
    position: relative;
}

.tag--ext::after {
    content: "";
    position: absolute;
    inset: -6px 0;
}

/* 有貼文（或正在讀取）時，首頁的插圖與標題收起來，只留輸入列，把畫面讓給內容 */
[data-status="loading"] .hero,
[data-status="ready"] .hero {
    padding-top: 6px;
}

[data-status="loading"] .hero__top,
[data-status="ready"] .hero__top,
[data-status="loading"] .tags,
[data-status="ready"] .tags,
[data-status="loading"] .hero__batch,
[data-status="ready"] .hero__batch {
    display: none;
}

[data-status="loading"] .bar,
[data-status="ready"] .bar {
    margin-top: 0;
}

/* ---------- 提示 ---------- */

.notice:not(:empty) {
    margin-top: 18px;
}

.notice__error {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 1rem;
    font-weight: 550;
    text-align: center;
}

.spinner {
    display: inline-block;
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--surface-2);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.callout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
}

.ext-scene {
    width: 120px;
}

.ext-scene svg {
    display: block;
    width: 100%;
    height: auto;
}

.ext-scene__window {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 1.5;
}

.ext-scene__line {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.5;
}

.ext-scene__dot,
.ext-scene__bar {
    fill: var(--surface-2);
}

.callout__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 650;
}

.callout__text {
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 0.9375rem;
}

@media (min-width: 600px) {
    .callout {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 24px;
    }

    .ext-scene {
        flex: none;
        width: 140px;
    }
}

/* ---------- 按鈕 ---------- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 3.25rem;
    padding: 0 18px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, transform 0.12s, opacity 0.15s;
}

.btn:active:not(:disabled) {
    transform: scale(0.985);
}

/* 進度：按鈕底色由左往右填滿。用 transform 縮放，不會觸發重新排版 */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fill);
    opacity: 0;
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
    transition: transform 0.25s ease-out, opacity 0.2s;
}

.btn.is-working::before {
    opacity: 1;
}

.btn > * {
    position: relative;
}

.btn .icon {
    width: 1.1875rem;
    height: 1.1875rem;
}

.btn__label {
    font-variant-numeric: tabular-nums;
}

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

.btn--solid:hover:not(:disabled) {
    opacity: 0.9;
}

/* 畫面上最重要的那一顆，字再大一級 */
.btn--solid,
.btn--accent {
    font-size: 1.125rem;
}

.btn--solid.is-done {
    background: var(--fill);
    color: var(--on-fill);
}

/* 次要動作：沒有外框，只有一層很淡的底色 */
.btn--quiet {
    min-height: 3rem;
    padding: 0 12px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 550;
}

.btn--quiet .icon {
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--muted);
}

.btn--quiet:hover:not(:disabled) {
    background: var(--surface-2);
}

.btn--quiet::before {
    background: var(--fill-soft);
}

.btn--quiet.is-done,
.btn--quiet.is-done .icon {
    color: var(--ok);
}

.btn--line {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
}

.btn--line:hover {
    background: var(--surface);
}

.btn--light {
    min-width: 200px;
    background: #ffffff;
    color: #0f172a;
}

.btn--light.is-done {
    background: #34d399;
}

/* btn--accent：下載好之後「再按一次存進手機」的那一步，用強調色讓人一眼看到 */
.btn--sponsor,
.btn--accent {
    background: var(--amber);
    color: var(--on-amber);
}

.btn--sponsor:hover,
.btn--accent:hover:not(:disabled) {
    filter: brightness(1.06);
}

.btn--compact {
    min-height: 2.75rem;
    padding: 0 16px;
    font-size: 1rem;
}

.btn:disabled {
    cursor: default;
}

.btn:disabled:not(.is-working) {
    opacity: 0.45;
}

.link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link:hover {
    color: var(--ink);
}

/* ---------- 貼文 ---------- */

.result:not(:empty) {
    margin-top: 22px;
}

.post {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

/* 貼文出現時輕輕往上浮；起點不設成完全透明，動畫沒跑完也看得到內容 */
.post:not(.post--skeleton) {
    animation: rise 0.3s ease-out;
}

@keyframes rise {
    from {
        opacity: 0.5;
        transform: translateY(8px);
    }
}

.post__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 1.125rem;
    font-weight: 650;
}

.avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post__byline {
    flex: 1;
    min-width: 0;
}

.post__author {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

.post__name {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.post__handle,
.post__meta {
    color: var(--muted);
    font-size: 0.875rem;
}

.post__open {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -12px;
    border-radius: 50%;
    color: var(--muted);
}

.post__open:hover {
    background: var(--surface);
    color: var(--ink);
}

.post__open .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.post__text {
    margin: 14px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post__text.is-clamped {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
}

.post__text--empty {
    color: var(--faint);
}

.media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 16px;
}

.media--count-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 520px) {
    .media--count-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface);
}

.media--count-2 .tile,
.media--count-3 .tile {
    aspect-ratio: 4 / 5;
}

.tile__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.tile__img,
.tile__blank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: var(--faint);
    transition: transform 0.3s ease;
}

.tile__open:hover .tile__img {
    transform: scale(1.04);
}

.media--count-1 {
    grid-template-columns: 1fr;
}

.media--count-1 .tile {
    aspect-ratio: auto;
    min-height: 180px;
}

.media--count-1 .tile__img {
    max-height: min(62dvh, 480px);
    object-fit: contain;
}

.tile__badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 1.5rem;
    height: 1.5rem;
    padding: 5px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: #ffffff;
    pointer-events: none;
}

/*
 * 單張儲存鈕：平常不顯示，避免每張縮圖上都疊一顆按鈕。
 * 有滑鼠的裝置在移上去或用鍵盤聚焦時出現；下載中與完成時一律顯示，當作狀態標記。
 */
.tile__save {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.62);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, background-color 0.2s;
}

.tile__save:focus-visible,
.tile[data-state="busy"] .tile__save,
.tile[data-state="done"] .tile__save {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .tile:hover .tile__save {
        opacity: 1;
        pointer-events: auto;
    }
}

.tile__save:hover:not(:disabled) {
    background: rgba(15, 23, 42, 0.86);
}

.tile__save .icon {
    width: 1rem;
    height: 1rem;
}

.tile__done-icon,
.tile__spin {
    display: none;
}

.tile__spin {
    width: 0.875rem;
    height: 0.875rem;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
}

.tile[data-state="busy"] .tile__save-icon,
.tile[data-state="done"] .tile__save-icon {
    display: none;
}

.tile[data-state="busy"] .tile__spin {
    display: inline-block;
}

.tile[data-state="done"] .tile__done-icon {
    display: inline-flex;
}

.tile[data-state="done"] .tile__save {
    background: #10b981;
    color: #0f172a;
}

.metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.metric .icon {
    width: 1rem;
    height: 1rem;
}

/* 存檔結果與下一步提示：緊貼在主要按鈕上方，有底色，不會被當成說明小字略過。
   手機上這一塊會疊在貼文內容上面，所以底色都用不透明的顏色 */
.status {
    margin: 0 0 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 550;
    text-align: center;
}

.status:empty {
    display: none;
}

.status[data-tone="ok"] {
    background: var(--fill-soft);
    color: var(--ok);
}

.status[data-tone="warn"] {
    background: var(--warn-soft);
    color: var(--warn);
}

/* 進行中的文字已經顯示在按鈕上，這一行只留給螢幕報讀 */
.status[data-tone="progress"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.actions {
    display: grid;
    gap: 4px;
    margin-top: 18px;
}

.actions__alt {
    justify-self: center;
}

/* 手機：主要按鈕貼在畫面底部，貼文再長也按得到 */
@media (max-width: 639px) {
    .actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 6px -20px 0;
        padding: 14px 20px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, var(--bg) 72%, transparent);
    }
}

.actions__row {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

/* 寬螢幕放得下才並排；手機上一顆一列，字不必縮小 */
@media (min-width: 640px) {
    .actions__row {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 6px;
    }
}

/* 手機：次要動作收在「更多選項」裡，畫面上只留一顆主要按鈕 */
.more__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 2.75rem;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 550;
    list-style: none;
    cursor: pointer;
}

.more__summary::-webkit-details-marker {
    display: none;
}

.more__summary .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.2s;
}

.more[open] .more__summary .icon {
    transform: rotate(180deg);
}

.format {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.875rem;
}

.select-wrap {
    display: inline-flex;
    align-items: center;
}

.select {
    min-height: 2.5rem;
    max-width: 60vw;
    padding: 0 28px 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px;
    color: var(--ink);
    font-size: 0.9375rem;
    appearance: none;
    -webkit-appearance: none;
}

/* 貼文底下的格式選單不要外框，看起來像一行文字 */
.format .select {
    min-height: 2.75rem;
    padding-left: 6px;
    border-color: transparent;
    color: var(--muted);
    font-size: 0.875rem;
    text-align: right;
}

.format .select:hover {
    color: var(--ink);
}

/* 畫質選擇面板：每一列是一個大按鈕，點下去就開始存 */
.picks {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
}

.pick:hover {
    background: var(--surface);
}

.pick.is-selected {
    border-color: var(--ink);
}

.pick__main {
    display: grid;
    flex: 1;
    min-width: 0;
}

.pick__name {
    font-size: 1.125rem;
    font-weight: 650;
}

.pick__hint {
    color: var(--muted);
    font-size: 0.875rem;
}

.pick__size {
    color: var(--muted);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.pick__check {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ok);
}

/* 畫質選單底下的小字說明 */
.quality__note {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---------- 讀取中的骨架 ---------- */

.post--skeleton {
    display: grid;
    gap: 12px;
}

.post--skeleton .media {
    margin-top: 2px;
}

.skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%;
    animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.skel--avatar {
    flex: none;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
}

.skel-lines {
    display: grid;
    flex: 1;
    gap: 8px;
}

.skel--line {
    height: 12px;
}

.skel--w25 {
    width: 25%;
}

.skel--w40 {
    width: 40%;
}

.skel--w70 {
    width: 70%;
}

.skel--w90 {
    width: 90%;
}

.skel--tile {
    aspect-ratio: 4 / 5;
    border-radius: 4px;
}

.skel--button {
    height: 3.25rem;
    border-radius: 14px;
}

/* ---------- 放大預覽 ---------- */

.viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #04060b;
    color: #ffffff;
}

.viewer::backdrop {
    background: #04060b;
}

.viewer__strip {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.viewer__strip::-webkit-scrollbar {
    display: none;
}

.viewer__slide {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.viewer__media {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 10rem - 30px);
    border-radius: 12px;
    object-fit: contain;
}

/* 影片在還沒載入前不知道自己的尺寸，有長寬資料時先照比例撐開，不會一開始縮成封面圖的大小 */
.viewer__media--sized {
    width: min(100%, calc((100dvh - 10rem - 30px) * var(--ratio)));
    height: auto;
    max-height: none;
    aspect-ratio: var(--ratio);
    background: #000000;
}

.viewer__top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px 16px;
}

.viewer__count {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.viewer__count:empty {
    visibility: hidden;
}

.viewer__close,
.viewer__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.viewer__close:hover,
.viewer__nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}

.viewer__nav--prev {
    left: 12px;
}

.viewer__nav--next {
    right: 12px;
}

/* 觸控裝置用手指滑就好，不需要左右按鈕 */
@media (hover: none) {
    .viewer__nav {
        display: none;
    }
}

.viewer__bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
}

.viewer :focus-visible {
    outline-color: #ffffff;
}

/* ---------- 最近 ---------- */

.history:not(:empty) {
    margin-top: 44px;
}

.recent__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recent__title {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.recent__list {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.recent__list li {
    border-top: 1px solid var(--line);
}

.recent__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 3.625rem;
    padding: 10px 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.recent__glyph {
    width: 1rem;
    height: 1rem;
    color: var(--faint);
}

.recent__main {
    display: grid;
    flex: 1;
    min-width: 0;
}

.recent__who {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent__text {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent__saved {
    display: inline-flex;
    flex: none;
    color: var(--ok);
}

.recent__saved .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

/* ---------- 頁尾 ---------- */

.foot {
    margin-top: 56px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    color: var(--faint);
    font-size: 0.875rem;
    line-height: 1.65;
    text-align: center;
    text-wrap: pretty;
}

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

.foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    color: var(--muted);
}

.foot__links a {
    text-underline-offset: 3px;
}

/* ---------- 分享面板：QR Code ---------- */

.share {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 8px 0 4px;
}

/* QR Code 一律黑白，不隨深色模式反轉，否則手機掃不到 */
.share__qr {
    width: min(68vw, 16rem);
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line);
}

.share__qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.share__lead {
    margin: 0;
    color: var(--muted);
    text-align: center;
}

.share__url {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    text-align: center;
    word-break: break-all;
}

.share__actions {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

/* ---------- 設定面板：手機從底部滑出，電腦置中 ---------- */

.sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.sheet::backdrop {
    background: var(--shade);
}

.sheet[open] .sheet__panel {
    animation: sheet-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes sheet-in {
    from {
        opacity: 0.6;
        transform: translateY(24px);
    }
}

.sheet__panel {
    max-height: 88dvh;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    /* 面板捲到底或頂時，不要把背後的頁面一起捲動（手機上尤其容易誤觸） */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: 22px 22px 0 0;
    /*
     * 捲動提示：內容比面板長的時候，上下邊緣各有一道淡淡的陰影，告訴使用者「這裡還能捲」；
     * 捲到頭陰影就消失。前兩層（local）是跟著內容走的遮罩，把後兩層（scroll）固定在邊緣的陰影蓋住，
     * 內容捲到頭時遮罩就會把陰影遮掉。
     */
    background:
        linear-gradient(var(--bg) 30%, transparent) top / 100% 2rem no-repeat local,
        linear-gradient(transparent, var(--bg) 70%) bottom / 100% 2rem no-repeat local,
        radial-gradient(farthest-side at 50% 0, var(--scroll-shade), transparent) top / 100% 0.75rem no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, var(--scroll-shade), transparent) bottom / 100% 0.75rem no-repeat scroll,
        var(--bg);
}

.sheet__grabber {
    display: block;
    width: 2.25rem;
    height: 4px;
    margin: 0 auto 2px;
    border-radius: 4px;
    background: var(--surface-2);
}

@media (min-width: 640px) {
    .sheet {
        inset: 0;
        width: 27.5rem;
        height: fit-content;
        margin: auto;
    }

    .sheet__panel {
        padding: 12px 24px 24px;
        border-radius: 22px;
    }

    .sheet__grabber {
        display: none;
    }
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: -10px;
    padding: 4px 0;
}

.sheet__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 650;
}

.sheet__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-height: 3.75rem;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.row__text {
    display: grid;
    min-width: 0;
}

.row__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
}

.row__lock {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--faint);
}

.row__desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.switch {
    position: relative;
    flex: none;
    width: 2.875rem;
    height: 1.75rem;
}

.switch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.switch__track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--surface-2);
    transition: background-color 0.15s;
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.25);
    transition: transform 0.15s;
}

.switch__input:checked + .switch__track {
    background: var(--fill);
}

.switch__input:checked + .switch__track::after {
    transform: translateX(1.125rem);
}

.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* 字體大小：三段切換 */
.seg {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: 12px;
    background: var(--surface);
}

.seg__option {
    min-width: 3rem;
    min-height: 2.5rem;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 600;
}

.seg__option[aria-pressed="true"] {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.18);
}

.sponsor {
    display: grid;
    /* 輸入框有自己的最小寬度，不限制的話大字加窄螢幕會把面板撐出橫向捲軸 */
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 4px 0 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface);
}

.sponsor__desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.sponsor__form {
    display: flex;
    gap: 8px;
}

.sponsor__input {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.sponsor__input:focus {
    border-color: var(--ink);
    outline: 0;
}

.sponsor--unlocked {
    grid-template-columns: none;
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
}

.sponsor__ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ok);
    font-size: 1rem;
    font-weight: 600;
}

.sheet__about {
    display: grid;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.sheet__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    text-underline-offset: 3px;
}

.sheet__link .icon {
    width: 1rem;
    height: 1rem;
    color: var(--muted);
}

.sheet__version {
    margin: 8px 0 0;
    color: var(--faint);
    font-size: 0.875rem;
}

/* ---------- 一次貼多個連結的入口：首頁平台標籤下面的一行字（贊助者功能，未解鎖時帶鎖頭） ---------- */

.hero__batch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 2.75rem;
    margin: 6px auto 0;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero__batch:hover {
    color: var(--ink);
}

.hero__batch .icon {
    width: 1.0625rem;
    height: 1.0625rem;
}

.hero__batch .hero__batch-lock {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--faint);
}

/* ---------- 贊助視窗：免費版存好之後、或點了上鎖的功能時跳出 ---------- */

.prompt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 4px;
}

.prompt__lead {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    text-wrap: pretty;
}

.prompt__have {
    margin: 6px 0 -4px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.prompt .status:empty {
    display: none;
}

.benefits {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface);
    list-style: none;
}

.benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
}

.benefits__item .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.25em;
    color: var(--ok);
}

/* 畫質選擇裡上鎖的那一列 */
.pick__lock {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--faint);
}

/* ---------- 設定：檔名規則 ---------- */

.row--stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
}

.field {
    width: 100%;
    min-width: 0;
    height: 2.75rem;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.field:focus {
    border-color: var(--ink);
    outline: 0;
}

.field[readonly] {
    color: var(--muted);
    cursor: pointer;
}

.row--stack .row__desc {
    overflow-wrap: anywhere;
}

/* ---------- 批次下載面板 ---------- */

.batch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-top: 4px;
}

.batch__input {
    width: 100%;
    min-height: 9rem;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    overflow-wrap: anywhere;
}

.batch__input:focus {
    border-color: var(--ink);
    outline: 0;
}

.batch__count {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.batch .quality__note {
    margin: 0;
}

.batch__list {
    display: grid;
    /* 名稱很長的那一列不能把整個清單撐寬，否則右邊的完成標記會被擠出面板 */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.batch__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 2.75rem;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
}

.batch__row:first-child {
    border-top: 0;
}

.batch__row[data-state="pending"] {
    color: var(--muted);
}

.batch__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch__ok {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ok);
}

.batch__fail {
    flex: none;
    color: var(--warn);
    font-size: 0.875rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}