/* Lottie 本地预览器：只作用于 page-lottie-preview.php */
.lottie-preview-page {
    --lp-ink: #20253a;
    --lp-muted: #788096;
    --lp-line: #e7eaf1;
    --lp-blue: #635bff;
    --lp-cyan: #37c8f3;
    --lp-panel: rgba(255, 255, 255, 0.86);
    position: relative;
    overflow: hidden;
    color: var(--lp-ink);
    background:
        radial-gradient(circle at 7% 5%, rgba(221, 221, 255, .55), transparent 28rem),
        radial-gradient(circle at 96% 44%, rgba(205, 241, 255, .64), transparent 26rem),
        #fbfcff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.lottie-preview-page *,
.lottie-preview-page *::before,
.lottie-preview-page *::after { box-sizing: border-box; }

.lottie-preview-shell { width: 100%; margin: 0 auto; padding: 20px 0 34px; }
.lottie-preview-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.lottie-preview-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--lp-blue); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.lottie-preview-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-blue), var(--lp-cyan)); box-shadow: 0 0 0 5px rgba(99,91,255,.1); }
.lottie-preview-hero h1 { margin: 13px 0 9px; color: var(--lp-ink); font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.lottie-preview-hero p { max-width: 590px; margin: 0; color: var(--lp-muted); font-size: 15px; line-height: 1.75; }
.lottie-preview-privacy { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 15px; color: #4a5472; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; box-shadow: 0 12px 30px rgba(51,62,112,.06); font-size: 12px; font-weight: 700; white-space: nowrap; }
.lottie-preview-lock { display: inline-grid; width: 21px; height: 21px; place-items: center; color: var(--lp-blue); background: #efefff; border-radius: 50%; font-size: 17px; line-height: 1; transform: rotate(45deg); }

.lottie-preview-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.lottie-preview-stage-card, .lottie-preview-controls { background: var(--lp-panel); border: 1px solid rgba(226,229,240,.9); border-radius: 25px; box-shadow: 0 25px 70px rgba(46,58,112,.1); backdrop-filter: blur(18px); }
.lottie-preview-stage-card { min-width: 0; padding: 17px; }
.lottie-preview-stage-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 3px 13px; }
.lottie-preview-file-status { display: flex; align-items: center; gap: 8px; color: #8c95a9; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.lottie-preview-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd1dc; }
.lottie-preview-status-dot.is-ready { background: #28c68a; box-shadow: 0 0 0 4px rgba(40,198,138,.12); }
.lottie-preview-status-dot.is-error { background: #f05d71; box-shadow: 0 0 0 4px rgba(240,93,113,.12); }
.lottie-preview-icon-button { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; color: #7f88a0; background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 20px; transition: .2s ease; }
.lottie-preview-icon-button:hover { color: var(--lp-blue); background: #f0efff; }
.lottie-preview-stage { position: relative; display: grid; min-height: 0; aspect-ratio: 3 / 2; place-items: center; overflow: hidden; background-color: #f4f7fb; border-radius: 18px; isolation: isolate; transition: background-color .25s ease; }
.lottie-preview-grid { position: absolute; inset: 0; z-index: -1; opacity: .54; background-image: linear-gradient(rgba(123,140,173,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(123,140,173,.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.lottie-preview-orbit { position: absolute; border: 1px solid rgba(99,91,255,.11); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 420px; height: 420px; border-style: dashed; transform: rotate(23deg); }
.orbit-two { width: 285px; height: 285px; border-color: rgba(55,200,243,.14); transform: rotate(-32deg) scaleX(1.6); }
.lottie-preview-empty { display: flex; position: relative; z-index: 2; flex-direction: column; align-items: center; gap: 8px; color: #808aa1; text-align: center; transition: opacity .2s ease, transform .2s ease; }
.lottie-preview-empty.is-hidden { opacity: 0; pointer-events: none; transform: scale(.97); }
.lottie-preview-empty strong { margin-top: 12px; color: #3d4662; font-size: 18px; font-weight: 750; }
.lottie-preview-empty > span { font-size: 12px; }
.lottie-preview-empty-mark { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 54px; height: 54px; padding: 12px; background: linear-gradient(145deg, #f0efff, #e4f8ff); border: 1px solid rgba(99,91,255,.12); border-radius: 16px; box-shadow: 0 10px 24px rgba(99,91,255,.12); }
.lottie-preview-empty-mark span { width: 7px; border-radius: 5px; background: linear-gradient(to top, var(--lp-blue), var(--lp-cyan)); animation: lp-wave 1.4s ease-in-out infinite; }
.lottie-preview-empty-mark span:nth-child(1) { height: 16px; animation-delay: -.3s; }
.lottie-preview-empty-mark span:nth-child(2) { height: 27px; animation-delay: -.15s; }
.lottie-preview-empty-mark span:nth-child(3) { height: 20px; }
@keyframes lp-wave { 0%, 100% { transform: scaleY(.6); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.lottie-preview-primary, .lottie-preview-sample { font: inherit; cursor: pointer; }
.lottie-preview-primary { display: inline-flex; align-items: center; gap: 18px; margin-top: 19px; padding: 12px 17px 12px 19px; color: #fff; background: linear-gradient(135deg, #655bf7, #4d9ff6); border: 0; border-radius: 11px; box-shadow: 0 9px 20px rgba(93,91,239,.22); font-size: 13px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease; }
.lottie-preview-primary:hover { box-shadow: 0 12px 25px rgba(93,91,239,.34); transform: translateY(-2px); }
.lottie-preview-primary span { font-size: 16px; line-height: 1; }
.lottie-preview-sample { padding: 2px 0; color: #737d97; background: transparent; border: 0; font-size: 12px; }
.lottie-preview-sample:hover { color: var(--lp-blue); }
.lottie-preview-canvas { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.lottie-preview-canvas svg { width: 100%; height: 100%; transform-origin: center; transition: transform .2s ease; }
.lottie-preview-drop-hint { position: absolute; top: 22px; left: 50%; z-index: 4; padding: 8px 13px; color: #fff; background: rgba(54,60,91,.88); border-radius: 999px; opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: .2s ease; font-size: 12px; font-weight: 700; }
.lottie-preview-stage.is-dragging { outline: 2px solid var(--lp-blue); outline-offset: -8px; }
.lottie-preview-stage.is-dragging .lottie-preview-drop-hint { opacity: 1; transform: translate(-50%, 0); }
.lottie-preview-timeline { padding: 15px 3px 1px; }
.lottie-preview-time-row { display: flex; justify-content: space-between; margin-bottom: 7px; color: #9ca4b6; font-size: 10px; font-variant-numeric: tabular-nums; }
.lottie-preview-range { width: 100%; height: 4px; margin: 0; accent-color: var(--lp-blue); cursor: pointer; }

.lottie-preview-controls { display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.lottie-preview-control-section { padding: 22px 22px 20px; border-bottom: 1px solid var(--lp-line); }
.lottie-preview-section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #5f6880; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lottie-preview-section-label span { padding: 4px 7px; color: #38a886; background: #e8faf3; border-radius: 5px; font-size: 9px; letter-spacing: .08em; }
.lottie-preview-file-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; background: #f7f8fc; border: 1px solid #eef0f5; border-radius: 12px; }
.lottie-preview-file-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: #fff; background: linear-gradient(145deg, #6e62fa, #44c9ef); border-radius: 9px; font-size: 17px; }
.lottie-preview-file-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.lottie-preview-file-copy strong { overflow: hidden; color: #49536d; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.lottie-preview-file-copy small { overflow: hidden; color: #9da5b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lottie-preview-change { padding: 6px 9px; color: var(--lp-blue); background: #eeedff; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
.lottie-preview-notice { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #7f8a9e; font-size: 10px; line-height: 1.5; }
.lottie-preview-notice span { display: grid; width: 16px; height: 16px; place-items: center; color: #27b27f; background: #e5f8f0; border-radius: 50%; font-size: 10px; }
.lottie-preview-field-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 28px; color: #737e95; font-size: 11px; }
.lottie-preview-field-row + .lottie-preview-field-row { margin-top: 18px; }
.lottie-preview-field-row label { flex: 0 0 auto; }
.lottie-preview-field-row select { min-width: 83px; padding: 7px 8px; color: #5d6780; background: #f5f6fa; border: 1px solid #e9ebf1; border-radius: 7px; outline: 0; font: inherit; font-size: 11px; cursor: pointer; }
.lottie-preview-field-row label span { margin-left: 5px; color: var(--lp-blue); font-weight: 750; }
.lottie-preview-field-row input.compact { flex: 1; max-width: 180px; }
.lottie-preview-help-card { display: flex; gap: 10px; margin: auto 22px 22px; padding: 13px; color: #7e889f; background: linear-gradient(135deg, #f5f4ff, #effbff); border: 1px solid #e5e7fa; border-radius: 12px; }
.lottie-preview-help-icon { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; color: var(--lp-blue); border: 1px solid #aaa7ff; border-radius: 50%; font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
.lottie-preview-help-card strong { display: block; margin-bottom: 4px; color: #606a83; font-size: 11px; }
.lottie-preview-help-card p { margin: 0; font-size: 10px; line-height: 1.6; }
.lottie-preview-footer-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #a4acbc; font-size: 10px; }
.lottie-preview-footer-note span { width: 5px; height: 5px; background: #5fd3b2; border-radius: 50%; }
/* 复用 RiPro 下载二维码临时页的主题变量，主题切换时自动更新。 */
body.lottie-preview-page-body main { display: flex; flex-direction: column; }
body.lottie-preview-page-body .lottie-preview-page { flex: 0 0 auto; }
.lottie-preview-page {
    --lp-ink: var(--ri-heading-color, #191a1f);
    --lp-muted: var(--ri-secondary-text, #595d69);
    --lp-line: var(--ri-border-color, #f0f1f3);
    --lp-panel: var(--ri-secondary-bg, #fff);
    color: var(--ri-body-color, #595d69);
    background: var(--ri-body-bg, #ededed);
}
.lottie-preview-stage-card,
.lottie-preview-controls { background: var(--lp-panel); border-color: var(--lp-line); box-shadow: var(--ri-box-shadow-lg, 0 8px 30px rgba(0,0,0,.08)); }
.lottie-preview-stage { background-color: var(--ri-tertiary-bg, #f7f8f9); }
.lottie-preview-file-card,
.lottie-preview-control-button,
.lottie-preview-field-row select { color: var(--ri-body-color, #595d69); background: var(--ri-tertiary-bg, #f7f8f9); border-color: var(--ri-border-color, #f0f1f3); }
.lottie-preview-empty strong,
.lottie-preview-file-copy strong { color: var(--ri-heading-color, #191a1f); }
.lottie-preview-empty,
.lottie-preview-empty > span,
.lottie-preview-file-status,
.lottie-preview-file-copy small,
.lottie-preview-time-row,
.lottie-preview-field-row,
.lottie-preview-sample { color: var(--ri-secondary-text, #595d69); }
.lottie-preview-control-section { border-color: var(--ri-border-color, #f0f1f3); }
.lottie-preview-section-label { color: var(--ri-secondary-text, #595d69); }
.lottie-preview-example { display: flex; min-height: 0; flex: 0 0 auto; flex-direction: column; margin: 20px 22px 22px; padding: 0; color: var(--ri-body-color, #595d69); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.lottie-preview-example-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 10px; }
.lottie-preview-example-head h2 { margin: 8px 0 0; color: var(--ri-heading-color, #191a1f); font-size: 20px; font-weight: 750; letter-spacing: -.03em; }
.lottie-preview-example-button { padding: 9px 14px; color: var(--ri-primary-text, #2163e8); background: var(--ri-primary-bg-subtle, rgba(33,99,232,.08)); border: 1px solid var(--ri-primary-border-subtle, rgba(33,99,232,.2)); border-radius: 9px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
.lottie-preview-example-poster { position: relative; display: flex; width: 100%; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: transparent; border: 0; border-radius: 0; }
.lottie-preview-example-canvas { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; }
.lottie-preview-example-canvas svg { display: block; width: 100%; height: 100%; max-height: none; }

@media (max-width: 900px) {
    .lottie-preview-shell { padding-top: 20px; }
    .lottie-preview-hero { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 26px; }
    .lottie-preview-workspace { grid-template-columns: 1fr; }
    .lottie-preview-stage { min-height: min(65vh, 520px); }
    .lottie-preview-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lottie-preview-controls > .lottie-preview-example { grid-column: 1 / -1; min-height: 0; margin: 20px 22px 22px; }
    .lottie-preview-help-card { grid-column: 1 / -1; margin: 20px 22px 22px; }
}
@media (max-width: 560px) {
    .lottie-preview-shell { padding-top: 12px; }
    .lottie-preview-hero h1 { font-size: 38px; }
    .lottie-preview-hero p { font-size: 13px; }
    .lottie-preview-stage-card { padding: 10px; border-radius: 18px; }
    .lottie-preview-stage { min-height: 0; aspect-ratio: 4 / 3; border-radius: 13px; }
    .lottie-preview-controls { display: block; border-radius: 18px; }
    .lottie-preview-controls > .lottie-preview-example { min-height: 0; margin: 17px; }
    .lottie-preview-control-section { padding: 19px 17px; }
    .lottie-preview-help-card { margin: 17px; }
}