:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --surface: #fffdf8;
  --ink: #1b1b19;
  --ink-soft: #656158;
  --ink-faint: #9a9589;
  --line: rgba(27, 27, 25, .09);
  --yellow: #f0b63f;
  --yellow-soft: #f7e4ad;
  --mint: #78bea9;
  --shadow: 0 18px 48px rgba(49, 44, 32, .09);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; min-height: 100%; overflow-x: hidden; overflow-x: clip; background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; }
body {
  width: 100%; max-width: 100%; min-height: 100%; margin: 0; color: var(--ink); overflow-x: hidden; overflow-x: clip;
  background:
    radial-gradient(circle at 93% 0%, rgba(240,182,63,.19), transparent 23rem),
    radial-gradient(circle at -8% 29%, rgba(120,190,169,.09), transparent 20rem),
    linear-gradient(180deg, #faf8f3 0%, var(--paper) 65%, #eeeadf 100%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
}
button, textarea { font: inherit; }
button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.988); }
svg { display: block; }

.app-shell { position: relative; display: flex; flex-direction: column; width: min(100%, 470px); max-width: 100vw; min-height: 100vh; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-x: clip; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-badge { width: 58px; height: 46px; flex: 0 0 auto; border-radius: 15px; object-fit: cover; box-shadow: 0 8px 20px rgba(27,27,25,.13); }
.brand-copy { display: grid; gap: 2px; min-width: 0; }
.brand-copy strong { font-size: 18px; font-weight: 820; letter-spacing: -.025em; }
.brand-copy small { overflow: hidden; color: var(--ink-faint); font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.settings-chip { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border: 1px solid rgba(27,27,25,.08); border-radius: 999px; color: #5f5a50; background: rgba(255,253,248,.7); box-shadow: 0 8px 22px rgba(45,41,33,.05); backdrop-filter: blur(10px); font-size: 11px; font-weight: 760; }

.hero-copy { position: relative; min-height: 202px; overflow: visible; max-width: 100%; padding: 36px 190px 14px 3px; }
.eyebrow { position: relative; z-index: 10; margin: 0 0 12px; color: #92886d; font-size: 9px; font-weight: 820; letter-spacing: .17em; }
.hero-copy h1 { position: relative; z-index: 10; margin: 0; font-size: clamp(39px, 10vw, 48px); font-weight: 860; line-height: 1.05; letter-spacing: -.058em; }
.hero-copy h1 span { position: relative; z-index: 1; }
.hero-copy h1 span::after { content: ""; position: absolute; left: -2px; right: -5px; bottom: 2px; height: 13px; z-index: -1; border-radius: 7px 3px 8px 2px; background: var(--yellow-soft); transform: rotate(-1deg); }
.hero-note { position: relative; z-index: 10; max-width: 245px; margin: 15px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.lotus-scene-view { position:absolute; right:-12px; top:clamp(4px,2.6vw,22px); z-index:3; width:clamp(326px,60vw,386px); height:clamp(190px,32vw,230px); max-width:min(calc(100vw + 12px), 398px); max-inline-size:min(calc(100vw + 12px), 398px); opacity:.99; overflow:visible; background:transparent; contain:layout; }
.lotus-scene-view::before,.lotus-scene-view::after { content:none; }
.lotus-scene-view:focus-visible { outline:2px solid rgba(240,182,63,.42); outline-offset:3px; border-radius:38px; }
.hotang-static-scene { position:absolute; z-index:1; left:-16%; top:-19%; width:118%; height:130%; object-fit:contain; opacity:.94; filter:saturate(.88) brightness(1.025) contrast(.96); pointer-events:none; user-select:none; -webkit-user-drag:none; }
.hotang-interaction-layer { position:absolute; inset:0; z-index:12; display:block; pointer-events:auto; }

.parser-contact-effect { position: relative; z-index: 12; display: block; height: 0; pointer-events: none; }
.parser-contact-shadow { position: absolute; top: -20px; right: 74px; width: 154px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(72,76,62,.18) 0%, rgba(100,124,103,.12) 38%, rgba(255,253,248,0) 76%); filter: blur(8px); opacity: .76; }
.parser-contact-ripple { position: absolute; top: -28px; right: 58px; width: 190px; height: 48px; border-radius: 50%; background: radial-gradient(ellipse at center, transparent 35%, rgba(172,184,164,.24) 39%, transparent 43%, transparent 56%, rgba(184,191,171,.18) 60%, transparent 64%, transparent 72%, rgba(255,255,255,.26) 76%, transparent 80%); transform: rotate(-2deg) scaleX(1.08) scaleY(.72); filter: blur(.35px); opacity: .82; animation: cardContactRipple 4.6s ease-in-out infinite; }
.parser-card { position: relative; z-index: 20; margin-top: -20px; padding: 14px 18px 15px; border: 1px solid rgba(27,27,25,.075); border-radius: 26px; background: rgba(255,253,248,.91); box-shadow: var(--shadow); backdrop-filter: blur(16px); transition: padding .22s ease, border-radius .22s ease, box-shadow .22s ease, background .22s ease; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.field-heading > span:first-child { font-size: 13px; font-weight: 780; }
.platform-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #8e897e; background: #efede6; font-size: 9px; font-weight: 760; }
.platform-badge.detected { color: #3f7164; background: #e0f1eb; }
.parser-compact-summary { display: none; align-items: center; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; min-height: 42px; }
.compact-platform { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #3f7164; background: #e0f1eb; font-size: 9px; font-weight: 780; white-space: nowrap; }
.compact-link { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.parser-compact-summary button { min-height: 30px; padding: 0 10px; border-radius: 11px; color: var(--ink-soft); background: #efede6; font-size: 9px; font-weight: 760; white-space: nowrap; }
.link-field { display: block; overflow: hidden; border: 1px solid rgba(27,27,25,.08); border-radius: 19px; background: #f6f3ec; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.link-field:focus-within { border-color: rgba(27,27,25,.25); background: #fffefb; box-shadow: 0 0 0 4px rgba(240,182,63,.14); }
.link-field textarea { display: block; width: 100%; height: 88px; min-height: 88px; padding: 12px 15px 14px; border: 0; outline: 0; resize: none; color: var(--ink); background: transparent; font-size: 14px; line-height: 1.48; }
.link-field textarea::placeholder { color: #aaa59a; }
.input-tools { display: grid; grid-template-columns: .58fr .58fr .58fr 1.45fr; align-items: stretch; gap: 8px; margin: 8px 1px 0; }
.quiet-button { min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 13px; color: var(--ink-soft); background: #efede6; font-size: 10px; font-weight: 720; }
.parse-button { display: flex; align-items: center; justify-content: space-between; min-width: 0; width: 100%; height: 40px; padding: 0 12px 0 14px; border-radius: 13px; color: #fff; background: var(--ink); box-shadow: 0 10px 22px rgba(27,27,25,.16); font-size: 12px; font-weight: 820; white-space: nowrap; }
.parse-button svg { flex: 0 0 auto; width: 19px; height: 19px; margin-left: 8px; fill: none; stroke: var(--yellow); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.parse-button.is-save { background: #f0b63f; color: #1b1b19; box-shadow: 0 9px 18px rgba(240,182,63,.2); }
.parse-button.is-save svg { stroke: #1b1b19; }
.support-line { display: flex; justify-content: center; margin: 0 0 8px; color: var(--ink-faint); font-size: 9px; line-height: 1.45; text-align: center; }
.support-line i { display: none; }
.parser-card.is-compact { padding: 10px 12px; border-radius: 20px; background: rgba(255,253,248,.86); box-shadow: 0 12px 28px rgba(49,44,32,.09); }
.parser-card.is-compact .field-heading,
.parser-card.is-compact .link-field,
.parser-card.is-compact .input-tools,
.parser-card.is-compact .support-line { display: none; }
.parser-card.is-compact .parser-compact-summary { display: grid; }
.parser-card.is-compact ~ .preview-card { margin-top: 12px; }

.preview-card { position: relative; min-height: 302px; margin-top: 10px; overflow: hidden; border-radius: 27px; color: #f7f1e3; background: #111310; box-shadow: 0 22px 48px rgba(28,27,23,.2); isolation: isolate; }
.preview-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 19%, rgba(240,182,63,.15), transparent 33%), linear-gradient(145deg, #1d201c, #10120f 65%, #0b0d0b); }
.preview-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.empty-preview { display: grid; grid-template-rows: minmax(142px, 1fr) auto auto auto; justify-items: center; align-content: stretch; width: 100%; min-height: 302px; padding: 13px 20px 14px; color: inherit; text-align: center; }
.agent-stage { position: relative; display: grid; place-items: center; align-self: stretch; width: 100%; min-height: 142px; margin-bottom: 4px; overflow: hidden; }
.agent-stage::before { content: ""; position: absolute; left: 50%; top: 5px; width: 190px; height: 144px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(240,182,63,.12), transparent 70%); }
.agent-stage img { position: relative; z-index: 1; width: clamp(190px, 52%, 238px); max-width: 84%; height: auto; margin-top: -1px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.28)); }
.scan-beam { position: absolute; z-index: 3; left: 12%; right: 12%; top: 18px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(240,182,63,.34), rgba(255,215,119,.92) 50%, rgba(240,182,63,.34), transparent); box-shadow: 0 0 12px rgba(240,182,63,.72), 0 0 22px rgba(240,182,63,.24); animation: scanDuck 3.1s cubic-bezier(.45,0,.55,1) infinite; }
.hud-corner { position: absolute; z-index: 2; width: 21px; height: 21px; opacity: .42; border-color: var(--yellow); border-style: solid; border-radius: 2px; }
.hud-corner.tl { left: 19%; top: 17px; border-width: 1px 0 0 1px; }
.hud-corner.tr { right: 19%; top: 17px; border-width: 1px 1px 0 0; }
.hud-corner.bl { left: 19%; bottom: 0; border-width: 0 0 1px 1px; }
.hud-corner.br { right: 19%; bottom: 0; border-width: 0 1px 1px 0; }
.ready-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; margin-top: 1px; padding: 0 12px; border: 1px solid rgba(240,182,63,.38); border-radius: 999px; color: #f1c762; background: rgba(240,182,63,.075); box-shadow: inset 0 0 16px rgba(240,182,63,.035); font-size: 9px; font-weight: 820; letter-spacing: .18em; }
.ready-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(240,182,63,.12); }
.empty-preview strong { margin-top: 7px; font-size: 15px; font-weight: 780; }
.standby-copy { margin-top: 5px; color: #959a91; font-size: 10px; line-height: 1.5; }

.update-card { margin-top: 14px; padding: 15px; border: 1px solid rgba(240,182,63,.34); border-radius: 18px; background: #fff8e4; box-shadow: 0 12px 30px rgba(49,44,32,.08); }
.update-card.force { border-color: rgba(216,107,87,.42); background: #fff0ea; }
.update-card.maintenance { border-color: rgba(120,190,169,.44); background: #eef8f4; }
.update-copy { display: grid; gap: 6px; min-width: 0; }
.update-copy span { color: #8b7d56; font-size: 9px; font-weight: 820; letter-spacing: .08em; }
.update-copy strong { font-size: 13px; line-height: 1.35; }
.update-copy p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.update-copy ul { margin: 2px 0 0; padding-left: 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.update-copy small { color: var(--ink-faint); font-size: 8px; line-height: 1.5; word-break: break-all; }
.update-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.update-actions button { min-height: 34px; padding: 0 12px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 760; }
.update-actions button:last-child:not(:first-child) { color: var(--ink-soft); background: #ede9e0; }
.app-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 21px 3px 2px; color: #979185; font-size: 8px; }
.app-footer button { color: #68645c; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.footer-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.footer-actions i { width: 2px; height: 2px; border-radius: 50%; background: #aaa397; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 120; max-width: calc(100vw - 42px); padding: 11px 15px; border-radius: 999px; color: #f8f4e9; background: rgba(27,27,25,.92); box-shadow: 0 12px 30px rgba(0,0,0,.18); opacity: 0; transform: translate(-50%,12px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; font-size: 10px; font-weight: 680; }
.toast.active { opacity: 1; transform: translate(-50%,0); }

@keyframes cardContactRipple { 0%,100% { opacity:.58; transform:rotate(-2deg) scaleX(1.02) scaleY(.68); } 50% { opacity:.9; transform:rotate(-2deg) scaleX(1.14) scaleY(.76); } }
@media (min-width: 600px) {
  .app-shell { width: min(100%, 682px); }
  .hero-copy { min-height: 258px; }
}
@media (max-width: 430px) {
  .hero-copy { min-height: 194px; padding: 34px 112px 10px 3px; }
  .lotus-scene-view { right:-32px; top:-7px; width:min(288px, calc(100vw - 84px)); height:190px; }
  .hotang-static-scene { left:-9%; top:-21%; width:121%; height:130%; }
}
@media (max-width: 370px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .brand-copy small { display: none; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy { min-height: 188px; padding: 32px 108px 10px 3px; }
  .lotus-scene-view { right:-26px; top:-4px; width:min(262px, calc(100vw - 72px)); height:180px; opacity:.98; }
  .hotang-static-scene { left:-8%; top:-21%; width:121%; height:130%; }
  .parser-card { padding: 14px 16px 15px; }
  .preview-card, .empty-preview { min-height: 296px; }
  .agent-stage { height: 136px; }
}

/* ---- 可运行 Demo 状态与结果 ---- */
.parse-button.loading { opacity: .72; pointer-events: none; }
.parse-button.loading svg { animation: nudge 1s ease-in-out infinite; }
.loading-preview { display: grid; justify-items: center; align-content: center; min-height: 400px; padding: 32px 24px; color: #f7f1e3; text-align: center; }
.loading-agent { position: relative; display: grid; place-items: start center; width: 230px; height: 205px; overflow: hidden; }
.loading-agent img { width: 264px; max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.32)); }
.loading-scan { position: absolute; z-index: 3; left: 4%; right: 4%; top: 20px; height: 2px; border-radius: 999px; background: linear-gradient(90deg,transparent,rgba(240,182,63,.36),#ffd777 50%,rgba(240,182,63,.36),transparent); box-shadow: 0 0 12px rgba(240,182,63,.82); animation: scanLoading 2.2s cubic-bezier(.45,0,.55,1) infinite; }
.ready-pill.compact { margin-top: 4px; }
.loading-preview strong { margin-top: 11px; font-size: 17px; font-weight: 780; }
.loading-preview p { margin: 7px 0 0; color: #959a91; font-size: 11px; }

.error-preview { display: grid; justify-items: center; align-content: center; min-height: 400px; padding: 34px 24px; color: #f7f1e3; text-align: center; }
.error-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 20px; color: #181713; background: #e69b75; font-size: 24px; font-weight: 850; }
.error-preview strong { max-width: 310px; font-size: 17px; line-height: 1.45; }
.error-preview > p { max-width: 290px; margin: 9px 0 0; color: #969b92; font-size: 11px; line-height: 1.6; }
.error-actions { display: flex; gap: 9px; margin-top: 21px; }
.error-actions button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #ddd6c6; background: rgba(255,255,255,.05); font-size: 10px; font-weight: 720; }
.debug-content { width: min(100%,320px); max-height: 150px; margin: 14px 0 0; padding: 12px; overflow: auto; border-radius: 13px; color: #b8b7ad; background: rgba(0,0,0,.32); text-align: left; white-space: pre-wrap; word-break: break-all; font: 9px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.debug-content.hidden { display: none; }

.preview-card.is-result { min-height: 0; }
.result-state { display: flex; flex-direction: column; min-height: 0; }
.video-result .video-stage { position: relative; flex: 0 0 auto; height: clamp(224px, 62vw, 292px); max-height: 292px; overflow: hidden; background: #070806; }
.parsed-video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #070806; }
.video-pill { position: absolute; left: 15px; top: 15px; z-index: 2; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #fff; background: rgba(13,14,13,.57); backdrop-filter: blur(9px); font-size: 9px; font-weight: 750; }
.result-info { display: grid; gap: 10px; padding: 16px; color: var(--ink); background: #f7f3ea; }
.result-copy { min-width: 0; }
.result-copy strong { display: block; overflow: hidden; font-size: 13px; font-weight: 790; text-overflow: ellipsis; white-space: nowrap; }
.result-copy span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 9px; }
.result-primary { width: 100%; height: 45px; border-radius: 14px; color: #1b1b19; background: var(--yellow); box-shadow: 0 8px 18px rgba(240,182,63,.19); font-size: 11px; font-weight: 820; }
.result-secondary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.result-secondary button { height: 37px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); background: #fffdf8; font-size: 9px; font-weight: 720; }
.result-reset { justify-self: center; min-height: 27px; padding: 0 9px; color: var(--ink-faint); font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.download-status-panel,.download-failure-panel { display:grid; gap:8px; padding:11px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }
.download-status-panel.top-download-status { position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 10px); z-index:130; width:min(430px,calc(100vw - 28px)); transform:translateX(-50%); background:rgba(255,253,248,.96); box-shadow:0 15px 42px rgba(49,44,32,.14); backdrop-filter:blur(14px); transition:opacity .15s ease, transform .15s ease; touch-action:none; }
.download-status-panel.top-download-status.is-dragging { transition:none; }
.download-status-panel.top-download-status.is-swiping-out { opacity:0; transform:translate(-50%,-130%); }
.download-status-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10px; font-weight:780; }
.download-status-head small { max-width:58%; overflow:hidden; color:var(--ink-faint); text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:650; }
.download-status-head button { flex:0 0 auto; width:24px; height:24px; border-radius:999px; color:var(--ink-soft); background:#eee9dd; font-size:15px; line-height:1; }
.download-status-bar { position:relative; height:7px; overflow:hidden; border-radius:999px; background:#ebe5d8; }
.download-status-fill { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:var(--yellow); transition:width .18s ease; }
.download-status-meta { color:var(--ink-soft); font-size:9px; font-weight:680; }
.download-status-panel.is-error .download-status-fill { background:#c7663a; }
.download-status-panel.is-error .download-status-title { color:#9b4428; }
.download-failure-actions { display:grid; grid-template-columns:1fr .72fr; gap:8px; }
.download-failure-actions button.secondary { color:var(--ink-soft); background:#e9e5dc; }
.download-failure-panel strong { font-size:11px; }
.download-failure-panel span { color:var(--ink-soft); font-size:9px; line-height:1.45; }
.download-failure-panel button { justify-self:start; min-height:30px; padding:0 10px; border-radius:10px; color:#fff; background:var(--ink); font-size:9px; font-weight:760; }

/* ---- 解析服务配置与自检 ---- */
.settings-overlay,.selftest-mask { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,10,9,.44); backdrop-filter: blur(7px); animation: fadeIn .16s ease; }
.settings-dialog,.selftest-card { width: min(100%,470px); max-height: 86vh; overflow-y: auto; padding: 23px 19px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; color: var(--ink); background: var(--paper); box-shadow: 0 -18px 50px rgba(0,0,0,.18); animation: slideUp .21s cubic-bezier(.2,.75,.24,1); }
.settings-dialog h2,.selftest-card h2 { margin: 0 0 7px; font-size: 24px; letter-spacing: -.035em; }
.settings-desc { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.settings-platforms { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.72); }
.settings-platforms summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; list-style: none; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 780; }
.settings-platforms summary::-webkit-details-marker { display: none; }
.settings-platforms summary::after { content: "↘"; color: var(--ink-faint); font-size: 11px; transition: transform .16s ease; }
.settings-platforms[open] summary::after { transform: rotate(180deg); }
.settings-platform-grid { display: grid; gap: 8px; padding: 0 14px 14px; }
.settings-platform-grid section { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(239,237,230,.72); }
.settings-platform-grid strong { font-size: 10px; font-weight: 820; }
.settings-platform-grid span,.settings-platform-grid small { color: var(--ink-faint); font-size: 9px; line-height: 1.45; }
.settings-note { margin: 8px 0 18px; color: #4c796d; font-size: 10px; font-weight: 650; }
.settings-field { display: grid; gap: 8px; }
.settings-field span { font-size: 11px; font-weight: 740; }
.settings-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); outline: 0; border-radius: 15px; color: var(--ink); background: #fffdf8; font-size: 11px; }
.settings-field input:focus { border-color: rgba(27,27,25,.25); box-shadow: 0 0 0 4px rgba(240,182,63,.12); }
.settings-actions { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9px; margin-top: 12px; }
.release-settings-dialog .settings-actions { grid-template-columns: 1fr; }
.settings-btn { height: 45px; border-radius: 14px; font-size: 11px; font-weight: 780; }
.settings-btn.secondary { background: #e9e5dc; }
.settings-btn.primary { color: #fff; background: var(--ink); }
.settings-btn.danger { color:#9d463b; background:#fff2ef; }
.settings-reset { display: block; margin: 14px auto 0; color: var(--ink-faint); font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.settings-meta { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 0; padding: 14px 2px 0; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 9px; }
.settings-meta strong { color: var(--ink-soft); font-size: 10px; }
.settings-privacy { display: block; width: 100%; height: 41px; margin-top: 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink-soft); background: #fffdf8; font-size: 10px; font-weight: 720; }
.settings-feedback-entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; width: 100%; min-height: 46px; margin-top: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); text-align: left; background: #fffdf8; }
.settings-feedback-entry::after { grid-row: 1 / span 2; content: "›"; color: var(--ink-faint); font-size: 16px; font-weight: 720; }
.settings-feedback-entry strong { font-size: 11px; font-weight: 820; }
.settings-feedback-entry span { color: var(--ink-faint); font-size: 9px; line-height: 1.35; }
.settings-support-entry { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; width: 100%; min-height: 48px; margin-top: 9px; padding: 10px 13px; border: 1px solid rgba(228,188,88,.42); border-radius: 15px; color: var(--ink); text-align: left; background: linear-gradient(135deg,#fffdf8 0%,#fff8e5 100%); }
.settings-support-entry::after { grid-row: 1 / span 2; content: "↗"; color: #b88923; font-size: 12px; font-weight: 820; }
.settings-support-entry strong { font-size: 11px; font-weight: 820; }
.settings-support-entry span { color: var(--ink-faint); font-size: 9px; line-height: 1.35; }
.support-dialog { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.support-dialog-actions { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; margin-top: 15px; }
.support-code-actions { grid-template-columns: 1.05fr .95fr; }
.support-primary-btn,.support-secondary-btn { height: 45px; border-radius: 14px; font-size: 11px; font-weight: 820; }
.support-primary-btn { color: #1b1b19; background: var(--yellow); box-shadow: 0 9px 18px rgba(240,182,63,.2); }
.support-secondary-btn { color: var(--ink-soft); background: #e9e5dc; }
.support-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.support-choice-btn { display: grid; place-items: center; min-height: 72px; padding: 14px 10px; border: 1px solid rgba(228,188,88,.42); border-radius: 16px; color: var(--ink); text-align: center; background: linear-gradient(135deg,#fffdf8 0%,#fff2c4 100%); }
.support-choice-btn strong { font-size: 14px; font-weight: 860; }
.support-choice-btn.alipay { border-color: rgba(31,130,233,.25); background: linear-gradient(135deg,#f8fbff 0%,#eaf4ff 100%); }
.support-back { display: inline-flex; align-items: center; min-height: 28px; margin: -5px 0 8px; padding: 0 9px; border-radius: 999px; color: var(--ink-soft); background: #eee9dd; font-size: 9px; font-weight: 740; }
.support-mini-popup { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 88px); z-index: 130; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 42px); min-height: 42px; padding: 0 14px; border: 1px solid rgba(27,27,25,.07); border-radius: 15px; color: var(--ink-soft); background: rgba(255,253,248,.9); box-shadow: 0 12px 30px rgba(49,44,32,.1); backdrop-filter: blur(12px); transform: translateX(-50%); animation: fadeIn .16s ease; }
.support-mini-popup span { font-size: 15px; line-height: 1; }
.support-mini-popup strong { font-size: 10px; font-weight: 720; white-space: nowrap; }
.support-mini-popup.leaving { opacity: 0; transform: translate(-50%,-8px); transition: opacity .18s ease, transform .18s ease; }
.support-qr-card { display: grid; gap: 8px; place-items: center; padding: 10px; border: 1px solid rgba(228,188,88,.34); border-radius: 18px; background: linear-gradient(180deg,#fffefa 0%,#fff7df 100%); }
.support-qr-card strong { font-size: 11px; font-weight: 820; }
.support-qr-card img { display: block; width: min(100%, 285px); aspect-ratio: 1 / 1; border-radius: 13px; object-fit: cover; box-shadow: 0 10px 26px rgba(86,68,27,.12); }
.support-qr-card.alipay img { width: min(100%, 238px); aspect-ratio: auto; object-fit: contain; }
.support-promise { display: grid; gap: 8px; margin-top: 15px; }
.support-promise p { display: grid; grid-template-columns: 58px 1fr; gap: 9px; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,248,.72); }
.support-promise strong { font-size: 10px; font-weight: 820; }
.support-promise span { color: var(--ink-faint); font-size: 9px; line-height: 1.5; }
.support-note { margin: 12px 2px 0; color: var(--ink-faint); font-size: 9px; line-height: 1.5; }
.selftest-results { display: grid; gap: 9px; margin: 15px 0; }
.selftest-pending { padding: 30px 0; color: var(--ink-faint); text-align: center; font-size: 11px; }
.selftest-step { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf8; }
.selftest-step.ok { border-color: rgba(120,190,169,.6); background: #eef8f4; }
.selftest-step.fail { border-color: rgba(216,107,87,.5); background: #fbefec; }
.selftest-icon { margin-right: 7px; }
.selftest-label { font-size: 11px; font-weight: 760; }
.selftest-detail { margin: 8px 0 0; padding: 9px; overflow: auto; border-radius: 10px; color: #555; background: rgba(0,0,0,.035); white-space: pre-wrap; word-break: break-all; font: 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.selftest-summary { padding: 7px 0; color: #4b776b; text-align: center; font-size: 10px; font-weight: 720; }
.selftest-close { width: 100%; height: 45px; border-radius: 14px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 780; }

@keyframes scanLoading { 0%,100% { top: 20px; opacity: .42; } 50% { top: 180px; opacity: 1; } }
@keyframes scanDuck { 0%,100% { transform: translateY(0); opacity: .34; } 50% { transform: translateY(105px); opacity: .92; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(28px); opacity: .55; } }
.settings-service-row { display:flex; align-items:center; justify-content:space-between; min-height:52px; margin-top:18px; padding:0 14px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; font-size:11px; }
.settings-service-row span { display:inline-flex; align-items:center; gap:8px; font-weight:720; }
.settings-service-row span i { width:7px; height:7px; border-radius:50%; background:#69aa96; box-shadow:0 0 0 4px rgba(105,170,150,.13); }
.settings-service-row strong { color:#4c796d; font-size:10px; }
.settings-update-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; margin-top:18px; padding:0 14px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; font-size:11px; }
.settings-update-row span { display:inline-flex; align-items:center; gap:8px; font-weight:720; }
.settings-update-row span i { width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(240,182,63,.13); }
.settings-update-row button { min-height:32px; padding:0 11px; border-radius:11px; color:#fff; background:var(--ink); font-size:10px; font-weight:760; }
.update-config-url { word-break:break-all; }
.settings-close { width:100%; height:46px; margin-top:10px; border-radius:14px; color:#fff; background:var(--ink); font-size:11px; font-weight:780; }
.analytics-debug-panel { margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fffdf8; }
.analytics-debug-panel h3 { margin:0 0 6px; font-size:14px; }
.analytics-debug-loading { margin-top:10px; padding:12px; border-radius:12px; color:var(--ink-faint); background:rgba(255,255,255,.62); font-size:10px; text-align:center; }
.analytics-debug-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(224,214,191,.65); font-size:10px; }
.analytics-debug-row span { color:var(--ink-faint); }
.analytics-debug-row strong { max-width:62%; color:var(--ink-soft); text-align:right; word-break:break-all; }

/* ---- content hub ---- */
.share-overlay { position:fixed; inset:0; z-index:92; display:flex; justify-content:center; background:var(--paper); animation:fadeIn .16s ease; overflow-y:auto; }
.share-page { width:min(100%,470px); min-height:100vh; padding:max(22px,env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.share-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.share-page-head h2 { margin:0 0 7px; font-size:30px; letter-spacing:-.05em; }
.share-page-head p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.6; }
.share-close { flex:0 0 auto; min-width:42px; height:42px; border:1px solid var(--line); border-radius:15px; color:var(--ink-soft); background:#fffdf8; font-size:18px; }
.lotus-section { margin-top:18px; }
.lotus-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 11px; }
.lotus-section-title span { font-size:13px; font-weight:820; }
.lotus-section-title small { color:var(--ink-faint); font-size:9px; font-weight:700; }
.lotus-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.lotus-feature-card { display:grid; align-content:start; min-height:132px; padding:12px 10px; border:1px solid rgba(27,27,25,.075); border-radius:19px; background:rgba(255,253,248,.78); box-shadow:0 10px 24px rgba(49,44,32,.07); text-align:left; }
.lotus-feature-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:14px; color:#6e5210; background:linear-gradient(135deg,#fff8df,#f8dc7c 58%,#f0b63f); font-size:15px; font-weight:860; }
.lotus-feature-copy { display:grid; gap:6px; margin-top:10px; min-width:0; }
.lotus-feature-copy strong { font-size:12px; font-weight:820; }
.lotus-feature-copy p { margin:0; color:var(--ink-soft); font-size:9px; line-height:1.45; }
.lotus-feature-copy em { justify-self:start; display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border-radius:999px; color:#85764f; background:#f7edcf; font-size:8px; font-style:normal; font-weight:760; }
.share-list { display:grid; gap:12px; }
.share-card { display:grid; grid-template-columns:64px 1fr; gap:13px; width:100%; min-height:98px; padding:14px; border:1px solid rgba(27,27,25,.075); border-radius:22px; background:rgba(255,253,248,.84); box-shadow:0 12px 30px rgba(49,44,32,.08); text-align:left; }
.share-thumb { display:grid; place-items:center; width:64px; height:64px; border-radius:19px; color:#6e5210; background:linear-gradient(135deg,#fff8df,#f8dc7c 55%,#f0b63f); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); font-size:18px; font-weight:860; }
.share-card-copy { min-width:0; }
.share-card-copy strong { display:block; margin-top:2px; font-size:14px; font-weight:820; }
.share-card-copy p { margin:7px 0 0; color:var(--ink-soft); font-size:11px; line-height:1.55; }
.share-card-copy ul { margin:9px 0 0; padding-left:15px; color:var(--ink-soft); font-size:10px; line-height:1.55; }
.share-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.share-tags em { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:999px; color:#7b6a39; background:#f7edcf; font-size:8px; font-style:normal; font-weight:760; }
.share-detail { position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center; background:rgba(10,10,9,.42); backdrop-filter:blur(7px); animation:fadeIn .16s ease; }
.share-detail-card { width:min(100%,470px); padding:23px 19px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:var(--paper); box-shadow:0 -18px 50px rgba(0,0,0,.18); animation:slideUp .21s cubic-bezier(.2,.75,.24,1); }
.share-detail-card h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.03em; }
.share-detail-card p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.65; }
.share-detail-card p + p { margin-top:8px; }
.share-detail-card strong { color:var(--ink); font-size:13px; }
.share-detail-actions { display:grid; grid-template-columns:1.15fr .85fr; gap:9px; margin-top:18px; }
.share-detail-card button { width:100%; height:46px; border-radius:14px; color:#fff; background:var(--ink); font-size:11px; font-weight:780; }
.share-detail-card > button { margin-top:18px; }
.share-detail-card button.secondary { color:var(--ink-soft); background:#e9e5dc; }
.feedback-detail { position:fixed; inset:0; z-index:96; display:flex; align-items:flex-end; justify-content:center; background:rgba(10,10,9,.42); backdrop-filter:blur(7px); animation:fadeIn .16s ease; }
.feedback-detail-card { width:min(100%,470px); padding:23px 19px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; color:var(--ink); background:var(--paper); box-shadow:0 -18px 50px rgba(0,0,0,.18); animation:slideUp .21s cubic-bezier(.2,.75,.24,1); }
.feedback-detail-card h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.03em; }
.feedback-detail-card p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.65; }
.general-feedback-input { display:block; width:100%; min-height:112px; margin-top:14px; padding:13px 14px; border:1px solid var(--line); outline:0; resize:none; border-radius:15px; color:var(--ink); background:#fffdf8; font-size:13px; line-height:1.55; }
.general-feedback-input:focus { border-color:rgba(27,27,25,.25); box-shadow:0 0 0 4px rgba(240,182,63,.12); }
.feedback-privacy-note { margin-top:9px !important; color:var(--ink-faint) !important; font-size:9px !important; }
.feedback-summary { display:grid; gap:8px; margin-top:15px; padding:12px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; }
.feedback-summary div { display:grid; grid-template-columns:72px 1fr; gap:10px; font-size:10px; }
.feedback-summary span { color:var(--ink-faint); }
.feedback-summary strong { min-width:0; overflow:hidden; color:var(--ink-soft); text-overflow:ellipsis; white-space:nowrap; font-weight:720; }
.feedback-actions { display:grid; grid-template-columns:1.15fr .85fr; gap:9px; margin-top:18px; }
.feedback-actions button { height:46px; border-radius:14px; color:#fff; background:var(--ink); font-size:11px; font-weight:780; }
.feedback-actions button.secondary { color:var(--ink-soft); background:#e9e5dc; }

/* ---- v1.1.0-alpha1 多媒体结果：图集与 Live ---- */
.gallery-result,.live-result { min-height: 0; }
.gallery-head { position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:58px; padding:13px 15px; color:#fff; background:#11120f; }
.gallery-head .video-pill { position:absolute; left:15px; top:15px; }
.gallery-head > button { min-height:30px; padding:0 10px; border:1px solid rgba(255,255,255,.11); border-radius:10px; color:#ddd6c7; background:rgba(255,255,255,.05); font-size:9px; font-weight:720; }
.live-note { color:#e2b956; font-size:9px; font-weight:720; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:3px; height:clamp(180px,48vw,224px); max-height:224px; overflow-y:auto; overscroll-behavior:contain; background:#0c0d0b; scrollbar-width:none; }
.gallery-grid::-webkit-scrollbar { display:none; }
.gallery-item { position:relative; aspect-ratio:1/1; overflow:hidden; border:0; background:#1d1e1a; opacity:.55; transition:opacity .15s ease,transform .15s ease; }
.gallery-item.selected { opacity:1; }
.gallery-item:active { transform:scale(.98); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item img.native-preview-pending { opacity:.72; filter:saturate(.65) brightness(.86); }
.gallery-item img.native-preview-ready { opacity:1; filter:none; }
.gallery-item img.native-preview-failed { opacity:0; }
.gallery-item.native-preview-loading::before { content:"预览加载中"; position:absolute; inset:0; display:grid; place-items:center; padding:8px; color:rgba(244,239,228,.66); background:linear-gradient(135deg,rgba(31,33,28,.88),rgba(20,21,18,.96)); font-size:11px; font-weight:720; text-align:center; }
.gallery-item.native-preview-loaded::before { display:none; }
.gallery-item.native-preview-unavailable::before { content:"预览暂不可用"; position:absolute; inset:0; display:grid; place-items:center; padding:8px; color:rgba(244,239,228,.66); background:linear-gradient(135deg,rgba(31,33,28,.88),rgba(20,21,18,.96)); font-size:11px; font-weight:720; text-align:center; }
.gallery-check { position:absolute; right:7px; top:7px; display:grid; place-items:center; width:21px; height:21px; border:1px solid rgba(255,255,255,.52); border-radius:50%; color:transparent; background:rgba(15,16,14,.5); backdrop-filter:blur(5px); font-size:11px; font-weight:850; }
.gallery-item.selected .gallery-check { border-color:var(--yellow); color:#1a1916; background:var(--yellow); }
.live-badge { position:absolute; left:7px; bottom:7px; display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#fff; background:rgba(14,15,13,.62); backdrop-filter:blur(6px); font-size:7px; font-weight:800; letter-spacing:.12em; }
.live-badge::before { content:""; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#f1b63e; box-shadow:0 0 7px rgba(241,182,62,.9); }
.live-grid .gallery-item { aspect-ratio:4/5; }
.result-secondary.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.result-secondary.three button { padding:0 4px; font-size:8px; }
.download-progress { min-height:32px; padding:9px 11px; border-radius:11px; color:#5f5a50; background:#eee9dd; font-size:9px; line-height:1.45; text-align:center; }
.media-limitation-note { margin-top:10px; padding:10px 12px; border-radius:12px; color:#776d5c; background:rgba(246,237,210,.82); font-size:10px; line-height:1.55; }

/* ---- 多平台服务配置 ---- */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.settings-dialog > .settings-field { margin-top:18px; }
.settings-grid .settings-field { min-width:0; }
.settings-dialog .settings-note { margin:11px 0 0; color:#7e776b; font-weight:560; line-height:1.55; }

@media (max-width:360px) {
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-grid { grid-template-columns:1fr; }
  .result-secondary.three { grid-template-columns:1fr 1fr; }
  .result-secondary.three button:last-child { grid-column:1 / -1; }
}

/* alpha2: B站 CDN requires native request headers; avoid a misleading 0:00 player. */
.bili-download-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #080908;
}
.bili-download-stage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: .78;
  filter: saturate(.84) brightness(.78);
}
.bili-download-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.58));
}
.bili-download-stage span {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #f4efe4;
  background: rgba(17,18,16,.72);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 680;
}
.video-cover-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #080908;
}
.video-cover-preview img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: .82;
  filter: saturate(.82) brightness(.8);
}
.video-cover-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
}
.video-cover-preview span {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #f4efe4;
  background: rgba(17,18,16,.72);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 680;
}

/* ---- 首屏高度适配：高屏设备把多余空间交给待命预览区 ---- */
html,
body,
.app-shell {
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  html,
  body,
  .app-shell {
    min-height: 100dvh;
  }
}

.preview-card {
  flex: 1 1 302px;
  min-height: 302px;
}

.preview-card:not(.is-loading):not(.is-error):not(.is-result) {
  display: flex;
}

.preview-card:not(.is-loading):not(.is-error):not(.is-result) .empty-preview {
  flex: 1 1 auto;
  min-height: 100%;
}

.preview-card.is-loading,
.preview-card.is-error,
.preview-card.is-result {
  flex: 0 0 auto;
}

.app-footer {
  flex: 0 0 auto;
}
.error-actions { flex-wrap: wrap; }