@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

/* ========== 全局主題變數 ========== */
:root {
    /* Display Font for Design System */
    --font-display: 'Space Grotesk', 'Plus Jakarta Sans', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ===== Error Colors ===== */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --color-error: #ff3b30;  /* Apple HIG Red */
    --glow-error: rgba(255, 59, 48, 0.2);  /* 錯誤微光 */

    /* ===== DaisyUI 橋接變數（過渡期）===== */
    /* 背景色 */
    --bg-body: var(--color-base-100);
    --bg-card: var(--color-base-200);
    --bg-header: color-mix(in oklch, var(--color-base-200) 85%, transparent);
    --bg-overlay: color-mix(in oklch, var(--color-base-100) 88%, transparent);

    /* 文字色 */
    --text-primary: var(--color-base-content);
    --text-secondary: color-mix(in oklch, var(--color-base-content) 70%, transparent);
    --text-muted: color-mix(in oklch, var(--color-base-content) 50%, transparent);
    --text-inverse: var(--color-neutral-content);

    /* 主題色 */
    --accent: var(--color-primary);
    --accent-hover: color-mix(in oklch, var(--color-primary) 80%, transparent);
    --color-translate: oklch(0.62 0.18 260);

    /* 邊框色 */
    --border-light: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    --border-card: color-mix(in oklch, var(--color-base-content) 20%, transparent);

    /* ===== NEW: Surface Hierarchy（Fluent Design 2 語義化變數）===== */
    /* Surface 層級 - 依視覺深度遞增 */
    --surface-0: var(--color-base-100);  /* 最底層：body 背景 */
    --surface-1: var(--color-base-200);  /* 中間層：card, sidebar */
    --surface-2: var(--color-base-300);  /* 最上層：dropdown, modal */

    /* Stroke 邊框 - 統一邊框透明度 */
    --stroke-subtle: color-mix(in oklch, var(--color-base-content) 8%, transparent);   /* 極淡邊框（分隔線）*/
    --stroke-default: color-mix(in oklch, var(--color-base-content) 16%, transparent); /* 預設邊框（卡片邊框）*/

    /* Glow 發光效果 - 用於 hover/focus 狀態 */
    --glow-primary: color-mix(in oklch, var(--color-primary) 40%, transparent);       /* 主色發光 */
    --glow-subtle: color-mix(in oklch, var(--color-primary) 20%, transparent);        /* 微妙發光（背景）*/
    --ds-glow-rgb: 90, 200, 250;                                                      /* DS 發光色（Apple Cyan）*/

    /* ===== 陰影 - Fluent Design tokens 橋接 ===== */
    --shadow-sm: var(--fluent-shadow-2);
    --shadow-md: var(--fluent-shadow-4);
    --shadow-lg: var(--fluent-shadow-16);
    --shadow-card-hover: var(--fluent-shadow-8);

    /* ===== 圓角 Token 系統（語義化命名）===== */
    --radius-xs: 4px;              /* 小標籤、badge、小 icon */
    --radius-sm: 8px;              /* thumbnail、封面、小卡 */
    --radius-md: 12px;             /* 卡片、表單、一般容器 */
    --radius-lg: 16px;             /* modal、重要容器 */
    --radius-pill: 999px;          /* Spotlight Search */
    --card-radius: var(--radius-md); /* 對齊既有用法 (12px) */

    /* ===== 動畫 - Fluent Design tokens 橋接 ===== */
    --ease-out: var(--fluent-ease-decel);
    --duration-fast: var(--fluent-duration-fast);
    --duration-normal: var(--fluent-duration-normal);
    --duration-slow: var(--fluent-duration-slower);

    /* ===== 新增：V4 語義化色彩變數 ===== */

    /* Apple HIG 色系（badge, gradient） */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --accent-secondary: #007aff;      /* Apple Blue (iOS System Blue) */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --gradient-cyan: #5ac8fa;          /* Apple Cyan */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --gradient-cyan-light: #64d2ff;    /* Apple Cyan Light */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --gradient-purple: #bf5af2;        /* Apple Purple */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --gradient-indigo: #5856d6;        /* Apple Indigo */

    /* Success 色系（綠色 badge, gradient） */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --color-success: #34c759;         /* Apple HIG Green (light mode) */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG palette source-of-truth token, 2026-05-03 */
    --color-success-dark: #30d158;    /* Apple HIG Green (dark mode) */

    /* Warning 色系（琥珀色，NFO 警告） */
    /* stylelint-disable-next-line color-no-hex -- Tailwind amber palette source-of-truth token, 2026-05-03 */
    --color-warning: #f59e0b;         /* Tailwind amber-500 */
    /* stylelint-disable-next-line color-no-hex -- Tailwind amber palette source-of-truth token, 2026-05-03 */
    --color-warning-dark: #d97706;    /* Tailwind amber-600 */
    /* stylelint-disable-next-line color-no-hex -- Tailwind amber palette source-of-truth token, 2026-05-03 */
    --color-warning-darker: #b45309;  /* Tailwind amber-700 */

    /* Accent 色系（粉紅，女優管理） */
    /* stylelint-disable-next-line color-no-hex -- Tailwind pink-500 actress identity color, 2026-05-03 */
    --accent-pink: #ec4899;           /* Tailwind pink-500 - 女優識別色 */
    /* stylelint-disable-next-line color-no-hex -- favorite heart color source-of-truth token, 2026-05-03 */
    --color-favorite: #ff4d6d;        /* 收藏愛心色 */

    /* Error 色系擴展（淡紅，delete hover） */
    /* stylelint-disable-next-line color-no-hex -- delete-hover color source-of-truth token, 2026-05-03 */
    --color-error-hover: #ff6b6b;     /* 柔和紅 - 刪除按鈕 hover */

    /* ===== Components: Spotlight Search (44c-T8a) ===== */
    --spotlight-width: 680px;         /* single source of truth for pill width */
    --spotlight-left-slot: 3.5rem;    /* default left padding (search icon) */
    --spotlight-right-slot: 6rem;     /* default right padding (action buttons) */
}


