/* Workspace shell: sidebar, filmstrip, view controls, floating tools, and workspace action buttons. */

    body { flex-direction: column; --workspace-topbar-height: 56px; }
    .workspace-body { display: flex; flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; width: 100%; }
    .workspace-topbar {
        --primary: #64a8ff;
        --workspace-accent: #64a8ff;
        --modal-accent: #64a8ff;
        --topbar-inset: 16px;
        --topbar-gap: 16px;
        position: absolute;
        inset: 0 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 32px;
        pointer-events: none;
        z-index: 70;
        visibility: visible;
        transition: filter .28s ease, visibility 0s;
    }
    .workspace-topbar-panel {
        display: flex;
        align-items: center;
        gap: var(--topbar-gap);
        height: var(--workspace-topbar-height);
        min-width: 0;
        padding: 8px var(--topbar-inset);
        box-sizing: border-box;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 0 0 12px 12px;
        background: rgba(28,28,30,.5);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        box-shadow: var(--shadow-floating-rest);
        pointer-events: auto;
    }
    .workspace-topbar-panel { opacity: 1; transform: translateY(0); transition: opacity .18s ease, transform .24s cubic-bezier(.2,.78,.24,1); }
    .workspace-topbar-leading { flex: 0 1 auto; border-radius: 0 0 12px 0; }
    .workspace-topbar-trailing { flex: 0 0 auto; border-radius: 0 0 0 12px; }
    body.glass-effects-off .workspace-topbar-panel { background: rgba(28,28,30,.88); }
    body:is(.welcome-mode,.topbar-leaving) .workspace-topbar { visibility: hidden; transition: filter .28s ease, visibility 0s linear .24s; }
    body:is(.welcome-mode,.topbar-leaving) .workspace-topbar-panel { opacity: 0; transform: translateY(-100%); pointer-events: none; }
    body.decorative-animations-off :is(.workspace-topbar,.workspace-topbar-panel),
    body.app-background-paused :is(.workspace-topbar,.workspace-topbar-panel) { transition: none; }
    @media (prefers-reduced-motion: reduce) { body:is(.welcome-mode,.topbar-leaving) .workspace-topbar, .workspace-topbar, .workspace-topbar-panel { transition: none; } }
    .workspace-case-dock { --primary: #64a8ff; --workspace-accent: #64a8ff; --modal-accent: #64a8ff; position: fixed; z-index: 110000; padding: 6px; box-sizing: border-box; background: rgba(28,28,30,.94); border-radius: 8px; box-shadow: var(--shadow-floating-rest); }
    .workspace-case-dock[hidden] { display: none; }
    .workspace-case-dock label { color: var(--primary); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .workspace-case-field { width: 100%; }
    .workspace-case-slot { height: 36px; }
    .workspace-case-slot.is-case-suppressed .workspace-case-field { visibility: hidden; }
    .workspace-app-icon { width: 36px; height: 36px; object-fit: contain; opacity: .92; transition: opacity .14s ease, filter .14s ease; }
    .workspace-topbar .workspace-home-btn,
    .workspace-topbar .workspace-home-btn:is(:hover, :focus-visible, :active) { padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; }
    .workspace-topbar .workspace-home-btn:hover img, .workspace-topbar .workspace-home-btn:focus-visible img { opacity: 1; filter: brightness(1.15); }
    .source-path-tooltip.is-topbar-source { border-color: rgba(10,132,255,.48); box-shadow: 0 12px 28px rgba(0,0,0,.44), 0 0 0 1px rgba(10,132,255,.05); }
    .workspace-case-field, .workspace-date-field, .workspace-source-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .workspace-case-slot { flex: 0 1 calc(340px - var(--topbar-inset) - 36px - var(--topbar-gap) - 1px); width: calc(340px - var(--topbar-inset) - 36px - var(--topbar-gap) - 1px); }
    .workspace-topbar label, .workspace-source-label { margin: 0; color: var(--primary); white-space: nowrap; font-size: 13px; font-weight: 700; }
    :is(.workspace-topbar,.workspace-case-dock) #caseNumber {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        height: 36px;
        box-sizing: border-box;
        padding: 0 10px;
        margin: 0;
        border: 1px solid #3a3a3c;
        border-radius: 8px;
        background: #18181a;
        color: #f5f5f7;
        font-size: 15px;
        font-weight: 700;
        transition: border-color .14s ease, box-shadow .14s ease, color .14s ease, background-color .14s ease;
    }
    .workspace-source-field { flex: 0 0 116px; }
    .workspace-source-label { display: none; }
    .workspace-source-field .source-file-row { --source-file-control-size: 36px; flex: 1; min-width: 0; gap: 8px; }
    .workspace-topbar .source-file-picker { padding: 0; gap: 0; grid-template-columns: 1fr; border: 0; background: transparent; }
    .workspace-topbar .source-file-choose-btn { width: 72px; height: 36px; padding: 0; white-space: nowrap; }
    .workspace-topbar .workspace-home-btn { width: 36px; height: 36px; min-width: 36px; margin: 0; flex: 0 0 36px; }
    .workspace-topbar .workspace-quick-btn { height: 36px; min-height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
    .workspace-topbar #historyControls { position: static; left: auto; top: auto; height: 36px; flex: 0 0 auto; box-shadow: none; }
    .workspace-topbar .history-btn { height: 36px; box-sizing: border-box; white-space: nowrap; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .workspace-topbar .settings-fab { position: static; inset: auto; width: 46px; height: 46px; padding: 0; flex: 0 0 46px; z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
    @media (max-width: 1100px) {
        .workspace-topbar { --topbar-gap: 10px; --topbar-inset: 12px; }
        .workspace-source-label { display: none; }
        .workspace-topbar .workspace-quick-btn { padding-inline: 12px; }
        .workspace-topbar .history-label { display: none; }
        .workspace-topbar .history-btn { width: 36px; padding: 0; }
    }
    @media (max-width: 820px) {
        .workspace-topbar { gap: 16px; --topbar-gap: 8px; --topbar-inset: 8px; }
        .workspace-topbar .workspace-quick-btn { width: 36px; padding: 0; justify-content: center; }
        .workspace-topbar .workspace-quick-btn > span { display: none; }
    }

    .current-spec-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .current-spec-info { display: flex; align-items: baseline; flex: 1 1 auto; min-width: 0; gap: 8px; }
    .current-spec-info strong { color: #f5f5f7; font-size: 18px; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .current-spec-info > span { color: #aeaeb2; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
    .current-spec-tool-btn { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; flex: 0 0 28px; color: var(--primary); }
    .current-spec-tool-btn.is-tool-open,
    .current-spec-tool-btn.is-tool-open:is(:hover, :focus-visible) {
        background: rgba(255,159,10,0.14);
        border-color: var(--primary);
        color: var(--primary);
    }
    .current-spec-tool-btn svg { width: 16px; height: 16px; }

    .micro-adjust-group { gap: 16px; }
    .micro-adjust-group .micro-adjust-header { justify-content: space-between; margin-bottom: 0; }
    .micro-detail-toggle { padding-inline: 8px; font-size: 12px; white-space: nowrap; }
    .micro-adjust-group.is-compact { gap: 8px; }
    .micro-adjust-group.is-compact .micro-adjust-header { margin-bottom: 0; }
    .micro-adjust-group.is-compact .micro-adjust-section { height: 50px; min-height: 50px; padding: 10px 8px; }
    .micro-adjust-group.is-density-changing .micro-adjust-section { overflow: clip; }
    .micro-adjust-group.is-compact [data-micro-detail] { display: none; }
    .micro-adjust-group.is-compact .adjust-tool-title { font-size: 13px; }
    .micro-adjust-group.is-compact .pan-control-grid { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
    .micro-adjust-group.is-compact .pan-nudge-pad { grid-template-columns: repeat(4, 24px); grid-template-rows: 26px; gap: 2px; top: 0; }
    #microAdjustGroup.is-compact .pan-nudge-pad .btn-icon { grid-row: 1; height: 26px; }
    #microAdjustGroup.is-compact #panLeft { grid-column: 1; }
    #microAdjustGroup.is-compact #panUp { grid-column: 2; }
    #microAdjustGroup.is-compact #panDown { grid-column: 3; }
    #microAdjustGroup.is-compact #panRight { grid-column: 4; }
    .micro-adjust-group.is-compact .pan-control-grid #btnLinkRuler { width: 80px; min-width: 80px; max-width: 80px; margin-right: 0; font-size: 11px; padding-inline: 4px; }
    .micro-adjust-group.is-compact .adjust-control-row:not(.pan-adjust-row) { display: grid; grid-template-columns: 28px minmax(0, 1fr) 50px; align-items: center; gap: 6px; }
    .micro-adjust-group.is-compact :is(.adjust-control-top, .adjust-value-actions, .adjust-control-body, .rot-action-row) { display: contents; }
    .micro-adjust-group.is-compact .adjust-control-row:not(.pan-adjust-row) .adjust-tool-title { grid-column: 1; grid-row: 1; }
    .micro-adjust-group.is-compact .adjust-slider-row { grid-column: 2; grid-row: 1; gap: 4px; min-width: 0; }
    .micro-adjust-group.is-compact :is(#zoomValDisplay, #rotVal) { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
    .micro-adjust-group.is-compact #rotSlider { flex: 1 1 0; width: 0; }
    .micro-adjust-group.is-compact .zoom-satellite { display: none; }

    .desktop-fullscreen-exit {
        position: fixed;
        z-index: 110000;
        top: 12px;
        right: 16px;
        width: 36px;
        height: 36px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 50%;
        color: #f5f5f7;
        background: rgba(28,28,30,0.9);
        box-shadow: 0 8px 22px rgba(0,0,0,0.42);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.96);
        transition: opacity 0.14s ease, visibility 0s linear 0.14s, transform 0.14s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .desktop-fullscreen-exit[hidden] { display: none; }
    body.desktop-native-fullscreen .desktop-fullscreen-exit.is-revealed {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition-delay: 0s;
    }
    .desktop-fullscreen-exit:hover:not(:disabled) {
        border-color: rgba(255,255,255,0.3);
        background: rgba(58,58,60,0.96);
    }
    body.desktop-native-fullscreen .desktop-fullscreen-exit.is-revealed:active:not(:disabled) { transform: translateY(1px) scale(0.96); }
    body.desktop-native-fullscreen .desktop-fullscreen-exit.is-revealed:disabled { opacity: 0.62; cursor: wait; }
    .desktop-fullscreen-exit > span {
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("../assets/icons/x.svg?v=6.10-shared-r1") center / contain no-repeat;
        mask: url("../assets/icons/x.svg?v=6.10-shared-r1") center / contain no-repeat;
    }
    @media (prefers-reduced-motion: reduce) {
        .desktop-fullscreen-exit { transition: none; }
    }

    /* Extend panel surfaces to the viewport edge; only their contents clear the floating topbar. */
    .sidebar { --workspace-accent: var(--primary); width: 340px; background: var(--panel-bg); padding: var(--workspace-topbar-height) 0 0; box-shadow: 0 0 20px rgba(0,0,0,0.8); z-index: 50; display: flex; flex-direction: column; overflow: hidden; overflow: clip; flex-shrink: 0; border-right: 1px solid #333; transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.28s ease; margin-left: 0; contain: layout paint style; }
    .sidebar.collapsed { margin-left: -340px; }
    .sidebar-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        padding-bottom: 12px;
        overscroll-behavior: contain;
        overflow-anchor: none;
        scrollbar-gutter: stable;
    }
    .sidebar-save-footer {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 16px 16px;
        border-top: 1px solid #333336;
        background: linear-gradient(180deg, rgba(28,28,30,0.68), rgba(28,28,30,0.98) 40%);
        box-shadow: 0 -10px 26px rgba(0,0,0,0.28);
    }
    .sidebar-save-footer .btn {
        width: auto;
        min-width: 0;
        height: 46px;
        min-height: 46px;
        box-sizing: border-box;
        padding: 10px 8px;
        margin: 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .sidebar-save-footer .btn > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sidebar-save-footer .sidebar-quick-btn { grid-column: 1 / -1; }
    .sidebar-save-expanded-btn {
        min-height: 40px;
        padding: 9px 12px;
        color: #ffb44c;
        border-color: rgba(255,159,10,0.42);
        background: rgba(255,159,10,0.08);
        font-size: 14px;
        font-weight: 800;
        box-shadow: none !important;
    }
    .btn.sidebar-save-expanded-btn:hover:not(:disabled) {
        color: #ffd08a;
        border-color: rgba(255,159,10,0.72);
        background: rgba(255,159,10,0.16);
        box-shadow: 0 0 0 1px rgba(255,159,10,0.10), 0 4px 12px rgba(0,0,0,0.26) !important;
    }
    .sidebar-save-expanded-btn svg {
        flex: 0 0 auto;
    }
    .sidebar-save-expanded-btn span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sidebar-layout-btn {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 14px;
        box-shadow: none !important;
    }
    .sidebar-layout-btn svg { flex: 0 0 auto; }
    .sidebar-layout-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    .sidebar-toggle-btn { position: absolute; left: 340px; top: 50%; transform: translateY(-50%); width: 20px; height: 60px; background: #1c1c1e; border: 1px solid #333; border-left: none; border-radius: 0 8px 8px 0; color: #aeaeb2; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 60; transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, filter 0.28s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.5); font-size: 12px; }
    .sidebar-toggle-btn:hover { color: var(--primary); background: #242426; }
    .sidebar.collapsed + .sidebar-toggle-btn { left: 0; }

.main-editor { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; padding-bottom: 0; transition: filter 0.28s ease; }
    .main-editor.collapsed { padding-bottom: 0 !important; }
    
    .canvas-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px; padding-bottom: 199px; overflow: hidden; position: relative; cursor: grab; transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
    .main-editor.collapsed .canvas-container { padding-bottom: 4px; }
    .main-editor.filmstrip-right .canvas-container { padding-bottom: 4px; padding-right: 229px; }
    .main-editor.filmstrip-right.collapsed .canvas-container { padding-right: 4px; }
    .canvas-container:active { cursor: grabbing; }
    .canvas-container.canvas-pan-mode #editor { cursor: grab !important; }
    .canvas-container.canvas-pan-mode.is-view-panning #editor { cursor: grabbing !important; }

    @keyframes gearBounce { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } }
    .bounce-anim { animation: gearBounce 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @keyframes gearControlPress { 0%, 100% { transform: scale(1); } 50% { transform: scale(.96); } }
    .sensitivity-toggle.bounce-anim { animation: gearControlPress 160ms ease-out; }

    .main-editor {
        --filmstrip-tab-anchor-x: 212px;
        --filmstrip-tab-side-y: 238px;
    }

    .filmstrip-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 195px;
        /* 改為半透明並加入強烈毛玻璃效果 */
        background: rgba(28, 28, 30, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating)); -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        display: flex; padding: 12px 20px; gap: 12px; align-items: center; z-index: 50;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.4); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); contain: layout paint style;
    }
    .main-editor.collapsed .filmstrip-bar { transform: translateY(100%); }
    .main-editor.filmstrip-right .filmstrip-bar {
        top: 0; bottom: 0; left: auto; right: 0; width: 225px; height: auto;
        flex-direction: column; padding: calc(var(--workspace-topbar-height) + 20px) 12px 20px; border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -5px 0 20px rgba(0,0,0,0.4);
    }
    .main-editor.filmstrip-right.collapsed .filmstrip-bar { transform: translateX(100%); }
    .filmstrip-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; height: 100%; flex: 1; align-items: center; padding-right: 20px; scroll-behavior: smooth; }
    /* Keep the 8px hover lift inside the scroller, including classic scrollbar space. */
    .main-editor:not(.filmstrip-right) .filmstrip-bar { padding-block: 4px; transition: transform .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1); }
    /* Horizontal gutters are not covered by scrollbar-gutter: stable. */
    .main-editor:not(.filmstrip-right) .filmstrip-scroll { padding-top: 12px; padding-bottom: 4px; overflow-x: scroll; overflow-y: hidden; scrollbar-gutter: auto; }
    /* Preserve the slot without painting an empty track; overflowing lists keep their orange thumb. */
    .main-editor:not(.filmstrip-right) .filmstrip-scroll { --ui-scroll-track: transparent; }
    .main-editor.filmstrip-right .filmstrip-scroll { flex-direction: column; overflow-x: visible; overflow-y: auto; width: 100%; height: auto; padding-right: 0; padding-bottom: 12px; align-items: center; }
    .main-editor.filmstrip-right .filmstrip-separator { width: 100% !important; height: 2px !important; margin: 6px 0 !important; }
    .main-editor.filmstrip-right .filmstrip-actions { width: 100%; min-width: 0 !important; }

    .main-editor.filmstrip-right .filmstrip-bar {
        --filmstrip-sort-width: min(400px, calc(100vw - 16px));
        transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
    }
    .main-editor .filmstrip-bar:is(.is-organizing, .is-organizing-closing) {
        z-index: 102;
    }
    body:has(.filmstrip-bar:is(.is-organizing, .is-organizing-closing)) .workspace-topbar { z-index: 103; }
    .main-editor:not(.filmstrip-right):has(> .filmstrip-bar:is(.is-organizing, .is-organizing-closing)) > .shortcut-panel.mini,
    .main-editor.filmstrip-right:has(> .filmstrip-bar:is(.is-organizing, .is-organizing-closing)) > .spec-tool-panel.mini {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .main-editor.filmstrip-right .filmstrip-bar.is-organizing { width: var(--filmstrip-sort-width); }
    .main-editor .filmstrip-bar > :is(.filmstrip-scroll, .filmstrip-actions, .filmstrip-separator) {
        transition: opacity .14s ease, transform .18s ease;
    }
    .main-editor.filmstrip-right .filmstrip-bar:is(.is-organizing, .is-organizing-closing) > .filmstrip-scroll {
        width: 200px;
        align-self: flex-end;
    }
    .main-editor .filmstrip-bar.is-organizing > :is(.filmstrip-scroll, .filmstrip-actions, .filmstrip-separator) {
        opacity: 0;
        pointer-events: none;
    }
    .main-editor .filmstrip-bar.is-organizing > .filmstrip-actions { transform: translateY(12px); }
    .main-editor .filmstrip-bar.is-organizing-closing > .filmstrip-actions { transition-delay: .08s; }
    .main-editor:not(.filmstrip-right) .filmstrip-bar.is-organizing { height: min(416px, calc(100% - var(--workspace-topbar-height) - 20px)); }
    .main-editor:not(.filmstrip-right) .filmstrip-bar:is(.is-organizing, .is-organizing-closing) > .filmstrip-scroll {
        height: 186px;
        align-self: flex-end;
    }
    .fs-sort-board {
        position: absolute;
        top: calc(var(--workspace-topbar-height) + 20px);
        right: 12px;
        bottom: 20px;
        width: calc(var(--filmstrip-sort-width) - 24px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }
    .is-organizing .fs-sort-board { opacity: 1; pointer-events: auto; }
    .fs-sort-board.is-leaving { opacity: 0; pointer-events: none; }
    .fs-sort-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid transparent; border-radius: 8px; transition: border-color .14s ease; }
    .fs-sort-heading { color: #aeaeb2; font-size: 13px; font-weight: 700; line-height: 30px; text-align: center; flex: 0 0 30px; }
    .fs-sort-board[data-active-group="common"] .fs-sort-column:first-child,
    .fs-sort-board[data-active-group="other"] .fs-sort-column:last-child { border-color: color-mix(in srgb, var(--primary) 38%, transparent); }
    .fs-sort-board[data-active-group="common"] .fs-sort-column:first-child .fs-sort-heading,
    .fs-sort-board[data-active-group="other"] .fs-sort-column:last-child .fs-sort-heading { color: var(--primary); }
    .main-editor.filmstrip-right .fs-sort-list {
        min-height: 0;
        height: 0;
        flex: 1 1 0;
        padding: 12px 0;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: auto;
        overflow-anchor: none;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .main-editor:not(.filmstrip-right) .fs-sort-board {
        inset: 12px 20px;
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    .main-editor:not(.filmstrip-right) .fs-sort-column { flex-direction: row; }
    .main-editor:not(.filmstrip-right) .fs-sort-heading {
        flex: 0 0 32px;
        align-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: 2px;
        line-height: 20px;
        white-space: nowrap;
    }
    .main-editor:not(.filmstrip-right) .fs-sort-list {
        min-width: 0;
        padding: 8px 12px;
        scroll-behavior: auto;
        overflow-anchor: none;
        overscroll-behavior: contain;
    }
    .fs-sort-list:not(:has(.fs-sort-card, .fs-drag-placeholder))::after { content: '拖到這裡'; color: #8e8e93; font-size: 13px; margin: auto; }
    .fs-sort-card > * { pointer-events: none; }
    .fs-sort-card :is(.btn-close-fs, .fs-action-group) { display: none; }
    .fs-drag-preview.is-invalid-drop { opacity: .5; }
    body.decorative-animations-off :is(.fs-sort-board, .fs-sort-column) { transition: none; }
    @media (prefers-reduced-motion: reduce) {
        .main-editor .filmstrip-bar,
        .main-editor .filmstrip-bar > *, .fs-sort-column { transition: none; }
    }
    
    .fs-reloading > * { opacity: 0 !important; transform: translateY(8px) scale(0.98) !important; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease !important; }
    .fs-wait > * { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: none !important; }

    .filmstrip-toggle { position: absolute;
        bottom: 195px; left: var(--filmstrip-tab-anchor-x); transform: translateX(-50%);
        /* 同樣套用毛玻璃效果 */
        background: rgba(28, 28, 30, 0.5); backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating)); -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; color: #aeaeb2; padding: 0 16px;
        border-radius: 8px 8px 0 0; cursor: pointer; font-size: 12px; font-weight: bold; line-height: 1; z-index: 60;
        height: 26px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
        transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), left 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s; box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
    }
    .filmstrip-toggle:hover { color: var(--primary); }
    .main-editor.collapsed .filmstrip-toggle { bottom: 0; color: var(--primary); }
    .main-editor.filmstrip-right .filmstrip-toggle {
        bottom: auto; left: auto; right: 225px; top: var(--filmstrip-tab-side-y); transform: translateY(-50%);
        border-radius: 8px 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: none;
        width: 28px; min-width: 28px; height: auto; padding: 12px 5px; writing-mode: vertical-rl; text-orientation: mixed;
        transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
        box-shadow: -4px 0 15px rgba(0,0,0,0.4);
    }
    .main-editor.filmstrip-right.collapsed .filmstrip-toggle { right: 0; bottom: auto; }
    .main-editor.filmstrip-switch-exiting:not(.filmstrip-right) #filmstripToggle {
        bottom: -38px;
        pointer-events: none;
    }
    .main-editor.filmstrip-right.filmstrip-switch-exiting #filmstripToggle {
        right: -38px;
        pointer-events: none;
    }
    .main-editor.filmstrip-switch-exiting #filmstripToggle,
    .main-editor.filmstrip-switch-exiting #filmstripPositionToggle {
        transition-duration: 0.08s;
    }
    .main-editor.filmstrip-position-settling .filmstrip-bar,
    .main-editor.filmstrip-position-settling #filmstripToggle,
    .main-editor.filmstrip-position-settling #filmstripPositionToggle {
        transition: none !important;
    }
    .main-editor.filmstrip-position-switching .filmstrip-bar,
    .main-editor.filmstrip-position-switching #filmstripToggle,
    .main-editor.filmstrip-position-switching #filmstripPositionToggle { visibility: hidden; }
    .main-editor.filmstrip-position-switching .filmstrip-scroll > * { transition: none !important; }
    .guide-action-divider {
        width: 100%;
        border-top: 1px dashed #48484a;
        margin: 10px 0 8px;
    }
    .guide-action-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 2px;
    }
    .guide-wide-btn {
        width: 100%;
        height: 36px;
        background: #3a3a3c;
        font-size: 13px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .filmstrip-position-toggle {
        position: absolute;
        bottom: 195px;
        left: calc(var(--filmstrip-tab-anchor-x) + 74px);
        height: 26px;
        min-height: 26px;
        box-sizing: border-box;
        padding: 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        background: rgba(28, 28, 30, 0.5);
        color: #c7c7cc;
        font-size: 12px;
        font-weight: bold;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), left 0.28s cubic-bezier(0.4, 0, 0.2, 1), right 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s, transform 0.12s ease;
    }
    .filmstrip-position-toggle svg {
        flex: 0 0 auto;
    }
    .filmstrip-position-toggle:hover:not(:disabled) {
        color: #73df83;
    }
    .filmstrip-position-toggle:active:not(:disabled) {
        transform: translateY(1px);
    }
    .filmstrip-position-toggle:disabled {
        opacity: 0.55;
        cursor: wait;
    }
    .main-editor.collapsed .filmstrip-position-toggle {
        bottom: 0;
    }
    .main-editor.filmstrip-right .filmstrip-position-toggle {
        bottom: auto;
        left: auto;
        right: 225px;
        top: calc(var(--filmstrip-tab-side-y) + 60px);
        height: auto;
        width: 28px;
        min-width: 28px;
        min-height: 106px;
        padding: 10px 5px;
        border-radius: 8px 0 0 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-right: none;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        box-shadow: -4px 0 15px rgba(0,0,0,0.4);
    }
    .main-editor.filmstrip-right .filmstrip-position-toggle svg {
        transform: rotate(90deg);
    }
    .main-editor.filmstrip-right.collapsed .filmstrip-position-toggle {
        right: 0;
        bottom: auto;
    }
    .main-editor.filmstrip-switch-exiting:not(.filmstrip-right) #filmstripPositionToggle {
        bottom: -38px;
        pointer-events: none;
    }
    .main-editor.filmstrip-right.filmstrip-switch-exiting #filmstripPositionToggle {
        right: -38px;
        pointer-events: none;
    }


    .canvas-view-dock {
        display: none;
        position: absolute;
        left: var(--crop-overlay-center-local-x, 50%);
        bottom: 215px;
        transform: translateX(-50%);
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(28,28,30,0.55);
        color: #f5f5f7;
        box-shadow: var(--shadow-floating-rest);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        z-index: 91;
        user-select: none;
        transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.18s ease, opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }
    .main-editor.collapsed .canvas-view-dock,
    .main-editor.filmstrip-right .canvas-view-dock {
        bottom: 20px;
    }
    .view-dock-btn,
    .view-zoom-percent,
    .view-pan-btn,
    .view-fit-btn {
        height: 30px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(58,58,60,0.76);
        color: #f5f5f7;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .view-dock-btn {
        width: 30px;
        padding: 0;
    }
    .view-zoom-percent {
        min-width: 58px;
        padding: 0 10px;
        color: var(--primary);
        font-family: monospace;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }
    .view-pan-btn,
    .view-fit-btn {
        min-width: 104px;
        padding: 0 10px;
        gap: 6px;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }
    .view-pan-btn svg,
    .view-fit-btn svg {
        color: var(--primary);
        flex: 0 0 auto;
    }
    .view-dock-label { max-width: 6em; overflow: hidden; opacity: 1; transition: max-width .18s ease, opacity .14s ease; }
    .view-pan-btn, .view-fit-btn { transition: min-width .18s ease, padding .18s ease, gap .18s ease, transform .12s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
    .canvas-view-dock.is-compact-labels .view-dock-label { max-width: 0; opacity: 0; }
    .canvas-view-dock.is-compact-labels .view-pan-btn, .canvas-view-dock.is-compact-labels .view-fit-btn { min-width: 30px; padding-inline: 0; gap: 0; }
    .canvas-view-dock.is-vertical { flex-direction: column; gap: 6px; padding: 8px 6px; }
    .canvas-view-dock.is-vertical > button { flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; padding: 0; }
    .canvas-view-dock.is-vertical .view-zoom-percent { flex-direction: column; font-size: 11px; line-height: 12px; }
    .canvas-view-dock.is-vertical .view-zoom-unit { font-size: 10px; line-height: 11px; }
    .canvas-view-dock.is-vertical .view-dock-divider { width: 24px; height: 1px; margin: 0; }
    .canvas-view-dock.is-vertical .canvas-pan-mode-hint { left: calc(100% + 8px); top: 0; bottom: auto; transform: none; }
    .canvas-view-dock.is-dock-moving { transition: none; }
    body.decorative-animations-off .canvas-view-dock, body.decorative-animations-off .canvas-view-dock *,
    body.app-background-paused .canvas-view-dock, body.app-background-paused .canvas-view-dock * { transition: none; }
    @media (prefers-reduced-motion: reduce) { .canvas-view-dock, .canvas-view-dock * { transition: none; } }
    .view-dock-btn:hover:not(:disabled),
    .view-zoom-percent:hover:not(:disabled),
    .view-pan-btn:hover:not(:disabled),
    .view-fit-btn:hover:not(:disabled) {
        background: rgba(72,72,74,0.86);
        border-color: rgba(255,159,10,0.44);
        color: #ffffff;
        box-shadow: var(--shadow-control-rest);
    }
    .view-dock-btn:active:not(:disabled),
    .view-zoom-percent:active:not(:disabled),
    .view-pan-btn:active:not(:disabled),
    .view-fit-btn:active:not(:disabled) {
        transform: scale(0.96);
    }
    .view-pan-btn.is-active {
        color: var(--primary);
        border-color: rgba(255,159,10,0.68);
        background: rgba(255,159,10,0.16);
        box-shadow: 0 0 0 1px rgba(255,159,10,0.12), var(--shadow-control-rest);
    }
    .view-dock-btn.is-long-pressing:not(:disabled) {
        color: var(--primary);
        border-color: rgba(255,159,10,0.44);
        background: rgba(72,72,74,0.86);
        box-shadow: var(--shadow-control-rest);
    }
    .view-dock-btn:disabled {
        opacity: 0.42;
        cursor: not-allowed;
    }
    .view-dock-divider {
        width: 1px;
        height: 24px;
        background: rgba(255,255,255,0.12);
        margin: 0 2px;
    }
    .canvas-pan-mode-hint {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        min-width: max-content;
        padding: 5px 9px;
        border: 1px solid rgba(255,159,10,0.3);
        border-radius: 7px;
        background: rgba(28,28,30,0.72);
        color: #d1d1d6;
        box-shadow: var(--shadow-control-rest);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(150%);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.16s ease, visibility 0s linear 0.16s;
    }
    .canvas-pan-mode-hint.show {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    #canvasZoomControl { 
        display:none; 
        position: absolute; 
        left: 20px; 
        top: calc(var(--workspace-topbar-height, 0px) + 20px);
        flex-direction: column;
        align-items: stretch; 
        
        /* 1. 降低背景不透明度到 0.5 (50%)，讓光線能透過去 */
        background: rgba(28, 28, 30, 0.5); 
        padding: 12px 16px;
        border-radius: 16px; 
        
        /* 2. 邊框改成微透明的白色反光，增強玻璃邊緣的立體感 */
        border: 1px solid rgba(255, 255, 255, 0.1); 
        
        /* 3. 增強模糊半徑，並提升一點飽和度讓透過去的照片色彩更漂亮 */
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating)); /* 支援 Safari 瀏覽器 */
        
        z-index: 90; 
        cursor: grab; 
        
        /* 4. 加深並拉大陰影，讓面板更有懸浮感 */
        box-shadow: 0 8px 24px rgba(0,0,0,0.6); 
        user-select: none;
        transition: width 0.18s ease, height 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, background 0.07s ease-out, border-color 0.14s ease-out, box-shadow 0.14s ease-out, transform 0.14s ease-out, color 0.14s ease-out;
    }
    #canvasZoomControl:active { cursor: grabbing; }
    #canvasZoomControl.mini {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        border-color: rgba(255,159,10,0.6);
        color: var(--primary);
        cursor: pointer;
        z-index: 101;
    }
    #canvasZoomControl.mini:hover {
        color: #ffe0a8;
        border-color: var(--primary);
        background: rgba(54,42,24,0.72);
        box-shadow: var(--shadow-floating-hover), var(--glow-orange-soft);
        transform: translateY(-1px);
    }
    #canvasZoomControl.mini:active {
        transform: translateY(1px) scale(0.96);
    }
    .guide-mini-icon {
        display: none;
        line-height: 0;
        pointer-events: none;
    }
    #canvasZoomControl.mini .guide-mini-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .guide-panel-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    #canvasZoomControl.mini .guide-panel-content {
        display: none;
    }
    .guide-panel-header,
    .shortcut-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
        cursor: grab;
    }
    .guide-panel-header strong,
    .shortcut-panel-header strong {
        color: var(--primary);
        font-size: 14px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .guide-title-icon {
        flex: 0 0 auto;
    }
    .guide-close-btn {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(0,0,0,0.48);
        color: #f5f5f7;
        flex: 0 0 auto;
    }
    .guide-close-btn:hover {
        color: var(--primary);
        background: rgba(255,159,10,0.12);
        box-shadow: none;
    }
    .guide-panel-divider {
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.12);
        margin: 0 0 8px;
    }
    .guide-default-tools {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    .guide-slider-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }
    .guide-slider-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .guide-slider-title {
        color: #aeaeb2;
        font-size: 12px;
        font-weight: 800;
    }
    .guide-value-text {
        color: #aeaeb2;
        font-family: monospace;
        font-size: 11px;
        font-weight: 800;
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
    }
    .guide-line-tools {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        min-width: 118px;
    }
    .guide-line-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 15px;
    }
    .guide-line-count-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 16px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(255,255,255,0.07);
        color: #c7c7cc;
        font-family: monospace;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .guide-section-title {
        color: #aeaeb2;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
    }
    .guide-line-action-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-top: 4px;
    }
    .guide-default-line-row,
    .guide-custom-line-row {
        display: grid;
        grid-template-columns: 118px 26px;
        align-items: center;
        gap: 6px;
    }
    .guide-visibility-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid rgba(255,159,10,0.42);
        border-radius: 8px;
        background: rgba(255,159,10,0.08);
        color: var(--primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .guide-visibility-btn:hover {
        color: #ffe0a8;
        border-color: rgba(255,159,10,0.72);
        background: rgba(255,159,10,0.15);
        box-shadow: var(--glow-orange-soft);
    }
    .guide-visibility-btn:active {
        transform: scale(0.95);
    }
    .guide-visibility-btn:focus-visible {
        outline: 2px solid rgba(255,179,64,0.92);
        outline-offset: 2px;
    }
    .guide-visibility-btn[aria-pressed="false"] {
        color: #8e8e93;
        border-color: rgba(255,255,255,0.11);
        background: rgba(24,24,26,0.38);
        box-shadow: none;
    }
    .guide-visibility-btn[aria-pressed="false"]:hover {
        color: #d1d1d6;
        border-color: rgba(255,255,255,0.22);
        background: var(--surface-control-hover);
    }
    .guide-eye-hidden {
        display: none;
    }
    .guide-visibility-btn[aria-pressed="false"] .guide-eye-visible {
        display: none;
    }
    .guide-visibility-btn[aria-pressed="false"] .guide-eye-hidden {
        display: block;
    }
    .guide-line-action-btn {
        width: 118px;
        height: 26px;
        padding: 0 7px;
        border: 1px solid var(--surface-control-hover);
        border-radius: 8px;
        background: var(--surface-control);
        color: #f5f5f7;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .guide-line-action-btn svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        color: currentColor;
    }
    .guide-line-action-btn span {
        min-width: 0;
        text-align: center;
    }
    .guide-line-tool-btn:hover,
    .guide-line-tool-btn.is-active,
    .guide-default-action-btn:hover,
    .guide-default-action-btn.active {
        color: var(--primary);
        border-color: rgba(255,159,10,0.56);
        background: rgba(255,159,10,0.11);
        box-shadow: var(--glow-orange-soft);
    }
    .guide-line-tool-btn.is-active,
    .guide-default-action-btn.active {
        color: var(--ink-on-accent);
        border-color: var(--primary);
        background: var(--primary);
        box-shadow: var(--glow-orange-soft);
    }
    .guide-line-tool-btn:active {
        transform: scale(0.97);
    }
    .guide-line-preset-btn {
        color: #78dc86;
        border-color: rgba(60,174,78,0.48);
        background: rgba(60,174,78,0.11);
    }
    .guide-line-preset-btn:hover:not(:disabled) {
        color: #b7f2c0;
        border-color: rgba(60,174,78,0.76);
        background: rgba(60,174,78,0.19);
        box-shadow: 0 0 10px rgba(60,174,78,0.16);
    }
    .guide-line-preset-btn:disabled {
        opacity: 0.42;
        cursor: not-allowed;
        box-shadow: none;
    }
    .guide-line-preset-btn:focus-visible {
        outline: 2px solid rgba(98,213,121,0.86);
        outline-offset: 2px;
    }
    .guide-delete-icon-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid rgba(255,69,58,0.42);
        border-radius: 8px;
        background: rgba(255,69,58,0.08);
        color: #ff6961;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.12s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .guide-delete-icon-btn svg {
        width: 14px;
        height: 14px;
    }
    .guide-delete-icon-btn:hover:not(:disabled) {
        color: #ff8a84;
        border-color: rgba(255,69,58,0.76);
        background: rgba(255,69,58,0.16);
        box-shadow: 0 0 10px rgba(255,69,58,0.16);
    }
    .guide-delete-icon-btn:active:not(:disabled) {
        transform: scale(0.94);
    }
    .guide-delete-icon-btn:disabled {
        opacity: 0.34;
        cursor: not-allowed;
        box-shadow: none;
    }
    .guide-delete-icon-btn:focus-visible {
        outline: 2px solid rgba(255,105,97,0.90);
        outline-offset: 2px;
    }

    .v-slider-wrapper { height: 120px; width: 20px; position: relative; margin: 10px 0; }
    
    #refLineSlider, #symSlider { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 120px; margin: 0; }

    .shortcut-panel { 
        --shortcut-panel-viewport-clearance: 235px;
        position: absolute; right: 20px; bottom: 215px; 
        /* 1. 降低背景不透明度，讓光透過去 */
        background: rgba(28, 28, 30, 0.5); 
        padding: 12px 16px; border-radius: 8px; 
        /* 2. 邊框加上極細的白色微透明反光 */
        border: 1px solid rgba(255, 255, 255, 0.1); 
        font-size: 12px; color: #fff; line-height: 1.8; z-index: 100; 
        /* 3. 加深陰影，增強懸浮感 */
        box-shadow: 0 8px 24px rgba(0,0,0,0.6); 
        /* 4. 套用強烈的毛玻璃模糊濾鏡 */
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating)); -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        user-select: none;
        transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), right 0.28s cubic-bezier(0.4, 0, 0.2, 1), left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s, height 0.2s, border-radius 0.2s, transform 0.14s ease-out, border-color 0.14s ease-out, color 0.14s ease-out, box-shadow 0.14s ease-out, background 0.07s ease-out;
        overflow: hidden; white-space: nowrap;
    }
    .shortcut-panel:not(.mini) {
        cursor: grab;
    }
    .shortcut-panel:not(.mini):active {
        cursor: grabbing;
    }
    .shortcut-panel.is-dragging {
        transition: none !important;
        cursor: grabbing;
        will-change: left, top;
    }
    .main-editor.collapsed .shortcut-panel { --shortcut-panel-viewport-clearance: 40px; bottom: 20px; }
    .main-editor.filmstrip-right .shortcut-panel { --shortcut-panel-viewport-clearance: 40px; bottom: 20px; right: 245px; }
    .main-editor.filmstrip-right.collapsed .shortcut-panel { right: 20px; }
    .shortcut-close-btn {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 10px;
        background: rgba(0,0,0,0.48);
        color: #f5f5f7;
        flex: 0 0 auto;
    }
    .shortcut-close-btn:hover {
        color: var(--primary);
        background: rgba(255,159,10,0.12);
        box-shadow: none;
    }
    .shortcut-panel.mini { 
        width: 44px; height: 44px; border-radius: 50%; padding: 0; display: flex;
        align-items: center; justify-content: center; cursor: pointer; 
        /* 5. 讓收合時的橘色邊框也帶點透明度，更符合玻璃通透感 */
        border-color: rgba(255, 159, 10, 0.6); 
    }
    .shortcut-panel.mini:hover {
        color: #ffe0a8;
        border-color: var(--primary);
        background: rgba(54,42,24,0.72);
        box-shadow: var(--shadow-floating-hover), var(--glow-orange-soft);
        transform: translateY(-1px);
    }
    .shortcut-panel.mini .sc-content { display: none; }
    .shortcut-panel:not(.mini) {
        max-height: min(628px, calc(100vh - var(--shortcut-panel-viewport-clearance)));
        overflow-x: hidden;
        overflow-y: auto;
    }
    .shortcut-panel .sc-icon { display: none; color: var(--primary); line-height: 0; pointer-events: none; }
    .shortcut-panel.mini .sc-icon { display: block; }
    .shortcut-panel .sc-icon svg { display: block; }

    kbd { background: #000; color: #fff; border: 1px solid #8e8e93; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: bold; font-size: 11px; box-shadow: 0 2px 0 rgba(142,142,147,0.38); transition: color 0.1s, border-color 0.1s, background 0.1s, box-shadow 0.1s, transform 0.1s; }
    kbd.orange-kbd { border-color: var(--primary); color: var(--primary); box-shadow: 0 2px 0 rgba(255,159,10,0.35); }
    kbd.purple-kbd { border-color: var(--accent-purple); color: var(--accent-purple); box-shadow: 0 2px 0 rgba(191,90,242,0.35); }
    kbd.cyan-kbd { border-color: var(--accent-blue); color: var(--accent-blue); box-shadow: 0 2px 0 rgba(50,174,198,0.35); }
    .shortcut-panel kbd.is-pressed,
    .shortcut-panel .sc-row.highlight kbd.purple-kbd {
        color: var(--accent-green-hover);
        border-color: var(--accent-green);
        background: #000;
        box-shadow: 0 2px 0 rgba(60,174,78,0.35);
    }
    .shortcut-panel kbd > .is-pressed { color: var(--accent-green-hover); }


    .simple-mode-fab {
        --workspace-accent: #0a84ff;
        position: absolute;
        left: 20px;
        bottom: 215px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(10,132,255,0.86);
        background: rgba(28,28,30,0.58);
        color: #64a8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 101;
        cursor: pointer;
        box-shadow: var(--shadow-floating-rest);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        transition: bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.14s ease-out, border-color 0.14s ease-out, color 0.14s ease-out, box-shadow 0.14s ease-out, background 0.07s ease-out;
    }
    .simple-mode-fab:hover {
        color: #d5ebff;
        border-color: #0a84ff;
        background: rgba(32,46,66,0.76);
        box-shadow: var(--shadow-floating-hover), 0 0 12px rgba(10,132,255,0.18);
        transform: translateY(-1px);
    }
    .simple-mode-fab:active { transform: translateY(1px) scale(0.96); }
    .main-editor.collapsed .simple-mode-fab,
    .main-editor.filmstrip-right .simple-mode-fab {
        bottom: 20px;
    }

    .settings-fab {
        --workspace-accent: #3CAE4E;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(60,174,78,0.82);
        background: rgba(28,28,30,0.58);
        color: #8ee09a;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 101;
        cursor: pointer;
        box-shadow: var(--shadow-floating-rest);
        backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        -webkit-backdrop-filter: blur(var(--glass-blur-floating)) saturate(var(--glass-saturation-floating));
        transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.14s ease-out, border-color 0.14s ease-out, color 0.14s ease-out, box-shadow 0.14s ease-out, background 0.07s ease-out;
    }
    .settings-fab:hover {
        color: #c3ffd0;
        border-color: #3CAE4E;
        background: rgba(42,54,44,0.72);
        box-shadow: var(--shadow-floating-hover), var(--glow-green-soft);
        transform: translateY(-1px);
    }
    .settings-fab .ui-settings-gear-icon {
        width: 22px;
        height: 22px;
    }
    .settings-fab:active { transform: translateY(1px) scale(0.96); }
    .main-editor.filmstrip-right .settings-fab { right: 245px; }
    .main-editor.filmstrip-right.collapsed .settings-fab { right: 20px; }

    #canvasZoomControl.mini,
    .shortcut-panel.mini {
        --canvas-tool-accent: #ff9f0a;
        --canvas-tool-icon-rest: #ffb340;
        --canvas-tool-icon-hover: #fff0d1;
        --canvas-tool-hover-bg: rgba(54,42,24,0.72);
    }
    .simple-mode-fab {
        --canvas-tool-accent: #0a84ff;
        --canvas-tool-icon-rest: #64a8ff;
        --canvas-tool-icon-hover: #e0f1ff;
        --canvas-tool-hover-bg: rgba(32,46,66,0.76);
    }
    .settings-fab {
        --canvas-tool-accent: #3CAE4E;
        --canvas-tool-icon-rest: #62d579;
        --canvas-tool-icon-hover: #d7ffdf;
        --canvas-tool-hover-bg: rgba(42,54,44,0.72);
    }
    #canvasZoomControl.mini,
    .shortcut-panel.mini,
    .simple-mode-fab,
    .settings-fab {
        --canvas-tool-glow-rest: color-mix(in srgb, var(--canvas-tool-accent) 8%, transparent);
        --canvas-tool-glow-hover: color-mix(in srgb, var(--canvas-tool-accent) 24%, transparent);
        --canvas-tool-glow-active: color-mix(in srgb, var(--canvas-tool-accent) 12%, transparent);
        border-color: color-mix(in srgb, var(--canvas-tool-accent) 62%, transparent);
        color: var(--canvas-tool-icon-rest);
        background: rgba(28,28,30,0.58);
        box-shadow: var(--shadow-floating-rest), 0 0 10px var(--canvas-tool-glow-rest);
    }
    #canvasZoomControl.mini:hover,
    #canvasZoomControl.mini:focus-visible,
    .shortcut-panel.mini:hover,
    .shortcut-panel.mini:focus-visible,
    .simple-mode-fab:hover,
    .simple-mode-fab:focus-visible,
    .settings-fab:hover,
    .settings-fab:focus-visible {
        border-color: color-mix(in srgb, var(--canvas-tool-accent) 72%, white 28%);
        color: var(--canvas-tool-icon-hover);
        background: var(--canvas-tool-hover-bg);
        box-shadow: var(--shadow-floating-hover), 0 0 16px var(--canvas-tool-glow-hover);
        transform: translateY(-1px);
    }
    #canvasZoomControl.mini:focus-visible,
    .shortcut-panel.mini:focus-visible,
    .simple-mode-fab:focus-visible,
    .settings-fab:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--canvas-tool-accent) 72%, white 28%);
        outline-offset: 3px;
    }
    #canvasZoomControl.mini:active,
    .shortcut-panel.mini:active,
    .simple-mode-fab:active,
    .settings-fab:active {
        border-color: color-mix(in srgb, var(--canvas-tool-accent) 78%, white 22%);
        color: var(--canvas-tool-icon-hover);
        box-shadow: var(--shadow-floating-rest), 0 0 10px var(--canvas-tool-glow-active);
        transform: translateY(1px) scale(0.96);
    }
    #canvasZoomControl.mini .guide-mini-icon,
    .shortcut-panel.mini .sc-icon,
    .simple-mode-fab > svg,
    .settings-fab .ui-settings-gear-icon {
        opacity: 0.92;
        transition: color 0.16s ease, opacity 0.16s ease, filter 0.16s ease;
    }
    .shortcut-panel.mini .sc-icon {
        color: inherit;
    }
    #canvasZoomControl.mini:hover .guide-mini-icon,
    #canvasZoomControl.mini:focus-visible .guide-mini-icon,
    .shortcut-panel.mini:hover .sc-icon,
    .shortcut-panel.mini:focus-visible .sc-icon,
    .simple-mode-fab:hover > svg,
    .simple-mode-fab:focus-visible > svg {
        opacity: 1;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--canvas-tool-accent) 62%, transparent));
    }
    .settings-fab:hover .ui-settings-gear-icon,
    .settings-fab:focus-visible .ui-settings-gear-icon {
        opacity: 1;
        filter: brightness(1.34) saturate(1.08) drop-shadow(0 0 5px rgba(60,174,78,0.62));
    }
    #canvasZoomControl.mini:active .guide-mini-icon,
    .shortcut-panel.mini:active .sc-icon,
    .simple-mode-fab:active > svg {
        opacity: 1;
        filter: drop-shadow(0 0 3px color-mix(in srgb, var(--canvas-tool-accent) 48%, transparent));
    }
    .settings-fab:active .ui-settings-gear-icon {
        opacity: 1;
        filter: brightness(1.18) saturate(1.04) drop-shadow(0 0 3px rgba(60,174,78,0.48));
    }

    .fs-item, .fs-add-btn { transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), height 0.32s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), margin 0.32s cubic-bezier(0.4, 0, 0.2, 1), padding 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, transform 0.22s ease, left 0.13s ease, top 0.13s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
    .fs-spec-common-label,
    .fs-spec-divider {
        height: 150px;
        box-sizing: border-box;
        flex: 0 0 auto;
        color: #8e8e93;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
        user-select: none;
        transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .fs-spec-common-label {
        width: 34px;
        min-width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        color: var(--primary);
    }
    .fs-spec-divider {
        width: 34px;
        min-width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fs-spec-divider span {
        width: 34px;
        min-height: 96px;
        padding: 8px 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 6px;
        writing-mode: vertical-rl;
    }
    .main-editor.filmstrip-right .fs-spec-common-label {
        width: 120px;
        height: 30px;
        min-width: 120px;
        min-height: 30px;
        writing-mode: horizontal-tb;
    }
    .main-editor.filmstrip-right .fs-spec-divider {
        width: 120px;
        height: 30px;
        min-height: 30px;
        min-width: 120px;
        padding: 0;
    }
    .main-editor.filmstrip-right .fs-spec-divider span {
        width: auto;
        min-height: 30px;
        padding: 0 3px;
        writing-mode: horizontal-tb;
    }

    .fs-drag-placeholder {
        flex: 0 0 auto;
        box-sizing: border-box;
        border: 2px dashed var(--primary);
        border-radius: 8px;
        background: rgba(255,159,10,0.10);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px rgba(255,159,10,0.14);
        pointer-events: none;
        transition: width 160ms ease, height 160ms ease, min-width 160ms ease, min-height 160ms ease;
    }
    body.decorative-animations-off .fs-drag-placeholder { transition: none; }

    /* 將底片卡預設背景改為深灰色 (#242426) */
    .fs-item { height: 150px; width: 120px; background: #1c1c1e; border: 2px solid #3a3a3c; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
    .fs-item.is-dragging {
        display: none !important;
    }
    .fs-drag-preview {
        position: fixed !important;
        z-index: 10020;
        margin: 0 !important;
        opacity: 0.76 !important;
        pointer-events: none;
        cursor: grabbing;
        transform: scale(1.02) !important;
        transition: none !important;
        box-shadow: 0 16px 34px rgba(0,0,0,0.62), 0 0 0 2px rgba(255,159,10,0.5) !important;
        will-change: left, top;
    }
    .fs-drag-preview.is-side-preview.collapsed .fs-label-vert {
        min-width: 0;
        max-width: 100%;
        padding: 0;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        letter-spacing: 0;
    }
    .fs-drag-preview.is-side-preview.collapsed .fs-collapsed-label {
        display: block;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .fs-item.is-drag-yielding { top: var(--fs-drag-yield-offset, 0); }
    .main-editor.filmstrip-right .fs-item.is-drag-yielding { top: 0; left: var(--fs-drag-yield-offset, 0); }
    .fs-item.is-drag-before { box-shadow: -5px 0 0 var(--primary), 0 4px 10px rgba(0,0,0,0.5); }
    .fs-item.is-drag-after { box-shadow: 5px 0 0 var(--primary), 0 4px 10px rgba(0,0,0,0.5); }
    .main-editor.filmstrip-right .fs-item.is-drag-before { box-shadow: 0 -5px 0 var(--primary), 0 4px 10px rgba(0,0,0,0.5); }
    .main-editor.filmstrip-right .fs-item.is-drag-after { box-shadow: 0 5px 0 var(--primary), 0 4px 10px rgba(0,0,0,0.5); }

    /* 將正在選取的底片卡背景調亮一點 (#3a3a3c)，增加立體凸顯感 */
    .fs-item.active { border-color: var(--primary); box-shadow: 0 0 15px rgba(255,159,10,0.4); background: #3a3a3c; transform: translateY(-8px); }
    .fs-item.is-locked { border-color: #ff453a; box-shadow: 0 0 0 1px rgba(255,69,58,0.16), 0 0 14px rgba(255,69,58,0.22); }
    .fs-item.is-locked.active { border-color: #ff453a; box-shadow: inset 0 0 0 2px rgba(255,105,97,0.9), 0 0 15px rgba(255,69,58,0.34); background: #3a3a3c; }
    .fs-item.is-upload-spec.active { border-color: #3CAE4E; box-shadow: 0 0 15px rgba(60,174,78,0.42); background: #303a32; }
    .fs-item.is-upload-spec.is-locked.active { border-color: #ff453a; box-shadow: inset 0 0 0 2px rgba(255,105,97,0.9), 0 0 15px rgba(255,69,58,0.34); background: #3a3a3c; }
    .fs-item:hover:not(.active) { border-color: #8e8e93; transform: translateY(-8px) scale(1.0); }
    .fs-item.is-locked:hover:not(.active) { border-color: #ff6961; }
    .main-editor.filmstrip-right .fs-item.active { transform: translateX(-8px); }
    .main-editor.filmstrip-right .fs-item:hover:not(.active) { transform: translateX(-8px) scale(1.0); }
    .main-editor .fs-sort-board .fs-sort-card,
    .main-editor .fs-sort-board .fs-sort-card:is(.active, :hover) { transform: none; }
    .fs-item canvas { max-height: 75%; max-width: 90%; object-fit: contain; pointer-events: none; margin-top: auto; }
/* 將規格名稱的底色改為 #18181a，並微調分隔線顏色 */
    .fs-item .fs-label { font-size: 12px; color: #fff; padding: 6px; text-align: center; font-weight: bold; width: 100%; background: #18181a; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #3a3a3c; }
    .fs-coverage-warning {
        position: absolute;
        top: 5px;
        left: 50%;
        z-index: 9;
        width: 22px;
        height: 22px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ff6961;
        border-radius: 999px;
        color: #fff;
        background: #ff453a;
        box-shadow: 0 0 0 2px rgba(255,69,58,0.14), 0 3px 10px rgba(0,0,0,0.48);
        pointer-events: none;
        transform: translateX(-50%);
    }
    .fs-coverage-warning-icon {
        display: block;
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }
    .fs-coverage-warning[hidden] { display: none !important; }
    .fs-item.collapsed .fs-coverage-warning {
        position: static;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        padding: 0;
        transform: none;
    }
    .fs-item.collapsed .fs-coverage-warning-icon { width: 12px; height: 12px; flex-basis: 12px; }
    .fs-collapsed-label {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        pointer-events: none;
    }
    .main-editor.filmstrip-right .fs-collapsed-label {
        display: block;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .fs-item > :not(.fs-coverage-warning):not(.fs-collapsed-label),
    .fs-item .fs-label-vert {
        transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .fs-item.fs-size-changing {
        will-change: width, height, min-width, min-height;
    }
    /* Keep the warning anchored to the card while only its content fades/scales. */
    .fs-item.fs-content-changing > :not(.fs-coverage-warning):not(.fs-collapsed-label),
    .fs-item.fs-content-changing .fs-label-vert {
        opacity: 0;
        transform: scale(0.96);
    }

    .fs-item.entering, .fs-add-btn.entering, .fs-item.removing, .fs-add-btn.removing {
        min-width: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border-width: 0 !important; transform: scale(0.5) !important; flex-shrink: 1 !important;
    }
    .main-editor.filmstrip-right .fs-item.entering,
    .main-editor.filmstrip-right .fs-add-btn.entering,
    .main-editor.filmstrip-right .fs-item.removing,
    .main-editor.filmstrip-right .fs-add-btn.removing {
        width: 120px !important; min-width: 120px !important; height: 0 !important; min-height: 0 !important;
        transform: translateX(8px) scale(0.96) !important;
    }
    .main-editor.filmstrip-right .fs-item.removing {
        margin-top: -6px !important;
        margin-bottom: -6px !important;
        transform: scale(0.98) !important;
        will-change: height, min-height, margin, opacity, transform;
        transition: height 0.34s cubic-bezier(0.2, 0.72, 0.2, 1), min-height 0.34s cubic-bezier(0.2, 0.72, 0.2, 1), margin 0.34s cubic-bezier(0.2, 0.72, 0.2, 1), padding 0.28s ease, border-width 0.28s ease, opacity 0.24s ease, transform 0.28s ease !important;
    }
    .main-editor.filmstrip-right .fs-item.removing.active {
        transform: translateX(-8px) scale(0.98) !important;
    }
    .fs-item.collapsed { width: 44px; background: #242426; border-color: #333336; justify-content: center; transform: none; }
    .fs-item.collapsed:hover { background: #3a3a3c; }
    .fs-item.collapsed .fs-label-vert { writing-mode: vertical-rl; text-orientation: mixed; color: #aeaeb2; font-size: 14px; font-weight: bold; letter-spacing: 2px; pointer-events: none; }
    .main-editor.filmstrip-right .fs-item.collapsed { width: 120px; height: 56px; min-height: 56px; overflow: visible; }
    .main-editor.filmstrip-right .fs-item.collapsed .fs-label-vert { writing-mode: horizontal-tb; text-orientation: initial; letter-spacing: 0; min-width: 0; max-width: 100%; padding: 0; white-space: normal; overflow-wrap: anywhere; line-height: 20px; text-align: center; overflow: hidden; }

    .fs-drag-preview.is-side-preview.collapsed { overflow: visible; }
    .main-editor.filmstrip-right .fs-item.collapsed .fs-coverage-warning,
    .fs-drag-preview.is-side-preview.collapsed .fs-coverage-warning {
        position: absolute;
        top: -8px;
        left: -6px;
        transform: none;
    }

    .btn-close-fs { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); border: 1px solid #666; color: white; border-radius: 50%; width: 22px; height: 22px; font-size: 10px; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 10; }
    .btn-close-fs:hover { background: #ff3b30; border-color: #ff3b30; }
    .fs-item:hover .btn-close-fs { display: flex; }

    .lock-state-svg { display: block; flex: 0 0 auto; }
    .fs-lock-btn { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.7); border: 1px solid #666; border-radius: 50%; width: 22px; height: 22px; padding: 0; color: #f5f5f7; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: 0.2s; }
    .fs-lock-btn.locked { background: #ff3b30; border-color: #ff3b30; color: white; }
    .fs-item:hover .fs-lock-btn:not(.locked) { border-color: #8e8e93; color: white; }
    .fs-lock-btn:not(.locked) { opacity: 0.5; color: #d1d1d6; }

    .fs-add-btn { height: 150px; width: 60px; background: transparent; border: 2px dashed #48484a; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #8e8e93; font-size: 28px; flex-shrink: 0; }
    .fs-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(255,159,10,0.1); }
    .main-editor.filmstrip-right .fs-add-btn { width: 120px; height: 44px; min-height: 44px; font-size: 24px; }
    .main-editor.filmstrip-right .fs-add-btn:hover { transform: translateX(-8px); }

    .fs-action-group { position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 100; opacity: 0; transition: bottom 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.18s ease; pointer-events: auto; }
    .fs-item.active:hover .fs-action-group { bottom: 12px; opacity: 1; }
    .btn-fs { font-size: 12px; padding: 6px 14px; border-radius: 20px; font-weight: bold; cursor: pointer; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.8); white-space: nowrap; transition: 0.15s; }
    .btn-fs:active { transform: scale(0.92); }
    .btn-fs-save { background: var(--primary); color: var(--ink-on-accent); }
    .btn-fs-save:hover { background: var(--accent-orange-hover); box-shadow: var(--glow-orange-soft); }
    .btn-fs-layout { --workspace-accent: var(--accent-purple); background: var(--accent-purple); color: var(--ink-on-accent); }
    .btn-fs-layout:hover { background: var(--accent-purple-hover); box-shadow: var(--glow-purple-soft); filter: none; }