/* 應用背景色過渡 */
body {
    transition: background-color var(--duration-normal) var(--fluent-ease-standard), color var(--duration-normal) var(--fluent-ease-standard);
    font-family: "Plus Jakarta Sans", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Utility: text-muted class */
.text-muted {
    color: var(--text-muted);
}

/* ========== Utilities ========== */
/* Glass Hierarchy (Fluent Design 2):
   - Heavy (16-30px): header, modal, overlay — .glass, .fluent-acrylic
   - Medium (4-12px): floating UI — .btn-glass, spotlight-search
   - None: content cards — 只用 tint + stroke, 無 blur */
.glass {
    background: var(--bg-header);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Fluent Heavy glass 16px (per glass-hierarchy comment above), 2026-05-03 */
    backdrop-filter: blur(16px);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Safari prefix mirror, 2026-05-03 */
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
}

/* ---- T8.2: Fluent Toolbar — 工具列標準 Acrylic 材質 ---- */
.fluent-toolbar {
    background: var(--bg-header);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Fluent Heavy acrylic toolbar standard, 2026-05-03 */
    backdrop-filter: blur(16px) saturate(130%);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Safari prefix mirror, 2026-05-03 */
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.noselect {
    user-select: none;
    -webkit-user-select: none;
}

/* ========== Components: Buttons ========== */
.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background var(--duration-fast) var(--fluent-ease-standard), color var(--duration-fast) var(--fluent-ease-standard), box-shadow var(--duration-fast) var(--fluent-ease-standard);
    box-sizing: border-box;
}

.btn-icon:hover {
    background: var(--bg-body);
    /* or slight overlay */
    color: var(--text-primary);
}

.btn-icon.active {
    background: var(--accent);
    color: var(--color-primary-content);
    /* 邊界分離感 */
    box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 40%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

/* Spotlight Search active icon 強化 */
.spotlight-search .btn-icon.active i {
    color: var(--color-primary-content);
    font-size: 1.2rem;
}



.btn-glass {
    padding: 0.4rem 1rem;
    border: 1px solid oklch(100% 0 0 / 0.4);
    border-radius: var(--radius-sm);
    background: oklch(100% 0 0 / 0.15);
    color: var(--text-inverse);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--fluent-ease-standard), border-color var(--duration-fast) var(--fluent-ease-standard), color var(--duration-fast) var(--fluent-ease-standard);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Fluent Medium glass 4px on btn-glass, 2026-05-03 */
    backdrop-filter: blur(4px);
}

.btn-glass:hover {
    background: oklch(100% 0 0 / 0.3);
    border-color: oklch(100% 0 0 / 0.6);
    color: var(--text-inverse);
}

/* ========== Components: Spotlight Search ========== */
.spotlight-search {
    position: relative;
    width: 100%;
    max-width: var(--spotlight-width);
    margin: 0 auto;
}

.spotlight-search .search-icon-left {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 2;
}

.spotlight-search input {
    width: 100%;
    height: 3.5rem;
    padding-left: var(--spotlight-left-slot);
    padding-right: var(--spotlight-right-slot);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    /* Pill shape */
    font-size: 1.1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;

    /* Acrylic 玻璃效果 */
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Fluent Heavy acrylic 20px spotlight input, 2026-05-03 */
    backdrop-filter: blur(20px);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Safari prefix mirror, 2026-05-03 */
    -webkit-backdrop-filter: blur(20px); /* Safari 支援 */

    /* 內層高光線 + 外陰影 */
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 10%, transparent),
        var(--shadow-sm);

    transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.spotlight-search input:focus {
    border-color: var(--accent);

    /* 內層高光線（強化）+ 發光環 + 外陰影 */
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 15%, transparent),
        0 0 0 4px color-mix(in oklch, var(--color-primary) 15%, transparent),
        0 0 20px var(--glow-primary),
        var(--shadow-md);

    /* 放大倍率提升 */
    transform: scale(1.02);
}

.spotlight-search .search-actions-right {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    width: calc(var(--spotlight-right-slot) - 0.5rem);
    z-index: 2;
}

/* Circular buttons inside pill-shaped search */
.spotlight-search .btn-icon {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
}

/* ========== Components: Gallery Card ========== */
.gallery-card {
    background: var(--bg-card);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
        var(--shadow-sm);
    border: 1px solid var(--border-card);
    transition: transform var(--fluent-duration-fast) var(--fluent-ease-standard),
        box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
    position: relative;
    display: flex;
    flex-direction: column;
}

.gallery-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
        var(--shadow-card-hover);
    z-index: 10;
}

.gallery-card-img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-body);
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; /* 頂部 8px，底部直角（接觸 footer）*/
}

.gallery-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-card:hover .gallery-card-img img {
    transform: scale(1.05);
}

/* Hover Overlay Actions */
.gallery-card-actions {
    position: absolute;
    inset: 0;
    background: oklch(0% 0 0 / 0.4);
    /* CD-52-8 T1.4.1: 移除 blur(2px)，overlay card-actions 不需 floating-control 三階 */
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity var(--duration-fast) var(--fluent-ease-standard);
}

.gallery-card:hover .gallery-card-actions {
    opacity: 1;
}

.gallery-card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-card);
    background: var(--bg-card);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.gallery-card-num {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* T6b: .source-toast-inline 已移除（統一使用 Alpine toast）*/

/* ========== Components: Button Shake Animation ========== */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}

.shake {
    animation: shake var(--duration-normal) ease;
}

/* ========== Components: Spin Animation ========== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ========== AV Card Full: Interactive Elements ========== */

/* Info Icon Button - 用於 Full Card header/footer 的圖標按鈕 */
.info-icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.info-icon-btn:hover {
    background: var(--border-light);
    color: var(--accent);
    transform: scale(1.08);
}

.info-icon-btn:active {
    transform: scale(0.95);
}

.bi-translate {
    color: var(--color-translate);
}
.btn .bi-translate {
    color: inherit;
}

/* Local Badge - 可點擊複製路徑 */
.local-badge {
    font-size: 1rem;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
    user-select: none;
    -webkit-user-select: none;
}

.local-badge:hover {
    opacity: 0.7;
}

.local-badge:active {
    transform: scale(0.9);
}

/* === AV Card Full — 統一卡片元件 === */
.av-card-full {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border-radius: var(--fluent-radius-xl);
    box-shadow: var(--fluent-shadow-8);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.av-card-full-cover {
    flex: 7;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.av-card-full-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fluent-duration-slow) var(--fluent-ease-standard);
}

.av-card-full:hover .av-card-full-cover img {
    transform: scale(1.03);
}

.av-card-full-info {
    flex: 3;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    min-width: 280px;
}

.av-card-full-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.av-card-full-header h4 {
    font-size: 1.35rem;
    color: var(--accent);
    margin: 0;
    font-weight: 700;
}

.av-card-full-body {
    flex: 1;
}

.av-card-full-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* AV Card Full Footer - 標題區塊佈局 */
.av-card-full-footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-value-with-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.info-value-with-actions .info-value {
    flex: 1;
    min-width: 0;
}

.av-card-full-footer-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* === AV Card: Info Row 樣式（全域） === */
.info-row {
    margin-bottom: 0.75rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
    display: block;
}

.info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
}

.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.info-title {
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Dark Mode 調整（DaisyUI theme = dim） */
[data-theme="dim"] {
    /* stylelint-disable-next-line color-no-hex -- Apple HIG dark-mode error palette source-of-truth, 2026-05-03 */
    --color-error: #ff453a;  /* 深色模式調亮 */
    --glow-error: rgba(255, 69, 58, 0.25);

    /* V4: Dark mode success 色覆寫 */
    /* stylelint-disable-next-line color-no-hex -- Apple HIG dark-mode green palette source-of-truth, 2026-05-03 */
    --color-success: #30d158;         /* Dark mode 使用較亮綠 */
    --color-translate: oklch(0.72 0.14 260);

    /* feature/69: dim 色彩編碼修復 — 補 primary/warning dim 校準（root unlock） */
    /* primary：與 light oklch(32% 0.02 250) 同 250° 冷色家族、調亮供暗底對比；
       色相 250°（藍）遠離 success 綠相 166° 與 DaisyUI 萊姆 139° → 解膠囊 Factor B 色相碰撞 */
    --color-primary: oklch(0.66 0.04 250);
    /* stylelint-disable-next-line color-no-hex -- Apple HIG dark-mode amber palette source-of-truth, 2026-06-06 */
    --color-warning: #ff9f0a;         /* dim 校準 amber，近黑底不偏暗 */
}

[data-theme="dim"] .info-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Tag Badge - 從 search.css 移至 theme.css 供全站使用 */
.tag-badge {
    font-size: 0.65rem;
    margin: 1px;
    padding: 2px 6px;
    background: var(--border-light);
    color: var(--text-secondary);
    border-radius: var(--radius-xs, 4px);
    display: inline-block;
}

.tag-badge.subtitle {
    background: var(--color-success);
    color: var(--color-success-content);
}

/* ========== Components: Page States (Empty / Loading / Error) ========== */
/* Scoped to .ds-page to avoid conflict with search.css during pre-D.4 period.
   D.4 遷移時移除 .ds-page scope，同步刪除 search.css 的同名規則。 */

/* State Page Container */
.ds-page .state-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--text-secondary);
    padding: 2rem;
}

/* State Page Icon - 只選主圖標，不影響按鈕內 icon */
.ds-page .state-page-icon {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    opacity: 0.6;
    color: var(--text-secondary);
    transition: opacity var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

/* Icon Hover 微動畫 - 只選直屬主圖標 */
.ds-page .state-page:hover > .state-page-icon {
    opacity: 0.8;
    color: var(--accent);
    transform: scale(1.05);
}

/* State Page Text */
.ds-page .state-page-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* State Page Hint - 小提示文字 */
.ds-page .state-page-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Empty Actions - 按鈕容器 */
.ds-page .empty-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Empty Actions 按鈕樣式調整 */
.ds-page .empty-actions .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    box-shadow: var(--fluent-shadow-2);
}

.ds-page .empty-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-4);
}

.ds-page .empty-actions .btn i {
    margin-right: 0.5rem;
}

/* Responsive: 小螢幕按鈕垂直排列 */
@media (max-width: 576px) {
    .ds-page .empty-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .ds-page .empty-actions .btn {
        width: 100%;
    }
}

/* ========== Error State Variant ========== */

/* Error State 容器 - 紅色微光邊框 */
.ds-page .state-page.error {
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px var(--color-error),
        0 0 20px var(--glow-error),
        var(--fluent-shadow-4);
    padding: 2.5rem;
    background: color-mix(in oklch, var(--color-error) 3%, transparent);
}

/* Error State 圖標 - 紅色警告（只選主圖標） */
.ds-page .state-page.error > .state-page-icon {
    color: var(--color-error);
    opacity: 0.9;
}

/* Error State 圖標 Hover - 加深紅色 + 輕微抖動 */
.ds-page .state-page.error:hover > .state-page-icon {
    opacity: 1;
    color: var(--color-error);
    transform: scale(1.05);
    animation: error-shake var(--duration-normal) ease;
}

/* 錯誤文字 */
.ds-page .error-text {
    color: var(--color-error);
    font-weight: 600;
}

/* 錯誤抖動動畫 */
@keyframes error-shake {
    0%, 100% { transform: scale(1.05) translateX(0); }
    25% { transform: scale(1.05) translateX(-4px); }
    75% { transform: scale(1.05) translateX(4px); }
}

/* ========== Error Navigation (Multi-file Mode) ========== */

.ds-page .error-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--fluent-shadow-2);
    border: 1px solid var(--border-light);
}

.ds-page .error-nav-indicator {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    min-width: 3rem;
    text-align: center;
}

/* 導航按鈕樣式調整 */
.ds-page .error-nav .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.ds-page .error-nav .btn i {
    font-size: 1.1rem;
}

/* 導航按鈕 Hover */
.ds-page .error-nav .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-4);
}

/* 導航按鈕 Disabled */
.ds-page .error-nav .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Responsive: 小螢幕導航容器 */
@media (max-width: 576px) {
    .ds-page .error-nav {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    .ds-page .error-nav-indicator {
        min-width: 2.5rem;
        font-size: 0.85rem;
    }

    .ds-page .error-nav .btn {
        width: 32px;
        height: 32px;
    }
}

/* ========== Components: AVList Gallery Management ========== */

/* AVList Card - 主容器 */
:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
        var(--fluent-shadow-4);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    transition: box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card:hover {
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
        0 0 0 2px var(--accent),
        0 0 20px var(--glow-primary),
        var(--fluent-shadow-8);
}

/* AVList Card Header */
:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    background: color-mix(in oklch, var(--color-base-content) 2%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card-header .title {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card-header .title i {
    color: var(--accent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card-header .actions {
    display: flex;
    gap: 0.5rem;
}

/* AVList Card Body */
:is(#ds-gallery-components, .ds-gallery-composition) .avlist-card-body {
    padding: 0;
}

/* Manual Input Row */
.manual-input {
    display: none; /* 由 JS 控制 */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    gap: 0.5rem;
    background: var(--bg-body);
}

.manual-input input {
    flex: 1;
}

/* Folder List */
:is(#ds-gallery-components, .ds-gallery-composition) .folder-list {
    max-height: 300px;
    overflow-y: auto;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item:last-child {
    border-bottom: none;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item:hover {
    background: var(--bg-body);
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item .folder-icon {
    color: var(--accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item .folder-path {
    flex: 1;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.4;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item .btn-remove {
    opacity: 0;
    transition: opacity var(--fluent-duration-fast) var(--fluent-ease-standard);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item:hover .btn-remove {
    opacity: 1;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-item:focus-within .btn-remove {
    opacity: 1;
}

/* Folder Empty State */
:is(#ds-gallery-components, .ds-gallery-composition) .folder-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-empty i {
    font-size: 3.5rem;
    opacity: 0.5;
    margin-bottom: 1rem;
    display: block;
}

:is(#ds-gallery-components, .ds-gallery-composition) .folder-empty p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

/* ========== AV Card: Preview Variant ========== */

/* Preview Card - 主容器 */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview {
    background: var(--bg-card);
    border-radius: var(--fluent-radius-xl);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
        var(--fluent-shadow-4);
    overflow: hidden;
    transition: transform var(--fluent-duration-fast) var(--fluent-ease-standard),
                box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard),
                border-color var(--fluent-duration-fast) var(--fluent-ease-standard);
    border: 1px solid var(--border-light);
}

/* B15: Flip 動畫期間關掉 CSS transition，避免搶 transform 控制權 */
.ds-gallery-composition .flip-guard .av-card-preview {
    transition: box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard),
                border-color var(--fluent-duration-fast) var(--fluent-ease-standard) !important;
}
.ds-gallery-composition .flip-guard .av-card-preview:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* C21: GSAP cascade 進場期間關掉 CSS transition + 阻擋 hover 搶 transform */
.av-card-preview.gsap-animating {
    pointer-events: none;
    transition: none !important;
}

/* Preview Card - 發光邊 Hover */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
        0 0 0 2px var(--accent),
        0 0 20px var(--glow-primary),
        var(--fluent-shadow-16);
    border-color: var(--accent);
}

/* Preview Image Container */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-img {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: var(--fluent-radius-xl) var(--fluent-radius-xl) 0 0; /* 頂部匹配卡片圓角，底部直角（接觸 footer） */
}

:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fluent-duration-slow) var(--fluent-ease-standard);
    transform-origin: 65% center; /* 聚焦右側（AV 封面主體區域） */
}

:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview:hover .av-card-preview-img img {
    transform: scale(1.08);
}

/* Preview Badge */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
    color: oklch(100% 0 0);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--fluent-radius-md);
    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.25);
}

:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-badge.local {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

/* Preview Footer */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-footer {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* AV Card 共用文字樣式 */
:is(#ds-gallery-components, .ds-gallery-composition) .av-num {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.9rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .av-actress {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Preview Overlay - Hover Actions */
:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(0% 0 0 / 0.7) 0%, oklch(0% 0 0 / 0.3) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.75rem;
    gap: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .av-card-preview:hover .av-card-preview-overlay {
    opacity: 1;
}

/* Glass Circle Button - Overlay Actions */
:is(#ds-gallery-components, .ds-gallery-composition) .btn-glass-circle {
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in oklch, white 40%, transparent);
    border-radius: 50%;
    background: color-mix(in oklch, white 15%, transparent);
    color: oklch(100% 0 0);
    font-size: 1.25rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard), border-color var(--fluent-duration-fast) var(--fluent-ease-standard), transform var(--fluent-duration-fast) var(--fluent-ease-standard), box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

:is(#ds-gallery-components, .ds-gallery-composition) .btn-glass-circle:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
    box-shadow: 0 6px 16px oklch(0% 0 0 / 0.4);
}

:is(#ds-gallery-components, .ds-gallery-composition) .btn-glass-circle:active {
    transform: scale(0.95);
}

/* Output Info Section */
:is(#ds-gallery-components, .ds-gallery-composition) .output-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--bg-body);
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .output-info .path {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .output-info .path code {
    background: var(--border-light);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    color: var(--text-primary);
}

:is(#ds-gallery-components, .ds-gallery-composition) .output-info .settings-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.75rem;
    transition: opacity var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .output-info .settings-link:hover {
    opacity: 0.7;
}

/* Hero Action Buttons — base styles (unscoped, works anywhere) */
.btn-hero {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard), transform var(--fluent-duration-fast) var(--fluent-ease-standard), box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--fluent-shadow-4);
}

.btn-hero-primary {
    background: var(--accent);
    color: var(--color-primary-content);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
        0 4px 12px var(--glow-primary);
}

.btn-hero-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
        0 0 0 2px var(--accent),
        0 0 20px var(--glow-primary),
        var(--fluent-shadow-8);
}

.btn-hero-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-hero-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-hero-secondary:hover {
    background: var(--border-light);
    transform: translateY(-2px);
}

/* Hero Action Buttons — gallery-scoped overrides */
:is(#ds-gallery-components, .ds-gallery-composition) .action-section {
    padding: 1.25rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Done Actions */
:is(#ds-gallery-components, .ds-gallery-composition) .done-actions {
    display: none; /* 由 JS 控制 */
    gap: 0.75rem;
}

/* ========== Components: Stats Card + NFO Update ========== */

/* Stats Card - 統計資訊卡片 */
:is(#ds-gallery-components, .ds-gallery-composition) .stats-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    box-shadow: var(--fluent-shadow-4);
    border: 1px solid var(--border-light);
}

/* Stats Row - 統計項目橫向佈局 */
:is(#ds-gallery-components, .ds-gallery-composition) .stats-card .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stat Item - 單個統計項目 */
:is(#ds-gallery-components, .ds-gallery-composition) .stats-card .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .stats-card .stat-item i {
    color: var(--accent);
}

/* Stat Value - 數值強調 */
:is(#ds-gallery-components, .ds-gallery-composition) .stats-card .stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* NFO Update Row - NFO 補全提示列 */
:is(#ds-gallery-components, .ds-gallery-composition) .nfo-update-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

/* NFO Badge - 琥珀色警告 badge */
.nfo-badge {
    position: relative;  /* 支援 .help-popover 絕對定位 */
}

:is(#ds-gallery-components, .ds-gallery-composition) .nfo-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-warning);
    font-weight: 500;
}

:is(#ds-gallery-components, .ds-gallery-composition) .nfo-badge i {
    font-size: 1rem;
}

/* NFO Update Button - 琥珀漸層按鈕 */
:is(#ds-gallery-components, .ds-gallery-composition) .btn-nfo-update {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard), transform var(--fluent-duration-fast) var(--fluent-ease-standard), box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-warning) 30%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .btn-nfo-update:hover {
    background: linear-gradient(135deg, var(--color-warning-dark), var(--color-warning-darker));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--color-warning) 40%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .btn-nfo-update:disabled {
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* NFO Button Completed State - 完成狀態（灰底）*/
:is(#ds-gallery-components, .ds-gallery-composition) .btn-nfo-update.completed {
    background: var(--border-light);
    color: var(--text-secondary);
    box-shadow: none;
}

/* ========== Components: Actress Alias Management ========== */

/* Actress Alias Card - 主容器 */
:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-top: 1rem;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent),
        var(--fluent-shadow-4);
    border: 1px solid var(--stroke-default);
    transition: box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-card:hover {
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent),
        0 0 0 2px var(--accent),
        0 0 20px var(--glow-primary),
        var(--fluent-shadow-8);
}

/* Actress Alias Header */
:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: color-mix(in oklch, var(--color-base-content) 2%, transparent);
    border-bottom: 1px solid var(--stroke-subtle);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header:hover {
    background: color-mix(in oklch, var(--color-base-content) 4%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header .title {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header .title i {
    color: var(--accent-pink); /* 女優管理識別色 */
    font-size: 1rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header .btn-collapse {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.25rem;
    cursor: pointer;
    transition: color var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-header .btn-collapse:hover {
    color: var(--text-primary);
}

/* Actress Alias Body */
:is(#ds-gallery-components, .ds-gallery-composition) .actress-alias-body {
    padding: 1rem;
}

/* Alias Toolbar — single input, dual purpose */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Combined input with search icon inside */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-input-wrap i {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: color var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-input-wrap input {
    width: 100%;
    padding-left: 1.75rem;
    font-size: 0.8rem;
}

/* Filter hint — shows when typing */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-filter-hint {
    font-size: 0.675rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    margin-left: 0.25rem;
    margin-bottom: 0.5rem;
    display: none;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-filter-hint.visible {
    display: block;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-filter-hint em {
    font-style: normal;
    color: var(--accent-pink);
}

/* Group Row */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-group-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--stroke-subtle);
    flex-wrap: wrap;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-group-row:last-child {
    border-bottom: none;
}

/* Pills — shared base */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: all var(--fluent-duration-fast) var(--fluent-ease-standard);
    position: relative;
}

/* Primary pill */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-primary {
    background: color-mix(in oklch, var(--accent-pink) 15%, transparent);
    color: var(--accent-pink);
    font-weight: 600;
    font-size: 0.825rem;
    border: 1px solid color-mix(in oklch, var(--accent-pink) 25%, transparent);
}

/* feature/69 T4: dim 近黑底吃光低% tint，提 tint 24% + pink 邊 50%（全彩 pink 文字已部分救）。
   mix partner 用 transparent（同 base 慣例，色相安全；混 dim 藍色相 surface 會使 pink 偏紫）。 */
[data-theme="dim"] :is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-primary {
    background: color-mix(in oklch, var(--accent-pink) 24%, transparent);
    border-color: color-mix(in oklch, var(--accent-pink) 50%, transparent);
}

/* Alias pill */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-alias {
    background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
    color: var(--text-secondary);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-alias:hover {
    background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
    color: var(--text-primary);
    border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
}

/* Delete ✕ on alias pill */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-remove {
    width: 0;
    overflow: hidden;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-ease-standard);
    border: none;
    background: none;
    padding: 0;
    margin-left: -0.125rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-alias:hover .alias-pill-remove {
    width: 14px;
    opacity: 1;
    margin-left: 0.125rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-pill-remove:hover {
    color: var(--color-error);
}

/* + 別名 button */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px dashed color-mix(in oklch, var(--color-base-content) 12%, transparent);
    background: transparent;
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-ease-standard);
    white-space: nowrap;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-btn:hover {
    color: var(--accent-pink);
    border-color: color-mix(in oklch, var(--accent-pink) 30%, transparent);
    background: color-mix(in oklch, var(--accent-pink) 5%, transparent);
}

/* Inline add input */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline input {
    width: 120px;
    height: 1.625rem;
    font-size: 0.75rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklch, var(--accent-pink) 30%, transparent);
    background: color-mix(in oklch, var(--accent-pink) 5%, transparent);
    color: var(--text-primary);
    outline: none;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline input:focus {
    border-color: var(--accent-pink);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-pink) 12%, transparent);
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline button {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    font-size: 0.7rem;
    cursor: pointer;
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- inline alias-cancel micro-interaction (12ms) below token range, 2026-05-03 */
    transition: all 0.12s ease;
}


:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline .btn-cancel {
    background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
    color: var(--text-secondary);
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-add-inline .btn-cancel:hover {
    background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
}

/* Row spacer */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-row-spacer {
    flex: 1;
    min-width: 0.5rem;
}

/* Trash button */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-trash {
    width: 1.625rem;
    height: 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-ease-standard);
    flex-shrink: 0;
    font-size: 0.8rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-trash:hover {
    color: var(--color-error);
    background: color-mix(in oklch, var(--color-error) 10%, transparent);
}

/* Loading / Error / Empty states */
:is(#ds-gallery-components, .ds-gallery-composition) .alias-list-empty,
:is(#ds-gallery-components, .ds-gallery-composition) .alias-list-loading,
:is(#ds-gallery-components, .ds-gallery-composition) .alias-list-error {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

:is(#ds-gallery-components, .ds-gallery-composition) .alias-list-error {
    color: var(--color-error);
}

/* ========== Components: Settings Form (D.9a) ========== */

/* Settings Form Group - Toggle switch 容器 */
:is(#settings-components, #ds-settings-components) .settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

/* Settings Label - Toggle switch 標籤 */
:is(#settings-components, #ds-settings-components) .settings-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

:is(#settings-components, #ds-settings-components) .settings-label .label-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Settings Hint - 說明文字（基礎樣式，不設 margin-left）*/
:is(#settings-components, #ds-settings-components) .settings-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Toggle 區塊專用 — 縮排對齊 label text */
:is(#settings-components, #ds-settings-components) .settings-form-group .settings-hint {
    margin-left: 48px; /* toggle 寬度 (36px) + gap (12px) */
}

/* Settings Form Row - 標籤 + 控制項橫向佈局 */
:is(#settings-components, #ds-settings-components) .settings-form-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

/* Row Label - 左側標籤 */
:is(#settings-components, #ds-settings-components) .row-label {
    min-width: 140px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding-top: 6px; /* 與 input 對齊 */
}

/* Select 控制項 */
:is(#settings-components, #ds-settings-components) .select {
    flex: 1;
    max-width: 300px;
}

/* Input Group Inline - Number input + 單位後綴 */
:is(#settings-components, #ds-settings-components) .input-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(#settings-components, #ds-settings-components) .input-group-inline .input {
    width: 120px;
}

/* Input Suffix - 單位文字 */
:is(#settings-components, #ds-settings-components) .input-suffix {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========================================
   D.9b: Settings 收合區塊 + 變數插入 Dropdown
   ======================================== */

/* 收合區塊 - Collapsible Section */
:is(#settings-components, #ds-settings-components) .collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: color-mix(in oklch, var(--color-base-content) 2%, transparent);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard);
    border: 1px solid var(--border-light);
    font: inherit;
    text-align: left;
    width: 100%;
}

:is(#settings-components, #ds-settings-components) .collapsible-trigger:hover {
    background: color-mix(in oklch, var(--color-base-content) 3%, transparent);
}

:is(#settings-components, #ds-settings-components) .collapsible-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

:is(#settings-components, #ds-settings-components) .collapsible-title i {
    color: var(--accent);
    font-size: 1rem;
}

:is(#settings-components, #ds-settings-components) .btn-icon-collapse {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--fluent-duration-fast) var(--fluent-ease-standard), transform var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#settings-components, #ds-settings-components) .btn-icon-collapse:hover {
    color: var(--accent);
}

:is(#settings-components, #ds-settings-components) .btn-icon-collapse i {
    font-size: 1rem;
    transition: transform var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#settings-components, #ds-settings-components) .btn-icon-collapse i.rotate-180 {
    transform: rotate(180deg);
}

:is(#settings-components, #ds-settings-components) .collapsible-content {
    margin-top: 16px;
    padding: 16px;
    background: color-mix(in oklch, var(--color-base-content) 3%, transparent);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

/* 變數插入 Dropdown */
:is(#settings-components, #ds-settings-components) .variable-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

:is(#settings-components, #ds-settings-components) .btn-variable {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard), box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
    white-space: nowrap;
}

:is(#settings-components, #ds-settings-components) .btn-variable:hover {
    background: color-mix(in oklch, var(--accent) 15%, transparent);
    box-shadow: 0 0 0 2px var(--glow-subtle);
}

:is(#settings-components, #ds-settings-components) .btn-variable i {
    font-size: 1rem;
}

/* 變數下拉列表（靜態展示用）*/
:is(#settings-components, #ds-settings-components) .variable-dropdown-demo {
    margin-top: 8px;
    position: relative;
}

:is(#settings-components, #ds-settings-components) .variable-dropdown {
    position: relative;
    display: inline-flex;
}

:is(#settings-components, #ds-settings-components) .variable-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--fluent-shadow-8);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

:is(#settings-components, #ds-settings-components) .variable-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--border-light);
    padding: 4px 10px;
    border-radius: var(--radius-xs, 4px);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard);
    user-select: none;
}

:is(#settings-components, #ds-settings-components) .variable-badge:hover {
    background: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    color: var(--text-primary);
}

:is(#settings-components, #ds-settings-components) .format-preview {
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}


/* 多層資料夾連動 */
:is(#settings-components, #ds-settings-components) .folder-layers-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(#settings-components, #ds-settings-components) .folder-layer-group {
    display: flex;
    align-items: center;
    flex: 1;
}

:is(#settings-components, #ds-settings-components) .folder-layer-group.disabled {
    opacity: 0.5;
}

:is(#settings-components, #ds-settings-components) .folder-layer-group.disabled input,
:is(#settings-components, #ds-settings-components) .folder-layer-group.disabled button {
    cursor: not-allowed;
}

:is(#settings-components, #ds-settings-components) .folder-separator {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

:is(#settings-components, #ds-settings-components) .btn-variable-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0.875rem;
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--fluent-duration-fast) var(--fluent-ease-standard), box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#settings-components, #ds-settings-components) .btn-variable-sm:hover:not(:disabled) {
    background: color-mix(in oklch, var(--accent) 15%, transparent);
    box-shadow: 0 0 0 2px var(--glow-subtle);
}

:is(#settings-components, #ds-settings-components) .btn-variable-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 即時預覽路徑 */
:is(#settings-components, #ds-settings-components) .folder-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: color-mix(in oklch, var(--color-base-content) 3%, transparent);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

:is(#settings-components, #ds-settings-components) .folder-preview i {
    color: var(--accent);
    font-size: 1rem;
}

:is(#settings-components, #ds-settings-components) .folder-preview .preview-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* ========================================
   D.9c: Settings 特殊元件
   ======================================== */

/* API Key 警告 Alert */
:is(#settings-components, #ds-settings-components) .api-key-alert {
    margin-top: 12px;
    font-size: 0.8rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

:is(#settings-components, #ds-settings-components) .api-key-alert > i {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

:is(#settings-components, #ds-settings-components) .api-key-alert .alert-content {
    flex: 1;
}

:is(#settings-components, #ds-settings-components) .api-key-alert strong {
    font-weight: 600;
    color: inherit;
}

:is(#settings-components, #ds-settings-components) .api-key-alert .alert-list {
    margin: 8px 0 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

:is(#settings-components, #ds-settings-components) .api-key-alert .alert-list li {
    margin-bottom: 4px;
    line-height: 1.5;
}

:is(#settings-components, #ds-settings-components) .api-key-alert .alert-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

:is(#settings-components, #ds-settings-components) .api-key-alert .alert-link:hover {
    opacity: 0.8;
}

/* 版本文字 */
:is(#settings-components, #ds-settings-components) .version-text {
    font-size: 0.875rem;
    color: var(--accent);
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* 檢查更新按鈕區域 */
:is(#settings-components, #ds-settings-components) .update-check-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 儲存按鈕區域 */
:is(#settings-components, #ds-settings-components) .save-btn-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* 儲存按鈕 - 強化視覺 */
:is(#settings-components, #ds-settings-components) .save-btn {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    transition: box-shadow var(--fluent-duration-fast) var(--fluent-ease-standard), transform var(--fluent-duration-fast) var(--fluent-ease-standard);
}

:is(#settings-components, #ds-settings-components) .save-btn:hover {
    box-shadow: 0 0 0 4px var(--glow-subtle);
    transform: translateY(-1px);
}

:is(#settings-components, #ds-settings-components) .save-btn i {
    font-size: 1rem;
}

/* Input Group Text - 資料夾層級前綴標籤 */
:is(#settings-components, #ds-settings-components) .input-group-text {
    background: color-mix(in oklch, var(--color-base-content) 2%, transparent);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ========== Components: Fluent Modal (D.10) ========== */

/* Fluent Modal - z-index root-fix (71b-T1, CD-71b-2).
 * UNLAYERED on purpose (same precedence intent as .fluent-modal.modal-open below):
 * DaisyUI's layered `.modal` gives z-index 999 < .showcase-lightbox 1000, so any
 * confirm modal opened FROM the lightbox (delete / removeActress) renders UNDER it.
 * Lift the whole .fluent-modal (backdrop + box) to 1600 — above lightbox(1000) /
 * sample-gallery(1500) / similar-stage(1501), below toast(2000). Generalizes the
 * earlier rescrape-modal.css scoped 1600 fix to every fluent-modal at once. */
.fluent-modal {
    z-index: 1600;
}

/* Fluent Modal - Smoke Backdrop Override.
 * NOTE: ::backdrop only fires for native dialog.showModal(). All fluent-modals
 * in this codebase open via Alpine `:class="{ 'modal-open': ... }"` (CD-62-1, no
 * native showModal()), so this rule never paints in practice. Left as a harmless
 * fallback for any future native dialog. The working glass backdrop for the
 * class-open pattern is `.fluent-modal.modal-open` below. */
.fluent-modal::backdrop {
    background-color: var(--fluent-smoke);
    animation: modal-backdrop-fade-in var(--fluent-duration-normal) var(--fluent-ease-standard);
}

/* Fluent Modal - Glass backdrop for the class-open pattern (the real one).
 * Painted on the <dialog class="modal fluent-modal"> element itself, which DaisyUI
 * makes position:fixed — so backdrop-filter sits on the fixed element directly (not a
 * nested absolute child), avoiding the Safari/iOS clip bug (gotchas.md §backdrop-filter).
 * UNLAYERED on purpose: beats DaisyUI's layered `.modal.modal-open` flat
 * `background-color: oklch(0% 0 0/0.4)` (tailwind.css @layer daisyui.l1.l2).
 * Blur pinned to --fluent-blur-light (12px, floating-control tier) per ui-conventions §2
 * Modal Backdrop UX 例外 — keeps spatial reference to the grid/lightbox behind.
 * background fallback paints first so the dim survives even if backdrop-filter is dropped. */
.fluent-modal.modal-open {
    background: var(--overlay-modal);
    backdrop-filter: blur(var(--fluent-blur-light));
    -webkit-backdrop-filter: blur(var(--fluent-blur-light));
}

/* Fluent Modal Box - 卡片樣式 */
.fluent-modal-box {
    box-shadow: var(--fluent-shadow-28);
    padding: 1.5rem;
    background: var(--surface-2);
    border: 1px solid var(--stroke-default);
    /* 移除 DaisyUI 預設的過大圓角 */
    border-radius: var(--fluent-radius-xl) !important;
}

/* Modal 開啟動畫 */
.fluent-modal[open] .fluent-modal-box {
    animation: modal-scale-fade-in var(--fluent-duration-normal) var(--fluent-ease-standard);
}

/* Fluent Modal Title */
.fluent-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

/* Fluent Modal Body */
.fluent-modal-body {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

/* Fluent Modal Actions - 按鈕區 */
.fluent-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 0;
}

/* 動畫定義 */
@keyframes modal-backdrop-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modal-scale-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== Components: Fluent Toast (D.11) ========== */

/* Toast Container - 確保在最上層 */
.fluent-toast-container {
    z-index: 2000;
}

/* Fluent Toast - Alert 樣式增強 */
.fluent-toast {
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-16);
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 420px;
}

/* Toast Icon 尺寸 */
.fluent-toast .bi {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Alpine.js x-transition 動畫類別 */
.fluent-toast-enter {
    transition: all var(--fluent-duration-normal) var(--fluent-ease-decel);
}

.fluent-toast-enter-start {
    opacity: 0;
    transform: translateY(20px);
}

.fluent-toast-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.fluent-toast-leave {
    transition: all var(--fluent-duration-normal) var(--fluent-ease-accel);
}

.fluent-toast-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.fluent-toast-leave-end {
    opacity: 0;
    transform: translateY(20px);
}

/* ========== Universal Focus-visible (D.13) ========== */
/* 統一所有可互動元素的焦點樣式 */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible,
.btn-glass:focus-visible,
.btn-hero:focus-visible,
.btn-hero-primary:focus-visible,
.btn-hero-secondary:focus-visible,
.btn-nfo-update:focus-visible,
.btn-alias-add:focus-visible,
.btn-variable:focus-visible,
.btn-variable-sm:focus-visible,
.info-icon-btn:focus-visible,
.local-badge:focus-visible,
.collapsible-trigger:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--glow-primary);
}

/* 特殊狀態保留 - 只調整光圈顏色 */
:is(#ds-gallery-components, .ds-gallery-composition) .folder-item .btn-remove:focus-visible,
.ds-search-composition .ds-comp-file-remove:focus-visible {
    opacity: 1;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--glow-primary);
}

/* ========== Reduced Motion (D.13 統一收斂) ========== */
/* 一次關閉所有 transition / transform / animation */

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

    /* 完全停用特定元件動畫 */
    .fluent-modal::backdrop,
    .fluent-modal[open] .fluent-modal-box,
    .fluent-toast-enter,
    .fluent-toast-leave,
    .rotating-border-spotlight::before {
        animation: none !important;
        transition: none !important;
    }

    /* 移除 transform 位移 */
    .fluent-toast-enter-start,
    .fluent-toast-leave-end {
        transform: translateY(0) !important;
    }

    /* Rotating Border 降級為靜態發光 */
    .rotating-border-spotlight.active::before {
        background: conic-gradient(
            from 0deg at 50% 50%,
            rgba(var(--ds-glow-rgb), 0.4) 0deg,
            rgba(var(--ds-glow-rgb), 0.4) 360deg
        ) !important;
    }

    [data-theme="dim"] .rotating-border-spotlight.active::before {
        background: conic-gradient(
            from 0deg at 50% 50%,
            rgba(100, 210, 255, 0.5) 0deg,
            rgba(100, 210, 255, 0.5) 360deg
        ) !important;
    }
}

/* ========== T8.1: Fluent Canvas Layer (Mica 氛圍背景) ========== */

/* --- Light Mode --- */
body.fluent-canvas:not(.ds-page) {
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(var(--ds-glow-rgb), 0.10), transparent),
        radial-gradient(ellipse 70% 50% at 100% 100%, oklch(55% 0.12 85 / 0.06), transparent),
        var(--bg-body);
    /* Phase 50.1.0 (30ce8f2) 加的 backdrop-filter 已 revert：會把 body 變成
     * fixed-position 子孫的 containing block，導致 .showcase-lightbox
     * (position:fixed; inset:0) 在 search 頁以 document 高度為基準置中而非 viewport。
     * Token --fluent-blur-heavy 保留，待 Phase 51+ 評估在哪個元素 surface 啟用。 */
}

body.fluent-canvas:not(.ds-page) .main-content {
    background-color: transparent;
}

body.fluent-canvas:not(.ds-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
}

/* --- Dim Mode --- */
[data-theme="dim"] body.fluent-canvas:not(.ds-page) {
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(var(--ds-glow-rgb), 0.06), transparent),
        radial-gradient(ellipse 70% 50% at 100% 100%, oklch(55% 0.15 260 / 0.05), transparent),
        var(--bg-body);
}

/* ==================== Utility Classes ==================== */

/* 圖片填滿容器（等同 CSS object-fit: cover + display: block） */
.img-cover-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== GSAP Animation Guards ==================== */

/* C21 Guard: GSAP 動畫期間暫時關掉 CSS transform transition，防止幽靈動畫 */
.no-transform-transition {
    transition: none !important;
}

/* ==================== Floating Hearts CSS Fallback（GSAP 不可用時） ==================== */

@keyframes floatingHeartFallback {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 1; }
    100% { transform: translate(var(--dx, 0px), -100px) scale(1.2); opacity: 0; }
}

.floating-heart-fallback {
    animation: floatingHeartFallback 0.9s ease-out forwards;
}

@keyframes heartPulseFallback {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.btn-heart-pulse {
    animation: heartPulseFallback 0.3s ease-out forwards;
}