* {
    /* 尺寸計算 */ box-sizing: border-box;
}

/* ========【主題系統】 設定 - 五套正式主題與自訂漸層共用完整 Token ======== */

/* ========【Genealogy Design Tokens】 設定 - 品牌 / 介面 / 人物狀態 / 關係線使用語意化 Token ======== */
:root,
body[data-theme="ling"] {
    /* 漸層起始色 */ --brand-gradient-start: #ffffff;
    /* 漸層結束色 */ --brand-gradient-end: #f3f8fc;
    /* 淡色漸層起始 */ --brand-tint-start: rgba(85,172,238,.10);
    /* 淡色漸層結束 */ --brand-tint-end: rgba(85,172,238,.05);
    /* 互動強調色 */ --action-primary: #55acee;
    /* 懸停強調色 */ --action-primary-hover: #3e95d3;
    /* 深色主色 */ --action-primary-strong: #315f83;
    /* 頂欄文字顏色 */ --navigation-text: #3f4852;
    /* 頂欄次要文字 */ --navigation-text-muted: #7d8790;
    /* 頂欄欄位背景 */ --navigation-control-surface: #ffffff;
    /* 頂欄欄位邊框 */ --navigation-control-border: #e2e8ee;
    /* 頂欄欄位文字 */ --navigation-control-text: #4d5862;
    /* 頂欄提示文字 */ --navigation-control-placeholder: #98a1aa;
    /* 頂欄欄位懸停 */ --navigation-control-hover: #f5faff;
    /* 頁面背景 */ --surface-canvas: #f6f8fb;
    /* 背景紋理色 */ --surface-canvas-pattern: rgba(85,172,238,.075);
    /* 主要文字 */ --text-primary: #24292f;
    /* 次要文字 */ --text-secondary: #6e7781;
    /* 主要線條 */ --relationship-parent: #d8dee4;
    /* 卡片背景 */ --surface-card: #ffffff;
    /* 一般邊框 */ --border-default: #d8dee4;
    /* 輸入欄背景 */ --surface-input: #ffffff;
    /* 遮罩背景 */ --overlay-backdrop: rgba(31,35,40,.34);
    /* 面板背景 */ --surface-panel: #f6f8fa;
    /* 面板項目背景 */ --surface-item: #ffffff;
    /* 面板項目懸停 */ --surface-item-hover: #f5faff;
    /* 標籤背景 */ --tag-surface: #eef5fb;
    /* 標籤文字 */ --tag-text: #466f90;
    /* 配偶關係線 */ --relationship-spouse: #55acee;
    /* 前任配偶線 */ --relationship-former-spouse: #aeb7c0;
    /* 領養關係線 */ --relationship-adoptive: #73a88f;
    /* 其他關係線 */ --relationship-other: #8896a4;
    /* 男性識別色 */ --person-accent-male: #769bd4;
    /* 女性識別色 */ --person-accent-female: #cc8fa8;
    /* 其他性別識別色 */ --person-accent-other: #9c91b4;
    /* 幽靈卡片背景 */ --person-ghost-surface: #f1f6fb;
    /* 幽靈卡片邊框 */ --person-ghost-border: #c8d8e8;
    /* 幽靈文字 */ --person-ghost-text: #526e88;
    /* 幽靈標記背景 */ --person-ghost-badge-surface: #eaf2f9;
    /* 幽靈標記邊框 */ --person-ghost-badge-border: #c2d4e4;
    /* 幽靈標籤背景 */ --person-ghost-tag-surface: #e5eef6;
    /* 幽靈標籤文字 */ --person-ghost-tag-text: #5b7893;
    /* 幽靈男性識別色 */ --person-ghost-accent-male: #819fbe;
    /* 幽靈女性識別色 */ --person-ghost-accent-female: #aa93a7;
    /* 幽靈其他性別識別色 */ --person-ghost-accent-other: #949fab;
    /* 已故卡片背景 */ --person-deceased-surface: #f4f1f1;
    /* 已故卡片邊框 */ --person-deceased-border: #d6cccc;
    /* 已故文字 */ --person-deceased-text: #6f6666;
    /* 已故標記背景 */ --person-deceased-badge-surface: #eee8e4;
    /* 已故標記邊框 */ --person-deceased-badge-border: #d8cbc2;
    /* 已故標籤背景 */ --person-deceased-tag-surface: #e8e1dc;
    /* 已故標籤文字 */ --person-deceased-tag-text: #74665d;
    /* 已故男性識別色 */ --person-deceased-accent-male: #989195;
    /* 已故女性識別色 */ --person-deceased-accent-female: #a98f99;
    /* 已故其他性別識別色 */ --person-deceased-accent-other: #9e9699;
    /* 在世標記背景 */ --person-living-badge-surface: #edf6ef;
    /* 在世標記邊框 */ --person-living-badge-border: #c4dcc8;
    /* 關係標註背景 */ --relationship-label-surface: rgba(255,255,255,.97);
    /* 關係標註邊框 */ --relationship-label-border: #d8dee4;
    /* 頭像漸層起始 */ --avatar-surface-start: #f5f7f9;
    /* 頭像漸層結束 */ --avatar-surface-end: #e8edf2;
    /* 頭像文字 */ --avatar-text: #87919a;
    /* 高亮顏色 */ --selection-highlight: rgba(85,172,238,.30);
    /* 下拉選單背景 */ --nav-dropdown-bg: #ffffff;
    /* 下拉選單文字 */ --nav-dropdown-text: #4d5862;
    /* 下拉選單邊框 */ --nav-dropdown-border: #e2e8ee;
    /* 下拉選單分隔線 */ --nav-dropdown-divider: #f1f3f5;
    /* 下拉選單懸停背景 */ --nav-dropdown-hover-bg: #f7f7f8;
    /* 下拉選單懸停文字 */ --nav-dropdown-hover-text: #33383d;
    /* 下拉選單選取背景 */ --nav-dropdown-selected-bg: #eceff2;
    /* 下拉選單選取文字 */ --nav-dropdown-selected-text: #2f353b;
    /* 導覽按鈕懸停背景 */ --nav-button-hover-bg: #f7f7f8;
    /* 導覽選取背景 */ --nav-active-bg: #f2f3f4;
    /* 導覽選取邊框 */ --nav-active-border: #d8dde2;
    /* 導覽選取文字 */ --nav-active-text: #444b52;
    /* L1nG 晴空人物列背景 */ --genealogy-roster-item-bg: #f8fafc;
    /* L1nG 晴空人物列懸停 */ --genealogy-roster-item-hover: #f1f5f9;
}

body[data-theme="sage"] {
    /* 漸層起始色 */ --brand-gradient-start: #dfe9e0;
    /* 漸層結束色 */ --brand-gradient-end: #eef3ea;
    /* 淡色漸層起始 */ --brand-tint-start: rgba(95,128,108,.13);
    /* 淡色漸層結束 */ --brand-tint-end: rgba(137,157,126,.10);
    /* 互動強調色 */ --action-primary: #5f806c;
    /* 懸停強調色 */ --action-primary-hover: #4c6b59;
    /* 深色主色 */ --action-primary-strong: #3f5849;
    /* 頂欄文字顏色 */ --navigation-text: #2f3a32;
    /* 頂欄次要文字 */ --navigation-text-muted: #68756b;
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.72);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.88);
    /* 頂欄欄位文字 */ --navigation-control-text: #344238;
    /* 頂欄提示文字 */ --navigation-control-placeholder: #79867c;
    /* 頂欄欄位懸停 */ --navigation-control-hover: #ffffff;
    /* 頁面背景 */ --surface-canvas: #f2f6f1;
    /* 背景紋理色 */ --surface-canvas-pattern: rgba(95,128,108,.10);
    /* 主要文字 */ --text-primary: #303731;
    /* 次要文字 */ --text-secondary: #737b73;
    /* 主要線條 */ --relationship-parent: #d0dad0;
    /* 卡片背景 */ --surface-card: #ffffff;
    /* 一般邊框 */ --border-default: #d8ded7;
    /* 輸入欄背景 */ --surface-input: #ffffff;
    /* 遮罩背景 */ --overlay-backdrop: rgba(34,45,37,.38);
    /* 面板背景 */ --surface-panel: #edf2ec;
    /* 面板項目背景 */ --surface-item: #f8faf7;
    /* 面板項目懸停 */ --surface-item-hover: #e8f0e8;
    /* 標籤背景 */ --tag-surface: #e1ebe2;
    /* 標籤文字 */ --tag-text: #506b59;
    /* 配偶關係線 */ --relationship-spouse: #7a9a83;
    /* 前任配偶線 */ --relationship-former-spouse: #a4afa6;
    /* 領養關係線 */ --relationship-adoptive: #6d9a8b;
    /* 其他關係線 */ --relationship-other: #879789;
    /* 男性識別色 */ --person-accent-male: #6f91a6;
    /* 女性識別色 */ --person-accent-female: #b88995;
    /* 其他性別識別色 */ --person-accent-other: #8f948a;
    /* 幽靈卡片背景 */ --person-ghost-surface: #edf3f0;
    /* 幽靈卡片邊框 */ --person-ghost-border: #bfd0c7;
    /* 幽靈文字 */ --person-ghost-text: #4e6b5e;
    /* 幽靈標記背景 */ --person-ghost-badge-surface: #e5efe9;
    /* 幽靈標記邊框 */ --person-ghost-badge-border: #b6ccbf;
    /* 幽靈標籤背景 */ --person-ghost-tag-surface: #dbe9e0;
    /* 幽靈標籤文字 */ --person-ghost-tag-text: #526f60;
    /* 幽靈男性識別色 */ --person-ghost-accent-male: #7595a2;
    /* 幽靈女性識別色 */ --person-ghost-accent-female: #9f8f98;
    /* 幽靈其他性別識別色 */ --person-ghost-accent-other: #87978d;
    /* 已故卡片背景 */ --person-deceased-surface: #eceae3;
    /* 已故卡片邊框 */ --person-deceased-border: #cbc7b9;
    /* 已故文字 */ --person-deceased-text: #666256;
    /* 已故標記背景 */ --person-deceased-badge-surface: #e8e3d8;
    /* 已故標記邊框 */ --person-deceased-badge-border: #cec5b2;
    /* 已故標籤背景 */ --person-deceased-tag-surface: #ded8ca;
    /* 已故標籤文字 */ --person-deceased-tag-text: #6b6455;
    /* 已故男性識別色 */ --person-deceased-accent-male: #8d8b83;
    /* 已故女性識別色 */ --person-deceased-accent-female: #9d8b8e;
    /* 已故其他性別識別色 */ --person-deceased-accent-other: #939087;
    /* 在世標記背景 */ --person-living-badge-surface: #e3efe4;
    /* 在世標記邊框 */ --person-living-badge-border: #b8d0bc;
    /* 關係標註背景 */ --relationship-label-surface: rgba(255,255,255,.96);
    /* 關係標註邊框 */ --relationship-label-border: #d2ddd3;
    /* 頭像漸層起始 */ --avatar-surface-start: #edf3ec;
    /* 頭像漸層結束 */ --avatar-surface-end: #d9e3da;
    /* 頭像文字 */ --avatar-text: #708078;
    /* 高亮顏色 */ --selection-highlight: rgba(95,128,108,.33);
    /* 下拉選單背景 */ --nav-dropdown-bg: #ffffff;
    /* 下拉選單文字 */ --nav-dropdown-text: #344238;
    /* 下拉選單邊框 */ --nav-dropdown-border: #d8e0d9;
    /* 下拉選單分隔線 */ --nav-dropdown-divider: #edf1ed;
    /* 下拉選單懸停背景 */ --nav-dropdown-hover-bg: #f2f4f2;
    /* 下拉選單懸停文字 */ --nav-dropdown-hover-text: #303a32;
    /* 下拉選單選取背景 */ --nav-dropdown-selected-bg: #e6ebe7;
    /* 下拉選單選取文字 */ --nav-dropdown-selected-text: #2e3831;
    /* 導覽按鈕懸停背景 */ --nav-button-hover-bg: #f2f4f2;
    /* 導覽選取背景 */ --nav-active-bg: #e9ede9;
    /* 導覽選取邊框 */ --nav-active-border: #d4dcd5;
    /* 導覽選取文字 */ --nav-active-text: #3e4b41;
    /* 森霧鼠尾草人物列背景 */ --genealogy-roster-item-bg: #f4f8f3;
    /* 森霧鼠尾草人物列懸停 */ --genealogy-roster-item-hover: #ebf2ea;
}

body[data-theme="rose"] {
    /* 漸層起始色 */ --brand-gradient-start: #e8c4d0;
    /* 漸層結束色 */ --brand-gradient-end: #f4dfe6;
    /* 淡色漸層起始 */ --brand-tint-start: rgba(165,82,112,.12);
    /* 淡色漸層結束 */ --brand-tint-end: rgba(190,117,142,.09);
    /* 互動強調色 */ --action-primary: #a55270;
    /* 懸停強調色 */ --action-primary-hover: #8c425e;
    /* 深色主色 */ --action-primary-strong: #703447;
    /* 頂欄文字顏色 */ --navigation-text: #4a2d37;
    /* 頂欄次要文字 */ --navigation-text-muted: #7d606a;
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.70);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.86);
    /* 頂欄欄位文字 */ --navigation-control-text: #4a2d37;
    /* 頂欄提示文字 */ --navigation-control-placeholder: #8b7179;
    /* 頂欄欄位懸停 */ --navigation-control-hover: #ffffff;
    /* 頁面背景 */ --surface-canvas: #faf2f5;
    /* 背景紋理色 */ --surface-canvas-pattern: rgba(165,82,112,.10);
    /* 主要文字 */ --text-primary: #3c3035;
    /* 次要文字 */ --text-secondary: #817077;
    /* 主要線條 */ --relationship-parent: #ddcbd2;
    /* 卡片背景 */ --surface-card: #ffffff;
    /* 一般邊框 */ --border-default: #e6d8de;
    /* 輸入欄背景 */ --surface-input: #ffffff;
    /* 遮罩背景 */ --overlay-backdrop: rgba(54,34,42,.40);
    /* 面板背景 */ --surface-panel: #f6e9ee;
    /* 面板項目背景 */ --surface-item: #fffafb;
    /* 面板項目懸停 */ --surface-item-hover: #f6e6ec;
    /* 標籤背景 */ --tag-surface: #f2dde5;
    /* 標籤文字 */ --tag-text: #85475d;
    /* 配偶關係線 */ --relationship-spouse: #b65f7d;
    /* 前任配偶線 */ --relationship-former-spouse: #b2a0a7;
    /* 領養關係線 */ --relationship-adoptive: #829da4;
    /* 其他關係線 */ --relationship-other: #9d8794;
    /* 男性識別色 */ --person-accent-male: #718daf;
    /* 女性識別色 */ --person-accent-female: #b85f7f;
    /* 其他性別識別色 */ --person-accent-other: #97899a;
    /* 幽靈卡片背景 */ --person-ghost-surface: #eef1f7;
    /* 幽靈卡片邊框 */ --person-ghost-border: #c4cedd;
    /* 幽靈文字 */ --person-ghost-text: #526278;
    /* 幽靈標記背景 */ --person-ghost-badge-surface: #e8edf5;
    /* 幽靈標記邊框 */ --person-ghost-badge-border: #bec9da;
    /* 幽靈標籤背景 */ --person-ghost-tag-surface: #dde5f0;
    /* 幽靈標籤文字 */ --person-ghost-tag-text: #596d86;
    /* 幽靈男性識別色 */ --person-ghost-accent-male: #7990aa;
    /* 幽靈女性識別色 */ --person-ghost-accent-female: #a27d90;
    /* 幽靈其他性別識別色 */ --person-ghost-accent-other: #8a8798;
    /* 已故卡片背景 */ --person-deceased-surface: #eee4e6;
    /* 已故卡片邊框 */ --person-deceased-border: #d2bcc2;
    /* 已故文字 */ --person-deceased-text: #66565a;
    /* 已故標記背景 */ --person-deceased-badge-surface: #ece0dc;
    /* 已故標記邊框 */ --person-deceased-badge-border: #d1beb4;
    /* 已故標籤背景 */ --person-deceased-tag-surface: #e3d3cc;
    /* 已故標籤文字 */ --person-deceased-tag-text: #715a53;
    /* 已故男性識別色 */ --person-deceased-accent-male: #91858a;
    /* 已故女性識別色 */ --person-deceased-accent-female: #a47f8d;
    /* 已故其他性別識別色 */ --person-deceased-accent-other: #95898e;
    /* 在世標記背景 */ --person-living-badge-surface: #e9f2e8;
    /* 在世標記邊框 */ --person-living-badge-border: #bfd2bd;
    /* 關係標註背景 */ --relationship-label-surface: rgba(255,255,255,.97);
    /* 關係標註邊框 */ --relationship-label-border: #e3d4d9;
    /* 頭像漸層起始 */ --avatar-surface-start: #f5e7ec;
    /* 頭像漸層結束 */ --avatar-surface-end: #e7d0d9;
    /* 頭像文字 */ --avatar-text: #8b727b;
    /* 高亮顏色 */ --selection-highlight: rgba(165,82,112,.32);
    /* 下拉選單背景 */ --nav-dropdown-bg: #fffdfd;
    /* 下拉選單文字 */ --nav-dropdown-text: #4a363d;
    /* 下拉選單邊框 */ --nav-dropdown-border: #e6dce0;
    /* 下拉選單分隔線 */ --nav-dropdown-divider: #f2ecef;
    /* 下拉選單懸停背景 */ --nav-dropdown-hover-bg: #f7f3f5;
    /* 下拉選單懸停文字 */ --nav-dropdown-hover-text: #47383d;
    /* 下拉選單選取背景 */ --nav-dropdown-selected-bg: #eee7ea;
    /* 下拉選單選取文字 */ --nav-dropdown-selected-text: #413439;
    /* 導覽按鈕懸停背景 */ --nav-button-hover-bg: #f7f3f5;
    /* 導覽選取背景 */ --nav-active-bg: #f0eaec;
    /* 導覽選取邊框 */ --nav-active-border: #ded5d9;
    /* 導覽選取文字 */ --nav-active-text: #514147;
    /* 莓果薄暮人物列背景 */ --genealogy-roster-item-bg: #fff5f8;
    /* 莓果薄暮人物列懸停 */ --genealogy-roster-item-hover: #f9eaf0;
}

body[data-theme="amber"] {
    /* 漸層起始色 */ --brand-gradient-start: #e5c896;
    /* 漸層結束色 */ --brand-gradient-end: #f2dfb9;
    /* 淡色漸層起始 */ --brand-tint-start: rgba(166,107,47,.13);
    /* 淡色漸層結束 */ --brand-tint-end: rgba(195,148,83,.10);
    /* 互動強調色 */ --action-primary: #a66b2f;
    /* 懸停強調色 */ --action-primary-hover: #8d5825;
    /* 深色主色 */ --action-primary-strong: #6d441f;
    /* 頂欄文字顏色 */ --navigation-text: #493824;
    /* 頂欄次要文字 */ --navigation-text-muted: #796b58;
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.68);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.85);
    /* 頂欄欄位文字 */ --navigation-control-text: #493824;
    /* 頂欄提示文字 */ --navigation-control-placeholder: #887967;
    /* 頂欄欄位懸停 */ --navigation-control-hover: #ffffff;
    /* 頁面背景 */ --surface-canvas: #fbf5e9;
    /* 背景紋理色 */ --surface-canvas-pattern: rgba(166,107,47,.10);
    /* 主要文字 */ --text-primary: #3c362e;
    /* 次要文字 */ --text-secondary: #7c7266;
    /* 主要線條 */ --relationship-parent: #ddd2c1;
    /* 卡片背景 */ --surface-card: #fffdf9;
    /* 一般邊框 */ --border-default: #e3dcd0;
    /* 輸入欄背景 */ --surface-input: #ffffff;
    /* 遮罩背景 */ --overlay-backdrop: rgba(55,43,27,.40);
    /* 面板背景 */ --surface-panel: #f6eedf;
    /* 面板項目背景 */ --surface-item: #fffaf1;
    /* 面板項目懸停 */ --surface-item-hover: #f5ead8;
    /* 標籤背景 */ --tag-surface: #efe1ca;
    /* 標籤文字 */ --tag-text: #76532e;
    /* 配偶關係線 */ --relationship-spouse: #b27768;
    /* 前任配偶線 */ --relationship-former-spouse: #afa393;
    /* 領養關係線 */ --relationship-adoptive: #77988d;
    /* 其他關係線 */ --relationship-other: #9a8b75;
    /* 男性識別色 */ --person-accent-male: #768ba2;
    /* 女性識別色 */ --person-accent-female: #b27882;
    /* 其他性別識別色 */ --person-accent-other: #958674;
    /* 幽靈卡片背景 */ --person-ghost-surface: #eef1ee;
    /* 幽靈卡片邊框 */ --person-ghost-border: #c8cfca;
    /* 幽靈文字 */ --person-ghost-text: #55665d;
    /* 幽靈標記背景 */ --person-ghost-badge-surface: #e9efea;
    /* 幽靈標記邊框 */ --person-ghost-badge-border: #c2cec5;
    /* 幽靈標籤背景 */ --person-ghost-tag-surface: #dde8df;
    /* 幽靈標籤文字 */ --person-ghost-tag-text: #5d7163;
    /* 幽靈男性識別色 */ --person-ghost-accent-male: #7f909d;
    /* 幽靈女性識別色 */ --person-ghost-accent-female: #9b8a8c;
    /* 幽靈其他性別識別色 */ --person-ghost-accent-other: #8c9187;
    /* 已故卡片背景 */ --person-deceased-surface: #eee7da;
    /* 已故卡片邊框 */ --person-deceased-border: #d0c3ab;
    /* 已故文字 */ --person-deceased-text: #665d4d;
    /* 已故標記背景 */ --person-deceased-badge-surface: #e9dfcf;
    /* 已故標記邊框 */ --person-deceased-badge-border: #cdbda3;
    /* 已故標籤背景 */ --person-deceased-tag-surface: #ded0bb;
    /* 已故標籤文字 */ --person-deceased-tag-text: #6b5d48;
    /* 已故男性識別色 */ --person-deceased-accent-male: #8e877c;
    /* 已故女性識別色 */ --person-deceased-accent-female: #9c8581;
    /* 已故其他性別識別色 */ --person-deceased-accent-other: #91897d;
    /* 在世標記背景 */ --person-living-badge-surface: #e9f0df;
    /* 在世標記邊框 */ --person-living-badge-border: #c3d1ae;
    /* 關係標註背景 */ --relationship-label-surface: rgba(255,253,249,.97);
    /* 關係標註邊框 */ --relationship-label-border: #e3d9ca;
    /* 頭像漸層起始 */ --avatar-surface-start: #f4ead8;
    /* 頭像漸層結束 */ --avatar-surface-end: #e7d6bb;
    /* 頭像文字 */ --avatar-text: #857563;
    /* 高亮顏色 */ --selection-highlight: rgba(166,107,47,.32);
    /* 下拉選單背景 */ --nav-dropdown-bg: #fffdf9;
    /* 下拉選單文字 */ --nav-dropdown-text: #493e31;
    /* 下拉選單邊框 */ --nav-dropdown-border: #e5ded3;
    /* 下拉選單分隔線 */ --nav-dropdown-divider: #f2eee7;
    /* 下拉選單懸停背景 */ --nav-dropdown-hover-bg: #f6f3ee;
    /* 下拉選單懸停文字 */ --nav-dropdown-hover-text: #443b31;
    /* 下拉選單選取背景 */ --nav-dropdown-selected-bg: #ece6dc;
    /* 下拉選單選取文字 */ --nav-dropdown-selected-text: #3e372f;
    /* 導覽按鈕懸停背景 */ --nav-button-hover-bg: #f6f3ee;
    /* 導覽選取背景 */ --nav-active-bg: #eee8df;
    /* 導覽選取邊框 */ --nav-active-border: #ded6ca;
    /* 導覽選取文字 */ --nav-active-text: #4e453a;
    /* 琥珀紙頁人物列背景 */ --genealogy-roster-item-bg: #fff9ef;
    /* 琥珀紙頁人物列懸停 */ --genealogy-roster-item-hover: #f8eedc;
}

body[data-theme="ink"] {
    --navigation-control-surface: rgba(255,255,255,.07);
    --navigation-control-border: rgba(255,255,255,.14);
    --navigation-control-hover: rgba(255,255,255,.12);
    --overlay-backdrop: rgba(0,0,0,.72);
    --person-ghost-surface: #1b2229;
    --person-ghost-border: #465767;
    --person-ghost-text: #c0d0df;
    --person-ghost-badge-surface: #202b35;
    --person-ghost-badge-border: #4a6072;
    --person-ghost-tag-surface: #273541;
    --person-ghost-tag-text: #c1d1df;
    --person-ghost-accent-male: #7f9bb5;
    --person-ghost-accent-female: #a8899a;
    --person-ghost-accent-other: #8997a3;
    --person-deceased-surface: #232529;
    --person-deceased-border: #4d4d51;
    --person-deceased-text: #c4c1c4;
    --person-deceased-badge-surface: #2b2c30;
    --person-deceased-badge-border: #56565b;
    --person-deceased-tag-surface: #34353a;
    --person-deceased-tag-text: #c7c3c6;
    --person-deceased-accent-male: #7e8188;
    --person-deceased-accent-female: #8f7b84;
    --person-deceased-accent-other: #85868c;
    --person-living-badge-surface: #1d3024;
    --person-living-badge-border: #3f674d;
    --avatar-surface-start: #2b3036;
    --avatar-surface-end: #20252b;
    --avatar-text: #a6afb8;
    --nav-dropdown-selected-text: #ffffff;
    --brand-gradient-start: #19171d;
    --brand-gradient-end: #302936;
    --brand-tint-start: rgba(183,154,203,.15);
    --brand-tint-end: rgba(183,154,203,.08);
    --action-primary: #b79acb;
    --action-primary-hover: #c9add9;
    --action-primary-strong: #9274a7;
    --navigation-text: #f4f0f5;
    --navigation-text-muted: #c0b8c3;
    --navigation-control-text: #f4f0f5;
    --navigation-control-placeholder: #aaa0ae;
    --surface-canvas: #111014;
    --surface-canvas-pattern: rgba(183,154,203,.07);
    --text-primary: #f4f0f5;
    --text-secondary: #c0b8c3;
    --relationship-parent: #4b4350;
    --surface-card: #211e24;
    --border-default: #4b4350;
    --surface-input: #18161b;
    --surface-panel: #18161b;
    --surface-item: #211e24;
    --surface-item-hover: #2c2730;
    --tag-surface: #302936;
    --tag-text: #d6c4df;
    --relationship-spouse: #c59ab7;
    --relationship-former-spouse: #776c7c;
    --relationship-adoptive: #81aaa0;
    --relationship-other: #9a8ba5;
    --person-accent-male: #83a0c2;
    --person-accent-female: #c59ab7;
    --person-accent-other: #a58db3;
    --relationship-label-surface: rgba(33,30,36,.97);
    --relationship-label-border: #554b5b;
    --selection-highlight: rgba(183,154,203,.38);
    --nav-dropdown-bg: #211e24;
    --nav-dropdown-text: #f4f0f5;
    --nav-dropdown-border: #4b4350;
    --nav-dropdown-divider: #302b34;
    --nav-dropdown-hover-bg: #2b2630;
    --nav-dropdown-hover-text: #ffffff;
    --nav-dropdown-selected-bg: #382f3f;
    --nav-button-hover-bg: #29242e;
    --nav-active-bg: #332c38;
    --nav-active-border: #554b5b;
    --nav-active-text: #f4f0f5;
    --genealogy-roster-item-bg: #211e24;
    --genealogy-roster-item-hover: #2b2630;
}

body[data-theme="berrynight"] {
    --navigation-control-surface: rgba(255,255,255,.07);
    --navigation-control-border: rgba(255,255,255,.14);
    --navigation-control-hover: rgba(255,255,255,.12);
    --overlay-backdrop: rgba(0,0,0,.72);
    --person-ghost-surface: #1b2229;
    --person-ghost-border: #465767;
    --person-ghost-text: #c0d0df;
    --person-ghost-badge-surface: #202b35;
    --person-ghost-badge-border: #4a6072;
    --person-ghost-tag-surface: #273541;
    --person-ghost-tag-text: #c1d1df;
    --person-ghost-accent-male: #7f9bb5;
    --person-ghost-accent-female: #a8899a;
    --person-ghost-accent-other: #8997a3;
    --person-deceased-surface: #232529;
    --person-deceased-border: #4d4d51;
    --person-deceased-text: #c4c1c4;
    --person-deceased-badge-surface: #2b2c30;
    --person-deceased-badge-border: #56565b;
    --person-deceased-tag-surface: #34353a;
    --person-deceased-tag-text: #c7c3c6;
    --person-deceased-accent-male: #7e8188;
    --person-deceased-accent-female: #8f7b84;
    --person-deceased-accent-other: #85868c;
    --person-living-badge-surface: #1d3024;
    --person-living-badge-border: #3f674d;
    --avatar-surface-start: #2b3036;
    --avatar-surface-end: #20252b;
    --avatar-text: #a6afb8;
    --nav-dropdown-selected-text: #ffffff;
    --brand-gradient-start: #1b1216;
    --brand-gradient-end: #35242b;
    --brand-tint-start: rgba(210,138,166,.15);
    --brand-tint-end: rgba(210,138,166,.08);
    --action-primary: #d28aa6;
    --action-primary-hover: #e1a2b9;
    --action-primary-strong: #aa6881;
    --navigation-text: #f7f1f4;
    --navigation-text-muted: #c7b7bf;
    --navigation-control-text: #f7f1f4;
    --navigation-control-placeholder: #b5a1aa;
    --surface-canvas: #151013;
    --surface-canvas-pattern: rgba(210,138,166,.07);
    --text-primary: #f7f1f4;
    --text-secondary: #c7b7bf;
    --relationship-parent: #58404b;
    --surface-card: #281d22;
    --border-default: #58404b;
    --surface-input: #1e161a;
    --surface-panel: #1e161a;
    --surface-item: #281d22;
    --surface-item-hover: #35262d;
    --tag-surface: #3a2730;
    --tag-text: #e1bdca;
    --relationship-spouse: #d28aa6;
    --relationship-former-spouse: #806973;
    --relationship-adoptive: #7ea79c;
    --relationship-other: #a58a97;
    --person-accent-male: #879fb8;
    --person-accent-female: #d28aa6;
    --person-accent-other: #aa8b9b;
    --relationship-label-surface: rgba(40,29,34,.97);
    --relationship-label-border: #644653;
    --selection-highlight: rgba(210,138,166,.38);
    --nav-dropdown-bg: #281d22;
    --nav-dropdown-text: #f7f1f4;
    --nav-dropdown-border: #58404b;
    --nav-dropdown-divider: #37272e;
    --nav-dropdown-hover-bg: #35262d;
    --nav-dropdown-hover-text: #ffffff;
    --nav-dropdown-selected-bg: #442e38;
    --nav-button-hover-bg: #32232a;
    --nav-active-bg: #3a2830;
    --nav-active-border: #644653;
    --nav-active-text: #f7f1f4;
    --genealogy-roster-item-bg: #281d22;
    --genealogy-roster-item-hover: #35262d;
}

body[data-theme="graphite"] {
    --navigation-control-surface: rgba(255,255,255,.07);
    --navigation-control-border: rgba(255,255,255,.14);
    --navigation-control-hover: rgba(255,255,255,.12);
    --overlay-backdrop: rgba(0,0,0,.72);
    --person-ghost-surface: #1b2229;
    --person-ghost-border: #465767;
    --person-ghost-text: #c0d0df;
    --person-ghost-badge-surface: #202b35;
    --person-ghost-badge-border: #4a6072;
    --person-ghost-tag-surface: #273541;
    --person-ghost-tag-text: #c1d1df;
    --person-ghost-accent-male: #7f9bb5;
    --person-ghost-accent-female: #a8899a;
    --person-ghost-accent-other: #8997a3;
    --person-deceased-surface: #232529;
    --person-deceased-border: #4d4d51;
    --person-deceased-text: #c4c1c4;
    --person-deceased-badge-surface: #2b2c30;
    --person-deceased-badge-border: #56565b;
    --person-deceased-tag-surface: #34353a;
    --person-deceased-tag-text: #c7c3c6;
    --person-deceased-accent-male: #7e8188;
    --person-deceased-accent-female: #8f7b84;
    --person-deceased-accent-other: #85868c;
    --person-living-badge-surface: #1d3024;
    --person-living-badge-border: #3f674d;
    --avatar-surface-start: #2b3036;
    --avatar-surface-end: #20252b;
    --avatar-text: #a6afb8;
    --nav-dropdown-selected-text: #ffffff;
    --brand-gradient-start: #15181b;
    --brand-gradient-end: #2a3036;
    --brand-tint-start: rgba(135,167,196,.14);
    --brand-tint-end: rgba(135,167,196,.08);
    --action-primary: #87a7c4;
    --action-primary-hover: #a3bdd3;
    --action-primary-strong: #6689a8;
    --navigation-text: #f3f5f7;
    --navigation-text-muted: #b9c0c7;
    --navigation-control-text: #f3f5f7;
    --navigation-control-placeholder: #a4abb2;
    --surface-canvas: #111315;
    --surface-canvas-pattern: rgba(135,167,196,.07);
    --text-primary: #f3f5f7;
    --text-secondary: #b9c0c7;
    --relationship-parent: #47515a;
    --surface-card: #202428;
    --border-default: #47515a;
    --surface-input: #181b1e;
    --surface-panel: #181b1e;
    --surface-item: #202428;
    --surface-item-hover: #2a3035;
    --tag-surface: #29323a;
    --tag-text: #c0d0dc;
    --relationship-spouse: #9ab6ce;
    --relationship-former-spouse: #6d777f;
    --relationship-adoptive: #7fa49a;
    --relationship-other: #8e9ca8;
    --person-accent-male: #87a7c4;
    --person-accent-female: #b58fa2;
    --person-accent-other: #929da8;
    --relationship-label-surface: rgba(32,36,40,.97);
    --relationship-label-border: #52606b;
    --selection-highlight: rgba(135,167,196,.38);
    --nav-dropdown-bg: #202428;
    --nav-dropdown-text: #f3f5f7;
    --nav-dropdown-border: #47515a;
    --nav-dropdown-divider: #2c3237;
    --nav-dropdown-hover-bg: #2a3035;
    --nav-dropdown-hover-text: #ffffff;
    --nav-dropdown-selected-bg: #343d44;
    --nav-button-hover-bg: #282e33;
    --nav-active-bg: #30373d;
    --nav-active-border: #52606b;
    --nav-active-text: #f3f5f7;
    --genealogy-roster-item-bg: #202428;
    --genealogy-roster-item-hover: #2a3035;
}

body[data-theme="custom"] {
    /* 漸層起始色 */ --brand-gradient-start: #f0c050;
    /* 漸層結束色 */ --brand-gradient-end: #a878c8;
    /* 淡色漸層起始 */ --brand-tint-start: rgba(240,192,80,.14);
    /* 淡色漸層結束 */ --brand-tint-end: rgba(168,120,200,.12);
    /* 互動強調色 */ --action-primary: #8a5cb0;
    /* 懸停強調色 */ --action-primary-hover: #724a98;
    /* 深色主色 */ --action-primary-strong: #6a4688;
    /* 頂欄文字顏色 */ --navigation-text: #2f2f35;
    /* 頂欄次要文字 */ --navigation-text-muted: #707078;
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.70);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.86);
    /* 頂欄欄位文字 */ --navigation-control-text: #2f2f35;
    /* 頂欄提示文字 */ --navigation-control-placeholder: #7d7d84;
    /* 頂欄欄位懸停 */ --navigation-control-hover: #ffffff;
    /* 頁面背景 */ --surface-canvas: #f8f8fa;
    /* 背景紋理色 */ --surface-canvas-pattern: rgba(90,90,100,.08);
    /* 主要文字 */ --text-primary: #34343a;
    /* 次要文字 */ --text-secondary: #777780;
    /* 主要線條 */ --relationship-parent: #ddddE4;
    /* 卡片背景 */ --surface-card: #ffffff;
    /* 一般邊框 */ --border-default: #e2e2e8;
    /* 輸入欄背景 */ --surface-input: #ffffff;
    /* 遮罩背景 */ --overlay-backdrop: rgba(35,35,45,.38);
    /* 面板背景 */ --surface-panel: #f4f4f7;
    /* 面板項目背景 */ --surface-item: #fbfbfc;
    /* 面板項目懸停 */ --surface-item-hover: #f0eff5;
    /* 標籤背景 */ --tag-surface: #eceaf3;
    /* 標籤文字 */ --tag-text: #655f75;
    /* 配偶關係線 */ --relationship-spouse: #a6758e;
    /* 前任配偶線 */ --relationship-former-spouse: #a7a4ae;
    /* 領養關係線 */ --relationship-adoptive: #77998f;
    /* 其他關係線 */ --relationship-other: #8c8798;
    /* 男性識別色 */ --person-accent-male: #788eae;
    /* 女性識別色 */ --person-accent-female: #ad7893;
    /* 其他性別識別色 */ --person-accent-other: #93889a;
    /* 幽靈卡片背景 */ --person-ghost-surface: #eef1f6;
    /* 幽靈卡片邊框 */ --person-ghost-border: #c8d0dc;
    /* 幽靈文字 */ --person-ghost-text: #566578;
    /* 幽靈標記背景 */ --person-ghost-badge-surface: #e9edf4;
    /* 幽靈標記邊框 */ --person-ghost-badge-border: #c3ccd9;
    /* 幽靈標籤背景 */ --person-ghost-tag-surface: #e0e6ef;
    /* 幽靈標籤文字 */ --person-ghost-tag-text: #5d6d82;
    /* 幽靈男性識別色 */ --person-ghost-accent-male: #7b90a8;
    /* 幽靈女性識別色 */ --person-ghost-accent-female: #9f8193;
    /* 幽靈其他性別識別色 */ --person-ghost-accent-other: #8d8998;
    /* 已故卡片背景 */ --person-deceased-surface: #efeaeb;
    /* 已故卡片邊框 */ --person-deceased-border: #d2c7ca;
    /* 已故文字 */ --person-deceased-text: #675d60;
    /* 已故標記背景 */ --person-deceased-badge-surface: #ece4df;
    /* 已故標記邊框 */ --person-deceased-badge-border: #d1c3ba;
    /* 已故標籤背景 */ --person-deceased-tag-surface: #e2d6cf;
    /* 已故標籤文字 */ --person-deceased-tag-text: #6f5e56;
    /* 已故男性識別色 */ --person-deceased-accent-male: #91898e;
    /* 已故女性識別色 */ --person-deceased-accent-female: #a1818f;
    /* 已故其他性別識別色 */ --person-deceased-accent-other: #958b90;
    /* 在世標記背景 */ --person-living-badge-surface: #e9f1e8;
    /* 在世標記邊框 */ --person-living-badge-border: #bfd1bd;
    /* 關係標註背景 */ --relationship-label-surface: rgba(255,255,255,.97);
    /* 關係標註邊框 */ --relationship-label-border: #e1e1e7;
    /* 頭像漸層起始 */ --avatar-surface-start: #f1eff5;
    /* 頭像漸層結束 */ --avatar-surface-end: #e1ddea;
    /* 頭像文字 */ --avatar-text: #80788a;
    /* 高亮顏色 */ --selection-highlight: rgba(138,92,176,.32);
    /* 下拉選單背景 */ --nav-dropdown-bg: #ffffff;
    /* 下拉選單文字 */ --nav-dropdown-text: #3f3f46;
    /* 下拉選單邊框 */ --nav-dropdown-border: #e2e2e8;
    /* 下拉選單分隔線 */ --nav-dropdown-divider: #f1f1f4;
    /* 下拉選單懸停背景 */ --nav-dropdown-hover-bg: #f6f6f7;
    /* 下拉選單懸停文字 */ --nav-dropdown-hover-text: #34343a;
    /* 下拉選單選取背景 */ --nav-dropdown-selected-bg: #ececf0;
    /* 下拉選單選取文字 */ --nav-dropdown-selected-text: #303036;
    /* 導覽按鈕懸停背景 */ --nav-button-hover-bg: #f6f6f7;
    /* 導覽選取背景 */ --nav-active-bg: #eeeeF1;
    /* 導覽選取邊框 */ --nav-active-border: #dcdce2;
    /* 導覽選取文字 */ --nav-active-text: #44444b;
}

body[data-topbar-contrast="light"] {
    /* 頂欄文字顏色 */ --navigation-text: #2d2d2d;
    /* 頂欄次要文字 */ --navigation-text-muted: rgba(45,45,45,.72);
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.62);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.82);
    /* 頂欄欄位文字 */ --navigation-control-text: #2d2d2d;
    /* 頂欄提示文字 */ --navigation-control-placeholder: rgba(45,45,45,.5);
    /* 頂欄欄位懸停 */ --navigation-control-hover: rgba(255,255,255,.82);
}

body[data-topbar-contrast="dark"] {
    /* 頂欄文字顏色 */ --navigation-text: #ffffff;
    /* 頂欄次要文字 */ --navigation-text-muted: rgba(255,255,255,.82);
    /* 頂欄欄位背景 */ --navigation-control-surface: rgba(255,255,255,.2);
    /* 頂欄欄位邊框 */ --navigation-control-border: rgba(255,255,255,.36);
    /* 頂欄欄位文字 */ --navigation-control-text: #ffffff;
    /* 頂欄提示文字 */ --navigation-control-placeholder: rgba(255,255,255,.68);
    /* 頂欄欄位懸停 */ --navigation-control-hover: rgba(255,255,255,.36);
}

/* ========【全站基礎】 設定 - 頁面尺寸、字型與通用元件 ======== */

html,
body {
    /* 元素高度 */ height: 100%;
    /* 外距設定 */ margin: 0;
    /* 溢出處理 */ overflow: hidden;
}

body {
    /* 一般介面文字使用標準箭頭，不把靜態標題誤顯示成可輸入文字 */ cursor: default;
    /* 背景設定 */ background: var(--surface-canvas);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體大小 */ font-size: 14px;
    /* 動畫過渡 */ transition: background-color .25s,color .25s;
    /* 字體設定 */ font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    /* 字體粗細 */ font-weight: 400;
}

input,
select,
textarea,
button {
    /* 字體設定 */ font-family: inherit;
}

a[href],
button,
summary,
select,
label[for],
[role="button"],
[role="link"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"],
input[type="file"] {
    /* 可操作項目使用手指游標 */ cursor: pointer;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
[contenteditable="true"] {
    /* 只有真正可輸入文字的區域使用 I 形游標 */ cursor: text;
}

button:disabled,
select:disabled,
input:disabled,
[aria-disabled="true"] {
    /* 停用控制項使用禁止操作游標 */ cursor: not-allowed;
}

/* ========【滑桿】 設定 - 全部使用 A 款極簡細線，不依賴瀏覽器原生外觀 ======== */
input[type="range"] {
    --range-fill: 0%;
    --range-track-height: 4px;
    --range-thumb-size: 16px;
    display: block;
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    /* 保留 iOS 對水平拖曳與垂直捲動的原生觸控判斷。 */
    touch-action: auto;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--action-primary) 0%,
        var(--action-primary) var(--range-fill),
        var(--border-default) var(--range-fill),
        var(--border-default) 100%);
}

input[type="range"]::-moz-range-track {
    height: var(--range-track-height);
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--action-primary) 0%,
        var(--action-primary) var(--range-fill),
        var(--border-default) var(--range-fill),
        var(--border-default) 100%);
}

input[type="range"]::-moz-range-progress {
    border: 0;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
    border: 2px solid var(--surface-card);
    border-radius: 50%;
    background: var(--action-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: transform .16s ease,box-shadow .16s ease;
}

input[type="range"]::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border: 2px solid var(--surface-card);
    border-radius: 50%;
    background: var(--action-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: transform .16s ease,box-shadow .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    input[type="range"]:not(:disabled):hover::-webkit-slider-thumb {
        transform: scale(1.12);
    }
    input[type="range"]:not(:disabled):hover::-moz-range-thumb {
        transform: scale(1.12);
    }
}

input[type="range"]:not(:disabled):active::-webkit-slider-thumb {
    transform: scale(1.16);
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--action-primary) 15%,transparent);
}
input[type="range"]:not(:disabled):active::-moz-range-thumb {
    transform: scale(1.16);
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--action-primary) 15%,transparent);
}
input[type="range"]:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
    border-radius: 6px;
}
input[type="range"]:disabled {
    cursor: not-allowed;
    filter: grayscale(.35);
}

/* 細線外觀不變，手指操作時將透明觸控區增加到 44px。 */
@media (pointer: coarse) {
    input[type="range"] {
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    input[type="range"]::-webkit-slider-thumb,
    input[type="range"]::-moz-range-thumb {
        transition: none;
    }
}


/* ========【側邊欄尺寸】 設定 - 左上品牌區與側邊欄共用同一寬度 ======== */

:root {
    /* 側邊欄目前寬度 */ --sidebar-width: 220px;
    /* 側邊欄預設寬度 */ --sidebar-default-width: 220px;
}

.app {
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 元素高度 */ height: 100vh;
    /* 溢出處理 */ overflow: hidden;
}

/* ========【頂部導覽列】 設定 - 品牌、搜尋、語言與工具操作 ======== */

.topbar {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: stretch;
    /* 元素高度 */ height: 54px;
    /* 背景設定 */ background: linear-gradient(120deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
    /* 文字顏色 */ color: var(--navigation-text);
    /* 顯示層級 */ z-index: 30;
    /* 元素陰影 */ box-shadow: 0 2px 10px rgba(0,0,0,.08);
    /* 彈性收縮 */ flex-shrink: 0;
}

.topbar-brand {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 內縮空間 */ padding: 0 18px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 文字陰影 */ text-shadow: 0 1px 2px rgba(0,0,0,.08);
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 元素寬度 */ width: var(--sidebar-width);
    /* 水平對齊 */ justify-content: center;
    /* 文字對齊 */ text-align: center;
    /* 左右內縮 */ padding-left: 10px;
    /* 左右內縮 */ padding-right: 10px;
    /* 字體大小 */ font-size: 10.5px;
    /* 字體粗細 */ font-weight: 500;
    /* 字距設定 */ letter-spacing: 1.4px;
}

.topbar-main {
    /* 彈性配比 */ flex: 1;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 10px;
    /* 內縮空間 */ padding: 0 16px;
    /* 最小寬度 */ min-width: 0;
}

.menu-toggle {
    /* 顯示方式 */ display: none;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 元素寬度 */ width: 36px;
    /* 元素高度 */ height: 34px;
    /* 邊框設定 */ border: 1px solid var(--navigation-control-border);
    /* 背景設定 */ background: var(--navigation-control-surface);
    /* 文字顏色 */ color: var(--navigation-control-text);
    /* 圓角弧度 */ border-radius: 7px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 字體大小 */ font-size: 16px;
    /* 動畫過渡 */ transition: .15s;
    /* 彈性收縮 */ flex-shrink: 0;
}

.menu-toggle:hover {
    /* 背景設定 */ background: var(--navigation-control-hover);
}

.brand-input {
    /* 字體大小 */ font-size: 16px;
    /* 字體粗細 */ font-weight: 700;
    /* 字距設定 */ letter-spacing: .8px;
    /* 文字顏色 */ color: var(--navigation-text);
    /* 邊框設定 */ border: 1px solid transparent;
    /* 背景設定 */ background: transparent;
    /* 元素寬度 */ width: 160px;
    /* 外框設定 */ outline: none;
    /* 內縮空間 */ padding: 5px 8px;
    /* 圓角弧度 */ border-radius: 6px;
    /* 字體設定 */ font-family: inherit;
    /* 文字陰影 */ text-shadow: 0 1px 2px rgba(0,0,0,.08);
    /* 彈性收縮 */ flex-shrink: 0;
}

.brand-input:hover {
    /* 背景設定 */ background: var(--navigation-control-surface);
}

.brand-input:focus {
    /* 背景設定 */ background: var(--navigation-control-surface);
    /* 邊框顏色 */ border-color: var(--navigation-control-border);
}

.brand-input::placeholder {
    /* 文字顏色 */ color: var(--navigation-control-placeholder);
}

.topbar-select {
    /* 內縮空間 */ padding: 7px 10px;
    /* 邊框設定 */ border: 1px solid var(--navigation-control-border);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--navigation-control-surface);
    /* 文字顏色 */ color: var(--navigation-control-text);
    /* 字體大小 */ font-size: 13px;
    /* 外框設定 */ outline: none;
    /* 字體設定 */ font-family: inherit;
    /* 動畫過渡 */ transition: .15s;
    /* 背景濾鏡 */ backdrop-filter: blur(4px);
    /* 彈性收縮 */ flex-shrink: 0;
}

.topbar-select:hover {
    /* 背景顏色 */ background-color: var(--navigation-control-hover);
}

.topbar-select:focus {
    /* 背景顏色 */ background-color: var(--navigation-control-hover);
}

.topbar-spacer {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 8px;
}

.topbar-right {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 6px;
    /* 彈性收縮 */ flex-shrink: 0;
}

.icon-btn {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 項目間距 */ gap: 5px;
    /* 內縮空間 */ padding: 7px 11px;
    /* 邊框設定 */ border: 1px solid var(--navigation-control-border);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--navigation-control-surface);
    /* 文字顏色 */ color: var(--navigation-control-text);
    /* 字體大小 */ font-size: 13px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
    /* 換行方式 */ white-space: nowrap;
    /* 背景濾鏡 */ backdrop-filter: blur(4px);
}

.icon-btn:hover {
    /* 背景設定 */ background: var(--navigation-control-hover);
}

/* ========【主版面】 設定 - 側邊欄與族譜工作區 ======== */

.app-body {
    /* 彈性配比 */ flex: 1;
    /* 顯示方式 */ display: flex;
    /* 溢出處理 */ overflow: hidden;
    /* 最小高度 */ min-height: 0;
}

.sidebar {
    /* 元素寬度 */ width: var(--sidebar-width);
    /* 彈性收縮 */ flex-shrink: 0;
    /* 背景設定 */ background: var(--surface-canvas);
    /* 右側邊框 */ border-right: 1px solid var(--border-default);
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 顯示層級 */ z-index: 30;
    /* 溢出處理 */ overflow: hidden;
}

/* ========【側邊欄寬度】 設定 - 拖曳分隔線調整桌面版側邊欄寬度 ======== */

.sidebar-resizer {
    /* 元素寬度 */ width: 7px;
    /* 左側外距 */ margin-left: -4px;
    /* 右側外距 */ margin-right: -3px;
    /* 定位方式 */ position: relative;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 顯示層級 */ z-index: 45;
    /* 滑鼠指標 */ cursor: col-resize;
    /* 觸控行為 */ touch-action: none;
    /* 背景設定 */ background: transparent;
    /* 外框設定 */ outline: none;
}

.sidebar-resizer::before {
    /* 生成內容 */ content: "";
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 0;
    /* 底部位置 */ bottom: 0;
    /* 左側位置 */ left: 3px;
    /* 元素寬度 */ width: 1px;
    /* 背景設定 */ background: transparent;
    /* 動畫過渡 */ transition: background-color .15s ease, box-shadow .15s ease;
}

.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before,
body.sidebar-resizing .sidebar-resizer::before {
    /* 背景設定 */ background: var(--action-primary);
    /* 元素陰影 */ box-shadow: 0 0 0 1px rgba(255,255,255,.65);
}

body.sidebar-resizing {
    /* 滑鼠指標 */ cursor: col-resize;
    /* 文字選取 */ user-select: none;
}

body.sidebar-resizing * {
    /* 滑鼠指標 */ cursor: col-resize !important;
}

.sidebar-scroll {
    /* 彈性配比 */ flex: 1;
    /* 垂直溢出 */ overflow-y: auto;
    /* 內縮空間 */ padding: 12px 8px;
}

.sidebar-group {
    /* 下方外距 */ margin-bottom: 14px;
}

.sidebar-group-title {
    /* 字體大小 */ font-size: 12px;
    /* 字體粗細 */ font-weight: 600;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 透明度 */ opacity: 1;
    /* 字距設定 */ letter-spacing: 1.2px;
    /* 文字轉換 */ text-transform: uppercase;
    /* 行距固定，避免繁中 / 簡中 / 英文字型 metrics 改變列高 */ line-height: 1.35;
    /* 最小高度固定 */ min-height: 24px;
    /* 內縮空間 */ padding: 2px 8px 6px;
}

.sidebar-btn {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 8px;
    /* 元素寬度 */ width: 100%;
    /* 內縮空間 */ padding: 8px 11px;
    /* 下方外距 */ margin-bottom: 3px;
    /* 字體大小 */ font-size: 13px;
    /* 行距固定，三語切換時維持相同文字盒 */ line-height: 1.2;
    /* 最小高度固定 */ min-height: 38px;
    /* 圓角弧度 */ border-radius: 7px;
    /* 邊框設定 */ border: 1px solid transparent;
    /* 背景設定 */ background: transparent;
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
    /* 文字對齊 */ text-align: left;
    /* 動畫過渡 */ transition: .15s;
}

.sidebar-btn:hover {
    /* 懸停背景 */ background: var(--nav-button-hover-bg);
    /* 懸停邊框 */ border-color: var(--nav-active-border);
    /* 懸停文字 */ color: var(--nav-active-text);
    /* 視覺濾鏡移除 */ filter: none;
}

.sidebar-btn.danger {
    /* 文字顏色 */ color: #c44a3e;
}

.sidebar-btn.danger:hover {
    /* 背景設定 */ background: rgba(200,60,40,.08);
    /* 邊框顏色 */ border-color: rgba(200,60,40,.2);
}

.sidebar-btn.active,
.sidebar-btn.lock-active {
    /* 背景設定 */ background: linear-gradient(135deg, var(--brand-tint-start), var(--brand-tint-end));
    /* 文字顏色 */ color: var(--action-primary);
    /* 邊框設定 */ border: 1px solid var(--action-primary);
    /* 字體粗細 */ font-weight: 600;
}

.sidebar-btn.active:hover,
.sidebar-btn.lock-active:hover {
    /* 背景設定 */ background: linear-gradient(135deg, var(--brand-tint-start), var(--brand-tint-end));
    /* 文字顏色 */ color: var(--action-primary);
    /* 邊框設定 */ border-color: var(--action-primary);
    /* 視覺濾鏡 */ filter: brightness(1.04);
}

.main-area {
    /* 彈性配比 */ flex: 1;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 溢出處理 */ overflow: hidden;
    /* 最小寬度 */ min-width: 0;
    /* 定位方式 */ position: relative;
}

/* ========【族譜畫布】 設定 - 平移、縮放、關係線與標註 ======== */

#genealogyCanvasViewport {
    /* 彈性配比 */ flex: 1;
    /* 溢出處理 */ overflow: hidden;
    /* 定位方式 */ position: relative;
    /* 滑鼠指標 */ cursor: grab;
    /* 文字選取 */ user-select: none;
    /* 觸控行為 */ touch-action: none;
    /* 背景圖片 */ background-image: radial-gradient(circle, var(--surface-canvas-pattern) 1px, transparent 1px);
    /* 背景尺寸 */ background-size: 22px 22px;
    /* WebKit 文字選取 */ -webkit-user-select: none;
}

#genealogyCanvasViewport::before {
    /* 生成內容 */ content: "";
    /* 定位方式 */ position: absolute;
    /* 定位範圍 */ inset: 0;
    /* 背景圖片 */ background-image: var(--custom-bg, none);
    /* 背景尺寸 */ background-size: var(--custom-bg-size, cover);
    /* 背景位置 */ background-position: center;
    /* 背景重複 */ background-repeat: var(--custom-bg-repeat, no-repeat);
    /* 透明度 */ opacity: 0;
    /* 滑鼠事件 */ pointer-events: none;
    /* 動畫過渡 */ transition: opacity .3s,background-image .3s;
    /* 顯示層級 */ z-index: 0;
}

#genealogyCanvasViewport.has-bg::before {
    /* 透明度 */ opacity: var(--custom-bg-opacity,.5);
}

#genealogyCanvasViewport.dragging {
    /* 滑鼠指標 */ cursor: grabbing;
}

#genealogyCanvasStage {
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 0;
    /* 左側位置 */ left: 0;
    /* 變形基準 */ transform-origin: 0 0;
    /* 顯示層級 */ z-index: 1;
    /* 文字繪製方式 */ text-rendering: optimizeLegibility;
    /* WebKit 字體平滑 */ -webkit-font-smoothing: antialiased;
    /* 背面顯示 */ backface-visibility: visible;
}

#genealogyRelationshipLayer {
    /* 定位方式 */ position: absolute;
    /* 左側位置 */ left: 0;
    /* 頂部位置 */ top: 0;
    /* 滑鼠事件 */ pointer-events: none;
    /* 溢出處理 */ overflow: visible;
    /* 顯示層級 */ z-index: 0;
}

#genealogyPersonLayer {
    /* 定位方式 */ position: absolute;
    /* 左側位置 */ left: 0;
    /* 頂部位置 */ top: 0;
    /* 右側位置 */ right: 0;
    /* 底部位置 */ bottom: 0;
    /* 顯示層級 */ z-index: 1;
}

#genealogyRelationshipLabelLayer {
    /* 定位方式 */ position: absolute;
    /* 左側位置 */ left: 0;
    /* 頂部位置 */ top: 0;
    /* 滑鼠事件 */ pointer-events: none;
    /* 溢出處理 */ overflow: visible;
    /* 顯示層級 */ z-index: 2;
}

#genealogyRelationshipLabelLayer .edge-label {
    /* 滑鼠事件 */ pointer-events: auto;
    /* 滑鼠指標 */ cursor: grab;
    /* 觸控行為 */ touch-action: none;
}

#genealogyRelationshipLabelLayer .edge-label:hover rect {
    /* 線條顏色 */ stroke: var(--action-primary);
}

#genealogyRelationshipLabelLayer .edge-label.dragging {
    /* 滑鼠指標 */ cursor: grabbing;
}

/* ========【智慧對齊輔助線】 設定 - 卡片拖曳時提供邊緣與中心吸附提示 ======== */

#smartGuides {
    /* 定位方式 */ position: absolute;
    /* 定位範圍 */ inset: 0;
    /* 滑鼠事件 */ pointer-events: none;
    /* 顯示層級 */ z-index: 18;
    /* 溢出處理 */ overflow: visible;
}

.smart-guide {
    /* 定位方式 */ position: absolute;
    /* 預設顯示 */ display: none;
    /* 背景設定 */ background: var(--action-primary);
    /* 元素陰影 */ box-shadow: 0 0 0 .5px rgba(255,255,255,.85);
    /* 滑鼠事件 */ pointer-events: none;
}

.smart-guide.show {
    /* 顯示方式 */ display: block;
}

.smart-guide-vertical {
    /* 頂部位置 */ top: 0;
    /* 元素寬度 */ width: 1px;
    /* 元素高度 */ height: 100%;
}

.smart-guide-horizontal {
    /* 左側位置 */ left: 0;
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 1px;
}

/* ========【等距吸附提示】 設定 - 顯示兩段相等間距，不移動其他卡片 ======== */

.smart-spacing {
    /* 定位方式 */ position: absolute;
    /* 預設顯示 */ display: none;
    /* 滑鼠事件 */ pointer-events: none;
    /* 文字顏色 */ color: var(--action-primary);
}

.smart-spacing.show {
    /* 顯示方式 */ display: block;
}

.smart-spacing-segment {
    /* 定位方式 */ position: absolute;
    /* 尺寸計算 */ box-sizing: border-box;
}

.smart-spacing-horizontal .smart-spacing-segment {
    /* 元素高度 */ height: 6px;
    /* 上方邊框 */ border-top: 1px solid var(--action-primary);
    /* 左側邊框 */ border-left: 1px solid var(--action-primary);
    /* 右側邊框 */ border-right: 1px solid var(--action-primary);
}

.smart-spacing-vertical .smart-spacing-segment {
    /* 元素寬度 */ width: 6px;
    /* 左側邊框 */ border-left: 1px solid var(--action-primary);
    /* 上方邊框 */ border-top: 1px solid var(--action-primary);
    /* 下方邊框 */ border-bottom: 1px solid var(--action-primary);
}

.smart-spacing-label {
    /* 定位方式 */ position: absolute;
    /* 最小寬度 */ min-width: 28px;
    /* 內縮空間 */ padding: 2px 5px;
    /* 背景顏色 */ background: var(--surface-card);
    /* 文字顏色 */ color: var(--action-primary);
    /* 邊框樣式 */ border: 1px solid var(--action-primary);
    /* 圓角設定 */ border-radius: 999px;
    /* 字體大小 */ font-size: 10px;
    /* 字體粗細 */ font-weight: 600;
    /* 行高設定 */ line-height: 1.2;
    /* 文字對齊 */ text-align: center;
    /* 保持單行 */ white-space: nowrap;
    /* 尺寸計算 */ box-sizing: border-box;
    /* 元素陰影 */ box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.smart-spacing-horizontal .smart-spacing-label {
    /* 水平位移 */ transform: translate(-50%, -100%);
}

.smart-spacing-vertical .smart-spacing-label {
    /* 水平位移 */ transform: translate(0, -50%);
}

#genealogyRelationshipLabelLayer.labels-locked .edge-label {
    /* 滑鼠指標 */ cursor: default;
    /* 滑鼠事件 */ pointer-events: none;
}

.edge {
    /* 填滿顏色 */ fill: none;
    /* 線條端點 */ stroke-linecap: round;
    /* 線條轉角 */ stroke-linejoin: round;
    /* 向量縮放行為 */ vector-effect: non-scaling-stroke;
}

/* ========【關係線】 設定 - 五種關係使用新的預設線型，並支援玩家自訂 ======== */
.edge-parent {
    stroke: var(--rel-parent-color,var(--relationship-parent));
    stroke-width: var(--rel-parent-width,2);
    stroke-dasharray: var(--rel-parent-dash,none);
}
.edge-spouse {
    stroke: var(--rel-spouse-color,var(--relationship-spouse));
    stroke-width: var(--rel-spouse-width,2.4);
    stroke-dasharray: var(--rel-spouse-dash,none);
}
.edge-exspouse {
    stroke: var(--rel-exspouse-color,var(--relationship-former-spouse));
    stroke-width: var(--rel-exspouse-width,1.7);
    stroke-dasharray: var(--rel-exspouse-dash,4 3);
}
.edge-adopt {
    stroke: var(--rel-adopt-color,var(--relationship-adoptive));
    stroke-width: var(--rel-adopt-width,1.7);
    stroke-dasharray: var(--rel-adopt-dash,10 6);
}
.edge-other {
    stroke: var(--rel-other-color,var(--relationship-other));
    stroke-width: var(--rel-other-width,1.5);
    stroke-dasharray: var(--rel-other-dash,1 5);
    opacity:.9;
}

.edge-label-text {
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 12px;
    /* 字體粗細 */ font-weight: 600;
    /* 文字顏色 */ fill: var(--text-primary);
    /* 標籤拖曳事件交給外層群組 */ pointer-events: none;
    /* 禁止選取 SVG 文字 */ user-select: none;
}

.edge-label-icon {
    /* 圖示顏色 */ color: var(--action-primary);
    /* 圖示填滿 */ fill: var(--action-primary);
    /* 標籤拖曳事件交給外層群組 */ pointer-events: none;
}

/* ========【模擬市民卡片】 設定 - 卡片狀態、頭像與資料呈現 ======== */

.person-card {
    /* 定位方式 */ position: absolute;
    /* 背景設定 */ background: var(--surface-card);
    /* 邊框設定 */ border: 1.5px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 10px;
    /* 內縮空間 */ padding: 10px 12px;
    /* 滑鼠指標 */ cursor: grab;
    /* 溢出處理 */ overflow: hidden;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 10px;
    /* 元素陰影 */ box-shadow: 0 1px 3px rgba(0,0,0,.06);
    /* 動畫過渡 */ transition: box-shadow .16s,border-color .16s,background-color .25s;
    /* 文字選取 */ user-select: none;
    /* 觸控行為 */ touch-action: none;
}

.person-card:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 元素陰影 */ box-shadow: 0 8px 20px rgba(0,0,0,.12);
    /* 顯示層級 */ z-index: 9;
}

.person-card.ghost {
    /* 背景設定 */ background: var(--person-ghost-surface);
    /* 邊框顏色 */ border-color: var(--person-ghost-border);
    /* 邊框樣式 */ border-style: dotted;
    /* 透明度 */ opacity: .9;
}

.person-card.dead {
    /* 背景設定 */ background: var(--person-deceased-surface);
    /* 邊框顏色 */ border-color: var(--person-deceased-border);
    /* 邊框樣式 */ border-style: dashed;
    /* 透明度 */ opacity: .88;
}

.person-card.inlaw {
    /* 上方邊框 */ border-top: 2px dotted var(--relationship-spouse);
}

.person-card.inlaw .person-card-name::before {
    /* 生成內容 */ content: "姻 ";
    /* 字體大小 */ font-size: 10px;
    /* 文字顏色 */ color: var(--relationship-spouse);
    /* 字體粗細 */ font-weight: 400;
}

.person-card.hl {
    /* 外框設定 */ outline: 3px solid var(--selection-highlight);
    /* 外框偏移 */ outline-offset: 2px;
    /* 顯示層級 */ z-index: 8;
}

.person-card.dim {
    /* 透明度 */ opacity: .15;
}

.person-card.dragging {
    /* 顯示層級 */ z-index: 100;
    /* 滑鼠指標 */ cursor: grabbing;
    /* 元素陰影 */ box-shadow: 0 18px 44px rgba(0,0,0,.24);
    /* 元素變形 */ transform: none;
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 動畫過渡 */ transition: none;
}

.person-card-avatar {
    /* 元素寬度 */ width: 60px;
    /* 元素高度 */ height: 60px;
    /* 圓角弧度 */ border-radius: 9px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 溢出處理 */ overflow: hidden;
    /* 背景設定 */ background: linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 22px;
    /* 字體粗細 */ font-weight: 700;
    /* 文字顏色 */ color: var(--avatar-text);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 定位方式 */ position: relative;
}

.person-card-avatar img {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 100%;
    /* 圖片填滿方式 */ object-fit: cover;
    /* 顯示方式 */ display: block;
}

.person-card.ghost .person-card-avatar::after {
    /* 生成內容 */ content: "";
    /* 定位方式 */ position: absolute;
    /* 定位範圍 */ inset: 0;
    /* 背景設定 */ background: rgba(155,183,212,.28);
    /* 混合模式 */ mix-blend-mode: screen;
    /* 滑鼠事件 */ pointer-events: none;
}

.person-card.dead .person-card-avatar {
    /* 視覺濾鏡 */ filter: sepia(.45) saturate(.7) brightness(.95);
}

.person-card-body {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 0;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 2px;
    /* 水平對齊 */ justify-content: center;
}

.person-card-name {
    /* 字體大小 */ font-size:13px;
    /* 字體粗細 */ font-weight:700;
    /* 字距設定 */ letter-spacing:.2px;
    /* 行距設定 */ line-height:1.28;
    /* 顯示方式 */ display:-webkit-box;
    /* WebKit 行數限制 */ -webkit-line-clamp:2;
    /* WebKit 排列方向 */ -webkit-box-orient:vertical;
    /* 溢出處理 */ overflow:hidden;
    /* 斷字方式 */ word-break:break-word;
    /* 換行規則 */ overflow-wrap:anywhere;
    /* 右側內縮 */ padding-right:24px;
}

.person-card-gender-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    margin-left:3px;
    color:var(--person-accent-other);
    vertical-align:-0.18em;
}

.person-card-gender-icon .l1ng-icon {
    width:14px;
    height:14px;
}

.person-card.view .person-card-gender-icon {
    width:13px;
    height:13px;
    margin-left:2px;
}

.person-card.view .person-card-gender-icon .l1ng-icon {
    width:12px;
    height:12px;
}

.person-card.male .person-card-gender-icon {
    color:var(--person-accent-male);
}

.person-card.female .person-card-gender-icon {
    color:var(--person-accent-female);
}

.person-card.other .person-card-gender-icon {
    color:var(--person-accent-other);
}

.person-card.ghost.male .person-card-gender-icon {
    color:var(--person-ghost-accent-male);
}

.person-card.ghost.female .person-card-gender-icon {
    color:var(--person-ghost-accent-female);
}

.person-card.ghost.other .person-card-gender-icon {
    color:var(--person-ghost-accent-other);
}

.person-card.dead.male .person-card-gender-icon {
    color:var(--person-deceased-accent-male);
}

.person-card.dead.female .person-card-gender-icon {
    color:var(--person-deceased-accent-female);
}

.person-card.dead.other .person-card-gender-icon {
    color:var(--person-deceased-accent-other);
}

.person-card.dead .person-card-name {
    /* 文字顏色 */ color: var(--person-deceased-text);
}

.person-card.ghost .person-card-name {
    /* 文字顏色 */ color: var(--person-ghost-text);
}

.person-card-title {
    /* 字體大小 */ font-size: 10px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
}

.person-card-residence,
.person-card-aspiration,
.person-card-death {
    /* 字體大小 */ font-size: 10px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 行距設定 */ line-height: 1.4;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 3px;
}

/* ========【介面圖示】 設定 - 共用 SVG Icon 顯示規則 ======== */

.l1ng-icon {
    /* 預設遮罩 */ --l1ng-icon: linear-gradient(transparent, transparent);
    /* 顯示方式 */ display: inline-block;
    /* 元素寬度 */ width: 1em;
    /* 元素高度 */ height: 1em;
    /* 彈性配比 */ flex: 0 0 auto;
    /* 垂直對齊 */ vertical-align: -0.12em;
    /* 背景顏色 */ background-color: currentColor;
    /* WebKit 遮罩圖片 */ -webkit-mask-image: var(--l1ng-icon);
    /* 遮罩圖片 */ mask-image: var(--l1ng-icon);
    /* WebKit 遮罩重複 */ -webkit-mask-repeat: no-repeat;
    /* 遮罩重複 */ mask-repeat: no-repeat;
    /* WebKit 遮罩位置 */ -webkit-mask-position: center;
    /* 遮罩位置 */ mask-position: center;
    /* WebKit 遮罩尺寸 */ -webkit-mask-size: contain;
    /* 遮罩尺寸 */ mask-size: contain;
}

.l1ng-icon > svg {
    width: 100%;
    height: 100%;
    display: block;
}

.icon-btn .l1ng-icon,
.sidebar-btn .l1ng-icon,
.filebtn .l1ng-icon,
.ui-dialog-actions .l1ng-icon,
.pet-add-btn .l1ng-icon,
.life-photo-add-btn .l1ng-icon {
    /* 字體大小 */ font-size: 1.02em;
}

.info>.l1ng-icon,
.life-photo-drop-hint>.l1ng-icon {
    /* 右側外距 */ margin-right: 6px;
    /* 文字顏色 */ color: var(--action-primary);
}

.ui-dialog-panel h2>.l1ng-icon,
.ui-dialog-panel h3>.l1ng-icon,
.setting-group-title>.l1ng-icon,
.relationship-section-title>.l1ng-icon {
    /* 右側外距 */ margin-right: 5px;
    /* 文字顏色 */ color: var(--action-primary);
}

.person-card-residence .l1ng-icon,
.person-card-aspiration .l1ng-icon,
.person-card-death .l1ng-icon {
    /* 字體大小 */ font-size: 10px;
    /* 彈性收縮 */ flex-shrink: 0;
}

.person-card-residence .l1ng-icon {
    /* 文字顏色 */ color: var(--text-secondary);
}

.person-card-aspiration .l1ng-icon {
    /* 文字顏色 */ color: var(--action-primary);
}

.person-card-death .l1ng-icon {
    /* 文字顏色 */ color: #a05a4a;
}

body[data-theme="ink"] .person-card-death .l1ng-icon,
body[data-theme="berrynight"] .person-card-death .l1ng-icon,
body[data-theme="graphite"] .person-card-death .l1ng-icon {
    /* 文字顏色 */ color: #c08e78;
}

.status-icon,
.race-icon,
.pet-icon {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
}

.person-card-aspiration {
    /* 文字顏色 */ color: var(--action-primary);
    /* 字體粗細 */ font-weight: 500;
}

.person-card-death {
    /* 文字顏色 */ color: #a05a4a;
}

body[data-theme="ink"] .person-card-death,
body[data-theme="berrynight"] .person-card-death,
body[data-theme="graphite"] .person-card-death {
    /* 文字顏色 */ color: #c08e78;
}

.person-card.dead .person-card-residence,
.person-card.dead .person-card-aspiration,
.person-card.dead .person-card-death {
    /* 文字顏色 */ color: var(--person-deceased-text);
    /* 透明度 */ opacity: .9;
}

.person-card.ghost .person-card-residence,
.person-card.ghost .person-card-aspiration,
.person-card.ghost .person-card-death {
    /* 文字顏色 */ color: var(--person-ghost-text);
    /* 透明度 */ opacity: .9;
}

.person-card-pets {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 3px;
    /* 上方外距 */ margin-top: 3px;
    /* 自動換行 */ flex-wrap: wrap;
    /* 垂直對齊 */ align-items: center;
    /* 字體大小 */ font-size: 10px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 行距設定 */ line-height: 1.4;
}

.person-card-pet-chip {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 2px;
    /* 內縮空間 */ padding: 1px 5px;
    /* 圓角弧度 */ border-radius: 4px;
    /* 背景設定 */ background: var(--surface-item);
    /* 字體大小 */ font-size: 9.5px;
    /* 文字顏色 */ color: var(--text-primary);
    /* 最大寬度 */ max-width: 88px;
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
}

.person-card.dead .person-card-pet-chip {
    /* 背景設定 */ background: var(--person-deceased-tag-surface);
    /* 文字顏色 */ color: var(--person-deceased-tag-text);
}

.person-card.ghost .person-card-pet-chip {
    /* 背景設定 */ background: var(--person-ghost-tag-surface);
    /* 文字顏色 */ color: var(--person-ghost-tag-text);
}

.person-card-life-photo-badge {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 2px;
    /* 內縮空間 */ padding: 1px 5px;
    /* 圓角弧度 */ border-radius: 4px;
    /* 背景設定 */ background: var(--tag-surface);
    /* 文字顏色 */ color: var(--tag-text);
    /* 字體大小 */ font-size: 9.5px;
    /* 行距設定 */ line-height: 1.4;
    /* 上方外距 */ margin-top: 3px;
}

.person-card.ghost .person-card-life-photo-badge {
    /* 背景設定 */ background: var(--person-ghost-tag-surface);
    /* 文字顏色 */ color: var(--person-ghost-tag-text);
}

.person-card.dead .person-card-life-photo-badge {
    /* 背景設定 */ background: var(--person-deceased-tag-surface);
    /* 文字顏色 */ color: var(--person-deceased-tag-text);
}

.person-card-tags {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 3px;
    /* 上方外距 */ margin-top: 3px;
    /* 自動換行 */ flex-wrap: wrap;
    /* 溢出處理 */ overflow: hidden;
    /* 最大高度 */ max-height: 16px;
}

.tag {
    /* 字體大小 */ font-size: 9px;
    /* 行距設定 */ line-height: 1;
    /* 最小高度固定 */ min-height: 16px;
    /* 內縮空間 */ padding: 2px 5px;
    /* 圓角弧度 */ border-radius: 4px;
    /* 背景設定 */ background: var(--tag-surface);
    /* 文字顏色 */ color: var(--tag-text);
    /* 換行方式 */ white-space: nowrap;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 最大寬度 */ max-width: 96px;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 文字基線 */ vertical-align: middle;
}

.person-card.ghost .tag {
    /* 背景設定 */ background: var(--person-ghost-tag-surface);
    /* 文字顏色 */ color: var(--person-ghost-tag-text);
}

.person-card.dead .tag {
    /* 背景設定 */ background: var(--person-deceased-tag-surface);
    /* 文字顏色 */ color: var(--person-deceased-tag-text);
}

.tag-more {
    /* 背景設定 */ background: var(--action-primary);
    /* 文字顏色 */ color: #fff !important;
    /* 字體粗細 */ font-weight: 600;
    /* 最大寬度 */ max-width: none;
    /* 內縮空間 */ padding: 1px 7px;
}

/* ========【年齡階段標籤】 設定 - 使用低彩度底色與左側色線，取代舊版實心彩色標籤 ======== */
.stage-tag,
.life-photo-stage {
    --stage-accent:#8aa1b3;
    --stage-bg:rgba(138,161,179,.12);
    --stage-ink:var(--text-primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    padding:3px 7px 3px 8px;
    border:1px solid color-mix(in srgb,var(--stage-accent) 38%,var(--border-default));
    border-left:3px solid var(--stage-accent);
    border-radius:5px;
    background:var(--stage-bg);
    color:var(--stage-ink);
    font-size:10px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

.stage-新生兒 { --stage-accent:#bd8aa8; --stage-bg:rgba(189,138,168,.10); }
.stage-嬰兒   { --stage-accent:#c59382; --stage-bg:rgba(197,147,130,.10); }
.stage-幼兒   { --stage-accent:#c9a46e; --stage-bg:rgba(201,164,110,.10); }
.stage-兒童   { --stage-accent:#b6ad65; --stage-bg:rgba(182,173,101,.10); }
.stage-青少年 { --stage-accent:#79a681; --stage-bg:rgba(121,166,129,.10); }
.stage-青年   { --stage-accent:#6f9fbd; --stage-bg:rgba(111,159,189,.10); }
.stage-成年   { --stage-accent:#8585b2; --stage-bg:rgba(133,133,178,.10); }
.stage-老年   { --stage-accent:#9d8f84; --stage-bg:rgba(157,143,132,.10); }

body[data-theme="ink"] .stage-tag,
body[data-theme="berrynight"] .stage-tag,
body[data-theme="graphite"] .stage-tag,
body[data-theme="ink"] .life-photo-stage,
body[data-theme="berrynight"] .life-photo-stage,
body[data-theme="graphite"] .life-photo-stage {
    --stage-ink:#edf3f8;
    border-color:color-mix(in srgb,var(--stage-accent) 52%,#2f3945);
    background:color-mix(in srgb,var(--stage-accent) 16%,#151c24);
}

.person-card-status-badge {
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 5px;
    /* 右側位置 */ right: 5px;
    /* 元素寬度 */ width: 22px;
    /* 元素高度 */ height: 22px;
    /* 圓角弧度 */ border-radius: 50%;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 13px;
    /* 行距設定 */ line-height: 1;
    /* 背景設定 */ background: var(--surface-input);
    /* 元素陰影 */ box-shadow: 0 1px 4px rgba(0,0,0,.18);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 顯示層級 */ z-index: 3;
    /* 滑鼠事件 */ pointer-events: none;
}

.person-card-status-badge.alive {
    /* 背景設定 */ background: var(--person-living-badge-surface);
    /* 邊框顏色 */ border-color: var(--person-living-badge-border);
}

.person-card-status-badge.ghost {
    /* 背景設定 */ background: var(--person-ghost-badge-surface);
    /* 邊框顏色 */ border-color: var(--person-ghost-badge-border);
}

.person-card-status-badge.dead {
    /* 背景設定 */ background: var(--person-deceased-badge-surface);
    /* 邊框顏色 */ border-color: var(--person-deceased-badge-border);
}

.person-card-race-badge {
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 5px;
    /* 左側位置 */ left: 5px;
    /* 最小寬度 */ min-width: 22px;
    /* 元素高度 */ height: 22px;
    /* 圓角弧度 */ border-radius: 8px;
    /* 內縮空間 */ padding: 0 4px;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 13px;
    /* 行距設定 */ line-height: 1;
    /* 背景設定 */ background: var(--surface-input);
    /* 元素陰影 */ box-shadow: 0 1px 4px rgba(0,0,0,.18);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 顯示層級 */ z-index: 3;
    /* 滑鼠事件 */ pointer-events: none;
}

.person-card.ghost .person-card-race-badge {
    /* 背景設定 */ background: var(--person-ghost-badge-surface);
    /* 邊框顏色 */ border-color: var(--person-ghost-badge-border);
}

.person-card.dead .person-card-race-badge {
    /* 背景設定 */ background: var(--person-deceased-badge-surface);
    /* 邊框顏色 */ border-color: var(--person-deceased-badge-border);
}

.person-card.view {
    /* 排列方向 */ flex-direction: column;
    /* 水平對齊 */ justify-content: flex-start;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 4px;
    /* 內縮空間 */ padding: 8px 6px 6px;
}

.person-card.view .person-card-race-badge {
    /* 頂部位置 */ top: 3px;
    /* 左側位置 */ left: 3px;
    /* 最小寬度 */ min-width: 16px;
    /* 元素高度 */ height: 16px;
    /* 圓角弧度 */ border-radius: 6px;
    /* 內縮空間 */ padding: 0 3px;
    /* 字體大小 */ font-size: 10px;
}

.person-card.view .person-card-status-badge {
    /* 頂部位置 */ top: 3px;
    /* 右側位置 */ right: 3px;
    /* 元素寬度 */ width: 16px;
    /* 元素高度 */ height: 16px;
    /* 字體大小 */ font-size: 10px;
}

.person-card-view-avatar {
    /* 元素寬度 */ width: 76px;
    /* 元素高度 */ height: 76px;
    /* 圓角弧度 */ border-radius: 10px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 溢出處理 */ overflow: hidden;
    /* 背景設定 */ background: linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 30px;
    /* 字體粗細 */ font-weight: 700;
    /* 文字顏色 */ color: var(--avatar-text);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 定位方式 */ position: relative;
    /* 上方外距 */ margin-top: 4px;
}

.person-card-view-avatar img {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 100%;
    /* 圖片填滿方式 */ object-fit: cover;
    /* 顯示方式 */ display: block;
}

.person-card.view.ghost .person-card-view-avatar::after {
    /* 生成內容 */ content: "";
    /* 定位方式 */ position: absolute;
    /* 定位範圍 */ inset: 0;
    /* 背景設定 */ background: rgba(155,183,212,.28);
    /* 混合模式 */ mix-blend-mode: screen;
    /* 滑鼠事件 */ pointer-events: none;
}

.person-card.view.dead .person-card-view-avatar {
    /* 視覺濾鏡 */ filter: sepia(.45) saturate(.7) brightness(.95);
}

.person-card-view-name {
    /* 元素寬度 */ width:100%;
    /* 字體大小 */ font-size:11px;
    /* 字體粗細 */ font-weight:700;
    /* 字距設定 */ letter-spacing:.2px;
    /* 行距設定 */ line-height:1.2;
    /* 文字對齊 */ text-align:center;
    /* 顯示方式 */ display:block;
    /* 斷字方式 */ word-break:break-word;
    /* 換行規則 */ overflow-wrap:anywhere;
    /* 換行方式 */ white-space:normal;
    /* 內縮空間 */ padding:0 2px;
}

.person-card.view.dead .person-card-view-name {
    /* 文字顏色 */ color: var(--person-deceased-text);
}

.person-card.view.ghost .person-card-view-name {
    /* 文字顏色 */ color: var(--person-ghost-text);
}

.person-card-view-pets {
    /* 字體大小 */ font-size: 9.5px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 行距設定 */ line-height: 1.3;
    /* 文字對齊 */ text-align: center;
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 最大寬度 */ max-width: 100%;
    /* 內縮空間 */ padding: 0 2px;
}

.empty {
    /* 定位方式 */ position: absolute;
    /* 定位範圍 */ inset: 0;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 14px;
    /* 滑鼠事件 */ pointer-events: none;
    /* 文字對齊 */ text-align: center;
    /* 內縮空間 */ padding: 20px;
}

/* ========【彈出視窗】 設定 - 遮罩、表單與共用 Modal 元件 ======== */

.ui-dialog-backdrop {
    /* 定位方式 */ position: fixed;
    /* 定位範圍 */ inset: 0;
    /* 背景設定 */ background: var(--overlay-backdrop);
    /* 背景濾鏡 */ backdrop-filter: blur(2px);
    /* 顯示方式 */ display: none;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 顯示層級 */ z-index: 100;
    /* 內縮空間 */ padding: 20px;
    /* 過度捲動行為 */ overscroll-behavior: contain;
}

.ui-dialog-backdrop.show {
    /* 顯示方式 */ display: flex;
}

.ui-dialog-backdrop.person-library-backdrop {
    /* 顯示層級 */ z-index: 90;
}

.ui-dialog-backdrop.nested {
    /* 顯示層級 */ z-index: 150;
}

.ui-dialog-backdrop.photo-viewer-backdrop {
    /* 顯示層級 */ z-index: 210;
}

/* ========【共用彈出視窗】 設定 - 輕量外框、較小圓角與位移淡入 ======== */
.ui-dialog-panel {
    background:var(--surface-card);
    border:1px solid var(--border-default);
    border-radius:10px;
    width:min(740px,100%);
    max-height:90vh;
    overflow:auto;
    padding:20px 24px;
    box-shadow:0 16px 42px rgba(31,35,40,.18);
    animation:l1ng-dialog-in .16s ease-out;
}
@keyframes l1ng-dialog-in {
    from { transform:translateY(7px); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}

.ui-dialog-panel h2 {
    /* 外距設定 */ margin: 0 0 14px;
    /* 字體大小 */ font-size: 17px;
    /* 字距設定 */ letter-spacing: 1px;
    /* 文字顏色 */ color: var(--action-primary);
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 6px;
    /* 自動換行 */ flex-wrap: wrap;
}

.ui-dialog-panel h2 .family-name-chip {
    /* 顯示方式 */ display: inline-block;
    /* 內縮空間 */ padding: 1px 8px;
    /* 圓角弧度 */ border-radius: 6px;
    /* 背景設定 */ background: var(--surface-item);
    /* 文字顏色 */ color: var(--action-primary);
    /* 字體大小 */ font-size: 14px;
    /* 字體粗細 */ font-weight: 700;
    /* 最大寬度 */ max-width: 280px;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 換行方式 */ white-space: nowrap;
    /* 垂直對齊 */ vertical-align: middle;
}


/* ========【共用提示 Tooltip】 設定 - 小 i 圖示放在標題／欄位名稱後方，懸停或鍵盤焦點顯示 ======== */
.help-tooltip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; border-radius:999px; color:var(--action-primary); cursor:help; outline:none; vertical-align:middle; }
.help-tooltip.compact { width:18px; height:18px; flex-basis:18px; font-size:11px; }
.help-tooltip:hover,.help-tooltip:focus-visible { background:var(--brand-tint-start); color:var(--action-primary-hover); }
.help-tooltip::before,.help-tooltip::after { content:none !important; display:none !important; }
#globalHelpTooltip { position:fixed; z-index:23000; max-width:min(330px,calc(100vw - 24px)); padding:9px 11px; border-radius:7px; background:rgba(32,37,43,.97); color:#fff; font-size:12px; font-weight:400; line-height:1.55; letter-spacing:0; text-align:left; white-space:pre-line; box-shadow:0 8px 24px rgba(0,0,0,.18); pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .12s ease,transform .12s ease,visibility .12s ease; }
#globalHelpTooltip.show { opacity:1; visibility:visible; transform:translateY(0); }
#globalHelpTooltip::after { content:""; position:absolute; left:var(--tooltip-arrow-x,50%); width:9px; height:9px; background:inherit; transform:translateX(-50%) rotate(45deg); }
#globalHelpTooltip[data-side="top"]::after { bottom:-4px; }
#globalHelpTooltip[data-side="bottom"]::after { top:-4px; }
.setting-title-with-help,.setting-label-with-help,.field-label-row { display:inline-flex; align-items:center; gap:5px; }
.setting-label-with-help,.field-label-row { justify-content:flex-start; }
.field-label-note { color:var(--text-secondary); opacity:.68; font-size:10.5px; font-weight:400; }
.form-field { min-width:0; }
.form-field-title { color:var(--text-secondary); font:inherit; font-weight:600; }

/* ========【模擬市民個人檔案編輯器】 設定 - 緊湊人物檔案、分頁內容與固定操作列 ======== */
.sim-editor-modal { width:min(790px,calc(100vw - 40px)); height:min(680px,92vh); max-height:none; padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3; transition:transform .38s cubic-bezier(.2,.75,.25,1),opacity .26s ease,box-shadow .26s ease; }
.sim-editor-top { flex:0 0 auto; padding:13px 18px 0; background:var(--surface-card); position:relative; z-index:5; }
.sim-editor-title { margin-bottom:8px !important; padding-right:64px; }
.sim-profile-header { display:grid; grid-template-columns:156px minmax(0,1fr); align-items:start; gap:18px; padding:0 0 11px; }
.sim-profile-avatar-block { width:156px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; align-items:center; gap:5px 6px; }
.avatar-preview.sim-profile-avatar { grid-column:1/-1; width:104px; height:104px; margin:0 auto 1px; border-radius:11px; font-size:36px; }
.sim-profile-avatar-actions { grid-column:1/-1; }
.avatar-editor-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; }
.sim-profile-avatar-actions.avatar-editor-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.sim-profile-avatar-actions > .avatar-editor-action,.sim-profile-avatar-actions > .filebtn.compact { width:100%; display:inline-flex; align-items:center; justify-content:center; }
.avatar-editor-action,.filebtn.compact,.avatar-clear-compact { min-height:28px; padding:4px 8px; border:1px solid var(--border-default); border-radius:6px; background:var(--surface-input); color:var(--text-primary); font:inherit; font-size:11px; line-height:1; white-space:nowrap; }
button.avatar-editor-action { cursor:pointer; }
.avatar-editor-action:hover,.avatar-clear-compact:hover,.filebtn.compact:hover { border-color:var(--action-primary); color:var(--action-primary); }
.avatar-editor-action:disabled { opacity:.45; cursor:not-allowed; border-color:var(--border-default); color:var(--text-secondary); }
.sim-profile-avatar-block .avatar-tip { grid-column:1/-1; text-align:center; font-size:10.5px; line-height:1.3; margin:0; }
.sim-profile-edit-fields { min-width:0; display:grid; gap:8px; }
.sim-profile-edit-fields label,.sim-profile-edit-fields .form-field { min-width:0; display:grid; gap:4px; color:var(--text-secondary); font-size:10.5px; font-weight:600; }
.sim-profile-edit-fields input,.sim-profile-edit-fields select,.sim-profile-edit-fields .ui-single-select-trigger { width:100%; min-width:0; min-height:32px; padding:5px 8px; border:1px solid var(--border-default); border-radius:6px; background:var(--surface-input); color:var(--text-primary); font:inherit; font-size:12px; outline:none; }
.sim-profile-edit-fields input:focus,.sim-profile-edit-fields select:focus,.sim-profile-edit-fields .ui-single-select-trigger:focus-visible { border-color:var(--action-primary); }
.profile-name-field input { min-height:36px; font-size:17px; font-weight:700; padding:5px 9px; }
.profile-identity-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.profile-fact-edit-row { display:grid; grid-template-columns:minmax(150px,.9fr) minmax(94px,.52fr) minmax(190px,1.45fr); gap:8px; align-items:start; }
.profile-fact-edit-row > .form-field { grid-template-rows:auto 32px; align-items:start; }
.profile-field-label { min-height:14px; display:inline-flex; align-items:center; gap:4px; line-height:1.2; }
.profile-field-label .l1ng-icon { color:var(--action-primary); }
.profile-birthday-field .birthday-inputs,
.profile-age-field .age-input-wrap,
.profile-residence-field > input { align-self:start; min-height:32px; }
.profile-birthday-field .birthday-inputs { grid-template-columns:1.3fr .85fr .85fr; gap:5px; }
.profile-age-field .age-input-wrap { min-height:32px; border-radius:6px; }
.profile-age-field .age-input-wrap input { min-height:30px; border:0; border-radius:0; box-shadow:none; background:transparent; padding-right:2px; }
.sim-editor-tabs { flex:0 0 auto; display:flex; gap:0; overflow-x:auto; scrollbar-width:none; margin:0; padding:0 18px; border-bottom:1px solid var(--border-default); background:var(--surface-card); position:relative; z-index:5; }
.sim-editor-tabs::-webkit-scrollbar { display:none; }
.sim-editor-tab { position:relative; flex:1 1 0; min-width:max-content; min-height:34px; padding:7px 11px 8px; border:0; border-radius:0; background:transparent; color:var(--text-secondary); font-size:12.5px; font-weight:600; line-height:1.2; transition:color .15s ease,background .15s ease; }
.sim-editor-tab:hover { background:var(--surface-item-hover); color:var(--text-primary); }
.sim-editor-tab.active { color:var(--action-primary); background:transparent; }
.sim-editor-tab.active::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:999px; background:var(--action-primary); }
.sim-editor-content { flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 18px 14px; background:var(--surface-card); }
.sim-editor-panel { display:none; }
.sim-editor-panel.active { display:block; }
.sim-editor-panel[hidden] { display:none !important; }
.editor-empty-note { padding:10px 12px; border:1px dashed var(--border-default); border-radius:7px; background:var(--surface-panel); color:var(--text-secondary); font-size:11.5px; line-height:1.45; }
.profile-grid { gap:9px 11px; }
.profile-grid label,.profile-grid .form-field { gap:4px; font-size:11.5px; font-weight:600; }
.profile-grid input,.profile-grid select,.profile-grid textarea,.profile-grid .ui-select-input { min-height:34px; line-height:1.2; }
.profile-basic-grid textarea { min-height:76px; }
.birthday-inputs { display:grid; grid-template-columns:1.3fr .85fr .85fr; gap:6px; }
.age-input-wrap { display:flex; align-items:center; min-height:34px; border:1px solid var(--border-default); border-radius:6px; background:var(--surface-input); overflow:hidden; transition:border-color .15s ease,box-shadow .15s ease; }
.age-input-wrap:focus-within { border-color:var(--action-primary); box-shadow:0 0 0 2px var(--brand-tint-start); }
.profile-grid .age-input-wrap input { flex:1 1 auto; min-width:0; width:0; min-height:32px; border:0; border-radius:0; box-shadow:none; background:transparent; padding-right:3px; }
.age-input-suffix { flex:0 0 auto; padding:0 9px 0 4px; color:var(--text-secondary); font-size:10.5px; font-weight:500; line-height:1; white-space:nowrap; }
.trait-editor { border:1px solid var(--border-default); border-radius:7px; background:var(--surface-input); padding:7px; }
.trait-chip-list { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-height:0; }
.trait-chip-list:not(:empty) { margin-bottom:6px; }
.trait-chip { display:inline-flex; align-items:center; gap:4px; min-height:23px; padding:3px 6px 3px 8px; border-radius:999px; background:var(--tag-surface); color:var(--tag-text); font-size:10.5px; font-weight:500; line-height:1; }
.trait-chip-remove { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; padding:0; border:0; border-radius:999px; background:transparent; color:currentColor; font-size:13px; line-height:1; }
.trait-chip-remove:hover { background:rgba(0,0,0,.08); }
.trait-add-row { display:flex; gap:6px; }
.trait-add-row input { flex:1; min-width:0; }
.trait-add-row button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:70px; padding:5px 10px; border:1px solid var(--border-default); border-radius:6px; background:var(--surface-item); color:var(--text-primary); font-size:11.5px; }
.trait-add-row button:hover { border-color:var(--action-primary); color:var(--action-primary); }

/* ========【遊戲偏好唯讀顯示】 設定 - 簡約分類列，不使用表格框線 ======== */
.game-preference-list {
    /* 每個 EA 分類依序排列 */ display: grid;
}

.game-preference-category {
    /* 分類之間用留白與淡線區分 */ padding: 12px 0 13px;
    /* 僅保留水平分隔 */ border-bottom: 1px solid var(--border-default);
}

.game-preference-category:last-child {
    /* 最後一個分類不需要尾線 */ border-bottom: 0;
}

.game-preference-category-title {
    /* 活動 / 音樂 / 顏色等分類只顯示一次 */ margin-bottom: 8px;
    /* 分類文字大小 */ font-size: 12px;
    /* 分類層級 */ font-weight: 700;
    /* 使用主要文字色 */ color: var(--text-primary);
}

.game-preference-row {
    /* 喜歡 / 討厭與項目維持同一列 */ display: grid;
    /* 左側固定狀態文字，右側自動換行 */ grid-template-columns: 52px minmax(0,1fr);
    /* 欄位距離 */ gap: 8px;
    /* 從頂端對齊 */ align-items: start;
    /* 最小列高 */ min-height: 27px;
}

.game-preference-row + .game-preference-row {
    /* 喜歡與討厭之間保留輕量距離 */ margin-top: 6px;
}

.game-preference-row-label {
    /* 狀態文字與標籤第一列對齊 */ padding-top: 5px;
    /* 次要文字色 */ color: var(--text-secondary);
    /* 狀態字級 */ font-size: 10.5px;
    /* 狀態文字稍微加重 */ font-weight: 600;
}

.game-preference-items {
    /* 同分類多項偏好自動換行 */ display: flex;
    /* 允許換行 */ flex-wrap: wrap;
    /* 標籤間距 */ gap: 6px;
    /* 避免長字撐破欄位 */ min-width: 0;
}

.game-preference-chip {
    /* 偏好項目沿用網站既有標籤語言 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 舒適列高 */ min-height: 25px;
    /* 長文字可收進目前欄位 */ max-width: 100%;
    /* 標籤內距 */ padding: 5px 9px;
    /* 膠囊圓角 */ border-radius: 999px;
    /* 沿用既有標籤底色 */ background: var(--tag-surface);
    /* 沿用既有標籤文字色 */ color: var(--tag-text);
    /* 可讀字級 */ font-size: 10.8px;
    /* 輕量字重 */ font-weight: 500;
    /* 緊湊行高 */ line-height: 1.2;
    /* 長偏好名稱可以換行 */ white-space: normal;
    /* 避免長單字溢出 */ overflow-wrap: anywhere;
}

.game-preference-footnote {
    /* 唯讀來源提示不搶主內容視覺 */ margin: 8px 0 0;
    /* 使用次要文字色 */ color: var(--text-secondary);
    /* 提示字級 */ font-size: 10.5px;
    /* 舒適行高 */ line-height: 1.45;
}

.family-rel-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; row-gap:0; }
.family-rel-block { min-width:0; padding:10px 0 11px; border-bottom:1px solid var(--border-default); }
.family-rel-block:nth-last-child(-n+2) { border-bottom:0; }
.family-rel-block-wide { grid-column:1/-1; }
.family-rel-block-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--text-primary); font-size:12px; font-weight:700; }
.family-rel-manage { border:0; background:transparent; color:var(--action-primary); font:inherit; font-size:11px; padding:2px 0; }
.family-rel-manage:hover { color:var(--action-primary-hover); text-decoration:underline; }
.family-rel-preview { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:4px 10px; min-height:29px; align-items:center; }

/* ========【家庭關係編輯列】 設定 - 檢視 / 編輯共用同一人物列，避免重複三層 ======== */
.family-rel-preview.family-rel-preview-editable {
    /* 編輯時每位人物獨立一列 */ grid-template-columns: 1fr;
    /* 列間距 */ gap: 5px;
}

.family-rel-preview-row {
    /* 平常狀態沿用純人物摘要 */ display: grid;
    /* 只有一個人物欄 */ grid-template-columns: minmax(0,1fr);
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 6px;
    /* 內縮空間 */ padding: 3px 2px;
    /* 圓角 */ border-radius: 6px;
}

.family-rel-preview-row.is-editing {
    /* 編輯狀態：移除 / 人物 / 控制同一列 */ grid-template-columns: 16px minmax(0,1fr) auto;
    /* 欄位間距 */ column-gap: 7px;
    /* 行間距 */ row-gap: 5px;
    /* 編輯狀態增加少量內距 */ padding: 5px 6px;
    /* 使用輕量底色區分編輯 */ background: var(--surface-panel);
    /* 保留人物列外框 */ border: 1px solid var(--border-default);
}

.family-rel-preview-row > .family-rel-person {
    /* 人物摘要本身不再額外包第二層卡片 */ padding: 0;
}

.family-rel-row-actions {
    /* 列內控制保持單排 */ display: flex;
    /* 垂直置中 */ align-items: center;
    /* 控制間距 */ gap: 5px;
    /* 不讓控制區壓縮人物姓名 */ flex: 0 0 auto;
    /* 最小寬度 */ min-width: 0;
}

.family-rel-remove,
.family-rel-remove-spacer {
    /* 與左側移除位置對齊 */ width: 16px;
    /* 固定寬度 */ flex: 0 0 16px;
}

.family-rel-remove {
    /* 小型純圖示按鈕 */ height: 16px;
    /* 取消多餘內距 */ padding: 0;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 水平置中 */ justify-content: center;
    /* 移除按鈕不使用外框 */ border: 0;
    /* 圓角只用於懸停背景 */ border-radius: 999px;
    /* 平常保持透明 */ background: transparent;
    /* 危險操作顏色 */ color: #b03a2e;
    /* 滑鼠指標 */ cursor: pointer;
    /* 不額外撐高人物列 */ align-self: center;
}

.family-rel-remove .l1ng-icon {
    /* 圖示尺寸 */ width: 9px;
    /* 圖示高度 */ height: 9px;
}

.family-rel-remove:hover,
.family-rel-remove:focus-visible {
    /* 懸停只顯示淡紅底，不增加外框 */ background: color-mix(in srgb,#b03a2e 9%,transparent);
    /* 聚焦外框交由瀏覽器 */ color: #a32f24;
}

.family-rel-kind-select {
    /* 原生來源欄位只保留語意尺寸，視覺由 ui-single-select 接手 */ width: 78px;
}

/* ========【關係種類小型下拉】 設定 - 親生 / 收養維持列內尺寸，選單寬度與欄位一致 ======== */
.ui-single-select-compact {
    /* 固定小型欄寬 */ width: 78px;
    /* 不被其他控制擠壓 */ flex: 0 0 78px;
}

.ui-single-select-compact .ui-single-select-trigger {
    /* 真正列內高度，不再接近整張人物列 */ min-height: 24px;
    /* 固定高度 */ height: 24px;
    /* 左右內距 */ padding: 2px 23px 2px 7px;
    /* 圓角 */ border-radius: 5px;
    /* 字體大小 */ font-size: 10.5px;
    /* 行距 */ line-height: 1;
}

.ui-single-select-compact .ui-select-chevron-icon {
    /* 小型欄位右側箭頭位置 */ right: 7px;
    /* 箭頭尺寸 */ width: 10px;
    /* 箭頭高度 */ height: 10px;
}

.family-rel-label-control {
    /* 自訂顯示文字在原位置切換 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 不額外換行 */ min-width: 0;
}

.family-rel-label-toggle {
    /* 自訂文字按鈕維持列內尺寸 */ min-height: 24px;
    /* 不換行 */ white-space: nowrap;
    /* 內縮空間 */ padding: 2px 7px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 10.5px;
    /* 滑鼠指標 */ cursor: pointer;
}

.family-rel-label-toggle:hover,
.family-rel-label-toggle[aria-expanded="true"] {
    /* 懸停 / 編輯狀態 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: var(--action-primary);
}

.family-rel-label-inline-editor {
    /* 原地取代按鈕，不另外長出整行 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 控制間距 */ gap: 4px;
    /* 不超出可用空間 */ min-width: 0;
}

.family-rel-label-inline-editor[hidden] {
    /* 收合時不佔版面 */ display: none;
}

.family-rel-label-input {
    /* 原地輸入框採固定可讀寬度 */ width: clamp(128px,18vw,190px);
    /* 不撐高人物列 */ min-height: 24px;
    /* 固定列內高度 */ height: 24px;
    /* 內縮空間 */ padding: 2px 7px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 10.5px;
    /* 外框 */ outline: none;
}

.family-rel-label-input:focus {
    /* 聚焦邊框 */ border-color: var(--action-primary);
}

.family-rel-label-reset {
    /* 恢復預設維持同一列 */ min-height: 24px;
    /* 高度 */ height: 24px;
    /* 內縮空間 */ padding: 2px 7px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-item);
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 10px;
    /* 不換行 */ white-space: nowrap;
    /* 滑鼠指標 */ cursor: pointer;
}

.family-rel-label-reset:hover {
    /* 懸停邊框 */ border-color: var(--action-primary);
    /* 懸停文字 */ color: var(--action-primary);
}

.ui-select-wrap[data-ui-select-mode="add-only"] .ui-select-input {
    /* 新增關係入口改成輕量按鈕感，不再顯示已選人物標籤 */ min-height: 31px;
    /* 邊框樣式 */ border-style: dashed;
    /* 文字顏色 */ color: var(--action-primary);
    /* 背景 */ background: transparent;
}

.ui-select-add-label {
    /* 新增入口圖示與文字並排 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 間距 */ gap: 5px;
    /* 字體大小 */ font-size: 11px;
    /* 字體粗細 */ font-weight: 600;
}

.ui-select-add-label .l1ng-icon {
    /* 圖示尺寸 */ width: 12px;
    /* 圖示高度 */ height: 12px;
}

.family-rel-empty { color:var(--text-secondary); font-size:11.5px; }
.family-rel-person { display:flex; align-items:center; gap:7px; min-width:0; max-width:100%; padding:3px 2px; border:0; border-radius:5px; background:transparent; color:var(--text-primary); font-size:11.5px; }
.family-rel-person-avatar { width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:999px; background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end)); color:var(--avatar-text); font-size:10px; font-weight:700; }
.family-rel-person-avatar img { width:100%; height:100%; object-fit:cover; }
.family-rel-person-name {
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.3;
}
.family-rel-edit { margin-top:7px; padding-top:7px; border-top:1px dashed var(--border-default); }
.family-rel-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.family-rel-edit-grid[hidden] { display:none; }
.family-rel-edit label { display:grid; gap:4px; color:var(--text-secondary); font-size:10.5px; font-weight:600; }
.family-rel-edit .ui-select-input { min-height:34px; }
.family-rel-person-copy { display:grid; min-width:0; gap:1px; }
.family-rel-person-kinship { color:var(--text-secondary); font-size:10px; line-height:1.25; }
.family-rel-person-custom { color:var(--action-primary); font-size:10.5px; line-height:1.3; overflow-wrap:anywhere; }

/* ========【其他關係編輯列】 設定 - 沿用家庭關係的人物列結構，標籤控制直接整合於同一筆關係 ======== */
.other-rel-block {
    /* 其他關係分頁只有單一主區塊 */ padding-top: 0;
    /* 不需要區塊底線 */ border-bottom: 0;
}

.other-rel-heading {
    /* 標題與說明圖示並排 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 項目間距 */ gap: 5px;
}

.other-rel-preview {
    /* 檢視狀態與子女一致採多欄排列，桌面通常一排 3～4 位 */ grid-template-columns: repeat(auto-fit,minmax(165px,1fr));
    /* 欄列間距 */ gap: 4px 10px;
}

.other-rel-edit {
    /* 新增入口與既有關係共用同一區塊 */ margin-top: 8px;
}

.other-rel-add-title {
    /* 新增區標題 */ margin-bottom: 6px;
    /* 字體大小 */ font-size: 11px;
    /* 字體粗細 */ font-weight: 700;
    /* 文字顏色 */ color: var(--text-secondary);
}

.other-rel-hidden-label {
    /* 隱藏畫布標籤狀態跟著人物摘要顯示 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 10.5px;
    /* 行距 */ line-height: 1.3;
}

.other-rel-label-control {
    /* 顯示方式 / 自訂文字 / 重設位置都留在同一列 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 控制間距 */ gap: 5px;
    /* 不超出可用空間 */ min-width: 0;
}

.other-rel-type-trigger {
    /* 既有關係編輯控制維持列內小型尺寸 */ min-height: 24px;
    /* 固定列內高度 */ height: 24px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-input);
    /* 文字 */ color: var(--text-secondary);
    /* 字體 */ font: inherit;
    /* 字級 */ font-size: 10.5px;
    /* 滑鼠指標 */ cursor: pointer;
}

.other-rel-type-trigger {
    /* 關係類型欄位保持足夠可讀寬度 */ min-width: 92px;
    /* 內容與箭頭並排 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 內縮 */ padding: 2px 6px 2px 8px;
    /* 項目間距 */ gap: 6px;
    /* 文字靠左 */ text-align: left;
}

.other-rel-type-trigger:hover,
.other-rel-type-trigger.open {
    /* Hover / 展開時使用主題色 */ border-color: var(--action-primary);
    /* 文字同步 */ color: var(--action-primary);
}

.other-rel-type-value {
    /* 文字吃掉剩餘空間 */ flex: 1 1 auto;
    /* 避免長關係名稱撐破欄位 */ min-width: 0;
    /* 單行顯示 */ white-space: nowrap;
    /* 溢出省略 */ overflow: hidden;
    /* 省略符號 */ text-overflow: ellipsis;
}

.other-rel-type-chevron {
    /* 小型箭頭 */ width: 10px;
    /* 小型箭頭 */ height: 10px;
    /* 不被壓縮 */ flex: 0 0 10px;
    /* 轉場 */ transition: transform .15s ease;
}

.other-rel-type-trigger.open .other-rel-type-chevron {
    /* 展開時旋轉 */ transform: rotate(180deg);
}

.other-rel-label-inline-editor {
    /* 原地展開輸入，不新增整行 */ display: inline-flex;
    /* 垂直置中 */ align-items: center;
    /* 控制間距 */ gap: 4px;
    /* 不超出可用空間 */ min-width: 0;
}

.other-rel-label-inline-editor[hidden] {
    /* 收合時不佔版面 */ display: none;
}

.other-rel-label-input {
    /* 與家庭關係自訂文字採一致尺寸 */ width: clamp(128px,18vw,190px);
    /* 固定列內高度 */ min-height: 24px;
    /* 固定高度 */ height: 24px;
    /* 內縮空間 */ padding: 2px 7px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 10.5px;
    /* 外框 */ outline: none;
}

.other-rel-label-input:focus {
    /* 聚焦邊框 */ border-color: var(--action-primary);
}

.other-rel-label-reset,
.other-rel-position-reset {
    /* 與列內其他控制等高 */ min-height: 24px;
    /* 固定高度 */ height: 24px;
    /* 內縮空間 */ padding: 2px 7px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 5px;
    /* 背景 */ background: var(--surface-item);
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 10px;
    /* 不換行 */ white-space: nowrap;
    /* 滑鼠指標 */ cursor: pointer;
}

.other-rel-label-reset:hover,
.other-rel-position-reset:hover {
    /* 懸停邊框 */ border-color: var(--action-primary);
    /* 懸停文字 */ color: var(--action-primary);
}

.other-rel-edit .relationship-add-row {
    /* 編輯狀態下新增入口不再額外拉開大段距離 */ margin-top: 0;
}

/* ========【其他關係分類選擇器】 設定 - 直接沿用家族選擇器的紙張、便利貼與清單語言 ======== */
.relationship-type-picker {
    /* 觸發欄位容器 */ position: relative;
    /* 允許 Flex 正確縮小 */ min-width: 0;
}

.relationship-type-trigger {
    /* 欄位寬度 */ width: 100%;
    /* 與網站表單欄位相同高度 */ min-height: 34px;
    /* 內縮空間 */ padding: 5px 30px 5px 9px;
    /* 邊框 */ border: 1px solid var(--border-default);
    /* 圓角 */ border-radius: 7px;
    /* 背景 */ background: var(--surface-input);
    /* 文字 */ color: var(--text-primary);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 12px;
    /* 文字靠左 */ text-align: left;
    /* 箭頭定位 */ position: relative;
    /* 滑鼠指標 */ cursor: pointer;
}

.relationship-type-trigger:hover,
.relationship-type-picker.open .relationship-type-trigger {
    /* 展開 / 懸停與一般欄位一致 */ border-color: var(--action-primary);
}

.relationship-type-value {
    /* 單行顯示 */ display: block;
    /* 超出省略 */ overflow: hidden;
    /* 省略符號 */ text-overflow: ellipsis;
    /* 不換行 */ white-space: nowrap;
}

.relationship-type-chevron {
    /* 固定右側 */ position: absolute;
    /* 右側間距 */ right: 10px;
    /* 垂直置中 */ top: 50%;
    /* 垂直置中 */ transform: translateY(-50%);
    /* 圖示尺寸 */ width: 12px;
    /* 圖示高度 */ height: 12px;
    /* 顏色 */ color: var(--text-secondary);
    /* 轉場 */ transition: transform .15s ease;
}

.relationship-type-picker.open .relationship-type-chevron {
    /* 展開時旋轉 */ transform: translateY(-50%) rotate(180deg);
}

.relationship-type-portal {
    /* 分類便利貼與右側選單共用同一個浮層容器 */ position: fixed;
    /* 高於人物編輯器與一般下拉 */ z-index: 5600;
    /* 便利貼與選單水平接合 */ display: block;
    /* 不在共同容器本身畫背景，讓子元件保留原輪廓 */ background: transparent;
    /* 整組只投射一次陰影，避免便利貼與選單中間出現陰影縫 */ box-shadow: 0 10px 30px rgba(0,0,0,.16);
    /* 不裁切便利貼圓角 */ overflow: visible;
}

.relationship-type-portal[hidden] {
    /* 關閉時完全移除 */ display: none;
}

.relationship-type-popover {
    /* 右側選單放在共同 portal 內 */ position: absolute;
    /* 固定顯示方式 */ display: block;
    /* 背景 */ background: var(--nav-dropdown-bg);
    /* 文字 */ color: var(--nav-dropdown-text);
    /* 細框 */ border: 1px solid var(--nav-dropdown-border);
    /* 左上角與左側分類便利貼接合，沿用家庭選擇器輪廓 */ border-radius: 0 6px 6px 6px;
    /* 陰影由共同 portal 統一提供，選單本體不再向便利貼投影 */ box-shadow: none;
    /* 不讓右側內容破出圓角 */ overflow: hidden;
}

.relationship-type-popover[hidden] {
    /* 隱藏時完全移除 */ display: none;
}

.relationship-type-popover:not([hidden]) {
    /* Portal 展開時明確顯示，不依賴任何 nav-select 父層狀態 */ display: block;
}



.relationship-type-index-portal {
    /* 與右側選單一起放在共同 portal 內 */ position: absolute;
    /* 高於右側清單，僅用於接縫覆蓋 */ z-index: 2;
    /* 預設由 JS 控制顯示 */ display: none;
    /* 六個分類永遠等分右側選單實際高度 */ align-items: stretch;
}

.relationship-type-index-tab {
    /* 不再使用固定高度，直接平均分配右側選單高度 */ flex: 1 1 0;
    /* 高度交由父層等分 */ height: auto;
    /* 允許在較矮視窗內縮小，不再超出選單 */ min-height: 0;
}

.relationship-type-index-tab.active {
    /* 當前便利貼右側不顯示分隔線，與右側選單接成同一頁 */ border-right-color: transparent;
    /* 當前便利貼使用與內容區相同背景 */ background: var(--nav-dropdown-bg);
}

.relationship-type-index-tab.active::after {
    /* 覆蓋右側選單左邊框，避免 Active 頁籤仍看見接縫 */ right: -3px;
    /* 稍微加寬遮罩，確保 Portal 疊合後不露出 1px 線條 */ width: 4px;
    /* 使用選單背景色形成同一層頁籤效果 */ background: var(--nav-dropdown-bg);
}

.relationship-type-index-tab .family-nav-tab-lines {
    /* 關係分類行距略緊湊 */ gap: 3px;
    /* 字級 */ font-size: 10px;
    /* 文字置中 */ text-align: center;
}

.relationship-type-menu {
    /* 右側內容直排 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 不額外包第二層卡片 */ padding: 0;
    /* 可正確收縮 */ min-width: 0;
    /* 可正確收縮 */ min-height: 0;
    /* 填滿可用高度，讓選項清單取得實際滾動空間 */ height: 100%;
    /* 背景沿用家族結果紙張 */ background: var(--nav-dropdown-bg);
}

.relationship-type-search {
    /* 搜尋列寬度 */ width: calc(100% - 12px);
    /* 上下左右留白 */ margin: 6px;
    /* 搜尋框內距 */ padding: 7px 9px;
    /* 邊框 */ border: 1px solid var(--nav-dropdown-border);
    /* 圓角 */ border-radius: 6px;
    /* 背景 */ background: var(--nav-dropdown-bg);
    /* 文字 */ color: var(--nav-dropdown-text);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 12px;
    /* 外框 */ outline: none;
}

.relationship-type-search:focus {
    /* 聚焦邊框 */ border-color: var(--action-primary);
}

.relationship-type-options {
    /* 佔滿搜尋列以外的剩餘高度 */ flex: 1 1 auto;
    /* 清單可滾動 */ overflow-y: auto;
    /* 不另外製作卡片間距 */ display: block;
    /* 可正確收縮 */ min-height: 0;
}

.relationship-type-option {
    /* 與家族下拉結果同樣鋪滿整列 */ width: 100%;
    /* 圖示與文字並排 */ display: flex;
    /* 垂直置中 */ align-items: center;
    /* 項目間距 */ gap: 7px;
    /* 與家族結果相近的留白 */ padding: 10px 13px;
    /* 不額外顯示按鈕外框 */ border: 0;
    /* 以分隔線形成清單 */ border-bottom: 1px solid var(--nav-dropdown-divider);
    /* 不在每列再做小圓角 */ border-radius: 0;
    /* 背景 */ background: var(--nav-dropdown-bg);
    /* 文字 */ color: var(--nav-dropdown-text);
    /* 字體 */ font: inherit;
    /* 字體大小 */ font-size: 12px;
    /* 文字靠左 */ text-align: left;
    /* 滑鼠指標 */ cursor: pointer;
    /* 不使用浮誇轉場 */ transition: background-color .16s ease,color .16s ease;
}

.relationship-type-option:last-child {
    /* 最後一列不顯示分隔線 */ border-bottom: 0;
}

.relationship-type-option:hover,
.relationship-type-option:focus-visible {
    /* 與家族下拉相同 Hover */ background: var(--nav-dropdown-hover-bg);
    /* Hover 文字 */ color: var(--nav-dropdown-hover-text);
    /* 不額外畫焦點外框 */ outline: none;
}

.relationship-type-option.selected {
    /* 與家族已選項相同中性灰階 */ background: var(--nav-dropdown-selected-bg);
    /* 已選文字 */ color: var(--nav-dropdown-selected-text);
    /* 字體粗細 */ font-weight: 500;
}

.relationship-type-option-icon {
    /* 圖示尺寸 */ width: 13px;
    /* 圖示高度 */ height: 13px;
    /* 不壓縮 */ flex: 0 0 13px;
    /* 使用次要文字色，避免每列都過度搶眼 */ color: var(--text-secondary);
}

.relationship-type-option.selected .relationship-type-option-icon,
.relationship-type-option:hover .relationship-type-option-icon {
    /* 選取 / Hover 才帶入主題色 */ color: var(--action-primary);
}

.relationship-type-create {
    /* 自訂新增入口使用主題色 */ color: var(--action-primary);
}

.relationship-type-empty {
    /* 無結果提示 */ padding: 12px 10px;
    /* 文字置中 */ text-align: center;
    /* 次要文字 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 11.5px;
}

.sim-editor-panel .relationship-section.first { margin-top:0; padding-top:0; border-top:0; }
.sim-editor-actions { flex:0 0 auto; margin-top:0; padding:9px 18px 10px; border-top:1px solid var(--border-default); background:var(--surface-card); box-shadow:none; position:relative; z-index:6; }

.grid {
    /* 顯示方式 */ display: grid;
    /* 網格欄位 */ grid-template-columns: repeat(12,1fr);
    /* 項目間距 */ gap: 9px 12px;
}

.grid label,
.grid .form-field {
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 4px;
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 網格欄位範圍 */ grid-column: span 6;
}

.grid label.full,
.grid .form-field.full {
    /* 網格欄位範圍 */ grid-column: 1/-1;
}

.grid label.span-3,
.grid .form-field.span-3 {
    /* 網格欄位範圍 */ grid-column: span 3;
}

.grid label.span-4,
.grid .form-field.span-4 {
    /* 網格欄位範圍 */ grid-column: span 4;
}

.grid label.span-6,
.grid .form-field.span-6 {
    /* 網格欄位範圍 */ grid-column: span 6;
}

.grid label.span-8,
.grid .form-field.span-8 {
    /* 網格欄位範圍 */ grid-column: span 8;
}

.grid input,
.grid select,
.grid textarea {
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 內縮空間 */ padding: 6px 9px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 外框設定 */ outline: none;
    /* 元素寬度 */ width: 100%;
}

.grid input:focus,
.grid select:focus,
.grid textarea:focus {
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.grid textarea {
    /* 調整尺寸 */ resize: vertical;
}

.grid .hint-below {
    /* 字體大小 */ font-size: 10.5px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 透明度 */ opacity: .75;
    /* 上方外距 */ margin-top: 1px;
}

.ui-select-wrap {
    /* 定位方式 */ position: relative;
}

.ui-select-input {
    /* 元素寬度 */ width: 100%;
    /* 最小高度 */ min-height: 34px;
    /* 內縮空間 */ padding: 4px 8px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體大小 */ font-size: 13px;
    /* 外框設定 */ outline: none;
    /* 滑鼠指標 */ cursor: pointer;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 自動換行 */ flex-wrap: wrap;
    /* 項目間距 */ gap: 3px;
    /* 動畫過渡 */ transition: border-color .15s;
    /* 供 Chevron 絕對定位 */ position: relative;
    /* 預留箭頭空間 */ padding-right: 30px;
    /* 搜尋型欄位不使用背景箭頭 */ background-image: none;
}

.ui-select-input:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.ui-select-wrap.ui-select-open .ui-select-input {
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.ui-select-placeholder {
    /* 文字顏色 */ color: var(--text-secondary);
    /* 內縮空間 */ padding: 3px 0;
}

.ui-select-tag {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 3px;
    /* 內縮空間 */ padding: 1px 4px 1px 6px;
    /* 背景設定 */ background: var(--action-primary);
    /* 文字顏色 */ color: #fff;
    /* 圓角弧度 */ border-radius: 4px;
    /* 字體大小 */ font-size: 11px;
    /* 行距設定 */ line-height: 1;
    /* 最小高度固定 */ min-height: 20px;
    /* 最大寬度 */ max-width: 100%;
}

.ui-select-tag.locked {
    background:color-mix(in srgb,var(--action-primary) 62%,var(--surface-panel));
    cursor:default;
}
.ui-select-tag-note {
    display:inline-flex;
    align-items:center;
    margin-left:2px;
    padding:1px 4px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    font-size:9px;
    line-height:1.2;
    white-space:nowrap;
}
.ui-select-option.disabled {
    opacity:.62;
    cursor:not-allowed;
}
.ui-select-option.disabled:hover {
    background:transparent;
    color:var(--nav-dropdown-text);
}
.ui-select-option.disabled.selected:hover {
    background:var(--nav-dropdown-selected-bg);
    color:var(--nav-dropdown-selected-text);
}
.ui-select-option-note {
    margin-left:auto;
    color:var(--text-secondary);
    font-size:10px;
    white-space:nowrap;
}
.family-rel-derived-hint {
    margin-top:6px;
    color:var(--text-secondary);
    font-size:10.5px;
    line-height:1.45;
}

.ui-select-tag-x {
    /* 滑鼠指標 */ cursor: pointer;
    /* 透明度 */ opacity: .85;
    /* 字體大小 */ font-size: 12px;
    /* 行距設定 */ line-height: 1;
    /* 內縮空間 */ padding: 0 2px;
}

.ui-select-tag-x:hover {
    /* 透明度 */ opacity: 1;
}

.ui-select-dropdown {
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 100%;
    /* 左側位置 */ left: 0;
    /* 右側位置 */ right: 0;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 上方外距 */ margin-top: 4px;
    /* 元素陰影 */ box-shadow: 0 8px 24px rgba(0,0,0,.18);
    /* 顯示層級 */ z-index: 200;
    /* 內縮空間 */ padding: 6px;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 背景使用主題安全色 */ background: var(--nav-dropdown-bg);
    /* 文字使用主題安全色 */ color: var(--nav-dropdown-text);
    /* 邊框使用主題安全色 */ border-color: var(--nav-dropdown-border);
}

.ui-select-search {
    /* 元素寬度 */ width: 100%;
    /* 內縮空間 */ padding: 6px 9px;
    /* 字體大小 */ font-size: 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 5px;
    /* 外框設定 */ outline: none;
    /* 下方外距 */ margin-bottom: 4px;
    /* 字體設定 */ font-family: inherit;
    /* 背景顏色 */ background: var(--nav-dropdown-bg);
    /* 文字顏色 */ color: var(--nav-dropdown-text);
    /* 邊框顏色 */ border-color: var(--nav-dropdown-border);
}

.ui-select-search:focus {
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.ui-select-options {
    /* 垂直溢出 */ overflow-y: auto;
    /* 最大高度 */ max-height: 200px;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 1px;
}

.ui-select-option {
    /* 內縮空間 */ padding: 6px 8px;
    /* 字體大小 */ font-size: 12px;
    /* 圓角弧度 */ border-radius: 5px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 6px;
    /* 動畫過渡 */ transition: background .1s;
    /* 文字顏色 */ color: var(--nav-dropdown-text);
}

.ui-select-option:hover {
    /* Hover 維持中性主題灰階 */ background: var(--nav-dropdown-hover-bg);
    /* Hover 文字保持對比 */ color: var(--nav-dropdown-hover-text);
}

.ui-select-option.selected {
    /* Selected 維持中性主題灰階 */ background: var(--nav-dropdown-selected-bg);
    /* Selected 文字保持對比 */ color: var(--nav-dropdown-selected-text);
}

.ui-select-option.none {
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體樣式 */ font-style: italic;
}

.ui-select-option .check {
    /* 元素寬度 */ width: 14px;
    /* 元素高度 */ height: 14px;
    /* 邊框設定 */ border: 1.5px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 3px;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 10px;
    /* 彈性收縮 */ flex-shrink: 0;
}

.ui-select-option.selected .check {
    /* 勾選背景 */ background: var(--nav-dropdown-bg);
    /* 勾選文字 */ color: var(--nav-dropdown-selected-text);
    /* 勾選邊框 */ border-color: var(--nav-dropdown-border);
}

.ui-select-empty {
    /* 內縮空間 */ padding: 8px;
    /* 文字對齊 */ text-align: center;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 12px;
}

.avatar-row {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 12px;
    /* 垂直對齊 */ align-items: flex-start;
}

.avatar-preview {
    /* 元素寬度 */ width: 80px;
    /* 元素高度 */ height: 80px;
    /* 圓角弧度 */ border-radius: 10px;
    /* 溢出處理 */ overflow: hidden;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 背景設定 */ background: linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 30px;
    /* 字體粗細 */ font-weight: 700;
    /* 文字顏色 */ color: var(--avatar-text);
    /* 邊框設定 */ border: 1px solid var(--border-default);
}

.avatar-preview img {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 100%;
    /* 圖片填滿方式 */ object-fit: cover;
    /* 顯示方式 */ display: block;
}
.avatar-framed-image {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:var(--avatar-x,50%) var(--avatar-y,50%);
    transform:scale(var(--avatar-zoom,1));
    transform-origin:var(--avatar-x,50%) var(--avatar-y,50%);
    display:block;
    user-select:none;
}

.avatar-actions {
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 6px;
    /* 彈性配比 */ flex: 1;
    /* 水平對齊 */ justify-content: center;
}

.filebtn {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 項目間距 */ gap: 5px;
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 內縮空間 */ padding: 6px 12px;
    /* 圓角弧度 */ border-radius: 7px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
}

.filebtn:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: var(--action-primary);
}

.avatar-actions .filebtn {
    /* 文字對齊 */ text-align: center;
    /* 內縮空間 */ padding: 6px 12px;
    /* 字體大小 */ font-size: 12px;
}

.avatar-tip {
    /* 字體大小 */ font-size: 11px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 行距設定 */ line-height: 1.4;
}


/* ========【共用頭像編輯器】 設定 - 模擬市民與寵物共用上傳、取景與移除操作 ======== */
.pet-editor-modal { width:min(620px,100%); }
.pet-editor-layout { display:grid; grid-template-columns:170px minmax(0,1fr); align-items:start; gap:18px; }
.pet-avatar-editor-block { display:grid; align-content:start; gap:7px; min-width:0; }
.pet-avatar-editor-preview { width:112px; height:112px; margin:0 auto; border-radius:11px; font-size:36px; }
.pet-avatar-editor-block .avatar-tip { text-align:center; margin:0; font-size:10.5px; line-height:1.35; }
.pet-editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 11px; }
.pet-editor-fields label { min-width:0; display:grid; gap:4px; color:var(--text-secondary); font-size:11.5px; font-weight:600; }
.pet-editor-fields input,.pet-editor-fields select { width:100%; min-width:0; min-height:34px; padding:6px 9px; border:1px solid var(--border-default); border-radius:7px; background:var(--surface-input); color:var(--text-primary); font:inherit; font-size:13px; outline:none; }
.pet-editor-fields input:focus,.pet-editor-fields select:focus { border-color:var(--action-primary); }
.pet-field-full { grid-column:1/-1; }
.pet-trait-field {
    /* 寵物特徵沿用人物特徵編輯器，但維持寵物表單本身的資訊層級 */ display:grid;
    /* 標題與標籤編輯器間距 */ gap:4px;
    /* 避免窄視窗被內容撐開 */ min-width:0;
}
.pet-field-label {
    /* 與其他寵物欄位標籤一致 */ color:var(--text-secondary);
    /* 字級一致 */ font-size:11.5px;
    /* 字重一致 */ font-weight:600;
}
.pet-trait-field .trait-editor {
    /* 內部特徵操作不繼承欄位標題粗體 */ font-weight:400;
}

.avatar-crop-modal { width:min(560px,100%); }
.avatar-crop-workspace {
    position:relative;
    width:min(500px,82vw);
    height:min(380px,62vh);
    min-height:300px;
    margin:12px auto 10px;
    overflow:hidden;
    border:1px solid var(--border-default);
    border-radius:12px;
    background:
        linear-gradient(45deg,color-mix(in srgb,var(--text-secondary) 8%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--text-secondary) 8%,transparent) 75%),
        linear-gradient(45deg,color-mix(in srgb,var(--text-secondary) 8%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--text-secondary) 8%,transparent) 75%),
        var(--surface-panel);
    background-position:0 0,8px 8px;
    background-size:16px 16px;
    cursor:grab;
    touch-action:none;
}
.avatar-crop-workspace.dragging { cursor:grabbing; }
.avatar-crop-workspace > img {
    position:absolute;
    display:block;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    pointer-events:none;
    user-select:none;
    will-change:left,top,width,height;
}
.avatar-crop-window {
    position:absolute;
    left:50%;
    top:50%;
    width:min(280px,64vw);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border:2px solid rgba(255,255,255,.96);
    border-radius:10px;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,.5),
        0 0 0 1px rgba(0,0,0,.28),
        0 8px 24px rgba(0,0,0,.18);
    pointer-events:none;
    z-index:2;
}
.avatar-crop-grid {
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .12s ease;
    pointer-events:none;
}
.avatar-crop-workspace.dragging .avatar-crop-grid { opacity:1; }
.avatar-crop-grid-v,
.avatar-crop-grid-h {
    position:absolute;
    display:block;
    background:rgba(255,255,255,.68);
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.avatar-crop-grid-v { top:0; bottom:0; width:1px; }
.avatar-crop-grid-v1 { left:33.333%; }
.avatar-crop-grid-v2 { left:66.666%; }
.avatar-crop-grid-h { left:0; right:0; height:1px; }
.avatar-crop-grid-h1 { top:33.333%; }
.avatar-crop-grid-h2 { top:66.666%; }
.avatar-crop-hint {
    margin:0 auto 12px;
    max-width:500px;
    color:var(--text-secondary);
    font-size:11.5px;
    line-height:1.5;
    text-align:center;
}
.avatar-crop-zoom-row {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 52px;
    align-items:center;
    gap:10px;
    color:var(--text-secondary);
    font-size:12px;
}
.avatar-crop-zoom-row input { width:100%; }
.avatar-crop-zoom-row output {
    color:var(--text-primary);
    text-align:right;
    font-variant-numeric:tabular-nums;
}
@media (max-width:560px) {
    .avatar-crop-workspace {
        width:min(100%,88vw);
        height:min(360px,56vh);
        min-height:280px;
    }
    .avatar-crop-window {
        width:min(250px,68vw);
    }
}

.ui-dialog-actions {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 8px;
    /* 上方外距 */ margin-top: 18px;
    /* 垂直對齊 */ align-items: center;
    /* 自動換行 */ flex-wrap: wrap;
}

.ui-dialog-actions .spacer {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 8px;
}

.ui-dialog-actions button {
    /* 內縮空間 */ padding: 7px 14px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
    /* 字體大小 */ font-size: 13px;
    /* 動畫過渡 */ transition: .15s;
}

.ui-dialog-actions button:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: var(--action-primary);
}

.ui-dialog-actions button.primary {
    /* 背景設定 */ background: var(--action-primary);
    /* 文字顏色 */ color: #fff;
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.ui-dialog-actions button.primary:hover {
    /* 背景設定 */ background: var(--action-primary-hover);
    /* 文字顏色 */ color: #fff;
}

.ui-dialog-actions button.danger {
    /* 文字顏色 */ color: #b03a2e;
    /* 邊框顏色 */ border-color: #e6c9c4;
}

.ui-dialog-actions button.danger:hover {
    /* 背景設定 */ background: rgba(200,60,40,.06);
}

.info {
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 內縮空間 */ padding: 6px 10px;
    /* 背景設定 */ background: var(--surface-panel);
    /* 圓角弧度 */ border-radius: 7px;
    /* 下方外距 */ margin-bottom: 12px;
    /* 行距設定 */ line-height: 1.5;
}

.appearance-panel{
    width:min(860px,100%);
    max-height:min(760px,calc(100vh - 40px));
    max-height:min(760px,calc(100dvh - 40px));
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.appearance-modal{
    --appearance-control-label-size:11.5px;
}

.appearance-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex:0 0 auto;
    padding:17px 20px 14px;
    border-bottom:1px solid var(--border-default);
    background:var(--surface-card);
}

.appearance-heading{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.appearance-heading-icon{
    width:18px;
    height:18px;
    margin-top:2px;
    flex:0 0 auto;
    color:var(--action-primary);
}

.appearance-heading h2{
    margin:0;
    color:var(--action-primary);
    font-size:16px;
    font-weight:700;
    line-height:1.3;
}

.appearance-heading p{
    margin:4px 0 0;
    color:var(--text-secondary);
    font-size:11.5px;
    line-height:1.45;
}

.appearance-scroll-body{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 20px 18px;
}

.appearance-section{
    padding:4px 0 16px;
    border-bottom:1px solid var(--border-default);
}

.appearance-section:last-of-type{
    border-bottom:0;
}

.appearance-section .setting-group-title{
    margin:10px 0 10px;
    padding:0;
    border:0;
    color:var(--text-primary);
    font-size:13px;
    font-weight:700;
    letter-spacing:.35px;
}

/* 主題卡：沿用視覺設定 prototype。 */
.appearance-theme-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-bottom:10px;
}

.appearance-theme-card{
    width:calc((100% - 20px) / 3);
    flex:0 0 calc((100% - 20px) / 3);
    min-width:0;
    min-height:88px;
    padding:10px;
    border:1px solid var(--border-default);
    border-radius:12px;
    background:var(--surface-card);
    color:var(--text-primary);
    display:flex;
    flex-direction:column;
    gap:9px;
    font:inherit;
    text-align:center;
    cursor:pointer;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.appearance-theme-card:hover{
    border-color:color-mix(in srgb,var(--action-primary) 48%,var(--border-default));
    transform:translateY(-1px);
}

.appearance-theme-card.selected{
    border-color:var(--action-primary);
    box-shadow:0 0 0 3px var(--brand-tint-start);
}

.appearance-theme-preview{
    height:34px;
    flex:0 0 34px;
    border-radius:7px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}

.appearance-theme-meta{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.appearance-theme-radio{
    width:14px;
    height:14px;
    flex:0 0 14px;
    border:1.5px solid color-mix(in srgb,var(--text-secondary) 56%,var(--border-default));
    border-radius:50%;
    background:var(--surface-card);
    display:grid;
    place-items:center;
}

.appearance-theme-card.selected .appearance-theme-radio{
    border-color:var(--action-primary);
}

.appearance-theme-card.selected .appearance-theme-radio::after{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--action-primary);
}

.appearance-theme-card-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-primary);
    font-size:12.5px;
    font-weight:600;
}

.appearance-theme-card.custom-trigger .appearance-theme-preview:not([style]){
    border:1px dashed var(--border-default);
    background:
      linear-gradient(135deg,transparent 46%,color-mix(in srgb,var(--text-secondary) 50%,transparent) 46%,color-mix(in srgb,var(--text-secondary) 50%,transparent) 54%,transparent 54%),
      linear-gradient(45deg,transparent 46%,color-mix(in srgb,var(--text-secondary) 50%,transparent) 46%,color-mix(in srgb,var(--text-secondary) 50%,transparent) 54%,transparent 54%),
      var(--surface-item);
    background-size:14px 14px;
    background-position:center;
}

.appearance-custom-theme{
    margin:8px 0 4px;
    padding:14px;
    border:1px solid var(--border-default);
    border-radius:12px;
    background:var(--surface-panel);
}

.appearance-custom-theme-title{
    margin-bottom:10px;
    color:var(--text-primary);
    font-size:13px;
    font-weight:700;
}

.appearance-custom-theme-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.appearance-custom-theme-row label{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    color:var(--text-secondary);
    font-size:var(--appearance-control-label-size);
    font-weight:600;
}

.custom-color-input{
    width:44px;
    height:32px;
    flex:0 0 44px;
    padding:2px;
    border:1px solid var(--border-default);
    border-radius:6px;
    background:var(--surface-input);
    cursor:pointer;
}

.appearance-custom-theme-preview{
    height:48px;
    margin-top:12px;
    border:1px solid var(--border-default);
    border-radius:9px;
}

.appearance-custom-theme-actions{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
}

.apply-btn{
    min-height:32px;
    padding:6px 12px;
    border:1px solid var(--action-primary);
    border-radius:8px;
    background:var(--action-primary);
    color:#fff;
    font:inherit;
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
}

.apply-btn:hover{
    background:var(--action-primary-hover);
}

.appearance-background-preview{
    appearance:none;
    width:100%;
    min-height:150px;
    padding:18px;
    border:1px dashed var(--border-default);
    border-radius:12px;
    background:linear-gradient(180deg,var(--surface-item),var(--surface-panel));
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:var(--text-secondary);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}

.appearance-background-preview:hover,
.appearance-background-preview:focus-visible,
.appearance-background-preview.dragover{
    border-color:var(--action-primary);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--action-primary) 45%,transparent);
    outline:none;
}

.appearance-background-preview.dragover::after{
    content:attr(data-drop-label);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:color-mix(in srgb,var(--surface-card) 88%,transparent);
    color:var(--action-primary);
    font-size:13px;
    font-weight:600;
    text-align:center;
    pointer-events:none;
}

.appearance-background-empty{
    display:grid;
    justify-items:center;
    gap:7px;
    pointer-events:none;
}

.appearance-background-empty .l1ng-icon{
    width:36px;
    height:36px;
    color:var(--action-primary);
}

.appearance-background-empty strong{
    color:var(--text-primary);
    font-size:13px;
}

.appearance-background-empty small{
    color:var(--text-secondary);
    font-size:11.5px;
    font-weight:400;
}

.appearance-background-preview.has-image{
    border-style:solid;
}

.appearance-background-preview.has-image .appearance-background-empty{
    visibility:hidden;
}

.appearance-background-row{
    gap:8px;
    flex-wrap:wrap;
    margin-top:9px;
    margin-bottom:12px;
}

.appearance-background-row:not([hidden]){
    display:flex;
}

.appearance-background-row button,
#resetUiSettingsBtn{
    min-height:30px;
    padding:5px 9px;
    border:1px solid var(--border-default);
    border-radius:7px;
    background:var(--surface-input);
    color:var(--text-primary);
    font:inherit;
    font-size:11px;
    cursor:pointer;
}

.appearance-background-row button{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

#appearanceBackgroundClearBtn{
    color:#b03a2e;
    border-color:rgba(176,58,46,.25);
}

.appearance-background-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) 200px;
    gap:14px;
    margin-top:10px;
}

.appearance-background-control{
    min-width:0;
    display:grid;
    grid-template-rows:auto 32px;
    align-items:start;
    gap:7px;
    color:var(--text-secondary);
    font-size:var(--appearance-control-label-size);
    transition:opacity .15s ease;
}

.appearance-background-control.is-disabled{
    opacity:.42;
}

.appearance-background-range{
    min-width:0;
    min-height:32px;
    height:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
}

.appearance-background-control input[type="range"]:disabled{
    cursor:not-allowed;
}

.appearance-background-control select,
.appearance-background-control .ui-single-select{
    width:100%;
    max-width:200px;
    height:32px;
    align-self:start;
}

.appearance-background-control .ui-single-select-trigger{
    height:32px;
    min-height:32px;
}

.appearance-background-value{
    min-width:38px;
    color:var(--text-primary);
    font-weight:600;
    font-variant-numeric:tabular-nums;
    text-align:right;
}

.appearance-background-control.is-disabled .appearance-background-value{
    color:var(--text-secondary);
}

@media(max-width:760px){
    .appearance-theme-card{
        width:calc((100% - 10px) / 2);
        flex-basis:calc((100% - 10px) / 2);
    }

    .appearance-custom-theme-row{
        grid-template-columns:1fr;
    }

    .appearance-background-controls{
        grid-template-columns:minmax(0,1fr) 180px;
        gap:10px;
    }
}

@media(max-width:520px){
    .appearance-background-controls{
        grid-template-columns:1fr;
    }

    .appearance-background-control select,
    .appearance-background-control .ui-single-select{
        max-width:none;
    }
}

.storage-bar {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 8px;
    /* 圓角弧度 */ border-radius: 4px;
    /* 背景設定 */ background: var(--surface-item);
    /* 溢出處理 */ overflow: hidden;
    /* 外距設定 */ margin: 6px 0;
}

.storage-bar-fill {
    /* 元素高度 */ height: 100%;
    /* 背景設定 */ background: linear-gradient(90deg, var(--brand-gradient-start), var(--brand-gradient-end));
    /* 動畫過渡 */ transition: width .3s;
}

.storage-bar-fill.warn {
    /* 背景設定 */ background: linear-gradient(90deg,#f0a050,#e85858);
}

/* ========【關係編輯】 設定 - 關係清單、自訂標註與操作 ======== */

.relationship-section {
    /* 上方外距 */ margin-top: 14px;
    /* 上方邊框 */ border-top: 1px dashed var(--border-default);
    /* 上方內縮 */ padding-top: 12px;
}

.relationship-section-title {
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 下方外距 */ margin-bottom: 8px;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 6px;
    /* 自動換行 */ flex-wrap: wrap;
}

.relationship-section-title .hint-inline {
    /* 字體大小 */ font-size: 11px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 透明度 */ opacity: .7;
    /* 字體粗細 */ font-weight: 400;
}

.relationship-item {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: space-between;
    /* 字體大小 */ font-size: 13px;
    /* 內縮空間 */ padding: 5px 8px;
    /* 背景設定 */ background: var(--surface-item);
    /* 圓角弧度 */ border-radius: 6px;
    /* 下方外距 */ margin-bottom: 5px;
    /* 項目間距 */ gap: 8px;
}

.relationship-item button {
    /* 內縮空間 */ padding: 1px 7px;
    /* 字體大小 */ font-size: 13px;
    /* 行距設定 */ line-height: 1.3;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 背景設定 */ background: var(--surface-input);
    /* 圓角弧度 */ border-radius: 5px;
    /* 滑鼠指標 */ cursor: pointer;
}

.relationship-empty {
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 內縮空間 */ padding: 4px 0;
}

.relationship-add-row {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 6px;
    /* 上方外距 */ margin-top: 8px;
    /* 垂直對齊 */ align-items: flex-start;
    /* 自動換行 */ flex-wrap: wrap;
}

.relationship-add-row > div:first-child {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 100px;
}

.relationship-add-row input {
    /* 內縮空間 */ padding: 6px 9px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體大小 */ font-size: 13px;
    /* 外框設定 */ outline: none;
    /* 字體設定 */ font-family: inherit;
}

.relationship-add-row button {
    /* 內縮空間 */ padding: 6px 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
    /* 字體大小 */ font-size: 13px;
}

.relationship-annotation-item {
    /* 顯示方式 */ display: grid;
    /* 項目間距 */ gap: 6px;
    /* 垂直對齊 */ align-items: center;
    /* 下方外距 */ margin-bottom: 6px;
    /* 關係名稱欄保留足夠彈性，不固定裁切英文 */ grid-template-columns: minmax(130px, 1.6fr) minmax(120px, 130px) minmax(110px, 1.4fr) auto;
}

.relationship-annotation-name {
    /* 字體大小 */ font-size: 12px;
    /* 字體粗細 */ font-weight: 600;
    /* 內縮空間 */ padding: 4px 6px;
    /* 背景設定 */ background: var(--surface-item);
    /* 圓角弧度 */ border-radius: 6px;
    /* 文字顏色 */ color: var(--text-primary);
    /* 允許長關係名稱自然換行 */ white-space: normal;
    /* 顯示完整內容 */ overflow: visible;
    /* 移除省略號 */ text-overflow: clip;
    /* 長字串可安全斷行 */ overflow-wrap: anywhere;
    /* 行高設定 */ line-height: 1.35;
}

.relationship-annotation-item select,
.relationship-annotation-item input {
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 12px;
    /* 內縮空間 */ padding: 5px 7px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 6px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 外框設定 */ outline: none;
    /* 元素寬度 */ width: 100%;
}

.relationship-annotation-reset {
    /* 內縮空間 */ padding: 3px 8px;
    /* 字體大小 */ font-size: 11px;
    /* 背景設定 */ background: var(--surface-item);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 5px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 字體設定 */ font-family: inherit;
    /* 文字顏色 */ color: var(--text-secondary);
}

/* ========【寵物資料】 設定 - 寵物清單、頭像與編輯操作 ======== */

.pet-item {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 10px;
    /* 內縮空間 */ padding: 6px 8px;
    /* 背景設定 */ background: var(--surface-item);
    /* 圓角弧度 */ border-radius: 6px;
    /* 下方外距 */ margin-bottom: 5px;
}

.pet-item-avatar {
    /* 元素寬度 */ width: 36px;
    /* 元素高度 */ height: 36px;
    /* 圓角弧度 */ border-radius: 8px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 溢出處理 */ overflow: hidden;
    /* 背景設定 */ background: linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 18px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
}

.pet-item-avatar img {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 100%;
    /* 圖片填滿方式 */ object-fit: cover;
    /* 顯示方式 */ display: block;
}

.pet-item-info {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 0;
}

.pet-item-name {
    /* 字體大小 */ font-size: 13px;
    /* 字體粗細 */ font-weight: 600;
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
}

.pet-item-meta {
    /* 字體大小 */ font-size: 11px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
}

.pet-trait-summary {
    /* 寵物清單直接顯示已記錄特徵 */ display:flex;
    /* 多個特徵自動換行 */ flex-wrap:wrap;
    /* 標籤間距 */ gap:3px;
    /* 與基本資料留出呼吸空間 */ margin-top:4px;
}
.pet-trait-summary .tag {
    /* 清單中的寵物特徵稍微放寬，避免文字過早省略 */ max-width:120px;
}

.pet-item-actions {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 4px;
    /* 彈性收縮 */ flex-shrink: 0;
}

.pet-item-actions button {
    /* 內縮空間 */ padding: 3px 9px;
    /* 字體大小 */ font-size: 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 背景設定 */ background: var(--surface-input);
    /* 圓角弧度 */ border-radius: 6px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 文字顏色 */ color: var(--text-primary);
}

.pet-item-actions button.danger {
    /* 文字顏色 */ color: #b03a2e;
    /* 邊框顏色 */ border-color: #e6c9c4;
}

.pet-add-btn {
    /* 上方外距 */ margin-top: 8px;
    /* 內縮空間 */ padding: 6px 12px;
    /* 字體大小 */ font-size: 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
}

/* ========【模擬市民相簿】 設定 - 圖片網格、拖放與圖片操作 ======== */

.life-photo-grid {
    /* 顯示方式 */ display: grid;
    /* 網格欄位 */ grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
    /* 項目間距 */ gap: 10px;
    /* 下方外距 */ margin-bottom: 8px;
    /* 最小高度 */ min-height: 20px;
}

.life-photo-empty {
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 內縮空間 */ padding: 14px 0;
    /* 文字對齊 */ text-align: center;
    /* 邊框設定 */ border: 1px dashed var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
}

.life-photo-item {
    /* 定位方式 */ position: relative;
    /* 圓角弧度 */ border-radius: 8px;
    /* 溢出處理 */ overflow: hidden;
    /* 背景設定 */ background: var(--surface-item);
    /* 長寬比例 */ aspect-ratio: 1/1;
    /* 滑鼠指標 */ cursor: pointer;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 動畫過渡 */ transition: .15s;
}

.life-photo-item:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 元素陰影 */ box-shadow: 0 4px 12px rgba(0,0,0,.1);
    /* 元素變形 */ transform: translateY(-1px);
}

.life-photo-item img {
    /* 元素寬度 */ width: 100%;
    /* 元素高度 */ height: 100%;
    /* 圖片填滿方式 */ object-fit: cover;
    /* 顯示方式 */ display: block;
}

.life-photo-item-overlay {
    /* 定位方式 */ position: absolute;
    /* 頂部位置 */ top: 4px;
    /* 右側位置 */ right: 4px;
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 3px;
    /* 透明度 */ opacity: 0;
    /* 動畫過渡 */ transition: .15s;
}

.life-photo-item:hover .life-photo-item-overlay {
    /* 透明度 */ opacity: 1;
}

.life-photo-action {
    /* 元素寬度 */ width: 24px;
    /* 元素高度 */ height: 24px;
    /* 圓角弧度 */ border-radius: 6px;
    /* 邊框設定 */ border: none;
    /* 背景設定 */ background: rgba(0,0,0,.62);
    /* 文字顏色 */ color: #fff;
    /* 字體大小 */ font-size: 12px;
    /* 行距設定 */ line-height: 1;
    /* 滑鼠指標 */ cursor: pointer;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 背景濾鏡 */ backdrop-filter: blur(4px);
    /* 內縮空間 */ padding: 0;
}

.life-photo-action:hover {
    /* 背景設定 */ background: rgba(0,0,0,.85);
}

.life-photo-action.danger:hover {
    /* 背景設定 */ background: #c94a3a;
}

.life-photo-title {
    /* 定位方式 */ position: absolute;
    /* 左側位置 */ left: 0;
    /* 右側位置 */ right: 0;
    /* 底部位置 */ bottom: 0;
    /* 背景設定 */ background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    /* 文字顏色 */ color: #fff;
    /* 字體大小 */ font-size: 10.5px;
    /* 內縮空間 */ padding: 12px 6px 4px;
    /* 換行方式 */ white-space: nowrap;
    /* 溢出處理 */ overflow: hidden;
    /* 文字溢出 */ text-overflow: ellipsis;
    /* 滑鼠事件 */ pointer-events: none;
}

.life-photo-stage {
    position:absolute;
    top:4px;
    left:4px;
    pointer-events:none;
}

.life-photo-add-btn {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 項目間距 */ gap: 6px;
    /* 元素寬度 */ width: 100%;
    /* 內縮空間 */ padding: 10px 12px;
    /* 上方外距 */ margin-top: 8px;
    /* 字體大小 */ font-size: 13px;
    /* 邊框設定 */ border: 1px dashed var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--surface-panel);
    /* 文字顏色 */ color: var(--text-secondary);
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
    /* 字體設定 */ font-family: inherit;
}

.life-photo-add-btn:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: var(--action-primary);
    /* 背景設定 */ background: var(--surface-item-hover);
}

.life-photo-drop-hint {
    /* 字體大小 */ font-size: 11px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 透明度 */ opacity: .75;
    /* 上方外距 */ margin-top: 4px;
    /* 文字對齊 */ text-align: center;
}

.life-photo-grid.dragover {
    /* 外框設定 */ outline: 2px dashed var(--action-primary);
    /* 外框偏移 */ outline-offset: 4px;
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--surface-panel);
}

/* ========【人生照片】 設定 - 人物檔案內的照片編輯 ======== */

.photo-modal {
    /* 元素寬度 */ width: min(560px,100%);
}

.photo-preview-wrap {
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 8px;
}

.photo-preview {
    /* 元素寬度 */ width: 100%;
    /* 長寬比例 */ aspect-ratio: 16/10;
    /* 最大高度 */ max-height: 260px;
    /* 邊框設定 */ border: 1px dashed var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--surface-item);
    /* 背景尺寸 */ background-size: contain;
    /* 背景位置 */ background-position: center;
    /* 背景重複 */ background-repeat: no-repeat;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 13px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
    /* 溢出處理 */ overflow: hidden;
}

.photo-preview:hover {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 背景顏色 */ background-color: var(--surface-item-hover);
}

.photo-preview.has-image {
    /* 邊框樣式 */ border-style: solid;
    /* 背景顏色 */ background-color: #000;
}

.photo-actions-row {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 6px;
    /* 自動換行 */ flex-wrap: wrap;
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 垂直對齊 */ align-items: center;
}

.photo-actions-row .filebtn {
    /* 字體大小 */ font-size: 12px;
    /* 內縮空間 */ padding: 5px 10px;
}

.photo-size-tip {
    /* 字體大小 */ font-size: 11.5px;
    /* 文字顏色 */ color: var(--text-secondary);
}

.photo-size-tip.warn {
    /* 文字顏色 */ color: #c94a3a;
    /* 字體粗細 */ font-weight: 600;
}

/* ========【人生照片檢視】 設定 - 人物專屬照片視窗，不再使用全螢幕浮動按鈕 ======== */
.photo-viewer-panel {
    width:min(980px,calc(100vw - 32px));
    height:min(760px,calc(100vh - 32px));
    max-width:none;
    max-height:none;
    padding:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--surface-card);
}

.photo-viewer-header {
    min-height:48px;
    padding:0 14px 0 18px;
    border-bottom:1px solid var(--border-default);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.photo-viewer-heading {
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-secondary);
    font-size:12px;
}

.photo-viewer-person-name {
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-primary);
    font-weight:650;
}

.photo-viewer-heading-separator { color:var(--border-default); }

.photo-viewer-close {
    width:31px;
    height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text-secondary);
}

.photo-viewer-close:hover {
    background:var(--surface-item-hover);
    color:var(--text-primary);
}

.photo-viewer-image-wrap {
    min-height:0;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-panel);
    overflow:hidden;
}

.photo-viewer-image-wrap img {
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 8px 28px rgba(31,35,40,.14);
    background:#000;
}

.photo-viewer-footer {
    min-height:74px;
    padding:12px 16px 13px 18px;
    border-top:1px solid var(--border-default);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.photo-viewer-info {
    min-width:0;
    position:static;
    transform:none;
    padding:0;
    background:transparent;
    color:var(--text-primary);
    text-align:left;
    backdrop-filter:none;
}

.photo-viewer-info .gv-title {
    margin:0 0 3px;
    font-size:13px;
    font-weight:700;
}

.photo-viewer-info .gv-note {
    max-width:620px;
    margin:0;
    color:var(--text-secondary);
    font-size:11.5px;
    white-space:pre-wrap;
}

.photo-viewer-controls {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.photo-viewer-nav {
    position:static;
    transform:none;
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-default);
    border-radius:5px;
    background:var(--surface-card);
    color:var(--text-primary);
    font-size:18px;
}

.photo-viewer-nav:hover {
    background:var(--surface-item-hover);
    border-color:var(--action-primary);
}

.photo-viewer-nav:disabled {
    opacity:.35;
    cursor:default;
}

.gv-counter {
    min-width:52px;
    text-align:center;
    color:var(--text-secondary);
    font-size:10.5px;
    font-variant-numeric:tabular-nums;
}

/* ========【市民與寵物總覽】 設定 - v7 固定視窗、分類與管理共用結構 ======== */
.person-library-panel {
    width:min(870px,100%);
    height:min(650px,calc(100dvh - 40px));
    max-height:none;
    min-height:0;
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.person-library-header {
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:17px 20px 14px;
    border-bottom:1px solid var(--border-default);
    background:var(--surface-card);
}
.person-library-heading-icon { flex:0 0 18px; width:18px; height:18px; margin-top:2px; color:var(--action-primary); }
.person-library-heading { flex:1 1 auto; min-width:0; }
.person-library-heading h2 { margin:0; color:var(--action-primary); font-size:16px; font-weight:700; line-height:1.3; letter-spacing:0; }
.person-library-heading p { margin:4px 0 0; color:var(--text-secondary); font-size:11.5px; line-height:1.45; }
.person-library-header .help-close-btn { flex:0 0 30px; align-self:center; }
.person-library-layout { display:flex; flex:1 1 auto; min-height:0; overflow:hidden; }
.person-library-side {
    display:flex;
    flex-direction:column;
    flex:0 0 165px;
    min-width:0;
    padding:17px 9px 12px;
    border-right:1px solid var(--border-default);
    background:var(--surface-panel);
}
.person-library-category-tabs { display:flex; flex-direction:column; gap:3px; flex:0 0 auto; margin:0; padding:0; border:0; }
.person-library-category-tabs button {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    min-height:38px;
    padding:9px 10px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--text-secondary);
    font:inherit;
    font-size:12px;
    text-align:left;
    white-space:nowrap;
    cursor:pointer;
}
.person-library-category-tabs button .l1ng-icon { width:16px; height:16px; flex:0 0 16px; }
.person-library-category-tabs button:hover { background:var(--surface-item-hover); color:var(--text-primary); }
.person-library-category-tabs button.active { color:var(--action-primary); background:var(--brand-tint-start); font-weight:700; }
.person-library-category-total { margin-left:auto; color:var(--text-secondary); font-size:10.5px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.2; }
.person-library-category-tabs button.active .person-library-category-total { color:var(--action-primary); opacity:.76; }
.person-library-header-actions { display:flex; flex-direction:column; align-items:stretch; gap:7px; margin-top:auto; padding-top:18px; }
.person-library-header-actions button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:35px;
    min-width:0;
    padding:6px 8px;
    border:1px solid var(--border-default);
    border-radius:7px;
    background:var(--surface-card);
    color:var(--text-primary);
    font:inherit;
    font-size:11.5px;
    white-space:nowrap;
    cursor:pointer;
}
.person-library-header-actions button.primary { background:var(--action-primary); border-color:var(--action-primary); color:#fff; }
.person-library-header-actions button .l1ng-icon { width:15px; height:15px; flex:0 0 15px; }
.person-library-header-actions button[hidden] { display:none; }
.person-library-main-pane { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.person-library-toolbar { flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px 18px 12px; margin:0; }
.person-library-toolbar input { width:100%; min-width:0; min-height:36px; padding:7px 11px; border:1px solid var(--border-default); border-radius:7px; background:var(--surface-input); color:var(--text-primary); font:inherit; font-size:12.5px; outline:none; }
.person-library-toolbar input:focus { border-color:var(--action-primary); box-shadow:0 0 0 2px var(--brand-tint-start); }
.person-library-view-toggle { display:inline-flex; flex:0 0 auto; align-items:center; gap:2px; padding:2px; border:1px solid var(--border-default); border-radius:7px; background:var(--surface-panel); }
.person-library-view-toggle button { display:grid; place-items:center; width:35px; height:32px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--text-secondary); cursor:pointer; }
.person-library-view-toggle button svg { width:16px; height:16px; }
.person-library-view-toggle button:hover { color:var(--text-primary); }
.person-library-view-toggle button.active { background:var(--surface-card); color:var(--action-primary); box-shadow:0 1px 3px rgba(31,35,40,.08); }
.person-library-list,.person-library-list.compact,.person-library-list.detailed {
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:0;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 18px 7px;
    scrollbar-width:thin;
}
.person-library-item {
    display:grid;
    position:relative;
    flex:0 0 auto;
    grid-template-columns:minmax(0,1fr) 28px;
    align-items:start;
    gap:10px;
    min-width:0;
    padding:14px 3px;
    border:0;
    border-bottom:1px solid var(--border-default);
    border-radius:0;
    background:transparent;
    transition:background-color .12s ease;
}
.person-library-item:last-child { border-bottom:0; }
.person-library-item:hover { background:var(--surface-item-hover); }
.person-library-item.batch-selected { background:color-mix(in srgb,var(--action-primary) 10%,transparent); border-radius:7px; }
.person-library-main { display:flex; align-items:flex-start; gap:12px; min-width:0; cursor:pointer; }
.person-library-avatar-wrap { width:48px; height:48px; flex:0 0 48px; position:relative; margin-top:1px; }
.person-library-avatar { display:flex; position:relative; width:48px; height:48px; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border-default); border-radius:50%; background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end)); color:var(--avatar-text); font-size:15px; font-weight:700; }
.person-library-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.person-library-avatar .pet-avatar-species-fallback .l1ng-icon { width:25px; height:25px; }
.person-library-avatar img.person-library-deferred-image { position:relative; z-index:1; opacity:0; }
.person-library-avatar img.person-library-deferred-image.asset-ready { opacity:1; }
.person-library-avatar.has-image .pet-avatar-species-fallback { display:none; }
.person-library-text { display:flex; flex:1 1 auto; flex-direction:column; gap:7px; min-width:0; }
.person-library-name { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-height:20px; color:var(--text-primary); font-size:13px; font-weight:650; min-width:0; }
.person-library-name-label { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-library-life { color:var(--text-secondary); font-size:10.5px; font-weight:400; white-space:nowrap; margin-left:4px; }
.person-library-detailed-meta { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:11.5px; line-height:1.48; white-space:normal; min-width:0; }
.person-library-detail-field { display:grid; width:100%; grid-template-columns:68px minmax(0,1fr); gap:8px; align-items:baseline; overflow-wrap:anywhere; }
.person-library-detail-label { color:var(--text-secondary); font-weight:500; }
.person-library-detail-value { min-width:0; color:var(--text-primary); overflow-wrap:anywhere; }
.person-library-compact-meta { color:var(--text-secondary); font-size:10.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-library-list.detailed .person-library-compact-meta { display:none; }
.person-library-list.compact .person-library-detailed-meta,.person-library-list.compact .person-library-life { display:none; }
.person-library-list.compact .person-library-item { padding:9px 3px; min-height:55px; align-items:center; }
.person-library-list.compact .person-library-main { align-items:center; }
.person-library-list.compact .person-library-avatar-wrap,.person-library-list.compact .person-library-avatar { width:36px; height:36px; flex-basis:36px; }
.person-library-list.compact .person-library-avatar-wrap { margin:0; }
.person-library-list.compact .person-library-text { gap:2px; }
.person-library-list.compact .person-library-name { font-size:12.5px; }
.person-library-list.compact .person-library-item-menu,.person-library-list.compact .person-library-batch-select { align-self:center; }
.person-library-item-menu { grid-column:2; grid-row:1; justify-self:end; position:relative; align-self:start; }
.person-library-more { display:flex; width:28px; height:28px; align-items:center; justify-content:center; border:0; border-radius:6px; background:transparent; color:var(--text-secondary); cursor:pointer; opacity:.65; }
.person-library-item:hover .person-library-more,.person-library-more:focus-visible,.person-library-item-menu.open .person-library-more { opacity:1; color:var(--text-primary); background:var(--surface-item-hover); }
.person-library-item-popover { top:calc(100% + 4px); right:0; left:auto; min-width:190px; }
.person-library-batch-select { grid-column:2; grid-row:1; justify-self:center; align-self:start; display:none; width:21px; height:21px; margin:3px 0 0; padding:0; align-items:center; justify-content:center; border:1px solid var(--border-default); border-radius:50%; background:var(--surface-input); color:transparent; cursor:pointer; }
.person-library-item.batch-mode .person-library-batch-select { display:flex; opacity:1; pointer-events:auto; }
.person-library-item.batch-mode .person-library-batch-select.selected { border-color:var(--action-primary); background:var(--action-primary); color:#fff; }
.person-library-batch-select .l1ng-icon { width:12px; height:12px; }
.person-library-item.batch-mode .person-library-item-menu { display:none; }
.person-library-empty,.family-member-picker-empty { padding:40px 20px; color:var(--text-secondary); font-size:12.5px; text-align:center; }
.person-library-batch-toolbar {
    flex:0 0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    min-height:58px;
    margin:0;
    padding:10px 18px max(10px,env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--border-default);
    border-radius:0;
    background:var(--surface-card);
}
.person-library-batch-toolbar[hidden],.person-library-batch-count[hidden] { display:none; }
.person-library-batch-toolbar button { min-height:34px; padding:6px 11px; border:1px solid var(--border-default); border-radius:7px; background:var(--surface-card); color:var(--text-primary); font:inherit; font-size:11.5px; cursor:pointer; }
.person-library-batch-toolbar button.danger { color:#b03a2e; border-color:rgba(176,58,46,.35); }
.person-library-batch-toolbar button:disabled { opacity:.4; cursor:default; }
@media (max-width:720px) {
    #personLibraryDialog { padding:10px; }
    .person-library-panel { width:100%; height:min(668px,calc(100dvh - 20px)); max-height:none; }
    .person-library-header { padding:14px 15px 12px; }
    .person-library-heading h2 { font-size:15px; }
    .person-library-heading p { font-size:11px; }
    .person-library-layout { flex-direction:column; }
    .person-library-side { flex:0 0 auto; width:100%; min-height:53px; padding:5px 12px; flex-direction:row; align-items:center; gap:6px; border-right:0; border-bottom:1px solid var(--border-default); background:var(--surface-card); }
    .person-library-category-tabs { flex:1 1 auto; min-width:0; flex-direction:row; align-items:center; gap:2px; }
    .person-library-category-tabs button { position:relative; flex:0 0 auto; width:auto; min-height:40px; padding:6px 3px 8px; gap:5px; border:0; border-radius:0; background:transparent; font-size:11px; }
    .person-library-category-tabs button.active { background:transparent; color:var(--action-primary); }
    .person-library-category-tabs button.active::after { content:""; position:absolute; left:1px; right:1px; bottom:-5px; height:2px; border-radius:2px; background:var(--action-primary); }
    .person-library-category-tabs button .l1ng-icon { width:13px; height:13px; flex-basis:13px; }
    .person-library-category-total { font-size:9.5px; margin-left:0; }
    .person-library-header-actions { flex:0 0 auto; margin:0 0 0 auto; padding:0; align-items:center; flex-direction:row; justify-content:flex-end; gap:4px; }
    .person-library-header-actions button { min-height:31px; padding:5px 6px; gap:4px; font-size:10.5px; line-height:1.1; }
    .person-library-header-actions button .l1ng-icon { width:12px; height:12px; flex-basis:12px; }
    .person-library-toolbar { padding:10px 13px; gap:8px; }
    .person-library-view-toggle button { width:33px; height:31px; }
    .person-library-list { padding:0 13px 6px; }
    .person-library-item { padding:13px 2px; gap:9px; }
    .person-library-main { gap:9px; }
    .person-library-avatar-wrap,.person-library-avatar { width:43px; height:43px; flex-basis:43px; }
    .person-library-detail-field { grid-template-columns:62px minmax(0,1fr); gap:7px; }
    .person-library-batch-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 13px max(10px,env(safe-area-inset-bottom)); gap:6px; }
    .person-library-batch-toolbar[hidden] { display:none; }
    .person-library-batch-toolbar button { min-width:0; font-size:10.5px; padding:6px 3px; }
}
@media (max-width:360px) {
    .person-library-side { padding:5px 7px; gap:4px; }
    .person-library-category-tabs button { font-size:10px; gap:3px; padding-left:1px; padding-right:1px; }
    .person-library-category-tabs button .l1ng-icon { width:12px; height:12px; flex-basis:12px; }
    .person-library-header-actions { gap:3px; }
    .person-library-header-actions button { font-size:10px; padding:5px 4px; gap:3px; }
    .person-library-header-actions button .l1ng-icon { width:11px; height:11px; flex-basis:11px; }
}
/* ========【加入家族人物列】 設定 - 維持原有尺寸，不受人物庫檢視模式影響 ======== */
.family-member-picker-avatar {
    /* 頭像寬度 */ width: 42px;
    /* 頭像高度 */ height: 42px;
    /* 圓形頭像 */ border-radius: 50%;
    /* 裁切內容 */ overflow: hidden;
    /* 置中內容 */ display: flex;
    /* 垂直置中 */ align-items: center;
    /* 水平置中 */ justify-content: center;
    /* 頭像背景 */ background: linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    /* 頭像文字 */ color: var(--avatar-text);
    /* 字體大小 */ font-size: 15px;
    /* 字體粗細 */ font-weight: 700;
    /* 頭像邊框 */ border: 1px solid var(--border-default);
    /* 固定尺寸 */ flex: 0 0 42px;
}

.family-member-picker-avatar img {
    /* 圖片寬度 */ width: 100%;
    /* 圖片高度 */ height: 100%;
    /* 圖片裁切 */ object-fit: cover;
    /* 清除行內空隙 */ display: block;
}

.family-member-picker-text {
    /* 避免文字撐破容器 */ min-width: 0;
    /* 垂直排列 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 行間距 */ gap: 3px;
}

.family-member-picker-name {
    /* 避免長名稱撐破 */ min-width: 0;
    /* 名稱列 */ display: flex;
    /* 垂直置中 */ align-items: center;
    /* 圖示間距 */ gap: 5px;
    /* 主文字 */ color: var(--text-primary);
    /* 字體大小 */ font-size: 12.5px;
    /* 字體粗細 */ font-weight: 650;
}

.family-member-picker-name > span:last-child {
    /* 過長名稱隱藏 */ overflow: hidden;
    /* 省略號 */ text-overflow: ellipsis;
    /* 單行顯示 */ white-space: nowrap;
}

.family-member-picker-panel {
    /* 元素寬度 */ width: min(680px,100%);
}

.family-member-picker-toolbar {
    /* 顯示方式 */ display: flex;
    /* 項目間距 */ gap: 8px;
    /* 下方外距 */ margin-bottom: 10px;
    /* 垂直對齊 */ align-items: center;
    /* 自動換行 */ flex-wrap: wrap;
}

.family-member-picker-toolbar input {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 120px;
    /* 內縮空間 */ padding: 8px 11px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 外框設定 */ outline: none;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
}

.family-member-picker-toolbar input:focus {
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.family-member-picker-toolbar button {
    /* 內縮空間 */ padding: 6px 10px;
    /* 字體大小 */ font-size: 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 滑鼠指標 */ cursor: pointer;
}

.family-member-picker-list {
    /* 最大高度 */ max-height: 52vh;
    /* 溢出處理 */ overflow: auto;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 內縮空間 */ padding: 6px;
    /* 背景設定 */ background: var(--surface-panel);
}

.family-member-picker-item {
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 項目間距 */ gap: 10px;
    /* 內縮空間 */ padding: 6px 10px;
    /* 圓角弧度 */ border-radius: 6px;
    /* 下方外距 */ margin-bottom: 4px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
    /* 背景設定 */ background: var(--surface-input);
    /* 邊框設定 */ border: 1.5px solid transparent;
}

.family-member-picker-item:hover {
    /* 背景設定 */ background: var(--surface-item-hover);
}

.family-member-picker-item.selected {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 背景設定 */ background: var(--surface-item-hover);
}

.family-member-picker-item.remove-selected {
    /* 邊框顏色 */ border-color: #c94a3a;
    /* 背景設定 */ background: rgba(200,60,40,.08);
}

.family-member-picker-checkbox {
    /* 元素寬度 */ width: 18px;
    /* 元素高度 */ height: 18px;
    /* 邊框設定 */ border: 1.5px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 4px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: transparent;
    /* 字體粗細 */ font-weight: 700;
    /* 動畫過渡 */ transition: .15s;
    /* 背景設定 */ background: var(--surface-input);
}

.family-member-picker-item.selected .family-member-picker-checkbox {
    /* 背景設定 */ background: var(--action-primary);
    /* 文字顏色 */ color: #fff;
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.family-member-picker-item.remove-selected .family-member-picker-checkbox {
    /* 背景設定 */ background: #c94a3a;
    /* 文字顏色 */ color: #fff;
    /* 邊框顏色 */ border-color: #c94a3a;
}

.family-member-picker-item .family-member-picker-text {
    /* 彈性配比 */ flex: 1;
    /* 最小寬度 */ min-width: 0;
}

.family-member-picker-count {
    /* 字體大小 */ font-size: 12px;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 內縮空間 */ padding: 4px 10px;
    /* 背景設定 */ background: var(--surface-item);
    /* 圓角弧度 */ border-radius: 6px;
}

.family-member-picker-count b {
    /* 文字顏色 */ color: var(--action-primary);
    /* 字體粗細 */ font-weight: 700;
}

.family-member-picker-count.remove-count b {
    /* 文字顏色 */ color: #c94a3a;
}

.person-profile-panel { width:min(560px,100%); padding:0; overflow:hidden; }
.person-profile-content { min-width:0; }
/* ========【模擬市民獨立預覽頁】 設定 - 編輯頁背紙維持同尺寸，預覽頁與預覽背紙共用同一尺寸 authority ======== */
#simEditorDialog {
    /* 桌面正式人物預覽寬度；預覽前景與預覽背紙必須共用這一個值 */ --sim-editor-preview-width: min(560px,calc(100vw - 40px));
}

.sim-editor-preview-open {
    /* 獨立預覽入口固定在編輯頁標題區右上 */ position: absolute;
    /* 上方位置 */ top: 13px;
    /* 右側位置 */ right: 18px;
    /* 顯示層級 */ z-index: 7;
    /* 最小高度 */ min-height: 30px;
    /* 內縮空間 */ padding: 5px 10px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 6px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體設定 */ font: inherit;
    /* 字體大小 */ font-size: 11.5px;
    /* 字體粗細 */ font-weight: 650;
    /* 滑鼠指標 */ cursor: pointer;
}

.sim-editor-preview-open:hover {
    /* 懸停邊框 */ border-color: var(--action-primary);
    /* 懸停文字 */ color: var(--action-primary);
    /* 懸停背景 */ background: var(--surface-item-hover);
}

.sim-editor-paper-back,
.sim-editor-preview-sheet {
    /* 尺寸同步完成前不顯示，避免短暫露出圓角小塊 */ visibility: hidden;
    /* 與主編輯頁共用畫面中心 */ position: absolute;
    /* 水平置中 */ left: 50%;
    /* 垂直置中 */ top: 50%;
    /* 圓角弧度 */ border-radius: 10px;
}

.sim-editor-paper-back {
    /* 背紙寬度直接跟隨實際編輯頁，不受 560px 預覽寬度影響 */ width: var(--sim-editor-sheet-width,min(790px,calc(100vw - 40px)));
    /* 背紙高度直接跟隨實際編輯頁 */ height: var(--sim-editor-sheet-height,min(680px,92vh));
    /* 幾何尺寸由編輯頁量測值決定 */ max-height: none;
}

.sim-editor-preview-sheet {
    /* 尚未翻頁時，這張紙也要與編輯頁完全同寬，才會形成真正的同尺寸紙張堆疊 */ width: var(--sim-editor-sheet-width,min(790px,calc(100vw - 40px)));
    /* 高度同樣跟隨編輯頁 */ height: var(--sim-editor-sheet-height,min(680px,92vh));
    /* 尺寸由編輯頁量測值決定 */ max-height: none;
}

#simEditorDialog.sheet-ready .sim-editor-paper-back,
#simEditorDialog.sheet-ready .sim-editor-preview-sheet {
    /* 編輯頁幾何量測完成後才呈現紙張堆疊，避免初始化時尺寸跳動 */ visibility: visible;
}

.sim-editor-paper-back {
    /* 後方紙張邊框 */ border: 1px solid var(--border-default);
    /* 後方紙張背景 */ background: var(--surface-card);
    /* 初始錯位 */ transform: translate(-50%,-50%) translate(-14px,11px) rotate(-.65deg);
    /* 顯示層級 */ z-index: 1;
    /* 透明度 */ opacity: .72;
    /* 不接收操作 */ pointer-events: none;
    /* 陰影設定 */ box-shadow: 0 12px 30px rgba(31,35,40,.08);
    /* 動畫過渡；翻到預覽時寬度與前景一起收斂 */ transition: width .38s cubic-bezier(.2,.75,.25,1),transform .38s cubic-bezier(.2,.75,.25,1),opacity .26s ease;
}

.sim-editor-preview-sheet {
    /* 預覽紙不是獨立彈窗，不套用共用 dialog 進場動畫，避免 transform 被覆蓋後閃到右下角 */ animation: none;
    /* 預覽頁清除共用面板內距 */ padding: 0;
    /* 預覽頁自行捲動 */ overflow: auto;
    /* 預覽頁背景 */ background: var(--surface-card);
    /* 預覽頁邊框 */ border: 1px solid var(--border-default);
    /* 預設位於主編輯頁後方 */ z-index: 2;
    /* 預設只露出紙張邊緣 */ transform: translate(-50%,-50%) translate(14px,-10px) rotate(.65deg) scale(.998);
    /* 預設透明度 */ opacity: .92;
    /* 預設不可操作 */ pointer-events: none;
    /* 陰影設定 */ box-shadow: 0 14px 36px rgba(31,35,40,.11);
    /* 翻頁動畫；寬度在翻到前景時才由編輯頁尺寸收斂到正式預覽尺寸 */ transition: width .38s cubic-bezier(.2,.75,.25,1),transform .38s cubic-bezier(.2,.75,.25,1),opacity .26s ease,box-shadow .26s ease;
}

/* 尚未打開預覽時只把它當成第二張紙，不讓 560px 預覽內容從編輯頁邊緣露出。 */
#simEditorDialog:not(.preview-open) .sim-editor-preview-sheet > * {
    visibility: hidden;
}

.sim-editor-preview-sheet-toolbar {
    /* 返回按鈕固定於預覽頁上方 */ position: sticky;
    /* 貼齊頂部 */ top: 0;
    /* 顯示層級 */ z-index: 4;
    /* 顯示方式 */ display: flex;
    /* 水平靠右 */ justify-content: flex-end;
    /* 內縮空間 */ padding: 10px 14px;
    /* 下方邊框 */ border-bottom: 1px solid var(--border-default);
    /* 背景設定 */ background: color-mix(in srgb,var(--surface-card) 94%,transparent);
    /* 毛玻璃 */ backdrop-filter: blur(7px);
}

.sim-editor-preview-sheet-toolbar button {
    /* 最小高度 */ min-height: 30px;
    /* 內縮空間 */ padding: 5px 10px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 6px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體設定 */ font: inherit;
    /* 字體大小 */ font-size: 11.5px;
}

.sim-editor-preview-sheet-toolbar button:hover {
    /* 懸停邊框 */ border-color: var(--action-primary);
    /* 懸停文字 */ color: var(--action-primary);
}

.editor-info-preview {
    /* 預覽內容直接使用整張紙 */ width: 100%;
    /* 水平置中 */ margin: 0;
    /* 不再額外包卡片 */ overflow: visible;
    /* 背景設定 */ background: var(--surface-card);
}

.sim-editor-preview-sheet .person-profile-header {
    /* 與正式人物檢視標頭一致 */ padding: 16px 18px 14px;
}

.sim-editor-preview-sheet .person-profile-body {
    /* 預覽整頁自己捲動，不建立第二條捲軸 */ max-height: none;
    /* 關閉內層捲軸 */ overflow-y: visible;
    /* 與正式人物檢視內容寬度一致 */ padding: 0 18px 18px;
}

/* ========【模擬市民預覽翻頁】 設定 - 只翻編輯頁與獨立預覽頁，不改四個編輯分類 ======== */
#simEditorDialog.preview-open .sim-editor-modal {
    /* 主編輯頁翻離前景 */ transform: translateX(-54px) translateY(4px) rotate(-1.5deg) scale(.99);
    /* 主編輯頁淡出 */ opacity: 0;
    /* 主編輯頁暫停操作 */ pointer-events: none;
}

#simEditorDialog.preview-open .sim-editor-preview-sheet,
#simEditorDialog.preview-open .sim-editor-paper-back {
    /* 預覽前景與背紙強制共用完全相同的寬度，避免再出現 560px / 790px 混搭 */ width: var(--sim-editor-preview-width);
}

#simEditorDialog.preview-open .sim-editor-preview-sheet {
    /* 預覽頁翻至最上層 */ z-index: 4;
    /* 預覽頁回到正面位置 */ transform: translate(-50%,-50%) translate(0,0) rotate(0) scale(1);
    /* 完整顯示 */ opacity: 1;
    /* 開放操作 */ pointer-events: auto;
    /* 前景陰影 */ box-shadow: 0 18px 46px rgba(31,35,40,.18);
}

#simEditorDialog.preview-open .sim-editor-paper-back {
    /* 翻頁後保留第三張紙的層次 */ transform: translate(-50%,-50%) translate(9px,9px) rotate(.65deg);
    /* 翻頁後提高辨識度 */ opacity: .62;
}

@media (max-width:760px) {
    #simEditorDialog {
        /* 小螢幕正式人物預覽寬度 */ --sim-editor-preview-width: min(540px,calc(100vw - 40px));
    }

    .sim-editor-preview-open {
        /* 小螢幕配合既有標頭內距 */ top: 12px;
        /* 小螢幕右側位置 */ right: 14px;
    }

    #simEditorDialog.preview-open .sim-editor-preview-sheet {
        /* 小螢幕提高可用高度 */ max-height: 96vh;
    }
}

@media (max-width:520px) {
    #simEditorDialog {
        /* 手機正式人物預覽寬度：遮罩左右各保留 20px */ --sim-editor-preview-width: calc(100vw - 40px);
    }

    .sim-editor-preview-open {
        /* 手機版縮小按鈕 */ min-height: 28px;
        /* 手機版縮小內距 */ padding: 4px 8px;
    }

    .sim-editor-preview-sheet .person-profile-header {
        /* 與正式人物檢視標頭內距一致 */ padding: 16px 18px 14px;
    }

    .sim-editor-preview-sheet .person-profile-body {
        /* 與正式人物檢視內容內距一致 */ padding: 0 18px 18px;
    }

    #simEditorDialog.preview-open .sim-editor-modal {
        /* 手機版縮短翻頁距離 */ transform: translateX(-26px) translateY(3px) rotate(-1deg) scale(.992);
    }
}

@media (prefers-reduced-motion:reduce) {
    .sim-editor-modal,
    .sim-editor-paper-back,
    .sim-editor-preview-sheet {
        /* 尊重減少動態效果設定 */ transition: none;
    }
}


.person-profile-header { display:flex; gap:14px; align-items:flex-start; padding:16px 18px 14px; border-bottom:1px solid var(--border-default); margin:0; }
.person-profile-avatar { width:104px; height:104px; border-radius:10px; flex-shrink:0; overflow:hidden; background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end)); display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; color:var(--avatar-text); border:1px solid var(--border-default); position:relative; }
.person-profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.person-profile-avatar.ghost::after { content:""; position:absolute; inset:0; background:rgba(155,183,212,.28); mix-blend-mode:screen; pointer-events:none; }
.person-profile-avatar.dead { filter:sepia(.45) saturate(.7) brightness(.95); }
.person-profile-header-text { flex:1; min-width:0; padding-top:1px; }
.person-profile-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.person-profile-name { font-size:20px; font-weight:750; letter-spacing:.2px; word-break:break-word; line-height:1.25; }
.person-profile-meta { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:6px; color:var(--text-secondary); }
.person-profile-meta .stage-tag,.person-profile-meta .meta-pill { min-height:21px; padding:3px 7px; display:inline-flex; align-items:center; gap:3px; border-radius:999px; font-size:10.5px; line-height:1; }
.person-profile-meta .meta-pill { background:var(--surface-item); color:var(--text-primary); border:1px solid var(--border-default); }
.person-profile-head-facts { display:grid; gap:5px; margin-top:10px; color:var(--text-secondary); font-size:11.5px; }
.person-profile-head-fact { display:flex; align-items:center; gap:5px; min-width:0; }
.person-profile-head-fact .l1ng-icon { color:var(--action-primary); flex:0 0 auto; }
.person-profile-head-fact span:last-child {
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.4;
}
.person-profile-body { display:flex; flex-direction:column; gap:0; padding:0 18px; max-height:min(60vh,520px); overflow-y:auto; }
.person-profile-section { padding:12px 0 13px; border-bottom:1px solid var(--border-default); }
.person-profile-section:last-child { border-bottom:0; }
.person-profile-section-title { margin:0 0 8px; color:var(--text-primary); font-size:12px; font-weight:700; }
.person-profile-list { display:grid; gap:6px; }
.person-profile-row { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; align-items:start; font-size:12.5px; line-height:1.45; }
.person-profile-label { color:var(--text-secondary); min-width:0; padding:0; font-size:11.5px; }
.person-profile-value { min-width:0; color:var(--text-primary); word-break:break-word; }
.person-profile-value.muted { color:var(--text-secondary); font-style:italic; }
.person-profile-traits { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
/* 資訊卡的「特徵」與其他基本資料共用同一列；對齊首排標籤，不套用獨立區塊的上方間距。 */
.person-profile-row .person-profile-traits { margin-top:0; }
.person-profile-traits .tag { font-size:10.5px; padding:3px 7px; max-width:none; }
.person-profile-notes { font-size:12.5px; line-height:1.55; color:var(--text-primary); word-break:break-word; white-space:pre-wrap; }
.person-profile-media { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:16px; }
.person-profile-media-column { min-width:0; }
.person-profile-media-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; color:var(--text-primary); font-size:12px; font-weight:700; }
.person-profile-media-count { color:var(--text-secondary); font-size:10.5px; font-weight:500; }
.person-profile-pets { display:flex; flex-direction:column; gap:5px; }
.person-profile-pet { display:flex; align-items:center; gap:7px; padding:4px 6px; background:var(--surface-item); border-radius:6px; }
.person-profile-pet-avatar { width:30px; height:30px; border-radius:7px; flex-shrink:0; overflow:hidden; background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end)); display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid var(--border-default); }
.person-profile-pet-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.person-profile-pet-text { flex:1; min-width:0; }
.person-profile-pet-name { font-size:11.5px; font-weight:600; }
.person-profile-pet-meta {
    color:var(--text-secondary);
    font-size:10.5px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.person-profile-pet-traits {
    /* 人物檔案中的寵物特徵採與人物特徵一致的標籤語言 */ display:flex;
    /* 空間不足時換行 */ flex-wrap:wrap;
    /* 標籤間距 */ gap:4px;
    /* 與寵物基本資料分層 */ margin-top:4px;
}
.person-profile-pet-traits .tag {
    /* 個人檔案不限制為人物卡片的小標籤寬度 */ max-width:none;
    /* 提升檔案檢視可讀性 */ font-size:10px;
}

/* ========【寵物血統】 設定 - 匯入的父母／子女資料以次要資訊顯示 ======== */
.pet-lineage {
    /* 版面配置 */ display: grid;
    /* 行距 */ gap: 2px;
    /* 上方間距 */ margin-top: 4px;
    /* 字體大小 */ font-size: 10.5px;
    /* 行高 */ line-height: 1.45;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 長文字換行 */ overflow-wrap: anywhere;
}

.pet-lineage > span {
    /* 顯示方式 */ display: block;
    /* 最小寬度 */ min-width: 0;
}

.pet-lineage strong {
    /* 標題顏色 */ color: var(--text-primary);
    /* 字體粗細 */ font-weight: 650;
}

.pet-lineage .muted {
    /* 次要提示透明度 */ opacity: .78;
}
.person-profile-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.person-profile-gallery .life-photo-item { aspect-ratio:1/1; border-radius:5px; overflow:hidden; }
.person-profile-gallery .life-photo-title { display:none; }
.person-profile-panel > .ui-dialog-actions { margin:0; padding:10px 18px 12px; border-top:1px solid var(--border-default); }

/* ========【使用說明】 設定 - 簡約雙欄閱讀版型 ======== */
.help-panel {
    /* 視窗寬度 */ width:min(820px,100%);
    /* 清除共用面板內距，改由標題列與內容各自控制 */ padding:0;
    /* 避免內部內容超出圓角 */ overflow:hidden;
}

.help-header {
    /* 標題與關閉按鈕左右排列 */ display:flex;
    /* 垂直置中 */ align-items:center;
    /* 左右撐開 */ justify-content:space-between;
    /* 項目間距 */ gap:16px;
    /* 內縮空間 */ padding:17px 20px 14px;
    /* 與內容區分隔 */ border-bottom:1px solid var(--border-default);
}

.help-heading {
    /* 圖示與文字並排 */ display:flex;
    /* 頂部對齊 */ align-items:flex-start;
    /* 項目間距 */ gap:10px;
    /* 允許文字縮小 */ min-width:0;
}

.help-heading-icon {
    /* 圖示尺寸 */ width:18px;
    /* 圖示尺寸 */ height:18px;
    /* 上方微調 */ margin-top:2px;
    /* 品牌強調色 */ color:var(--action-primary);
    /* 不壓縮 */ flex:0 0 auto;
}

.help-heading-copy {
    /* 允許內容縮小 */ min-width:0;
}

.help-heading h2 {
    /* 清除共用標題外距 */ margin:0;
    /* 字體大小 */ font-size:16px;
    /* 字體粗細 */ font-weight:700;
    /* 行距 */ line-height:1.3;
}

.help-heading p {
    /* 上方留白 */ margin:4px 0 0;
    /* 次要文字色 */ color:var(--text-secondary);
    /* 字體大小 */ font-size:11.5px;
    /* 行距 */ line-height:1.45;
}

.help-close-btn {
    /* 固定按鈕尺寸 */ width:30px;
    /* 固定按鈕尺寸 */ height:30px;
    /* 清除內距 */ padding:0;
    /* 不另外畫外框 */ border:0;
    /* 圓角 */ border-radius:6px;
    /* 透明背景 */ background:transparent;
    /* 次要文字色 */ color:var(--text-secondary);
    /* 圖示置中 */ display:inline-flex;
    /* 水平置中 */ align-items:center;
    /* 垂直置中 */ justify-content:center;
    /* 不壓縮 */ flex:0 0 auto;
}

.help-close-btn:hover,
.help-close-btn:focus-visible {
    /* 與網站其他小按鈕一致 */ background:var(--surface-item-hover);
    /* 提高文字對比 */ color:var(--text-primary);
    /* 移除瀏覽器預設外框 */ outline:none;
}

.help-close-btn .l1ng-icon {
    /* 圖示尺寸 */ width:14px;
    /* 圖示尺寸 */ height:14px;
}

.help-body {
    /* 雙欄資訊排版 */ display:grid;
    /* 兩欄等寬 */ grid-template-columns:repeat(2,minmax(0,1fr));
    /* 欄間距 */ column-gap:30px;
    /* 最大可視高度 */ max-height:68vh;
    /* 內容捲動 */ overflow:auto;
    /* 內容內縮 */ padding:0 20px 18px;
}

.help-section {
    /* 允許欄位縮小 */ min-width:0;
    /* 區塊內縮 */ padding:16px 0 17px;
    /* 使用細線分隔，不使用卡片框 */ border-top:1px solid var(--border-default);
}

.help-section-wide {
    /* 主要操作橫跨雙欄 */ grid-column:1 / -1;
    /* 第一區不需要上方分隔線 */ border-top:0;
}

.help-section-shortcuts {
    /* 快捷鍵橫跨雙欄 */ grid-column:1 / -1;
}

.help-section h3 {
    /* 標題外距 */ margin:0 0 9px;
    /* 圖示與標題並排 */ display:flex;
    /* 垂直置中 */ align-items:center;
    /* 項目間距 */ gap:7px;
    /* 主要文字色 */ color:var(--text-primary);
    /* 字體大小 */ font-size:12.5px;
    /* 字體粗細 */ font-weight:700;
    /* 字距 */ letter-spacing:.1px;
}

.help-section h3 .l1ng-icon {
    /* 圖示尺寸 */ width:14px;
    /* 圖示尺寸 */ height:14px;
    /* 品牌強調色 */ color:var(--action-primary);
    /* 不壓縮 */ flex:0 0 auto;
}

.help-section ul {
    /* 清除預設外距 */ margin:0;
    /* 清除預設左縮排 */ padding:0;
    /* 移除瀏覽器項目符號 */ list-style:none;
    /* 次要文字色 */ color:var(--text-secondary);
    /* 字體大小 */ font-size:11.75px;
    /* 行距 */ line-height:1.62;
}

.help-section-wide ul {
    /* 畫布操作內容較多，桌面分成兩欄閱讀 */ columns:2;
    /* 欄間距 */ column-gap:30px;
}

.help-section-shortcuts ul {
    /* 快捷鍵使用雙欄列表 */ display:grid;
    /* 兩欄等寬 */ grid-template-columns:repeat(2,minmax(0,1fr));
    /* 欄間距 */ column-gap:30px;
}

.help-section li {
    /* 自訂項目符號定位 */ position:relative;
    /* 項目左側留白 */ padding-left:13px;
    /* 項目下方距離 */ margin-bottom:7px;
    /* 多欄時避免單一項目被切開 */ break-inside:avoid;
}

.help-section li::before {
    /* 自訂小圓點 */ content:"";
    /* 絕對定位 */ position:absolute;
    /* 左側位置 */ left:1px;
    /* 上方位置 */ top:.68em;
    /* 圓點尺寸 */ width:4px;
    /* 圓點尺寸 */ height:4px;
    /* 圓形 */ border-radius:50%;
    /* 使用品牌色 */ background:var(--action-primary);
    /* 降低存在感 */ opacity:.7;
}

.help-section li:last-child {
    /* 最後一項不留底部空間 */ margin-bottom:0;
}

.help-section li b {
    /* 重點使用主要文字色 */ color:var(--text-primary);
    /* 字體粗細 */ font-weight:650;
}

.help-section kbd {
    /* Keycap 置中 */ display:inline-flex;
    /* 垂直置中 */ align-items:center;
    /* 水平置中 */ justify-content:center;
    /* 最小高度 */ min-height:20px;
    /* 內縮空間 */ padding:1px 5px;
    /* 邊框 */ border:1px solid var(--border-default);
    /* 圓角 */ border-radius:4px;
    /* 背景 */ background:var(--surface-input);
    /* 不使用額外陰影 */ box-shadow:none;
    /* 主要文字色 */ color:var(--text-primary);
    /* 沿用網站字體 */ font-family:inherit;
    /* 字體大小 */ font-size:10.5px;
    /* 行距 */ line-height:1;
}

@media (max-width:720px) {
    .help-header {
        /* 行動版縮小左右內距 */ padding:15px 16px 12px;
    }

    .help-body {
        /* 行動版改回單欄 */ grid-template-columns:1fr;
        /* 行動版縮小左右內距 */ padding:0 16px 16px;
    }

    .help-section-wide,
    .help-section-shortcuts {
        /* 行動版都使用單欄 */ grid-column:auto;
    }

    .help-section-wide ul {
        /* 行動版不分欄 */ columns:1;
    }

    .help-section-shortcuts ul {
        /* 行動版快捷鍵也改單欄 */ grid-template-columns:1fr;
    }
}

@media (max-width:900px) {
    .topbar-brand {
        /* 元素寬度 */ width: var(--sidebar-width);
        /* 字體大小 */ font-size: 14px;
        /* 內縮空間 */ padding: 0 12px;
    }
    .brand-input {
        /* 元素寬度 */ width: 120px;
        /* 字體大小 */ font-size: 14px;
    }
    .family-select {
        /* 最大寬度 */ max-width: 140px;
    }
}

@media (max-width:720px) {
    .topbar-brand {
        /* 顯示方式 */ display: none;
    }
    .menu-toggle {
        /* 顯示方式 */ display: inline-flex;
    }
    .brand-input {
        /* 元素寬度 */ width: 100px;
        /* 字體大小 */ font-size: 14px;
    }
    .topbar-main {
        /* 內縮空間 */ padding: 0 8px;
        /* 項目間距 */ gap: 6px;
    }
    .family-select {
        /* 顯示方式 */ display: none;
    }
    .topbar-select {
        /* 內縮空間 */ padding: 6px 8px;
        /* 字體大小 */ font-size: 12px;
    }
    .icon-btn span {
        /* 顯示方式 */ display: none;
    }
    .icon-btn {
        /* 內縮空間 */ padding: 6px 9px;
    }
    .sidebar-resizer {
        /* 顯示方式 */ display: none;
    }
    .sidebar {
        /* 定位方式 */ position: fixed;
        /* 頂部位置 */ top: 0;
        /* 底部位置 */ bottom: 0;
        /* 左側位置 */ left: 0;
        /* 元素變形 */ transform: translateX(-100%);
        /* 元素陰影 */ box-shadow: 6px 0 30px rgba(0,0,0,.2);
        /* 顯示層級 */ z-index: 300;
        /* 元素寬度 */ width: 240px;
        /* 動畫過渡 */ transition: transform .25s ease;
        /* 背景設定 */ background: var(--surface-card);
    }
    .sidebar.open {
        /* 元素變形 */ transform: translateX(0);
    }
    .sidebar-backdrop {
        /* 顯示方式 */ display: none;
        /* 定位方式 */ position: fixed;
        /* 定位範圍 */ inset: 0;
        /* 背景設定 */ background: rgba(0,0,0,.45);
        /* 顯示層級 */ z-index: 299;
    }
    .sidebar-backdrop.show {
        /* 顯示方式 */ display: block;
    }
    .grid label,
    .grid .form-field {
        /* 網格欄位範圍 */ grid-column: 1/-1 !important;
    }
    .photo-viewer-nav {
        /* 元素寬度 */ width: 40px;
        /* 元素高度 */ height: 40px;
        /* 字體大小 */ font-size: 20px;
    }
    .photo-viewer-nav.prev {
        /* 左側位置 */ left: 8px;
    }
    .photo-viewer-nav.next {
        /* 右側位置 */ right: 8px;
    }
    .photo-viewer-close {
        /* 頂部位置 */ top: 10px;
        /* 右側位置 */ right: 14px;
        /* 元素寬度 */ width: 36px;
        /* 元素高度 */ height: 36px;
    }
}

/* ========【L1nG 視覺系統】 設定 - 延續 Sims4-mods 的開發者專區風格 ======== */

/* 白 / 淺灰底、細線、低飽和文字、寬字距，並以藍色作為互動提示。 */

/* ========【全站字體】 設定 - 與主專案使用習慣一致 ======== */

/* ========【左上品牌】 設定 - 與側邊欄共用寬度並保持水平置中 ======== */

/* ========【L1nG 晴空導覽】 設定 - 僅此主題套用 L1nG 白灰藍視覺 ======== */

body[data-theme="ling"] .topbar {
    /* 元素高度 */ height: 58px;
    /* 背景設定 */ background: #fff;
    /* 下方邊框 */ border-bottom: 1px solid #eee;
    /* 元素陰影 */ box-shadow: none;
}

body[data-theme="ling"] .topbar-brand {
    /* 文字顏色 */ color: #555;
    /* 文字陰影 */ text-shadow: none;
}

body[data-theme="ling"] .brand-input {
    /* 文字顏色 */ color: #555;
    /* 文字陰影 */ text-shadow: none;
    /* 字體粗細 */ font-weight: 400;
    /* 字距設定 */ letter-spacing: 1.4px;
}

body[data-theme="ling"] .sidebar {
    /* 背景設定 */ background: #fff;
    /* 右側邊框 */ border-right: 1px solid #eee;
}

body[data-theme="ling"] .sidebar-group-title {
    /* 文字顏色 */ color: #777;
}

body[data-theme="ling"] .sidebar-btn {
    /* 圓角弧度 */ border-radius: 4px;
    /* 字距設定 */ letter-spacing: .2px;
}

body[data-theme="ling"] .sidebar-btn:not(.danger):not(.active):not(.lock-active) {
    /* 一般狀態文字顏色；危險 / 啟用狀態沿用各自的正式狀態色 */ color: #666;
}

body[data-theme="ling"] #genealogyCanvasViewport {
    /* 背景顏色 */ background-color: #fafafa;
    /* 背景圖片 */ background-image: radial-gradient(circle, rgba(0,0,0,.055) 1px, transparent 1px);
    /* 背景尺寸 */ background-size: 24px 24px;
}

/* ========【語言切換】 設定 - 共用於所有主題 ======== */

.language-switch {
    /* 相對定位 */ position: relative;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 項目間距 */ gap: 6px;
    /* 固定高度 */ height: 34px;
    /* 最小寬度 */ min-width: 88px;
    /* 內縮空間 */ padding: 0 10px;
    /* 邊框設定 */ border: 1px solid var(--navigation-control-border);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景顏色 */ background-color: var(--navigation-control-surface);
    /* 動畫過渡 */ transition: .15s;
}

/* ========【響應式設定】 設定 - 窄螢幕側邊欄與品牌寬度最佳化 ======== */

@media (max-width:900px) {
    .topbar-brand {
        /* 元素寬度 */ width: var(--sidebar-width);
        /* 最大寬度 */ max-width: none;
        /* 左右內縮 */ padding-left: 8px;
        /* 左右內縮 */ padding-right: 8px;
        /* 字體大小 */ font-size: 10px;
        /* 字距設定 */ letter-spacing: 1.1px;
    }
    .language-select {
        /* 最小寬度 */ min-width: 58px;
        /* 左側內縮 */ padding-left: 6px;
        /* 右側內縮 */ padding-right: 6px;
    }
}

/* ========【L1nG 專區】 設定 - 開發者工具 Icon 排列規範 ======== */

.icon-btn,
.sidebar-btn,
.filebtn,
.pet-add-btn,
.life-photo-add-btn {
    /* 垂直對齊 */ align-items: center;
}

.icon-btn>span,
.sidebar-btn>span,
.filebtn>span,
.pet-add-btn>span,
.life-photo-add-btn>span {
    /* 最小寬度 */ min-width: 0;
}

.icon-only {
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
}

/* ========【SVG 圖示資源】 設定 - 對應獨立 Bootstrap Icons SVG 檔案 ======== */

.icon-activity {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-activity);
}

.icon-arrow-counterclockwise {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-arrow-counterclockwise);
}

.icon-arrows-move {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-arrows-move);
}

.icon-asterisk {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-asterisk);
}

.icon-box-arrow-in-down {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-box-arrow-in-down);
}

.icon-box-arrow-up {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-box-arrow-up);
}

.icon-broadcast {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-broadcast);
}

.icon-bug {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-bug);
}

.icon-bullseye {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-bullseye);
}

.icon-check-circle {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-check-circle);
}

.icon-check-lg {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-check-lg);
}

.icon-circle {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-circle);
}

.icon-cloud-haze2 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-cloud-haze2);
}

.icon-crosshair { --l1ng-icon: var(--l1ng-icon-crosshair); }

.icon-database {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-database);
}

/* 族譜提取器專用：檔案與族譜分支（小尺寸 SVG） */
.icon-genealogy-extractor {
    /* 對齊方案 A：保留文件與族譜分支的間距及既有選單欄位配置 */
    --l1ng-icon: url("icons/genealogy-extractor.svg?v=20261011-thin-r6");
    width: 18px;
    height: 18px;
    margin-inline: -3px;
}

.icon-diagram-3 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-diagram-3);
}

.icon-exclamation-triangle {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-exclamation-triangle);
}

.icon-eye {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-eye);
}

.icon-feather {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-feather);
}

.icon-file-earmark-text {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-file-earmark-text);
}

.icon-flower1 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-flower1);
}

.icon-flower2 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-flower2);
}

.icon-gem {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-gem);
}

.icon-gender-ambiguous {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-gender-ambiguous);
}

.icon-gender-female {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-gender-female);
}

.icon-gender-male {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-gender-male);
}
/* 卡片姓名後方的專用性別 SVG，沿用既有 icon mask 系統。 */
.icon-gender-card-male { --l1ng-icon: var(--l1ng-icon-gender-card-male); }
.icon-gender-card-female { --l1ng-icon: var(--l1ng-icon-gender-card-female); }
.icon-gender-card-other { --l1ng-icon: var(--l1ng-icon-gender-card-other); }


.icon-heart {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-heart);
}

.icon-heart-fill {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-heart-fill);
}

.icon-heartbreak {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-heartbreak);
}

.icon-hearts {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-hearts);
}

.icon-cake2 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-cake2);
}

.icon-hourglass-split {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-hourglass-split);
}

.icon-house {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-house);
}

.icon-house-heart {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-house-heart);
}

.icon-image {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-image);
}

.icon-images {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-images);
}

.icon-info-circle {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-info-circle);
}

.icon-question-circle {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-question-circle);
}

.icon-keyboard {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-keyboard);
}

.icon-lightbulb {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-lightbulb);
}

.icon-lightning {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-lightning);
}

.icon-list {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-list);
}

.icon-lock {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-lock);
}

.icon-magic {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-magic);
}

.icon-moon {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-moon);
}

.icon-moon-stars {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-moon-stars);
}

.icon-mortarboard {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-mortarboard);
}

.icon-mouse {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-mouse);
}

.icon-palette {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-palette);
}

.icon-pencil-square {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-pencil-square);
}

.icon-people {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-people);
}

.icon-person {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person);
}

.icon-person-add {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-add);
}

.icon-person-check {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-check);
}

.icon-person-dash {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-dash);
}

.icon-person-heart {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-heart);
}

.icon-person-hearts {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-hearts);
}

.icon-person-plus {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-plus);
}

.icon-person-vcard {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-person-vcard);
}

.icon-plus-lg {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-plus-lg);
}

.icon-robot {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-robot);
}

.icon-stars {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-stars);
}

.icon-tag {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-tag);
}

.icon-tags {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-tags);
}

.icon-trash3 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-trash3);
}

.icon-unlock {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-unlock);
}

.icon-water {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-water);
}

.icon-x-lg {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-x-lg);
}

/* ========【族譜縮放】 設定 - 提升文字、線條與圖片清晰度 ======== */

#genealogyCanvasStage.is-transforming {
    /* 預先最佳化 */ will-change: transform;
}

#genealogyRelationshipLayer,
#genealogyRelationshipLabelLayer {
    /* 向量繪製精度 */ shape-rendering: geometricPrecision;
    /* 文字繪製方式 */ text-rendering: geometricPrecision;
}

.person-card {
    /* 預先最佳化 */ will-change: auto;
}

.person-card-avatar img,
.person-card-view-avatar img,
.person-library-avatar img,
.family-member-picker-avatar img,
.pet-item-avatar img {
    /* 圖片繪製方式 */ image-rendering: auto;
}

/* ========【導覽精修】 設定 - 僅調整頂部導覽，不影響族譜編輯表單 ======== */

.language-icon {
    /* 左側位置 */ left: 10px;
    /* 頂部位置 */ top: 50%;
    /* 滑鼠事件 */ pointer-events: none;
    /* 顯示層級 */ z-index: 2;
    /* 回到正常文流 */ position: static;
    /* 取消位移 */ transform: none;
    /* 元素寬度 */ width: 15px;
    /* 元素高度 */ height: 15px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 文字顏色 */ color: var(--navigation-control-text);
}

/* ========【語系字型】 設定 - 繁中、簡中與英文各自使用合適字型 ======== */

html[lang="zh-Hant"] body {
    /* 繁中字型 */ font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

html[lang="zh-Hans"] body {
    /* 簡中字型 */ font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

html[lang="en"] body {
    /* 英文字型 */ font-family: "Segoe UI", Arial, system-ui, sans-serif;
}

/* ========【SVG 圖示資源】 設定 - 語言切換地球圖示 ======== */

.icon-globe2 {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-globe2);
}

/* ========【響應式設定】 設定 - 小螢幕維持固定欄位邏輯 ======== */

@media (max-width:900px) {
    .family-select {
        /* 固定寬度 */ width: 140px;
        /* 最大寬度 */ max-width: 140px;
        /* 最小寬度 */ min-width: 140px;
    }
    .language-select {
        /* 固定寬度 */ width: 80px;
        /* 最小寬度 */ min-width: 80px;
    }
}

.family-select:hover,
.family-select:focus {
    /* 只換背景色，避免清掉自訂箭頭 */ background-color: var(--navigation-control-hover);
}


/* ========【語言切換】 設定 - 與相鄰工具按鈕一致置中 ======== */

.language-switch:hover,
.language-switch:focus-within {
    /* 背景顏色 */ background-color: var(--navigation-control-hover);
}

/* ========【關係名稱】 設定 - 英文與長文字依內容自適應 ======== */

/* ========【恢復預設】 設定 - 介面設定與範例資料分開 ======== */

.reset-actions {
    /* 顯示方式 */ display: flex;
    /* 自動換行 */ flex-wrap: wrap;
    /* 項目間距 */ gap: 8px;
    /* 下方間距 */ margin-bottom: 8px;
}

.reset-actions button {
    /* 內縮空間 */ padding: 8px 12px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
}

.reset-actions button:hover {
    /* 背景設定 */ background: var(--surface-item-hover);
    /* 邊框顏色 */ border-color: var(--action-primary);
}

.reset-actions button.danger {
    /* 文字顏色 */ color: #b04444;
    /* 邊框顏色 */ border-color: rgba(176,68,68,.28);
}

.reset-actions button.danger:hover {
    /* 背景設定 */ background: rgba(176,68,68,.08);
    /* 邊框顏色 */ border-color: rgba(176,68,68,.55);
    /* 文字顏色 */ color: #943434;
}

/* ========【共用 HTML 彈窗】 設定 - 取代瀏覽器原生彈窗 ======== */

.ui-dialog-mask {
    /* 固定定位 */ position: fixed;
    /* 四邊貼齊 */ inset: 0;
    /* 預設隱藏 */ display: none;
    /* 水平對齊 */ align-items: center;
    /* 垂直對齊 */ justify-content: center;
    /* 內縮空間 */ padding: 20px;
    /* 遮罩背景 */ background: rgba(0,0,0,.10);
    /* 毛玻璃 */ backdrop-filter: blur(5px);
    /* 顯示層級 */ z-index: 20000;
}

.ui-dialog-mask.show {
    /* 顯示方式 */ display: flex;
}

.ui-dialog:focus,
.ui-dialog-panel:focus,
.ui-dialog-backdrop:focus {
    outline: none;
}

.ui-dialog {
    /* 相對定位 */ position: relative;
    /* 元素寬度 */ width: min(420px, 92vw);
    /* 背景設定 */ background: var(--surface-card);
    /* 文字顏色 */ color: var(--text-primary);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 12px;
    /* 元素陰影 */ box-shadow: 0 10px 40px rgba(0,0,0,.22);
    /* 溢出處理 */ overflow: hidden;
}

.ui-dialog-header {
    /* 相對定位 */ position: relative;
    /* 顯示方式 */ display: flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 內縮空間 */ padding: 15px 52px;
    /* 背景設定 */ background: var(--surface-panel);
    /* 下方邊框 */ border-bottom: 1px solid var(--border-default);
    /* 字體大小 */ font-size: 16px;
    /* 字體粗細 */ font-weight: 600;
    /* 文字置中 */ text-align: center;
}

.ui-dialog-title-row {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
}


.ui-dialog-close {
    /* 絕對定位 */ position: absolute;
    /* 右側位置 */ right: 16px;
    /* 頂部位置 */ top: 50%;
    /* 垂直置中 */ transform: translateY(-50%);
    /* 元素寬度 */ width: 32px;
    /* 元素高度 */ height: 32px;
    /* 移除邊框 */ border: none;
    /* 背景透明 */ background: transparent;
    /* 文字顏色 */ color: var(--text-secondary);
    /* 字體大小 */ font-size: 22px;
    /* 圓角弧度 */ border-radius: 8px;
    /* 滑鼠指標 */ cursor: pointer;
}

.ui-dialog-close:hover {
    /* 背景設定 */ background: var(--surface-item-hover);
    /* 文字顏色 */ color: var(--text-primary);
}

.ui-dialog-body {
    /* 內縮空間 */ padding: 22px 24px;
}

.ui-dialog-message {
    /* 文字置中 */ text-align: center;
    /* 行距設定 */ line-height: 1.75;
    /* 保留換行 */ white-space: pre-wrap;
    /* 字體大小 */ font-size: 13px;
}

.ui-dialog-input {
    /* 元素寬度 */ width: 100%;
    /* 上方間距 */ margin-top: 16px;
    /* 內縮空間 */ padding: 10px 14px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 文字置中 */ text-align: center;
    /* 移除外框 */ outline: none;
    /* 預設隱藏 */ display: none;
}

.ui-dialog-input.show {
    /* 顯示方式 */ display: block;
}

.ui-dialog-input:focus {
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 元素陰影 */ box-shadow: 0 0 0 3px var(--brand-tint-start);
}

.ui-dialog-actions {
    /* 顯示方式 */ display: flex;
    /* 水平對齊 */ justify-content: flex-end;
    /* 項目間距 */ gap: 8px;
    /* 內縮空間 */ padding: 12px 16px 16px;
}

.ui-dialog-actions button {
    /* 最小寬度 */ min-width: 86px;
    /* 內縮空間 */ padding: 9px 16px;
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--surface-input);
    /* 文字顏色 */ color: var(--text-primary);
    /* 字體設定 */ font-family: inherit;
    /* 字體大小 */ font-size: 13px;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: .15s;
}

.ui-dialog-actions button:hover {
    /* 背景設定 */ background: var(--surface-item-hover);
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: var(--action-primary);
}

.ui-dialog-actions button.primary {
    /* 背景設定 */ background: var(--action-primary);
    /* 邊框顏色 */ border-color: var(--action-primary);
    /* 文字顏色 */ color: #fff;
}

.ui-dialog-actions button.primary:hover {
    /* 背景設定 */ background: var(--action-primary-hover);
    /* 邊框顏色 */ border-color: var(--action-primary-hover);
    /* 文字顏色 */ color: #fff;
}

.ui-dialog[data-kind="danger"] .ui-dialog-actions button.primary {
    /* 背景設定 */ background: #b44848;
    /* 邊框顏色 */ border-color: #b44848;
}

.ui-dialog[data-kind="danger"] .ui-dialog-actions button.primary:hover {
    /* 背景設定 */ background: #963838;
    /* 邊框顏色 */ border-color: #963838;
}

/* ========【共用確認彈窗】 設定 - alert / confirm / choice / prompt 操作按鈕統一置中 ======== */

#uiDialog .ui-dialog-actions {
    /* 共用確認彈窗不依賴按鈕數量判斷位置，避免新增第三操作後又回到靠右 */ justify-content: center;
}

/* 一般功能彈窗若操作列只有兩顆按鈕與 spacer，也一起置中；有計數器等其他資訊者維持原排版。 */

.ui-dialog-actions:has(> button:nth-of-type(2)):not(:has(> button:nth-of-type(3))):not(:has(> :not(button):not(.spacer))) {
    /* 兩顆按鈕置中 */ justify-content: center;
}

.ui-dialog-actions:has(> button:nth-of-type(2)):not(:has(> button:nth-of-type(3))):not(:has(> :not(button):not(.spacer))) > .spacer {
    /* 移除中間撐開空間，避免按鈕被推到左右兩端 */ display: none;
}

.toast-region {
    /* 固定定位 */ position: fixed;
    /* 右側位置 */ right: 18px;
    /* 下方位置 */ bottom: 18px;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 8px;
    /* 顯示層級 */ z-index: 21000;
    /* 滑鼠事件 */ pointer-events: none;
}

.ui-toast {
    /* 最大寬度 */ max-width: min(360px, 88vw);
    /* 內縮空間 */ padding: 10px 14px;
    /* 背景設定 */ background: var(--surface-card);
    /* 文字顏色 */ color: var(--text-primary);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 8px;
    /* 元素陰影 */ box-shadow: 0 8px 24px rgba(0,0,0,.16);
    /* 字體大小 */ font-size: 12.5px;
}

/* ========【遊戲族譜匯入狀態】 設定 - ZIP 讀取與資料轉換進度 ======== */
.game-import-status-mask {
    /* 定位方式 */ position: fixed;
    /* 定位範圍 */ inset: 0;
    /* 顯示層級 */ z-index: 22000;
    /* 顯示方式 */ display: none;
    /* 垂直對齊 */ align-items: center;
    /* 水平對齊 */ justify-content: center;
    /* 內縮空間 */ padding: 20px;
    /* 背景設定 */ background: var(--overlay-backdrop);
    /* 背景濾鏡 */ backdrop-filter: blur(3px);
}

.game-import-status-mask.show {
    /* 顯示方式 */ display: flex;
}

.game-import-status-card {
    /* 原有卡片加上第二列進度條 */ display: grid;
    grid-template-columns: 22px minmax(0,1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
    /* 最小寬度 */ min-width: min(340px, calc(100vw - 40px));
    /* 最大寬度 */ max-width: 460px;
    /* 內縮空間 */ padding: 18px 20px;
    /* 背景設定 */ background: var(--surface-card);
    /* 文字顏色 */ color: var(--text-primary);
    /* 邊框設定 */ border: 1px solid var(--border-default);
    /* 圓角弧度 */ border-radius: 12px;
    /* 元素陰影 */ box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.game-import-status-content {
    min-width: 0;
    /* 顯示方式 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 項目間距 */ gap: 4px;
}

.game-import-status-title {
    /* 字體大小 */ font-size: 14px;
    /* 行距設定 */ line-height: 1.4;
    /* 文字顏色 */ color: var(--text-primary);
}

.game-import-status-text {
    /* 字體大小 */ font-size: 12.5px;
    /* 行距設定 */ line-height: 1.45;
    /* 文字顏色 */ color: var(--text-secondary);
}

.game-import-status-percent {
    font-size: 16px;
    font-weight: 650;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.game-import-status-track {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border-default);
}
.game-import-status-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--action-primary);
    transition: width .12s ease;
}
.game-import-spinner {
    /* 元素寬度 */ width: 22px;
    /* 元素高度 */ height: 22px;
    /* 彈性尺寸 */ flex: 0 0 22px;
    /* 邊框設定 */ border: 2px solid var(--border-default);
    /* 上方邊框 */ border-top-color: var(--action-primary);
    /* 圓角弧度 */ border-radius: 50%;
    /* 動畫設定 */ animation: game-import-spin .7s linear infinite;
}

@keyframes game-import-spin {
    to {
        /* 元素變形 */ transform: rotate(360deg);
    }
}

/* ========【關係編輯】 設定 - 長英文名稱與多語系內容自適應 ======== */
@media (max-width: 760px) {
    .relationship-annotation-item {
        /* 小螢幕改為較彈性的雙欄，避免英文欄位被壓縮 */ grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
    }
    .relationship-annotation-reset {
        /* 重設按鈕維持內容寬度 */ width: fit-content;
    }
}

/* ========【導覽配色 Token】 設定 - 下拉選單與導覽互動獨立於主題強調色 ======== */

/* ========【家族名稱編輯】 設定 - 名稱底線自適應、鉛筆與文字同一水平線 ======== */
.family-identity { position:relative; display:inline-flex; align-items:center; min-width:0; max-width:100%; gap:4px; }
.family-name-editor { display:inline-flex; align-items:center; min-width:0; max-width:100%; flex:0 1 auto; gap:4px; overflow:visible; }
.family-name-editor .brand-input { flex:0 1 auto; min-width:68px; max-width:100%; width:88px; box-sizing:border-box; padding:2px 1px 3px; border:0; border-bottom:1px dashed color-mix(in srgb,var(--text-primary) 45%,transparent); border-radius:0; background:transparent; color:var(--text-primary); font-size:18px; font-weight:700; line-height:1.25; letter-spacing:.1px; outline:none; text-shadow:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.family-name-editor .brand-input:hover { background:transparent; border-bottom-color:color-mix(in srgb,var(--text-primary) 68%,transparent); }
.family-name-editor .brand-input:focus { background:transparent; border-bottom-style:solid; border-bottom-color:var(--action-primary); }
.family-name-edit-btn { width:22px; height:26px; flex:0 0 22px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; }
.family-name-edit-btn:hover,.family-name-edit-btn:focus-visible { background:var(--surface-item-hover); color:var(--action-primary); outline:none; }
.family-name-icon { width:14px; height:14px; color:currentColor; opacity:.86; transform:scaleX(1); transform-origin:center; }
/* ========【頂部自訂下拉選單】 設定 - 參考專案搜尋結果樣式 ======== */

.nav-select {
    /* 相對定位 */ position: relative;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 彈性收縮 */ flex-shrink: 0;
}

.nav-native-select {
    /* 從畫面隱藏 */ position: absolute !important;
    /* 元素寬度 */ width: 1px !important;
    /* 元素高度 */ height: 1px !important;
    /* 溢出隱藏 */ overflow: hidden !important;
    /* 裁切範圍 */ clip: rect(0 0 0 0) !important;
    /* 裁切路徑 */ clip-path: inset(50%) !important;
    /* 保持單行 */ white-space: nowrap !important;
    /* 不透明度 */ opacity: 0 !important;
    /* 滑鼠事件 */ pointer-events: none !important;
}

.nav-select-trigger {
    /* 元素寬度 */ width: 100%;
    /* 固定高度 */ height: 34px;
    /* 顯示方式 */ display: inline-flex;
    /* 垂直對齊 */ align-items: center;
    /* 水平排列 */ justify-content: flex-start;
    /* 項目間距 */ gap: 7px;
    /* 內縮空間 */ padding: 0 10px;
    /* 邊框設定 */ border: 1px solid var(--navigation-control-border);
    /* 圓角弧度 */ border-radius: 7px;
    /* 背景顏色 */ background: var(--navigation-control-surface);
    /* 文字顏色 */ color: var(--navigation-control-text);
    /* 字體大小 */ font-size: 13px;
    /* 字體粗細 */ font-weight: 400;
    /* 字體設定 */ font-family: inherit;
    /* 滑鼠指標 */ cursor: pointer;
    /* 動畫過渡 */ transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    /* 外框移除 */ outline: none;
    /* 換行方式 */ white-space: nowrap;
}

.nav-select-trigger:hover,
.nav-select-trigger:focus-visible,
.nav-select.open .nav-select-trigger {
    /* 背景顏色 */ background: var(--nav-button-hover-bg);
    /* 邊框顏色 */ border-color: var(--nav-dropdown-border);
    /* 文字顏色 */ color: var(--navigation-control-text);
}

.nav-select-value {
    /* 最小寬度 */ min-width: 0;
    /* 溢出隱藏 */ overflow: hidden;
    /* 文字省略 */ text-overflow: ellipsis;
    /* 單行顯示 */ white-space: nowrap;
}

.nav-select-chevron {
    /* 元素寬度 */ width: 12px;
    /* 元素高度 */ height: 12px;
    /* 左側自動推移 */ margin-left: auto;
    /* 右側內縮 */ margin-right: 5px;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 動畫過渡 */ transition: transform .18s ease;
    /* 透明度 */ opacity: .72;
}

.nav-select.open .nav-select-chevron {
    /* 展開旋轉 */ transform: rotate(180deg);
}

.nav-select-menu {
    /* 絕對定位 */ position: absolute;
    /* 頂部位置 */ top: calc(100% + 6px);
    /* 左側位置 */ left: 0;
    /* 最小寬度 */ min-width: 100%;
    /* 元素寬度 */ width: max-content;
    /* 最大寬度 */ max-width: 280px;
    /* 溢出隱藏 */ overflow: hidden;
    /* 顯示層級 */ z-index: 900;
    /* 預設隱藏 */ display: none;
    /* 背景使用主題安全色 */ background: var(--nav-dropdown-bg);
    /* 文字使用主題安全色 */ color: var(--nav-dropdown-text);
    /* 細邊框 */ border: 1px solid var(--nav-dropdown-border);
    /* 與專案搜尋結果一致的圓角 */ border-radius: 8px;
    /* 使用低調陰影，不搶過內容 */ box-shadow: 0 5px 15px rgba(0,0,0,.10);
}

.nav-select.open .nav-select-menu {
    /* 顯示方式 */ display: block;
}

.nav-select-option {
    /* 元素寬度 */ width: 100%;
    /* 最小寬度 */ min-width: 100%;
    /* 邊框移除 */ border: 0;
    /* 背景顏色 */ background: var(--nav-dropdown-bg);
    /* 文字顏色 */ color: var(--nav-dropdown-text);
    /* 字體粗細 */ font-weight: 400;
    /* 字體設定 */ font-family: inherit;
    /* 滑鼠指標 */ cursor: pointer;
    /* 換行方式 */ white-space: nowrap;
    /* 動畫過渡 */ transition: background-color .16s ease, color .16s ease;
    /* 溢出隱藏 */ overflow: hidden;
    /* 尾端省略 */ text-overflow: ellipsis;
    /* 搜尋結果同級的垂直內距 */ padding: 12px 15px;
    /* 搜尋結果同級字級 */ font-size: 12px;
    /* 結果文字置中 */ text-align: center;
    /* 項目分隔線 */ border-bottom: 1px solid var(--nav-dropdown-divider);
}

.nav-select-option:last-child {
    /* 移除末項分隔線 */ border-bottom: 0;
}

.nav-select-option:hover,
.nav-select-option:focus-visible {
    /* 外框移除 */ outline: none;
    /* Hover 維持中性灰階，不使用主題 Accent */ background: var(--nav-dropdown-hover-bg);
    /* Hover 保持足夠文字對比 */ color: var(--nav-dropdown-hover-text);
}

.nav-select-option.selected {
    /* 字體粗細 */ font-weight: 500;
    /* 已選項維持中性灰階，不使用主題 Accent */ background: var(--nav-dropdown-selected-bg);
    /* 已選項保持足夠文字對比 */ color: var(--nav-dropdown-selected-text);
}

.nav-select-family { position:static; width:24px; min-width:24px; max-width:24px; flex:0 0 24px; }

.nav-select-family .nav-select-value { display:none; }


.nav-select-language {
    /* 自動寬度 */ width: auto;
    /* 最小寬度移除 */ min-width: 0;
    /* 內縮移除 */ padding: 0;
    /* 邊框移除 */ border: 0;
    /* 背景透明 */ background: transparent;
}

.nav-select-language .language-trigger {
    /* 寬度依 ICON + 文字自然決定 */ width: auto;
    /* 不強制最小寬度 */ min-width: 0;
    /* 與 icon-btn 相同的上下左右內距 */ padding: 7px 11px;
    /* 不使用導覽 select 的固定高度 */ height: auto;
    /* 與相鄰按鈕維持相同最低高度 */ min-height: 32px;
    /* ICON 與文字間距與 icon-btn 一致 */ gap: 5px;
    /* 整組內容水平置中 */ justify-content: center;
    /* 整組內容垂直置中 */ align-items: center;
    /* 統一行高，避免文字看起來上下偏移 */ line-height: 1.2;
}

.nav-select-language .language-icon {
    /* 回到正常文流 */ position: static;
    /* 彈性收縮 */ flex-shrink: 0;
    /* 圖示寬度與旁邊工具按鈕一致 */ width: 1em;
    /* 圖示高度與旁邊工具按鈕一致 */ height: 1em;
    /* 圖示不額外位移 */ margin: 0;
    /* 保持正常方向 */ transform: none;
}

.nav-select-language .nav-select-value {
    /* 不保留額外固定文字寬度 */ min-width: 0;
    /* 文字水平置中 */ text-align: center;
}

.nav-select-language .nav-select-menu { left:auto; right:0; transform:none; width:max-content; min-width:100%; max-width:180px; }

/* ========【頂部搜尋結果】 設定 - Hover 與選取維持中性灰階 ======== */

/* ========【搜尋型下拉選單】 設定 - 所有主題維持可讀對比 ======== */

.icon-btn:hover,
.menu-toggle:hover {
    /* 懸停背景 */ background: var(--nav-button-hover-bg);
    /* 文字顏色 */ color: var(--navigation-control-text);
}

/* ========【新增 SVG 圖示】 設定 - 下拉箭頭與家族名稱編輯筆 ======== */

.icon-chevron-down {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-chevron-down);
}

/* 收合／展開家族欄沿用同一個現有 SVG，僅轉向，不另外新增圖示檔。 */
.icon-chevron-left {
    --l1ng-icon: var(--l1ng-icon-chevron-down);
    transform: rotate(90deg);
}
.icon-chevron-right {
    --l1ng-icon: var(--l1ng-icon-chevron-down);
    transform: rotate(-90deg);
}

.icon-pencil {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-pencil);
}

.icon-funnel {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-funnel);
}

/* ========【響應式導覽】 設定 - 小螢幕維持固定欄位但避免擠壓 ======== */


/* ========【語言按鈕容器】 設定 - 避免舊版 language-switch hover 產生第二層背景 ======== */

.nav-select-language:hover,
.nav-select-language:focus-within {
    /* 容器背景透明 */ background: transparent;
    /* 容器邊框透明 */ border-color: transparent;
}

/* ========【頂部下拉尺寸】 設定 - 欄位與結果面板維持固定寬度 ======== */

.nav-select-family .nav-select-menu { left:0; right:auto; width:max-content; min-width:100%; max-width:min(280px,calc(100vw - 24px)); }


/* ========【家族名稱輸入】 設定 - 固定導覽槽位、虛線依文字寬度自適應 ======== */

/* ========【語言切換】 設定 - 點擊範圍、尺寸與相鄰工具按鈕完全一致 ======== */

/* ========【頂部下拉結果】 設定 - 對齊既有專案搜尋結果的白底、細框、圓角與分隔線邏輯 ======== */

/* ========【共用下拉箭頭】 設定 - 編輯頁與導覽共用同一顆 chevron-down.svg ======== */

/* ========【網站表單選擇器】 設定 - 單選 / 可輸入建議 / 搜尋多選共用同一套 UI ======== */

.ui-control-source {
    /* 原生 select 只保留資料與既有程式 API，不再直接顯示作業系統選單 */ display: none;
}

.ui-single-select,
.ui-suggestion-combobox {
    /* 作為網站控制項定位基準 */ position: relative;
    /* 保持原欄位寬度 */ display: block;
    /* 佔滿父層 */ width: 100%;
    /* 允許 Grid / Flex 正確縮小 */ min-width: 0;
}

.ui-single-select-trigger {
    /* 單選不需要標籤換行 */ flex-wrap: nowrap;
    /* 保持文字單行 */ white-space: nowrap;
    /* 避免長文字撐破欄位 */ overflow: hidden;
    /* 文字靠左 */ text-align: left;
}

.ui-single-select-value {
    /* 吃掉剩餘空間 */ flex: 1 1 auto;
    /* 允許縮小 */ min-width: 0;
    /* 過長文字省略 */ overflow: hidden;
    /* 過長文字省略 */ text-overflow: ellipsis;
    /* 保持單行 */ white-space: nowrap;
}

.ui-single-select-trigger:disabled {
    /* 停用狀態 */ opacity: .55;
    /* 停用狀態 */ cursor: not-allowed;
}

.ui-single-select-menu,
.ui-suggestion-menu {
    /* 網站下拉永遠脫離 Dialog 裁切 */ position: fixed;
    /* 顯示在 Dialog 與 Tooltip 之上 */ z-index: 5200;
    /* Portal 不使用原本 absolute right */ right: auto;
    /* Portal 不使用原本外距 */ margin: 0;
    /* 防止內容溢出圓角 */ overflow: hidden;
    /* 使用網站一致陰影 */ box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.ui-single-select-menu .ui-select-options,
.ui-suggestion-menu .ui-select-options {
    /* 依視窗高度限制清單 */ max-height: min(300px,calc(100vh - 120px));
}

.ui-select-option.keyboard-active {
    /* 鍵盤目前指向項目 */ background: var(--nav-dropdown-hover-bg);
    /* 鍵盤目前指向項目 */ color: var(--nav-dropdown-hover-text);
    /* 讓鍵盤焦點清楚但不改排版 */ box-shadow: inset 0 0 0 1px var(--nav-dropdown-border);
}

.ui-select-option-selected-icon {
    /* 將選中符號推到右側 */ margin-left: auto;
    /* 固定圖示大小 */ width: 13px;
    /* 固定圖示大小 */ height: 13px;
    /* 不壓縮 */ flex: 0 0 13px;
}

.ui-suggestion-combobox > input {
    /* 為右側展開按鈕保留空間 */ padding-right: 34px;
}

.ui-suggestion-toggle {
    /* 放在輸入框右側 */ position: absolute;
    /* 右側距離 */ right: 4px;
    /* 垂直置中 */ top: 50%;
    /* 垂直置中 */ transform: translateY(-50%);
    /* 固定按鈕尺寸 */ width: 26px;
    /* 固定按鈕尺寸 */ height: 26px;
    /* 清除額外內距 */ padding: 0;
    /* 不額外畫第二層框 */ border: 0;
    /* 使用透明背景 */ background: transparent;
    /* 跟隨次要文字色 */ color: var(--text-secondary);
    /* 顯示為可操作 */ cursor: pointer;
    /* 對齊圖示 */ display: inline-flex;
    /* 水平置中 */ align-items: center;
    /* 垂直置中 */ justify-content: center;
    /* 圓角 */ border-radius: 5px;
}

.ui-suggestion-toggle:hover,
.ui-suggestion-toggle:focus-visible {
    /* 網站自己的 Hover */ background: var(--surface-item-hover);
    /* 提高對比 */ color: var(--text-primary);
    /* 不使用瀏覽器預設外框 */ outline: none;
}

.ui-suggestion-toggle .l1ng-icon {
    /* 固定圖示大小 */ width: 12px;
    /* 固定圖示大小 */ height: 12px;
    /* 展開動畫 */ transition: transform .15s ease;
}

.ui-suggestion-combobox.ui-select-open .ui-suggestion-toggle .l1ng-icon {
    /* 展開時旋轉 */ transform: rotate(180deg);
}

/* 搜尋型與單選型共用同一顆網站 Chevron。 */

.ui-select-chevron-icon {
    /* 固定在欄位右側 */ position: absolute;
    /* 右側安全距離 */ right: 10px;
    /* 垂直置中 */ top: 50%;
    /* 精準垂直置中 */ transform: translateY(-50%);
    /* 與導覽箭頭一致尺寸 */ width: 12px;
    /* 與導覽箭頭一致尺寸 */ height: 12px;
    /* 跟著目前主題變化 */ color: var(--text-secondary);
    /* 不攔截欄位點擊 */ pointer-events: none;
    /* 動畫過渡 */ transition: transform .15s ease, color .15s ease;
}

.ui-select-wrap.ui-select-open .ui-select-chevron-icon,
.ui-single-select.ui-select-open .ui-select-chevron-icon {
    /* 展開時旋轉 */ transform: translateY(-50%) rotate(180deg);
    /* 展開時提高對比 */ color: var(--text-primary);
}

.family-rel-kind-row .ui-single-select {
    /* 維持原關係種類欄寬 */ width: 100%;
}

.family-rel-kind-row .ui-single-select-trigger {
    /* 維持原欄位高度 */ min-height: 30px;
    /* 維持原內距 */ padding: 4px 28px 4px 7px;
    /* 維持原字級 */ font-size: 11px;
}

/* 原生 select 已不再負責視覺，因此不需要 color-scheme / appearance 過渡層。 */

/* ========【搜尋型下拉結果】 設定 - 主題安全色與中性 Hover / Selected ======== */

/* ========【人物資訊語意圖示】 設定 - 種族、存歿、寵物使用可直接辨識的 SVG ======== */

.icon-paw {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-paw);
}
.icon-dog { --l1ng-icon: var(--l1ng-icon-dog); }
.icon-cat { --l1ng-icon: var(--l1ng-icon-cat); }
.icon-horse { --l1ng-icon: var(--l1ng-icon-horse); }
.icon-cow { --l1ng-icon: var(--l1ng-icon-cow); }
.icon-bird { --l1ng-icon: var(--l1ng-icon-bird); }

.icon-tombstone {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-tombstone);
}

.icon-ghost-symbol {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-ghost-symbol);
}

.icon-alien-head {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-alien-head);
}

.icon-vampire-fangs {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-vampire-fangs);
}

.icon-wolf-head {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-wolf-head);
}

.icon-mermaid-tail {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-mermaid-tail);
}

.icon-fairy-wings {
    /* SVG 圖示路徑 */ --l1ng-icon: var(--l1ng-icon-fairy-wings);
}

/* ========【人物狀態圖示】 設定 - 在世、已故、幽靈使用不同語意色 ======== */

.person-meta-icon.status-alive {
    /* 在世圖示使用柔和綠色 */ color: #5f8a69;
}

.person-meta-icon.status-dead {
    /* 已故圖示沿用已故文字色 */ color: var(--person-deceased-text);
}

.person-meta-icon.status-ghost {
    /* 幽靈圖示沿用幽靈文字色 */ color: var(--person-ghost-text);
}

.person-meta-icon.race-icon {
    /* 種族圖示使用主題強調色提高辨識度 */ color: var(--action-primary);
}

body[data-theme="ink"] .person-meta-icon.status-alive,
body[data-theme="berrynight"] .person-meta-icon.status-alive,
body[data-theme="graphite"] .person-meta-icon.status-alive {
    /* 深色主題提高在世圖示亮度 */ color: #8fc59b;
}

/* ========【匯出面板】 設定 - 圖片匯出與 JSON 備份入口 ======== */
.export-mask {
    /* 定位 */ position: fixed;
    /* 邊界 */ inset: 0;
    /* 顯示層級 */ z-index: 1200;
    /* 版面配置 */ display: none;
    /* 對齊 */ align-items: center;
    /* 對齊 */ justify-content: center;
    /* 內距 */ padding: 24px;
    /* 背景設定 */ background: rgba(0,0,0,.38);
    /* 毛玻璃 */ backdrop-filter: blur(8px);
}

.export-mask.show {
    /* 顯示 */ display: flex;
}

.export-modal {
    /* 寬度 */ width: min(860px, 100%);
    /* 最大高度 */ max-height: min(760px, calc(100vh - 48px));
    /* 捲動 */ overflow: auto;
    /* 背景設定 */ background: var(--surface-card);
    /* 圓角 */ border-radius: 24px;
    /* 邊框 */ border: 1px solid var(--relationship-parent);
    /* 陰影 */ box-shadow: 0 32px 80px rgba(36, 32, 30, .22);
}

.export-header {
    /* 版面配置 */ display: flex;
    /* 對齊 */ align-items: flex-start;
    /* 對齊 */ justify-content: space-between;
    /* 間距 */ gap: 16px;
    /* 內距 */ padding: 24px 24px 16px;
    /* 邊框 */ border-bottom: 1px solid var(--relationship-parent);
}

.export-title-group {
    /* 版面配置 */ display: grid;
    /* 間距 */ gap: 8px;
}

.export-title-group h2 {
    /* 版面配置 */ display: inline-flex;
    /* 對齊 */ align-items: center;
    /* 間距 */ gap: 10px;
    /* 外距 */ margin: 0;
    /* 字級 */ font-size: 24px;
}

.export-title-group p {
    /* 外距 */ margin: 0;
    /* 顏色 */ color: var(--text-secondary);
    /* 行高 */ line-height: 1.7;
}

.export-grid {
    /* 版面配置 */ display: grid;
    /* 欄位 */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 間距 */ gap: 18px;
    /* 內距 */ padding: 22px 24px 24px;
}

.export-section {
    /* 版面配置 */ display: flex;
    /* 排列方向 */ flex-direction: column;
    /* 間距 */ gap: 16px;
    /* 內距 */ padding: 18px;
    /* 背景設定 */ background: var(--surface-panel);
    /* 圓角 */ border-radius: 20px;
    /* 邊框 */ border: 1px solid var(--relationship-parent);
}

.export-section-head {
    /* 版面配置 */ display: grid;
    /* 間距 */ gap: 8px;
}

.export-section-head h3 {
    /* 版面配置 */ display: inline-flex;
    /* 對齊 */ align-items: center;
    /* 間距 */ gap: 10px;
    /* 外距 */ margin: 0;
    /* 字級 */ font-size: 18px;
}

.export-section-head p {
    /* 外距 */ margin: 0;
    /* 顏色 */ color: var(--text-secondary);
    /* 行高 */ line-height: 1.7;
}

.export-size-list {
    /* 版面配置 */ display: grid;
    /* 間距 */ gap: 12px;
}

.export-background-block { display:grid; gap:8px; padding-top:2px; }
.export-option-label { color:var(--text-primary); font-size:12px; font-weight:700; }
.export-background-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.export-background-option { position:relative; display:flex; align-items:center; min-height:24px; padding:2px 0; border:0; border-radius:0; background:transparent; color:var(--text-primary); font-size:11.5px; line-height:1.25; cursor:pointer; }
.export-background-option input { margin:0 6px 0 0; accent-color:var(--action-primary); }
.export-background-option:has(input:checked) { border-color:transparent; background:transparent; }

.export-size-option {
    /* 版面配置 */ display: block;
    /* 游標 */ cursor: pointer;
}

.export-size-option input {
    /* 隱藏 */ position: absolute;
    /* 透明 */ opacity: 0;
    /* 不接收 */ pointer-events: none;
}

.export-size-card {
    /* 版面配置 */ display: grid;
    /* 間距 */ gap: 6px;
    /* 內距 */ padding: 14px 15px;
    /* 背景設定 */ background: var(--surface-item);
    /* 邊框 */ border: 1px solid var(--relationship-parent);
    /* 圓角 */ border-radius: 16px;
    /* 動畫過渡 */ transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.export-size-option:hover .export-size-card,
.export-size-option input:focus-visible + .export-size-card {
    /* 背景設定 */ background: var(--surface-item-hover);
    /* 邊框 */ border-color: var(--border-default);
    /* 位移 */ transform: translateY(-1px);
}

.export-size-option input:checked + .export-size-card {
    /* 邊框 */ border-color: var(--action-primary);
    /* 背景設定 */ background: color-mix(in srgb, var(--action-primary) 10%, var(--surface-item));
    /* 陰影 */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--action-primary) 35%, transparent);
}

.export-size-name {
    /* 字重 */ font-weight: 700;
    /* 顏色 */ color: var(--text-primary);
}

.export-size-note {
    /* 顏色 */ color: var(--text-secondary);
    /* 字級 */ font-size: 13px;
    /* 行高 */ line-height: 1.6;
}

.export-json-note {
    /* 版面配置 */ display: flex;
    /* 對齊 */ align-items: flex-start;
    /* 間距 */ gap: 10px;
    /* 內距 */ padding: 14px 15px;
    /* 背景設定 */ background: var(--surface-item);
    /* 邊框 */ border: 1px solid var(--relationship-parent);
    /* 圓角 */ border-radius: 16px;
    /* 顏色 */ color: var(--text-secondary);
    /* 行高 */ line-height: 1.7;
}

.export-actions {
    /* 版面配置 */ display: flex;
    /* 水平對齊 */ justify-content: flex-end;
    /* 垂直對齊 */ align-items: flex-end;
    /* 將左右卡片的匯出按鈕固定在相同底部基準 */ margin-top: auto;
    /* 上方內距 */ padding-top: 4px;
}

.export-actions button,
.export-actions button.primary {
    /* 固定寬度 */ width: 148px;
    /* 最小寬度 */ min-width: 148px;
    /* 高度 */ min-height: 37px;
    /* 不隨容器拉伸 */ flex: 0 0 auto;
    /* 內縮空間 */ padding: 8px 14px;
    /* 邊框設定 */ border: 1px solid var(--action-primary);
    /* 圓角弧度 */ border-radius: 8px;
    /* 背景設定 */ background: var(--action-primary);
    /* 文字顏色 */ color: #fff;
    /* 字體大小 */ font-size: 13px;
    /* 字體粗細 */ font-weight: 600;
    /* 動畫過渡 */ transition: .15s;
}

.export-actions button:hover,
.export-actions button.primary:hover {
    /* 背景設定 */ background: var(--action-primary-hover);
    /* 邊框顏色 */ border-color: var(--action-primary-hover);
    /* 文字顏色 */ color: #fff;
}

.export-actions button:disabled {
    /* 透明度 */ opacity: .58;
    /* 滑鼠指標 */ cursor: wait;
}

/* ========【共用按鈕處理狀態】 設定 - 儲存、匯出、清理等等待操作統一使用跳動圓點 ======== */
button.is-loading {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:6px;
    white-space:nowrap;
    cursor:wait;
}

button.is-loading .button-loading-label {
    flex:0 0 auto;
    white-space:nowrap;
}

.button-loading-dots {
    display:inline-flex;
    flex:0 0 auto;
    align-items:flex-end;
    gap:2px;
    height:9px;
    white-space:nowrap;
}

.button-loading-dots > span {
    width:3px;
    height:3px;
    flex:0 0 3px;
    border-radius:50%;
    background:currentColor;
    opacity:.45;
    animation:genealogy-loading-dot .9s ease-in-out infinite;
}

.button-loading-dots > span:nth-child(2) {
    animation-delay:.12s;
}

.button-loading-dots > span:nth-child(3) {
    animation-delay:.24s;
}

@keyframes genealogy-loading-dot {
    0%,60%,100% {
        transform:translateY(0);
        opacity:.45;
    }
    30% {
        transform:translateY(-4px);
        opacity:1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button-loading-dots > span {
        animation:none;
        opacity:.8;
    }
}

@media (max-width: 780px) {
    .export-grid {
        /* 欄位 */ grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .export-mask {
        /* 內距 */ padding: 14px;
    }

    .export-header {
        /* 內距 */ padding: 18px 18px 14px;
    }

    .export-grid {
        /* 內距 */ padding: 16px 18px 18px;
    }

    .export-actions button {
        /* 寬度 */ width: 100%;
        /* 最小寬度 */ min-width: 0;
    }
}


/* ========【正式新版外殼】 家族檔案欄、精簡頂欄、畫布情境工具 ======== */
:root { --sidebar-width:300px; --sidebar-default-width:300px; }
.icon-three-dots { --l1ng-icon:var(--l1ng-icon-three-dots); }
.icon-dash-lg { --l1ng-icon:var(--l1ng-icon-dash-lg); }
.icon-arrows-fullscreen { --l1ng-icon:var(--l1ng-icon-arrows-fullscreen); }

.topbar { position:relative; height:52px; min-height:52px; align-items:stretch; border-bottom:1px solid var(--border-default); box-shadow:none; background:linear-gradient(120deg,var(--brand-gradient-start) 0%,var(--brand-gradient-end) 100%); }
.topbar-brand { width:auto; min-width:210px; padding:0 14px; justify-content:flex-start; gap:8px; font-size:10.5px; letter-spacing:1.15px; text-align:left; }
.topbar-brand-group { display:flex; align-items:center; gap:9px; min-width:0; white-space:nowrap; }
.topbar-creator-link,.topbar-section-brand { text-decoration:none; }
.topbar-creator-link { color:color-mix(in srgb,var(--navigation-text) 64%,transparent); font-size:12px; letter-spacing:1.4px; transition:color .15s ease; }
.topbar-creator-link:hover,.topbar-creator-link:focus-visible { color:var(--action-primary); outline:none; }
.topbar-brand-divider { color:color-mix(in srgb,var(--navigation-text) 35%,transparent); }
.topbar-section-brand { color:var(--navigation-text); font-size:13px; font-weight:650; letter-spacing:1.4px; }
.topbar-help-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; border:0; border-radius:50%; background:transparent; color:var(--navigation-text-muted); font:inherit; cursor:pointer; }
.topbar-help-btn:hover,.topbar-help-btn:focus-visible { background:var(--nav-button-hover-bg); color:var(--action-primary); outline:none; }
.topbar-help-btn .l1ng-icon { width:15px; height:15px; }
.menu-toggle { display:inline-flex; width:30px; height:30px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--navigation-text); }
.topbar-main { gap:8px; padding:0 12px; }
.topbar-primary-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.topbar-text-btn,.topbar-icon-only { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 9px; border:0; border-radius:5px; background:transparent; color:var(--navigation-text); font:inherit; font-size:12.5px; }
.topbar-icon-only { width:32px; padding:0; }
.topbar-text-btn:hover,.topbar-icon-only:hover { background:var(--nav-button-hover-bg); }
.topbar-export-btn { color:var(--action-primary); font-weight:600; }

.ui-menu { position:relative; display:inline-flex; }
.ui-menu-popover { display:none; position:absolute; z-index:800; min-width:188px; padding:5px; border:1px solid var(--nav-dropdown-border); border-radius:7px; background:var(--nav-dropdown-bg); color:var(--nav-dropdown-text); box-shadow:0 10px 28px rgba(0,0,0,.12); }
.ui-menu.open>.ui-menu-popover { display:block; }

.ui-menu-popover.ui-menu-body-portal {
    display:block;
    position:fixed;
    z-index:5200;
}

.topbar-more-popover { top:calc(100% + 8px); right:0; }
.family-actions-popover,.member-add-popover,.member-manage-popover { top:calc(100% + 5px); right:0; }
.ui-menu-item { width:100%; display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 9px; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; font-size:12px; text-align:left; white-space:nowrap; cursor:pointer; text-decoration:none; }
.ui-menu-item:hover { background:var(--nav-dropdown-hover-bg); color:var(--nav-dropdown-hover-text); }
.ui-menu-item.danger { color:#b8483c; }
.ui-menu-divider { height:1px; margin:4px 3px; background:var(--nav-dropdown-divider); }
.ui-menu-language-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 7px; }
.ui-menu-language-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-secondary); }

/* ========【頂部人物篩選】 設定 - 狀態與性別交叉篩選 ======== */
.topbar-filter-menu { position:absolute; left:50%; top:50%; z-index:40; flex:0 0 auto; transform:translate(-50%,-50%); }
.topbar-filter-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 9px; border:0; border-radius:5px; background:transparent; color:var(--navigation-text); font:inherit; font-size:12.5px; white-space:nowrap; }
.topbar-filter-btn:hover { background:var(--nav-button-hover-bg); }
.topbar-filter-btn.active { color:var(--action-primary); background:var(--brand-tint-start); }
.topbar-filter-count { color:currentColor; font-size:11px; font-variant-numeric:tabular-nums; }
.topbar-filter-popover { left:50%; right:auto; top:calc(100% + 6px); width:min(520px,calc(100vw - 32px)); padding:10px 12px 8px; transform:translateX(-50%); }
.topbar-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:18px; row-gap:0; align-items:start; }
.topbar-filter-column { min-width:0; display:flex; flex-direction:column; }
.topbar-filter-column:nth-child(1) { grid-column:1; grid-row:1; }
.topbar-filter-column:nth-child(2) { grid-column:2; grid-row:1; }
.topbar-filter-column:nth-child(3) { grid-column:3; grid-row:1; }
.topbar-filter-group { margin:0; padding:0; border:0; min-width:0; }
.topbar-filter-column .topbar-filter-group + .topbar-filter-group { margin-top:24px; padding-top:0; border-top:0; }
.topbar-filter-group legend { width:100%; margin:0 0 4px; padding:0; color:var(--text-secondary); font-size:10.5px; font-weight:650; letter-spacing:.35px; }
.topbar-filter-option { display:flex; align-items:center; gap:8px; min-height:29px; padding:3px 2px; color:var(--nav-dropdown-text); font-size:12px; cursor:pointer; }
/* 篩選勾選框：背景沿用各主題強調色，勾號依顏色對比選深色或白色。 */
/* 各主題沿用 --action-primary 作為勾選底色；勾號則依主題色亮度配對。 */
:root { --filter-checkmark-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.2 3.2L13 4.7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-theme="ink"],body[data-theme="berrynight"],body[data-theme="graphite"] { --filter-checkmark-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.2 3.2L13 4.7' stroke='%23172636' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* 自訂主題勾號由 chooseCustomTheme() 按使用者選的強調色計算。 */
.topbar-filter-option input[type="checkbox"],
.person-card-menu-check input[type="checkbox"] {
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin:0;
  flex:0 0 14px;
  border:1px solid var(--border-default);
  border-radius:3px;
  background-color:var(--surface-input);
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px 11px;
}
.topbar-filter-option input[type="checkbox"]:checked,
.person-card-menu-check input[type="checkbox"]:checked {
  border-color:var(--action-primary);
  background-color:var(--action-primary);
  background-image:var(--filter-checkmark-image);
}
.topbar-filter-option input[type="checkbox"]:focus-visible,
.person-card-menu-check input[type="checkbox"]:focus-visible {
  outline:2px solid var(--action-primary);
  outline-offset:2px;
}
.topbar-filter-option:hover span { color:var(--action-primary); }
.topbar-filter-footer { display:flex; justify-content:flex-end; padding-top:6px; border-top:1px solid var(--nav-dropdown-divider); }
.topbar-filter-footer button { padding:4px 2px; border:0; background:transparent; color:var(--text-secondary); font:inherit; font-size:11px; }
.topbar-filter-footer button:hover { color:var(--action-primary); }
.topbar-more-popover .language-switch { min-width:82px; height:30px; padding:0; border:0; background:transparent; }
.topbar-more-popover .language-trigger { min-height:30px; height:30px; }
.topbar-more-popover .nav-select-language .nav-select-menu { right:0; left:auto; top:calc(100% + 4px); }

.app-body { flex:1; display:flex; min-height:0; overflow:hidden; }
.sidebar-backdrop { display:none; }
.family-panel { position:relative; width:var(--sidebar-width); flex:0 0 var(--sidebar-width); min-width:0; display:flex; flex-direction:column; background:var(--surface-card); border-right:1px solid var(--border-default); z-index:35; transition:width .22s ease,flex-basis .22s ease,transform .22s ease; overflow:hidden; }
.family-panel-scroll {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:36px;
}
.family-cover-section { padding:14px 14px 0; }
.family-cover { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:7px; background:var(--surface-panel); border:1px solid var(--border-default); }
.family-cover>img { width:100%; height:100%; object-fit:cover; display:block; }
.family-cover-collage { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:1px; background:var(--border-default); }
.family-cover-collage:empty { display:none; }
.family-cover-collage-item { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; overflow:hidden; background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end)); color:var(--avatar-text); font-size:22px; font-weight:650; }
.family-cover-collage-item img { width:100%; height:100%; object-fit:cover; }
.family-cover-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-secondary); font-size:11px; }
.family-cover-empty .l1ng-icon { width:22px; height:22px; opacity:.65; }
.family-cover-actions { position:absolute; right:7px; bottom:7px; display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.family-cover:hover .family-cover-actions,.family-cover:focus-within .family-cover-actions { opacity:1; }
.family-cover-action { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; padding:0; border:1px solid rgba(255,255,255,.72); border-radius:5px; background:rgba(25,29,34,.68); color:#fff; backdrop-filter:blur(4px); cursor:pointer; }
.family-cover-action:hover { background:rgba(25,29,34,.84); }

.family-profile-section { padding:14px 15px 13px; border-bottom:1px solid var(--border-default); }
.family-title-row { display:flex; align-items:center; gap:4px; min-width:0; }
.family-title-row .family-identity { flex:1 1 auto; min-width:0; max-width:100%; }
.family-title-row .family-name-editor { flex:0 1 auto; min-width:0; max-width:calc(100% - 30px); }
.family-title-row .nav-select-family { flex:0 0 26px; width:26px; min-width:26px; max-width:26px; }
.family-title-row .family-actions-menu { flex:0 0 auto; }
.family-switch-btn,.family-title-menu-btn,.family-section-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; min-width:26px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--text-secondary); }
.family-switch-btn:hover,.family-title-menu-btn:hover,.family-section-icon:hover { background:var(--nav-button-hover-bg); color:var(--text-primary); }
.family-switch-btn .nav-select-value { display:none; }
.family-title-row .nav-select-family .nav-select-menu { left:0; right:auto; width:max-content; min-width:100%; max-width:min(280px,calc(100vw - 24px)); }

/* ========【家族下拉選單】 設定 - 脫離側欄裁切，先向下排列，超量才向右增加欄位 ======== */
.nav-select-menu.family-nav-portal {
    position:fixed;
    z-index:1400;
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--family-menu-rows, 8), minmax(30px, auto));
    grid-auto-columns:minmax(168px, max-content);
    align-content:start;
    overflow-x:auto;
    overflow-y:hidden;
    width:max-content;
    min-width:180px;
    padding:5px;
    border:1px solid var(--nav-dropdown-border);
    /* 左上角與左側分類便利貼接合，其餘角保留原圓角 */ border-radius:0 6px 6px 6px;
    background:var(--nav-dropdown-bg);
    box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.nav-select-menu.family-nav-portal .nav-select-option {
    min-width:168px;
    white-space:nowrap;
}
/* ========【家族選擇器索引】 設定 - 左側網頁分頁式 EA 族譜 / 大家族索引，不改動原多欄下拉 ======== */
.family-nav-tabs-portal {
    position:fixed;
    z-index:1401;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:52px;
}

.family-nav-index-tab {
    position:relative;
    width:52px;
    height:76px;
    min-width:52px;
    margin:0;
    padding:6px 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--nav-dropdown-border);
    border-radius:8px 0 0 8px;
    background:color-mix(in srgb,var(--surface-panel) 88%,var(--nav-dropdown-bg));
    color:color-mix(in srgb,var(--text-secondary) 82%,transparent);
    font:inherit;
    font-weight:600;
    cursor:pointer;
    box-sizing:border-box;
    transition:none;
    animation:none;
}

.family-nav-index-tab + .family-nav-index-tab {
    margin-top:-1px;
}

.family-nav-index-tab:not(.active):hover {
    background:var(--nav-dropdown-hover-bg);
    color:var(--nav-dropdown-hover-text);
}

.family-nav-index-tab.active {
    z-index:2;
    border-right-color:transparent;
    background:var(--nav-dropdown-bg);
    color:var(--action-primary);
    font-weight:750;
}

.family-nav-index-tab.active::after {
    content:"";
    position:absolute;
    z-index:3;
    top:-1px;
    right:-2px;
    bottom:-1px;
    width:3px;
    background:var(--nav-dropdown-bg);
    pointer-events:none;
}

.family-nav-tab-lines {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:10.5px;
    font-weight:650;
    line-height:1;
    letter-spacing:.5px;
}

.family-nav-tab-lines .family-nav-tab-ea {
    font-weight:750;
    white-space:nowrap;
}

.family-nav-tab-label-en {
    display:block;
    width:max-content;
    white-space:nowrap;
    font-size:9px;
    font-weight:700;
    line-height:1;
    letter-spacing:.55px;
    transform:rotate(-90deg);
    transform-origin:center;
}

.family-bio { width:100%; min-height:54px; margin-top:9px; padding:0; border:0; outline:none; resize:vertical; background:transparent; color:var(--text-secondary); font:inherit; font-size:11.5px; line-height:1.55; }
.family-bio::placeholder { color:color-mix(in srgb,var(--text-secondary) 62%,transparent); }
.family-bio:focus { color:var(--text-primary); }
.family-stats { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:7px; color:var(--text-secondary); font-size:10.5px; line-height:1.4; }
.family-stats strong { color:var(--text-primary); font-weight:650; }
.family-stat-sep { opacity:.45; }
.family-game-date { margin-top:5px; color:var(--text-secondary); font-size:10.5px; line-height:1.4; font-variant-numeric:tabular-nums; }
.family-game-date strong { color:var(--text-primary); font-weight:650; }

.family-members-section {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:11px 8px 10px;
}
.family-section-heading {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    padding:0 7px 7px;
    color:var(--text-secondary);
    font-size:11.5px;
    font-weight:650;
    letter-spacing:.3px;
}
.family-section-title {
    min-width:0;
    display:flex;
    align-items:center;
    gap:4px;
}
.family-section-title > span:first-child {
    flex:0 0 auto;
    white-space:nowrap;
}
.family-generation-sort {
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:4px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    transition:background-color .15s ease;
}
.family-generation-sort:hover,
.family-generation-sort:focus-visible {
    background:var(--surface-item-hover);
    outline:none;
}
.family-generation-sort-icon {
    position:relative;
    width:18px;
    height:18px;
    display:inline-block;
}
.family-generation-sort-icon .generation-sort-arrow {
    position:absolute;
    inset:0;
    width:18px;
    height:18px;
    color:var(--text-secondary);
    opacity:.38;
    transition:color .15s ease,opacity .15s ease;
}
.icon-sort-generation-up {
    --l1ng-icon:var(--l1ng-icon-sort-generation-up);
}
.icon-sort-generation-down {
    --l1ng-icon:var(--l1ng-icon-sort-generation-down);
}
.family-generation-sort[data-sort-order="asc"] .generation-sort-arrow-up,
.family-generation-sort[data-sort-order="desc"] .generation-sort-arrow-down {
    color:var(--action-primary);
    opacity:1;
}
.family-generation-sort[data-sort-order="asc"] .generation-sort-arrow-down,
.family-generation-sort[data-sort-order="desc"] .generation-sort-arrow-up {
    color:var(--text-secondary);
    opacity:.34;
}
.family-generation-sort:hover .generation-sort-arrow,
.family-generation-sort:focus-visible .generation-sort-arrow {
    opacity:.72;
}
.family-generation-sort[data-sort-order="asc"]:hover .generation-sort-arrow-up,
.family-generation-sort[data-sort-order="desc"]:hover .generation-sort-arrow-down,
.family-generation-sort[data-sort-order="asc"]:focus-visible .generation-sort-arrow-up,
.family-generation-sort[data-sort-order="desc"]:focus-visible .generation-sort-arrow-down {
    opacity:1;
}
.family-member-actions {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1px;
}
.family-member-actions #familyMemberAddMenu[hidden],
.family-member-actions .family-section-batch-remove[hidden],
.family-member-remove-toolbar[hidden] {
    display:none;
}
.family-section-batch-remove {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:26px;
    padding:4px 7px;
    border:0;
    border-radius:4px;
    background:transparent;
    color:var(--text-secondary);
    font:inherit;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
}
.family-section-batch-remove:hover,
.family-section-batch-remove:focus-visible {
    background:var(--surface-item-hover);
    color:#b03a2e;
}
.family-section-batch-remove .l1ng-icon {
    width:13px;
    height:13px;
}

/* ========【家族成員批量移除】 設定 - 頭像疊加半透明選取提示，不改動原成員資訊 ======== */
.family-member-remove-toolbar {
    display:flex;
    align-items:center;
    gap:5px;
}
.family-member-remove-toolbar[hidden] {
    display:none;
}
.family-member-remove-count {
    color:var(--text-secondary);
    font-size:10.5px;
    white-space:nowrap;
}
.family-member-remove-cancel,
.family-member-remove-confirm {
    min-height:26px;
    padding:4px 7px;
    border:0;
    border-radius:4px;
    font:inherit;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
}
.family-member-remove-cancel {
    background:transparent;
    color:var(--text-secondary);
}
.family-member-remove-cancel:hover,
.family-member-remove-cancel:focus-visible {
    background:var(--surface-item-hover);
    color:var(--text-primary);
}
.family-member-remove-confirm {
    background:#b03a2e;
    color:#fff;
}
.family-member-remove-confirm:hover:not(:disabled),
.family-member-remove-confirm:focus-visible:not(:disabled) {
    background:#953126;
}
.family-member-remove-confirm:disabled {
    opacity:.38;
    cursor:default;
}

.family-member-list {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:1px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
}
.family-member-empty { padding:18px 8px; color:var(--text-secondary); text-align:center; font-size:11.5px; line-height:1.5; }
.family-member-row {
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 26px;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:5px 6px;
    border-radius:5px;
    cursor:pointer;
    transition:background-color .18s ease;
}
.family-member-row:hover {
    background:var(--genealogy-roster-item-hover);
}
.family-member-row.remove-selected,
.family-member-row.remove-selected:hover {
    background:rgba(176,58,46,.16);
}

.family-member-avatar-wrap {
    position:relative;
    width:36px;
    height:36px;
}
.family-member-avatar {
    width:36px;
    height:36px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
    color:var(--avatar-text);
    font-size:13px;
    font-weight:650;
}
.family-member-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.family-member-remove-select {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(176,58,46,.42);
    color:rgba(255,255,255,.92);
    opacity:0;
    transform:scale(.97);
    pointer-events:none;
    cursor:pointer;
    transition:opacity .22s ease,transform .22s ease,background-color .18s ease;
}
.family-member-row.remove-mode .family-member-remove-select {
    pointer-events:auto;
}
.family-member-row.remove-mode .family-member-remove-select:not(.selected) {
    animation:family-member-remove-pulse 1.05s ease-in-out infinite;
}
.family-member-remove-select.selected {
    opacity:.52;
    transform:scale(1);
    background:rgba(176,58,46,.52);
    color:#fff;
    animation:none;
}
.family-member-remove-select .l1ng-icon {
    width:16px;
    height:16px;
}
@keyframes family-member-remove-pulse {
    0%,100% {
        opacity:.38;
        transform:scale(.97);
    }
    50% {
        opacity:.64;
        transform:scale(1);
    }
}

.family-member-copy { min-width:0; }
.family-member-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-size:12px; font-weight:600; line-height:1.25; }
.family-member-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; color:var(--text-secondary); font-size:10px; line-height:1.25; }
.family-panel-collapse { position:absolute; left:0; right:0; bottom:0; height:36px; display:flex; align-items:center; justify-content:center; border:0; border-top:1px solid var(--border-default); background:var(--surface-card); color:var(--text-secondary); }
.family-panel-collapse:hover { color:var(--action-primary); background:var(--surface-panel); }

.family-panel-resizer { width:7px; margin-left:-4px; margin-right:-3px; position:relative; flex:0 0 7px; z-index:45; cursor:col-resize; touch-action:none; background:transparent; outline:none; }
.family-panel-resizer::before { content:""; position:absolute; top:0; bottom:0; left:3px; width:1px; background:transparent; transition:background-color .15s; }
.family-panel-resizer:hover::before,.family-panel-resizer:focus-visible::before,body.sidebar-resizing .family-panel-resizer::before { background:var(--action-primary); }
body.sidebar-resizing { cursor:col-resize; user-select:none; }
body.sidebar-resizing * { cursor:col-resize !important; }
body.family-panel-collapsed .family-panel { width:0; flex-basis:0; border-right:0; }
body.family-panel-collapsed .family-panel-resizer { display:none; }
body.family-panel-collapsed .topbar-brand { min-width:210px; }

.main-area { flex:1; min-width:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.canvas-toolbar { position:absolute; top:12px; right:12px; z-index:24; display:flex; align-items:center; gap:1px; padding:4px; border:1px solid var(--border-default); border-radius:6px; background:color-mix(in srgb,var(--surface-card) 94%,transparent); box-shadow:0 4px 15px rgba(0,0,0,.07); backdrop-filter:blur(8px); }
.canvas-tool { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:5px 8px; border:0; border-radius:4px; background:transparent; color:var(--text-secondary); font:inherit; font-size:11px; white-space:nowrap; }
.canvas-tool:hover { background:var(--surface-item-hover); color:var(--text-primary); }
.canvas-tool.active,.canvas-tool.lock-active { color:var(--action-primary); background:var(--brand-tint-start); }
.canvas-tool-divider { width:1px; height:18px; margin:0 3px; background:var(--border-default); }
.arrange-tool { min-width:54px; }

/* ========【自由排列工具】 設定 - 選取框、多選與畫布拖曳模式 ======== */
#selectionMarquee {
    position:absolute;
    display:none;
    z-index:23;
    pointer-events:none;
    box-sizing:border-box;
    border:1px solid var(--action-primary);
    border-radius:2px;
    background:color-mix(in srgb,var(--action-primary) 10%,transparent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--surface-card) 70%,transparent) inset;
}
#selectionMarquee.show { display:block; }
.person-card.person-card-selected {
    /* 選取狀態只提高層級；外框由獨立 overlay 繪製，不覆寫人物卡本身樣式。 */
    z-index:10;
}

.person-card.person-card-selected::after {
    content:"";
    position:absolute;
    inset:0;
    border:2px solid var(--action-primary);
    border-radius:inherit;
    pointer-events:none;
    box-sizing:border-box;
}
#genealogyCanvasViewport.selection-tool-active { cursor:crosshair; }
#genealogyCanvasViewport.selection-tool-active .person-card { cursor:default; }
#genealogyCanvasViewport.selection-tool-active .person-card.person-card-selected { cursor:move; }
#genealogyCanvasViewport.pan-tool-active,
#genealogyCanvasViewport.temporary-pan { cursor:grab; }
#genealogyCanvasViewport.pan-tool-active.dragging,
#genealogyCanvasViewport.temporary-pan.dragging { cursor:grabbing; }
#genealogyCanvasViewport.pan-tool-active .person-card,
#genealogyCanvasViewport.temporary-pan .person-card { cursor:grab; }
.canvas-zoom { position:absolute; left:50%; bottom:14px; z-index:24; display:flex; align-items:center; gap:2px; height:34px; padding:3px 5px; border:1px solid var(--border-default); border-radius:6px; background:color-mix(in srgb,var(--surface-card) 94%,transparent); box-shadow:0 4px 15px rgba(0,0,0,.07); backdrop-filter:blur(8px); transform:translateX(-50%); }
.canvas-zoom button { width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:4px; background:transparent; color:var(--text-secondary); }
.canvas-zoom button:hover { background:var(--surface-item-hover); color:var(--text-primary); }
#zoomValue { min-width:47px; text-align:center; color:var(--text-secondary); font-size:10.5px; font-variant-numeric:tabular-nums; }
.canvas-zoom-divider { width:1px; height:17px; margin:0 2px; background:var(--border-default); }

body[data-theme="ling"] .family-panel { background:#fff; border-right-color:#eee; }
body[data-theme="ling"] .topbar { height:52px; background:#fff; border-bottom:1px solid #eee; }
body[data-theme="ling"] .topbar-brand { color:#555; }
body[data-theme="ling"] .topbar-creator-link { color:#999; }
body[data-theme="ling"] .topbar-creator-link:hover,
body[data-theme="ling"] .topbar-creator-link:focus-visible { color:var(--action-primary); }
body[data-theme="ling"] .topbar-brand-divider { color:#ccc; }
body[data-theme="ling"] .topbar-section-brand { color:#555; }
body[data-theme="ling"] .family-name-editor .brand-input { color:#444; }

@media (max-width:980px) {
  .topbar-brand { min-width:76px; width:76px; padding:0 8px; gap:4px; }
  .topbar-brand-group { display:none; }
  .topbar-primary-actions .topbar-text-btn span:last-child { display:none; }
  .topbar-text-btn { width:32px; padding:0; }
  .canvas-tool span:last-child { display:none; }
  .canvas-tool { width:30px; padding:5px; }
}
@media (max-width:720px) {
  /* 手機層級：完整視窗高於頂部工具列；工具列與其選單只需高於常駐家庭資訊。 */
  .topbar { z-index:350; }
  .ui-dialog-backdrop { z-index:400; }
  .ui-dialog-backdrop.person-library-backdrop { z-index:390; }
  .ui-dialog-backdrop.nested { z-index:450; }
  .ui-dialog-backdrop.photo-viewer-backdrop { z-index:470; }

  .topbar-brand { display:flex; width:76px; min-width:76px; padding:0 8px; gap:4px; }
  .topbar-main { padding:0 7px; gap:5px; }
  .topbar-filter-btn { width:32px; padding:0; }
  .topbar-filter-label { display:none; }
  .topbar-filter-count { display:none !important; }
  .topbar-filter-popover { left:50%; right:auto; width:min(520px,calc(100vw - 24px)); transform:translateX(-50%); }
  /* 手機第一直欄：狀態、性別與寵物保持同樣距離，但比桌面版的 24px 緊湊。 */
  .topbar-filter-column .topbar-filter-group + .topbar-filter-group { margin-top:8px; }
  .family-panel { position:fixed; top:52px; bottom:0; left:0; width:min(310px,88vw); flex-basis:auto; transform:translateX(-102%); z-index:300; transition:transform .22s ease; }
  .family-panel.open { transform:translateX(0); }
  body.family-panel-collapsed .family-panel { width:min(310px,88vw); }
  .family-panel-resizer { display:none !important; }
  .sidebar-backdrop { display:none; position:fixed; inset:52px 0 0; background:rgba(0,0,0,.38); z-index:299; }
  .sidebar-backdrop.show { display:block; }
  .family-panel-collapse { display:none; }
  .canvas-toolbar { top:8px; right:8px; }
  #resetLayoutBtn { display:none !important; }
  .canvas-zoom { bottom:8px; }
}
@media (max-width:520px) {
  .canvas-toolbar { max-width:calc(100% - 16px); overflow-x:auto; }
}

/* ========【手機視窗捲動】 設定 - 匯出固定標題；視覺設定沿用全尺寸固定標題結構 ======== */
@media (max-width:720px) {
  #appearanceDialog {
    padding:14px;
  }

  .appearance-modal {
    width:100%;
    max-height:calc(100vh - 28px);
    max-height:calc(100dvh - 28px);
  }

  .appearance-header {
    gap:14px;
    padding:15px 16px 12px;
  }

  .appearance-scroll-body {
    padding:0 16px 16px;
  }

  .export-modal {
    max-height:calc(100vh - 28px);
    max-height:calc(100dvh - 28px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .export-header {
    flex:0 0 auto;
    background:var(--surface-card);
  }

  .export-grid {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}


/* ========【人物檔案響應式】 設定 - 小螢幕維持緊湊但不擠壓頭像 ======== */
@media (max-width:760px) {
  #simEditorDialog { padding:8px; }
  .sim-editor-modal {
    width:100%;
    height:calc(100vh - 16px);
    height:calc(100dvh - 16px);
    max-height:none;
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .sim-editor-top { padding:12px 14px 0; }
  .sim-editor-tabs {
    position:sticky;
    top:0;
    z-index:8;
    padding:0 14px;
    background:color-mix(in srgb,var(--surface-card) 96%,transparent);
    backdrop-filter:blur(8px);
  }
  .sim-editor-content {
    min-height:auto;
    overflow:visible;
    padding:11px 14px 18px;
  }
  .sim-editor-actions {
    position:sticky;
    bottom:0;
    z-index:9;
    padding:9px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface-card) 97%,transparent);
    backdrop-filter:blur(8px);
  }
  .sim-profile-header { grid-template-columns:124px minmax(0,1fr); gap:12px; }
  .sim-profile-avatar-block { width:124px; }
  .avatar-preview.sim-profile-avatar { width:94px; height:94px; }
  .profile-identity-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-fact-edit-row { grid-template-columns:1fr 1fr; }
  .profile-residence-field { grid-column:1/-1; }
  .family-rel-editor { grid-template-columns:1fr; }
  .family-rel-block { border-bottom:1px solid var(--border-default) !important; }
  .family-rel-block:last-child { border-bottom:0 !important; }
  .pet-editor-layout { grid-template-columns:150px minmax(0,1fr); gap:14px; }
  .person-profile-panel { width:min(540px,100%); }
}
@media (max-width:520px) {
  .sim-editor-top { padding:10px 14px 0; }
  .sim-editor-tabs { padding:0 8px; }
  .sim-editor-tab {
    min-height:38px;
    padding:8px 9px 9px;
    font-size:12px;
  }
  .sim-profile-header { grid-template-columns:1fr; gap:10px; }
  .sim-profile-avatar-block { width:100%; grid-template-columns:104px 1fr; grid-template-rows:auto auto; column-gap:10px; }
  .avatar-preview.sim-profile-avatar { grid-column:1; grid-row:1 / span 2; margin:0; }
  .sim-profile-avatar-actions { grid-column:2; width:100%; justify-content:stretch; }
  .sim-profile-avatar-block .avatar-tip { grid-column:2; text-align:left; }
  .profile-fact-edit-row { grid-template-columns:minmax(82px,.62fr) minmax(0,1.38fr); }
  .profile-birthday-field { grid-column:1/-1; }
  .profile-age-field { grid-column:1; }
  .profile-residence-field { grid-column:2; }
  .pet-editor-layout { grid-template-columns:1fr; }
  .pet-avatar-editor-block { width:100%; }
  .pet-editor-fields { grid-template-columns:1fr; }
  .pet-field-full { grid-column:auto; }
  .family-rel-preview-row.is-editing {
    grid-template-columns:16px minmax(0,1fr);
    align-items:center;
  }
  .family-rel-row-actions {
    grid-column:2;
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-left:0;
  }
  .family-rel-label-inline-editor {
    flex-wrap:wrap;
  }
  .family-rel-label-input {
    width:min(190px,52vw);
  }
  .other-rel-preview {
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  }
  .other-rel-hidden-label {
    grid-column:2;
    padding-left:0;
  }
  .other-rel-label-control {
    flex-wrap:wrap;
  }
  .other-rel-label-input {
    width:min(190px,52vw);
  }
  .other-rel-edit .relationship-add-row {
    display:grid;
    grid-template-columns:1fr;
  }
  .other-rel-edit .relationship-add-row > .ui-select-wrap {
    width:100%;
    min-width:0;
  }
  .other-rel-edit .relationship-add-row > button {
    width:100%;
  }
  .family-rel-edit-grid { grid-template-columns:1fr; }
  .person-profile-header { align-items:center; }
  .person-profile-avatar { width:88px; height:88px; }
  .person-profile-media { grid-template-columns:1fr; }
  .export-background-options { grid-template-columns:1fr; }
}

/* ========【家族成員快捷選單】 設定 - 每位成員使用單一更多入口，避免重複常駐按鈕 ======== */
.family-member-row { grid-template-columns:36px minmax(0,1fr) 28px; }
.family-member-menu { justify-self:end; position:relative; }
.family-member-more { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--text-secondary); opacity:.55; }
.family-member-row:hover .family-member-more,.family-member-more:focus-visible,.family-member-menu.open .family-member-more { opacity:1; background:var(--surface-item-hover); color:var(--text-primary); }
.family-member-popover { top:calc(100% + 4px); right:0; left:auto; min-width:176px; }
.family-member-popover .ui-menu-item { white-space:nowrap; }

/* ========【族譜定位提示】 設定 - 從家族成員選單定位時短暫標示人物 ======== */
@keyframes genealogy-focus-pulse {
  0%,100% { box-shadow:0 0 0 0 transparent; }
  28% { box-shadow:0 0 0 4px color-mix(in srgb,var(--action-primary) 38%,transparent),0 5px 18px rgba(0,0,0,.12); }
}
.person-card.focus-pulse { animation:genealogy-focus-pulse 1.05s ease; }


/* ========【人物媒體分頁】 設定 - 寵物與相簿並列，減少縱向留白 ======== */
.sim-editor-panel[data-editor-panel="media"].active { display:grid; grid-template-columns:minmax(230px,.82fr) minmax(0,1.35fr); gap:16px; align-items:start; }
.sim-editor-panel[data-editor-panel="media"] .relationship-section { margin:0; padding:0; border-top:0; }
.sim-editor-panel[data-editor-panel="media"] .relationship-section-title { margin-bottom:7px; }
@media (max-width:680px) {
  .sim-editor-panel[data-editor-panel="media"].active { grid-template-columns:1fr; gap:14px; }
}


/* ========【人物卡右鍵選單】 設定 - 人物操作、卡片內容與外觀 ======== */
.person-card-menu {
    position:fixed;
    z-index:5000;
    display:none;
    width:264px;
    max-height:min(620px,calc(100vh - 16px));
    overflow:auto;
    padding:6px;
    border:1px solid var(--border-default);
    border-radius:8px;
    background:var(--surface-card);
    color:var(--text-primary);
    box-shadow:0 14px 36px rgba(0,0,0,.18);
    font-size:12px;
}
.person-card-menu.show { display:block; }
.person-card-menu-title { padding:7px 9px 8px; font-size:12.5px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-card-menu-action { width:100%; min-height:31px; display:flex; align-items:center; gap:8px; padding:6px 9px; border:0; border-radius:5px; background:transparent; color:var(--text-primary); font:inherit; text-align:left; }
.person-card-menu-action:hover:not(:disabled) { background:var(--surface-item-hover); }
.person-card-menu-action:disabled { opacity:.4; cursor:default; }
.person-card-menu-action.danger { color:#b03a2e; }
.person-card-menu-divider { height:1px; margin:5px 3px; background:var(--border-default); }
.person-card-menu-section-title { padding:5px 9px 4px; color:var(--text-secondary); font-size:10.5px; font-weight:700; letter-spacing:.35px; }
.person-card-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 3px; }
.person-card-menu-check,.person-card-menu-radio { min-height:29px; display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:5px; cursor:pointer; user-select:none; }
.person-card-menu-check:hover,.person-card-menu-radio:hover { background:var(--surface-item-hover); }
.person-card-menu-check.fixed { color:var(--text-secondary); cursor:default; }
.person-card-menu-check.fixed:hover { background:transparent; }
.person-card-menu-radio input { margin:0; accent-color:var(--action-primary); }
.person-card-menu-check.fixed input[type="checkbox"]:disabled { opacity:.65; }
.person-card-menu-note { padding:5px 9px 7px; color:var(--text-secondary); font-size:10px; line-height:1.4; }

/* ========【人物卡片外觀】 設定 - 檢視模式外觀；檢視 / 編輯顯示內容各自獨立 ======== */
.person-card.view.card-appearance-minimal {
    background:transparent;
    border-color:transparent;
    border-left-color:transparent;
    box-shadow:none;
}
.person-card.view.card-appearance-minimal:hover {
    background:color-mix(in srgb,var(--surface-card) 48%,transparent);
    border-color:color-mix(in srgb,var(--action-primary) 58%,transparent);
    box-shadow:none;
}
.person-card.view.card-appearance-minimal.ghost,
.person-card.view.card-appearance-minimal.dead {
    background:transparent;
    border-color:transparent;
    border-left-color:transparent;
    border-style:solid;
}
.person-card.view.card-appearance-translucent {
    background:color-mix(in srgb,var(--surface-card) 76%,transparent);
    border-color:color-mix(in srgb,var(--border-default) 74%,transparent);
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    backdrop-filter:blur(5px);
}
.person-card.view.card-appearance-full {
    background:var(--surface-card);
}
.person-card.view.card-no-avatar { justify-content:center; }
.person-card-view-meta {
    width:100%;
    min-height:14px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    color:var(--text-secondary);
    font-size:10px;
    line-height:1.25;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.person-card-view-meta .l1ng-icon { flex:0 0 auto; margin-top:1px; }
.person-card-view-meta > span { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.person-card-view-text { overflow:visible; text-overflow:clip; white-space:normal; }


/* ========【編輯模式人物卡】 設定 - 與檢視卡分離的橫向管理版型 ======== */
.person-card.mode-edit {
    /* 編輯卡維持較大的橫向管理版型；右鍵只共用「顯示哪些資料」，不共用檢視卡外觀。 */
    padding:12px 14px 12px 12px;
    align-items:flex-start;
    gap:12px;
    background:var(--surface-card);
}
.person-card.mode-edit .person-card-avatar {
    width:64px;
    height:64px;
    flex:0 0 64px;
    margin-top:2px;
    border-radius:10px;
    font-size:24px;
}
.person-card.mode-edit .person-card-body {
    justify-content:flex-start;
    gap:4px;
    padding-top:0;
}
.person-card.mode-edit .person-card-name {
    padding-right:0;
    font-size:13px;
    line-height:1.3;
}
.person-card-edit-meta {
    min-height:15px;
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--text-secondary);
    font-size:10px;
    line-height:1.35;
}
.person-card-edit-meta .l1ng-icon { flex:0 0 auto; }
.person-card-edit-text {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.person-card.mode-edit .person-card-tags,
.person-card.mode-edit .person-card-pets {
    margin-top:1px;
}
.person-card.mode-edit .person-card-life-photo-badge {
    align-self:flex-start;
    margin-top:1px;
}

/* ========【使用提示】 設定 - 鍵盤 keycap 與滑鼠左右鍵 / 滾輪視覺語言 ======== */
.help-section .mouse-hint {
    position:relative;
    display:inline-block;
    width:19px;
    height:24px;
    margin:0 4px 0 2px;
    vertical-align:-7px;
    border:1.35px solid currentColor;
    border-radius:8px 8px 9px 9px;
    color:var(--text-secondary);
    background:var(--surface-input);
    overflow:hidden;
}
.help-section .mouse-hint::before,
.help-section .mouse-hint::after {
    content:"";
    position:absolute;
    top:1px;
    width:7px;
    height:8px;
    border-radius:5px 3px 2px 2px;
}
.help-section .mouse-hint::before { left:1px; }
.help-section .mouse-hint::after { right:1px; }
.help-section .mouse-hint.mouse-left::before,
.help-section .mouse-hint.mouse-right::after { background:var(--action-primary); }
.help-section .mouse-hint-wheel {
    position:absolute;
    left:50%;
    top:3px;
    width:3px;
    height:6px;
    border-radius:3px;
    background:color-mix(in srgb,var(--text-secondary) 55%,transparent);
    transform:translateX(-50%);
}
.help-section .mouse-hint.mouse-wheel .mouse-hint-wheel { background:var(--action-primary); }
.help-section .mouse-hint.mouse-wheel::before,
.help-section .mouse-hint.mouse-wheel::after { background:transparent; }

/* ========【檢視卡片版型】 設定 - 檢視模式固定直向，appearance 只控制視覺效果 ======== */
.person-card.view.card-appearance-translucent,
.person-card.view.card-appearance-full {
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    padding:10px 10px 8px;
}

.person-card.view.card-appearance-translucent .person-card-view-avatar,
.person-card.view.card-appearance-full .person-card-view-avatar {
    width:76px;
    height:76px;
    flex:0 0 76px;
    margin-top:2px;
    border-radius:10px;
    font-size:30px;
}

.person-card.view.card-appearance-translucent .person-card-view-name,
.person-card.view.card-appearance-full .person-card-view-name,
.person-card.view.card-appearance-translucent .person-card-view-meta,
.person-card.view.card-appearance-full .person-card-view-meta {
    width:100%;
    text-align:center;
    justify-content:center;
}

/* 只剩頭像時，任何有框樣式都收成真正的小卡，不保留空白資訊欄。 */
.person-card.view.card-avatar-only.card-appearance-translucent,
.person-card.view.card-avatar-only.card-appearance-full {
    padding: 11px;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* 編輯模式若玩家把所有文字資訊都關掉，也只保留頭像本身的操作區。 */
.person-card.mode-edit.card-avatar-only {
    padding: 14px;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.person-card.mode-edit.card-avatar-only .person-card-avatar {
    margin: 0;
}

/* ========【全站載入骨架】 設定 - 初始化期間對齊目前正式介面分佈 ======== */
.app-skeleton {
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    flex-direction:column;
    background:var(--surface-canvas);
    opacity:1;
    transition:opacity .18s ease;
}
.app-skeleton.is-hidden {
    opacity:0;
    pointer-events:none;
}
.app-skeleton-topbar {
    position:relative;
    height:52px;
    flex:0 0 52px;
    display:flex;
    align-items:stretch;
    border-bottom:1px solid var(--border-default);
    background:var(--surface-card);
}
.app-skeleton-brand-area {
    width:var(--sidebar-width);
    flex:0 0 var(--sidebar-width);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 10px;
}
.app-skeleton-main-actions {
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
}
.skeleton-topbar-spacer { flex:1; }
.app-skeleton-body {
    flex:1;
    min-height:0;
    display:flex;
}
.app-skeleton-sidebar {
    width:var(--sidebar-width);
    flex:0 0 var(--sidebar-width);
    min-width:0;
    padding:12px 8px 16px;
    overflow:hidden;
    border-right:1px solid var(--border-default);
    background:var(--surface-card);
}
.app-skeleton-canvas {
    position:relative;
    flex:1;
    min-width:0;
    overflow:hidden;
    background-color:#fafafa;
    background-image:radial-gradient(circle,rgba(0,0,0,.055) 1px,transparent 1px);
    background-size:24px 24px;
}
.skeleton-block,
.skeleton-person {
    display:block;
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb,var(--border-default) 68%,transparent) 20%,
        color-mix(in srgb,var(--surface-card) 88%,white) 50%,
        color-mix(in srgb,var(--border-default) 68%,transparent) 80%
      );
    background-size:220% 100%;
    animation:genealogy-skeleton-shimmer 1.25s linear infinite;
}
.skeleton-brand { width:126px; height:14px; border-radius:4px; }
.skeleton-help,
.skeleton-more,
.skeleton-mobile-menu {
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:7px;
}
.skeleton-mobile-menu { display:none; }
/* 與正式 .topbar-filter-menu 相同，以整條頂欄而非按鈕列為置中基準。 */
.skeleton-filter {
    position:absolute;
    top:50%;
    left:50%;
    width:76px;
    height:32px;
    border-radius:7px;
    transform:translate(-50%, -50%);
    z-index:1;
}
.skeleton-action { width:64px; height:32px; border-radius:7px; }
.skeleton-action-wide { width:112px; }
.skeleton-cover { width:100%; aspect-ratio:16/9; border-radius:8px; }
.skeleton-line { width:72%; height:11px; margin-top:0; border-radius:4px; }
.skeleton-line.wide { width:86%; }
.skeleton-line.short { width:48%; }
.skeleton-family-heading,
.skeleton-member-heading,
.skeleton-stats {
    display:flex;
    align-items:center;
    gap:8px;
}
.skeleton-family-heading {
    justify-content:space-between;
    margin-top:14px;
}
.skeleton-family-heading .skeleton-line { flex:1; max-width:128px; }
.app-skeleton-sidebar > .skeleton-line { margin-top:10px; }
.skeleton-stats {
    justify-content:space-between;
    margin-top:12px;
    padding:9px 0 12px;
    border-bottom:1px solid var(--border-default);
}
.skeleton-stats .skeleton-line {
    width:27%;
    height:9px;
}
.skeleton-member-heading {
    justify-content:space-between;
    margin-top:12px;
}
.skeleton-member-heading .skeleton-line { width:54px; }
.skeleton-people {
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.skeleton-person {
    height:48px;
    padding:6px 8px;
    border-radius:7px;
    display:flex;
    align-items:center;
    gap:8px;
}
.skeleton-avatar {
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:50%;
}
.skeleton-person-copy {
    min-width:0;
    flex:1;
    display:grid;
    gap:7px;
}
.skeleton-person-copy .skeleton-line:first-child { width:70%; }
.skeleton-person-copy .skeleton-line.short { width:44%; }
/* 骨架工具列與正式 .canvas-toolbar 同樣固定於畫布右上方。 */
.skeleton-canvas-toolbar {
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:1px;
    max-width:calc(100% - 24px);
    padding:4px;
    border:1px solid var(--border-default);
    border-radius:6px;
    background:color-mix(in srgb,var(--surface-card) 94%,transparent);
}
.skeleton-tool {
    flex:0 1 auto;
    min-width:0;
    height:30px;
    border-radius:4px;
}
.skeleton-tool-mode { width:89px; }
.skeleton-tool-layout { width:88px; }
.skeleton-tool-label { width:91px; }
.skeleton-tool-lock { width:88px; }
.skeleton-canvas-tool-divider {
    flex:0 0 1px;
    height:18px;
    margin:0 3px;
    background:var(--border-default);
}
/* 父母兩張、子女三張；每排都以畫布中心線對稱。 */
.skeleton-family-tree {
    position:absolute;
    top:50%;
    left:50%;
    width:min(620px,calc(100% - 48px));
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:54px;
    transform:translate(-50%,-50%);
}
.skeleton-tree-row {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
}
.skeleton-node {
    flex:0 1 152px;
    min-width:0;
    height:138px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 10px;
    border:1px solid var(--border-default);
    border-radius:10px;
    background:var(--surface-card);
}
.skeleton-node-avatar {
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:50%;
}
.skeleton-node-line {
    width:72%;
    height:10px;
    border-radius:4px;
}
.skeleton-node-line.short {
    width:46%;
    height:8px;
}
/* 正式 .canvas-zoom 位於畫布底部中央，骨架亦採用同一定位。 */
.skeleton-zoom {
    position:absolute;
    left:50%;
    bottom:14px;
    display:flex;
    align-items:center;
    gap:2px;
    height:34px;
    padding:3px 5px;
    border:1px solid var(--border-default);
    border-radius:6px;
    background:var(--surface-card);
    transform:translateX(-50%);
}
.skeleton-zoom-button { width:27px; height:27px; border-radius:4px; }
.skeleton-zoom-value { width:42px; height:10px; border-radius:4px; }

@keyframes genealogy-skeleton-shimmer {
    from { background-position:200% 0; }
    to { background-position:-20% 0; }
}
@media (max-width:980px) {
    .skeleton-tool-mode,
    .skeleton-tool-layout,
    .skeleton-tool-label,
    .skeleton-tool-lock { width:30px; flex:0 0 30px; }
}
@media (max-width:720px) {
    .app-skeleton-brand-area { display:none; }
    .app-skeleton-main-actions {
        padding:0 8px;
        gap:6px;
    }
    .skeleton-mobile-menu { display:block; }
    .skeleton-filter { width:32px; }
    .skeleton-action { width:34px; }
    .skeleton-action-wide { display:none; }
    .app-skeleton-sidebar { display:none; }
    .skeleton-canvas-toolbar {
        top:8px;
        right:8px;
        max-width:calc(100% - 16px);
    }
    .skeleton-family-tree {
        width:calc(100% - 28px);
        gap:38px;
    }
    .skeleton-tree-row { gap:12px; }
    .skeleton-node {
        height:112px;
        padding:10px 5px;
        gap:8px;
    }
    .skeleton-node-avatar {
        width:36px;
        height:36px;
        flex-basis:36px;
    }
    .skeleton-zoom { bottom:8px; }
}
@media (prefers-reduced-motion:reduce) {
    .app-skeleton { transition:none; }
    .skeleton-block,
    .skeleton-person {
        animation:none;
        background:color-mix(in srgb,var(--border-default) 68%,transparent);
    }
}


/* ========【圖片與儲存】 設定 - 共用固定標題、關閉按鈕與獨立捲動內容 ======== */
.storage-modal {
    width:min(680px,100%);
    max-height:min(680px,calc(100dvh - 40px));
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
}
.storage-header { flex:0 0 auto; background:var(--surface-card); }
.storage-header .help-heading { flex:1 1 auto; }
.storage-scroll-body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:16px 20px 20px;
}
.storage-intro {
    margin:0 0 8px;
    color:var(--text-secondary);
    font-size:13px;
    line-height:1.65;
}

.storage-section {
    padding:15px 0 18px;
    border-bottom:1px solid var(--border-default);
}

.storage-section:last-of-type {
    border-bottom:0;
}

.storage-section .setting-group-title {
    margin:0 0 10px;
    padding:0;
    border:0;
    color:var(--text-primary);
    font-size:14px;
    font-weight:700;
    letter-spacing:.1px;
}

.storage-summary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.storage-summary-item {
    min-width:0;
    padding:14px 15px;
    border:1px solid var(--border-default);
    border-radius:8px;
    background:var(--surface-panel);
}

.storage-summary-item > span {
    display:block;
    margin-bottom:7px;
    color:var(--text-secondary);
    font-size:12.5px;
}

.storage-summary-item > div {
    display:flex;
    align-items:baseline;
    gap:5px;
}

.storage-summary-item strong {
    color:var(--text-primary);
    font-size:22px;
    line-height:1.15;
    font-weight:700;
}

.storage-summary-item small {
    color:var(--text-secondary);
    font-size:12px;
}

.storage-info-list {
    display:grid;
    gap:8px;
}

.storage-info-row {
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:start;
    gap:10px;
    padding:11px 12px;
    border-radius:7px;
    background:var(--surface-panel);
}

.storage-info-row > .l1ng-icon {
    margin-top:2px;
    color:var(--action-primary);
    font-size:16px;
}

.storage-info-row strong {
    color:var(--text-primary);
    font-size:13px;
    font-weight:700;
}

.storage-info-row p {
    margin:4px 0 0;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.55;
}

.storage-maintenance-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:13px 14px;
    border:1px solid var(--border-default);
    border-radius:8px;
    background:var(--surface-card);
}

.storage-maintenance-card > div {
    min-width:0;
}

.storage-maintenance-card strong {
    color:var(--text-primary);
    font-size:13px;
}

.storage-maintenance-card p {
    margin:4px 0 0;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.55;
}

.storage-maintenance-card button {
    flex:0 0 auto;
    min-height:34px;
    padding:6px 10px;
    border:1px solid var(--border-default);
    border-radius:6px;
    background:var(--surface-input);
    color:var(--text-primary);
    font:inherit;
    font-size:12px;
    cursor:pointer;
}

.storage-maintenance-card button:hover {
    border-color:var(--action-primary);
}

@media (max-width:720px) {
    .storage-modal { max-height:calc(100dvh - 28px); }
    .storage-scroll-body { padding:14px 16px 16px; }
    .storage-summary {
        grid-template-columns:1fr;
    }

    .storage-maintenance-card {
        align-items:stretch;
        flex-direction:column;
        gap:12px;
    }

    .storage-maintenance-card button {
        align-self:flex-start;
    }
}


/* ========【家族切換選單】 設定 - Portal 只在家族切換器展開時顯示 ======== */
.nav-select-menu.family-nav-portal { display:grid; }


/* ========【搜尋型下拉視窗】 設定 - 由 data-ui-select-portal 控制是否脫離編輯視窗裁切 ======== */
.ui-select-dropdown.ui-select-dropdown-portal {
    position:fixed;
    z-index:5200;
    right:auto;
    margin:0;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.ui-select-dropdown.ui-select-dropdown-portal .ui-select-options {
    max-height:min(300px,calc(100vh - 150px));
}

/* ========【關係線設定】 設定 - 左側類型清單與右側共用編輯器 ======== */
.relationship-style-workspace{display:grid;grid-template-columns:168px minmax(0,1fr);gap:12px;align-items:start}
.relationship-style-nav{min-width:0;display:grid;gap:5px}
.relationship-style-choice{min-width:0;min-height:42px;padding:7px 9px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-card);color:var(--text-primary);display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:8px;text-align:left;font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.relationship-style-choice:hover{background:var(--surface-item-hover)}
.relationship-style-choice.selected{border-color:var(--action-primary);background:var(--brand-tint-start);color:var(--action-primary)}
.relationship-style-choice>i{height:18px;position:relative;display:block;min-width:0}
.relationship-style-choice>i::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--preview-width,2px);background:var(--preview-color,var(--relationship-parent));transform:translateY(-50%)}
.relationship-style-choice>i[data-line-style="short-dash"]::before{background:repeating-linear-gradient(90deg,var(--preview-color) 0 4px,transparent 4px 7px)}
.relationship-style-choice>i[data-line-style="long-dash"]::before{background:repeating-linear-gradient(90deg,var(--preview-color) 0 10px,transparent 10px 16px)}
.relationship-style-choice>i[data-line-style="dot"]::before{background:repeating-linear-gradient(90deg,var(--preview-color) 0 2px,transparent 2px 7px)}
.relationship-curve-mini-preview{width:100%;height:18px;display:block;overflow:visible}
.relationship-curve-mini-preview path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.relationship-style-editor{min-width:0;padding:12px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface-panel)}
.relationship-editor-head{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.relationship-editor-head>strong{color:var(--text-primary);font-size:12px}
.relationship-other-type-field{width:min(220px,55%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;color:var(--text-secondary);font-size:var(--appearance-control-label-size)}
.relationship-other-type-field[hidden]{display:none}
.relationship-full-preview{--relationship-preview-card-width:88px;--relationship-preview-side-gap:clamp(30px,6%,48px);position:relative;width:100%;height:190px;margin-bottom:12px;overflow:hidden;border:1px solid var(--border-default);border-radius:9px;background:var(--surface-card)}
.relationship-full-preview svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.relationship-full-preview #relationshipFullPreviewPath{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.relationship-full-preview .relationship-preview-arrow{stroke:none;vector-effect:non-scaling-stroke;pointer-events:none}
.relationship-preview-card{position:absolute;z-index:1;width:var(--relationship-preview-card-width);min-height:70px;padding:7px 7px 8px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-card);box-shadow:0 2px 7px rgba(0,0,0,.08);display:grid;justify-items:center;gap:4px}
.relationship-preview-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--avatar-surface-start),var(--avatar-surface-end));border:1px solid var(--border-default)}
.relationship-preview-name,.relationship-preview-meta{display:block;height:5px;border-radius:999px;background:var(--border-default)}
.relationship-preview-name{width:48px}.relationship-preview-meta{width:34px;opacity:.72}
.relationship-full-preview[data-orientation="vertical"] .card-a{left:50%;top:7px;transform:translateX(-50%)}
.relationship-full-preview[data-orientation="vertical"] .card-b{left:50%;bottom:7px;transform:translateX(-50%)}
.relationship-full-preview[data-orientation="horizontal"] .card-a{left:var(--relationship-preview-side-gap);top:50%;transform:translateY(-50%)}
.relationship-full-preview[data-orientation="horizontal"] .card-b{right:var(--relationship-preview-side-gap);left:auto;top:50%;transform:translateY(-50%)}
.relationship-editor-fields{display:grid;grid-template-columns:150px minmax(160px,1fr) 44px;gap:10px;align-items:start}
.relationship-editor-fields>label{min-width:0;display:grid;grid-template-rows:auto minmax(32px,auto);gap:5px;align-items:start;color:var(--text-secondary);font-size:var(--appearance-control-label-size)}
.relationship-editor-fields>label>span:first-child{min-height:12px;display:flex;align-items:center;line-height:1.2}
.relationship-editor-fields>label>.ui-single-select,
.relationship-editor-fields>label>select{height:32px;align-self:start}
.relationship-editor-range{min-width:0;min-height:32px;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:6px}
.relationship-editor-range output{min-width:30px;color:var(--text-primary);font-size:10.5px;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.relationship-editor-color{width:44px;justify-self:end}
.relationship-editor-color input[type=color]{width:44px;height:32px;align-self:start;padding:2px;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-input);cursor:pointer}
.relationship-feature-row{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;align-items:center}
.relationship-feature-row[hidden]{display:none}
.relationship-feature-row.single .curve-cell{grid-column:1/-1}
.relationship-feature-cell{min-width:0;display:flex;align-items:center;justify-content:flex-start}
.relationship-feature-cell[hidden]{display:none}
.relationship-feature-toggle{width:auto;min-height:38px;display:grid;grid-template-columns:max-content 38px;align-items:center;column-gap:8px}
.relationship-feature-label{width:auto;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:5px;color:var(--text-primary);font-size:var(--appearance-control-label-size);white-space:nowrap}
.help-tooltip-slot{display:inline-block;width:18px;height:18px;flex:0 0 18px;visibility:hidden}
.relationship-switch{position:relative;width:38px;height:22px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--border-default) 72%,var(--surface-panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border-default) 78%,transparent);cursor:pointer;overflow:hidden;transition:background .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1)}
.relationship-switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--surface-card) 82%,var(--surface-panel) 18%);box-shadow:0 1px 3px rgba(0,0,0,.16);transform:translateX(0);transition:transform .30s cubic-bezier(.2,.9,.25,1),background .28s ease,box-shadow .28s ease}
.relationship-switch[aria-pressed="true"]{background:color-mix(in srgb,var(--action-primary) 78%,var(--surface-panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--action-primary) 58%,transparent)}
.relationship-switch[aria-pressed="true"]::after{transform:translateX(16px);background:color-mix(in srgb,var(--surface-card) 80%,var(--action-primary) 20%)}
.relationship-switch:active::after{transform:translateX(1px) scaleX(1.08)}
.relationship-switch[aria-pressed="true"]:active::after{transform:translateX(15px) scaleX(1.08)}
.relationship-switch:focus-visible{outline:2px solid color-mix(in srgb,var(--action-primary) 55%,transparent);outline-offset:2px}
.relationship-curve-control{min-width:0;display:grid;gap:5px;color:var(--text-secondary);font-size:var(--appearance-control-label-size);opacity:1;transition:opacity .15s ease}
.relationship-curve-control[hidden]{display:none}
.relationship-shared-curve-row{margin-top:8px}
.relationship-curve-control.is-disabled{opacity:.42}
.relationship-curve-control.is-disabled input[type=range]{cursor:not-allowed}
.relationship-curve-slider{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:6px}
.relationship-curve-slider output{min-width:34px;color:var(--text-primary);font-size:10.5px;font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap}
.relationship-style-actions{
    margin-top:8px;
    display:flex;
    justify-content:flex-end;
}

.relationship-style-actions button{
    min-height:28px;
    padding:4px 8px;
    border:1px solid var(--border-default);
    border-radius:7px;
    background:var(--surface-card);
    color:var(--text-secondary);
    font:inherit;
    font-size:10.5px;
    cursor:pointer;
}
.appearance-modal .ui-single-select{width:100%}
.appearance-modal select,.appearance-modal .ui-single-select-trigger{width:100%;min-height:32px;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-input);color:var(--text-primary);font:inherit;font-size:11px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.appearance-modal .ui-single-select-trigger:hover{border-color:color-mix(in srgb,var(--action-primary) 40%,var(--border-default))}
.appearance-modal .ui-single-select-trigger:focus-visible{border-color:var(--action-primary);box-shadow:0 0 0 2px var(--brand-tint-start)}
.appearance-modal .ui-select-chevron-icon{color:var(--text-secondary)}
.appearance-modal .ui-single-select:focus-within .ui-select-chevron-icon{color:var(--action-primary)}
@media(max-width:680px){.relationship-style-workspace{grid-template-columns:1fr}.relationship-style-nav{grid-template-columns:repeat(5,minmax(108px,1fr));overflow-x:auto;padding-bottom:2px}.relationship-style-choice{grid-template-columns:1fr;gap:4px}.relationship-editor-fields{grid-template-columns:minmax(82px,.9fr) minmax(0,1.45fr) 44px;gap:8px}.relationship-editor-range{grid-template-columns:minmax(0,1fr) max-content;gap:4px}.relationship-editor-range output{min-width:28px;font-size:10px}.relationship-curve-slider{gap:4px}.relationship-feature-row{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ========【危險操作】 設定 - 刪除、移除、清理與覆蓋資料統一使用紅色語意 ======== */
/* 有既有外框的按鈕會連同外框變紅；border:0 的導覽 / 工具按鈕不會因此新增外框。 */
button.danger-action {
    color:#b03a2e;
    border-color:rgba(176,58,46,.34);
}
button.danger-action .l1ng-icon {
    color:currentColor;
}
button.danger-action:hover,
button.danger-action:focus-visible {
    color:#953126;
    border-color:rgba(176,58,46,.55);
    background:rgba(176,58,46,.07);
    outline:none;
}




/* ========【畫布寵物卡】 設定 - 沿用人物卡片配色，家庭旁獨立顯示，不覆蓋血緣線 ======== */
/* 寵物卡置於畫布標籤上方；容器不擋人物卡，只有卡片接收點擊。 */
#genealogyPetLayer { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:visible; }
#genealogyPetLayer .genealogy-pet-card { pointer-events:auto; touch-action:manipulation; }
.genealogy-pet-card {
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:5px; padding:9px 7px 7px; border:1.5px solid var(--border-default); border-radius:10px;
  background:var(--surface-card); box-shadow:0 1px 3px rgba(0,0,0,.06);
  color:var(--text-primary); font:inherit; text-align:center; cursor:pointer; pointer-events:auto;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.genealogy-pet-card:hover,.genealogy-pet-card:focus-visible {
  border-color:var(--action-primary); box-shadow:0 5px 14px rgba(0,0,0,.10);
}
.genealogy-pet-card.pet-card-selected {
  z-index:5;
}
.genealogy-pet-card.pet-card-selected::after {
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--action-primary);
  border-radius:inherit;
  box-sizing:border-box;
  pointer-events:none;
}
/* 與人物卡一致：檢視直向、編輯橫向，寵物資訊各自適配。 */
.genealogy-pet-card-info { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; min-width:0; width:100%; text-align:center; }
.genealogy-pet-card.mode-view .genealogy-pet-card-avatar { width:61px; height:61px; align-self:center; }
.genealogy-pet-card.mode-view .genealogy-pet-card-info { align-items:center; text-align:center; }
.genealogy-pet-card.mode-edit { flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; padding:10px; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-info { align-items:flex-start; text-align:left; gap:3px; flex:1; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-avatar { width:51px; height:51px; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-name,
.genealogy-pet-card.mode-edit .genealogy-pet-card-field { text-align:left; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-name { font-size:12px; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-traits.person-card-tags {
  width:100%; max-height:none; overflow:visible; margin-top:1px;
  display:flex; flex-wrap:wrap; gap:3px; align-items:flex-start;
}
.genealogy-pet-card.mode-edit .genealogy-pet-card-traits .tag {
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
  text-overflow:clip; min-height:16px;
}
.genealogy-pet-card .person-card-gender-icon { flex:0 0 auto; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-name { display:flex; align-items:center; gap:2px; }
.genealogy-pet-card.mode-view .genealogy-pet-card-name { text-align:center; }
.genealogy-pet-card.mode-view .genealogy-pet-card-field.person-card-view-meta { justify-content:center; text-align:center; }
.genealogy-pet-card.mode-edit .genealogy-pet-card-field.person-card-edit-meta { justify-content:flex-start; text-align:left; min-height:0; }

.genealogy-pet-card.pet-avatar-only { justify-content:center; }

.genealogy-pet-card-avatar {
  position:relative;
  display:flex; align-items:center; justify-content:center; flex:none; width:51px; height:51px;
  border:1px solid var(--border-default); border-radius:9px; overflow:hidden;
  background:linear-gradient(135deg,var(--avatar-surface-start),var(--avatar-surface-end));
  color:var(--avatar-text);
}
.genealogy-pet-card-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.genealogy-pet-card-avatar .pet-avatar-image,
.person-profile-pet-main-avatar .pet-avatar-image,
.person-profile-pet-avatar .pet-avatar-image { position:relative; z-index:1; opacity:0; }
.genealogy-pet-card-avatar.has-image .pet-avatar-image,
.person-profile-pet-main-avatar.has-image .pet-avatar-image,
.person-profile-pet-avatar.has-image .pet-avatar-image { opacity:1; }
.genealogy-pet-card-avatar.has-image .pet-avatar-species-fallback,
.person-profile-pet-main-avatar.has-image .pet-avatar-species-fallback,
.person-profile-pet-avatar.has-image .pet-avatar-species-fallback { display:none; }
.pet-avatar-species-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--avatar-text); pointer-events:none; }
.genealogy-pet-card-avatar .pet-avatar-species-fallback .l1ng-icon { width:30px; height:30px; }
.genealogy-pet-card-avatar .l1ng-icon { width:26px; height:26px; }
/* 寵物可選顯示欄位全部保留換行，不使用固定兩行裁切。 */
.genealogy-pet-card-name {
  display:block; width:100%; font-size:11px; font-weight:700; line-height:1.45;
  white-space:normal; overflow-wrap:anywhere;
}
.genealogy-pet-card-field {
  display:block; width:100%; font-size:9.5px; line-height:1.4;
  color:var(--text-secondary); white-space:normal; overflow-wrap:anywhere;
}
.genealogy-pet-card.mode-view.card-appearance-minimal { background:transparent; border-color:transparent; box-shadow:none; }
.genealogy-pet-card.mode-view.card-appearance-minimal:hover,
.genealogy-pet-card.mode-view.card-appearance-minimal:focus-visible { background:color-mix(in srgb,var(--surface-card) 48%,transparent); border-color:color-mix(in srgb,var(--action-primary) 58%,transparent); }
.genealogy-pet-card.mode-view.card-appearance-translucent { background:color-mix(in srgb,var(--surface-card) 76%,transparent); border-color:color-mix(in srgb,var(--border-default) 74%,transparent); box-shadow:0 2px 10px rgba(0,0,0,.05); backdrop-filter:blur(5px); }
.genealogy-pet-card.mode-view.card-appearance-full { background:var(--surface-card); }
.genealogy-pet-card.ghost { background:var(--person-ghost-surface); border-color:var(--person-ghost-border); border-style:dotted; }
.genealogy-pet-card.mode-view.card-appearance-minimal.ghost,
.genealogy-pet-card.mode-view.card-appearance-minimal.dead { background:transparent; border-color:transparent; border-style:solid; }
.genealogy-pet-card.dead { background:var(--person-deceased-surface); border-color:var(--person-deceased-border); border-style:dashed; }

/* ========【寵物資料視窗】 設定 - 延續人物樣式，減少寵物資料的空白 ======== */
#personProfileDialog.pet-profile-open .person-profile-panel { width:min(430px,100%); }
#personProfileDialog.pet-profile-open .person-profile-header { padding:14px 16px 12px; gap:12px; }
#personProfileDialog.pet-profile-open .person-profile-avatar { width:80px; height:80px; font-size:26px; }
#personProfileDialog.pet-profile-open .person-profile-body { padding:0 16px; max-height:min(64vh,520px); }
#personProfileDialog.pet-profile-open .person-profile-section { padding:10px 0 11px; }
#personProfileDialog.pet-profile-open .person-profile-row { grid-template-columns:82px minmax(0,1fr); gap:8px; }
#personProfileDialog.pet-profile-open .person-profile-traits { margin-top:5px; }
#personProfileDialog.pet-profile-open .person-profile-panel > .ui-dialog-actions { padding:9px 16px 11px; }
.person-profile-pet-main-avatar { position:relative; }
.person-profile-pet-main-avatar .pet-avatar-species-fallback .l1ng-icon { width:48px; height:48px; }
.genealogy-pet-card.focus-pulse { animation:genealogy-focus-pulse 1.05s ease; }
.person-profile-pet-lineage { display:flex; flex-direction:column; gap:6px; font-size:12px; line-height:1.5; color:var(--text-secondary); }


/* ========【統一表單】 設定 - A 款勾選與單選，保留原生語意與鍵盤操作 ======== */
.export-background-option input[type="radio"],
.person-card-menu-radio input[type="radio"] {
    appearance:none;
    -webkit-appearance:none;
    flex:0 0 14px;
    width:14px;
    height:14px;
    margin:0;
    border:1px solid var(--border-default);
    border-radius:50%;
    background:var(--surface-input);
    box-shadow:none;
}
.export-background-option input[type="radio"]:checked,
.person-card-menu-radio input[type="radio"]:checked {
    border-color:var(--action-primary);
    background:radial-gradient(circle,var(--action-primary) 0 3.2px,transparent 3.3px);
}
.export-background-option input[type="radio"]:focus-visible,
.person-card-menu-radio input[type="radio"]:focus-visible {
    outline:2px solid var(--action-primary);
    outline-offset:2px;
}

/* ========【搜尋欄】 設定 - 共用搜尋 SVG 與清除鈕，不更動下拉選單邏輯 ======== */
.l1ng-search-control {position:relative;min-width:0;flex:1 1 auto}
.l1ng-search-control > input {width:100%;padding-left:33px;padding-right:34px;box-sizing:border-box}
.l1ng-search-control::before {content:"";position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);background:currentColor;opacity:.58;pointer-events:none;-webkit-mask:url("icons/ui-search.svg") center/contain no-repeat;mask:url("icons/ui-search.svg") center/contain no-repeat}
.l1ng-search-control > input::-webkit-search-cancel-button {-webkit-appearance:none;appearance:none;display:none}
.l1ng-search-clear {position:absolute;right:3px;top:50%;transform:translateY(-50%);width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer}
.l1ng-search-clear::before {content:"";display:block;width:13px;height:13px;background:currentColor;-webkit-mask:url("icons/ui-clear.svg") center/contain no-repeat;mask:url("icons/ui-clear.svg") center/contain no-repeat}
.l1ng-search-clear:hover,.l1ng-search-clear:focus-visible {background:var(--surface-item-hover);color:var(--text-primary)}
.l1ng-search-clear:focus-visible {outline:2px solid var(--action-primary);outline-offset:1px}
.l1ng-search-control > .ui-select-search {margin-bottom:0}
.ui-select-dropdown > .l1ng-search-control {display:block;width:100%;margin-bottom:4px}
.relationship-type-search + .l1ng-search-clear {z-index:1}
.l1ng-search-clear[hidden] {display:none}
@media(pointer:coarse){.l1ng-search-clear{width:40px;height:40px;right:0}.l1ng-search-control > input{padding-right:43px}}

/* ========【捲軸】 設定 - A 款細線，涵蓋畫布側欄與所有彈窗捲動區 ======== */
/* 直接指定全體捲動容器，避免先前僅限 .app／滑鼠裝置而漏掉手機與浮動面板。 */
html, body, body * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 999px;
}
/* 刻意隱藏的編輯分頁橫向捲軸仍維持隱藏。 */
.sim-editor-tabs { scrollbar-width: none; }
.sim-editor-tabs::-webkit-scrollbar { display: none; }

/* ========【其他關係搜尋】 設定 - 修正插入搜尋 SVG 後搜尋列被 flex 撐高的問題 ======== */
.relationship-type-menu > .l1ng-search-control {
    flex: 0 0 auto;
    display: block;
    align-self: stretch;
    width: calc(100% - 12px);
    min-width: 0;
    margin: 6px;
    color: var(--nav-dropdown-text);
}
.relationship-type-menu > .l1ng-search-control > .relationship-type-search {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 7px 43px 7px 33px;
    box-sizing: border-box;
}
.relationship-type-menu > .l1ng-search-control::before {
    left: 11px;
    top: 50%;
}
.ui-select-dropdown > .l1ng-search-control {
    flex: 0 0 auto;
    min-height: 0;
    color: var(--nav-dropdown-text);
}
.l1ng-search-control > .ui-select-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
@media (pointer:coarse) {
    .relationship-type-menu > .l1ng-search-control > .relationship-type-search {
        padding-right: 45px;
    }
}

/* ========【顏色選擇器色塊】 設定 - 僅統一色塊外觀，保留原生選色功能 ======== */
.custom-color-input,
.relationship-editor-color input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 32px;
    padding: 3px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--surface-input);
    cursor: pointer;
    overflow: hidden;
}
.custom-color-input::-webkit-color-swatch-wrapper,
.relationship-editor-color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.custom-color-input::-webkit-color-swatch,
.relationship-editor-color input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}
.custom-color-input::-moz-color-swatch,
.relationship-editor-color input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 5px;
}
.custom-color-input:focus-visible,
.relationship-editor-color input[type="color"]:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}


/* ========【浮動調色板】 設定 - 緊湊色碼欄位與手機觸控 ======== */
.l1ng-color-picker-trigger{position:relative;display:inline-flex;vertical-align:middle;width:44px;height:32px;flex:0 0 44px}
.l1ng-color-picker-trigger>input[type="color"]{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%;padding:0}
.l1ng-color-swatch-button{display:block;width:44px;height:32px;padding:3px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-input);cursor:pointer}
.l1ng-color-swatch-button::before{content:"";display:block;width:100%;height:100%;border-radius:5px;background:var(--color-value,#55acee)}
.l1ng-color-swatch-button:focus-visible{outline:2px solid var(--action-primary);outline-offset:2px}
.l1ng-color-swatch-button[aria-expanded="true"]{border-color:var(--action-primary)}
.l1ng-color-picker-popover{position:fixed;z-index:23050;box-sizing:border-box;padding:12px;border:1px solid var(--nav-dropdown-border);border-radius:11px;background:var(--nav-dropdown-bg);color:var(--nav-dropdown-text);box-shadow:0 12px 32px rgba(0,0,0,.20);overflow-y:auto;overscroll-behavior:contain;font-family:inherit}
.l1ng-color-picker-popover[hidden],.l1ng-color-picker-sampler[hidden],.l1ng-color-picker-tools [hidden]{display:none}
.l1ng-color-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.l1ng-color-picker-title{font-size:12px;font-weight:700}
.l1ng-color-picker-close{cursor:pointer}
.l1ng-color-picker-sv{position:relative;height:124px;border-radius:6px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,#55acee);touch-action:none;cursor:crosshair}
.l1ng-color-picker-dot{position:absolute;width:14px;height:14px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #404953;pointer-events:none}
/* ========【色相玻璃】 B 款材質配 A 款 29px 尺寸，彩虹軌道保留 ======== */
.l1ng-color-picker-hue-wrap{position:relative;width:100%;height:52px;margin:4px 0 2px;isolation:isolate}
.l1ng-color-picker-hue-track{position:absolute;left:14.5px;right:14.5px;top:50%;height:10px;transform:translateY(-50%);border-radius:99px;pointer-events:none;background:linear-gradient(90deg,#f00 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,#f00 100%)}
.l1ng-color-picker-hue-rest{position:absolute;top:50%;left:50%;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #8293a0,0 1px 3px rgba(18,44,70,.14);transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:none;transition:opacity .31s ease,transform .36s cubic-bezier(.22,1.15,.36,1)}
.l1ng-color-picker-hue-lens{position:absolute;top:50%;left:50%;width:29px;height:29px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.68);transition:opacity .33s ease,transform .45s cubic-bezier(.2,1.13,.3,1)}
.l1ng-color-picker-hue-glass{position:absolute;inset:0;border-radius:50%;transform:translateX(var(--glass-shift,0px)) scaleX(var(--glass-stretch,1));background:radial-gradient(ellipse 80% 60% at 34% 15%,rgba(255,255,255,.16),transparent 88%),radial-gradient(ellipse 75% 60% at 74% 95%,rgba(22,45,66,.065),transparent 90%),rgba(255,255,255,.055);-webkit-backdrop-filter:blur(.95px) saturate(1.65) brightness(1.07);backdrop-filter:blur(.95px) saturate(1.65) brightness(1.07);box-shadow:0 3px 5px rgba(24,43,68,.18),0 8px 11px -8px rgba(20,43,63,.22),inset 0 1px 1px rgba(255,255,255,.42),inset 0 -1.2px 1.5px rgba(17,42,67,.21),inset 1.2px 0 1px rgba(255,255,255,.18),inset -1.1px 0 1px rgba(31,56,74,.13);overflow:hidden}
.l1ng-color-picker-hue-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 85% 54% at 24% -8%,rgba(255,255,255,.55),transparent 89%),radial-gradient(ellipse 65% 62% at 101% 111%,rgba(215,233,255,.25),transparent 91%),radial-gradient(ellipse 85% 70% at 92% 10%,rgba(255,255,255,.05),transparent 82%);opacity:.78;mix-blend-mode:screen;pointer-events:none}
.l1ng-color-picker-hue-glass::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.64);border-radius:inherit;box-shadow:inset 1px 1px 1.5px rgba(255,255,255,.24),inset -1px -1px 1.5px rgba(37,60,84,.16),0 0 0 .5px rgba(35,70,100,.12);pointer-events:none}
.l1ng-color-picker-hue-wrap:is(.is-dragging,.is-settling) .l1ng-color-picker-hue-rest{opacity:0;transform:translate(-50%,-50%) scale(1.58)}
.l1ng-color-picker-hue-wrap:is(.is-dragging,.is-settling) .l1ng-color-picker-hue-lens{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
input[type="range"].l1ng-color-picker-hue{position:absolute;inset:0;z-index:2;width:100%;height:52px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:auto}

input[type="range"].l1ng-color-picker-hue::-webkit-slider-runnable-track{height:10px;border:0;background:transparent}
input[type="range"].l1ng-color-picker-hue::-moz-range-track{height:10px;border:0;background:transparent}
input[type="range"].l1ng-color-picker-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:29px;width:29px;margin-top:-9.5px;border:0;border-radius:50%;background:transparent;box-shadow:none}
input[type="range"].l1ng-color-picker-hue::-moz-range-thumb{height:29px;width:29px;border:0;border-radius:50%;background:transparent;box-shadow:none}
.l1ng-color-picker-fields{display:grid;gap:6px}
.l1ng-color-picker-field-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center}
.l1ng-color-picker-field-row>span{font-size:10px;font-weight:700;color:var(--nav-dropdown-text);opacity:.76}
.l1ng-color-picker-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.l1ng-color-picker-inputs.single{grid-template-columns:minmax(0,1fr)}
.l1ng-color-picker-inputs label{display:flex;align-items:center;gap:3px;min-width:0;font-size:10px;opacity:.9}
.l1ng-color-picker-inputs input{width:100%;min-width:0;height:28px;min-height:28px;padding:3px 5px;box-sizing:border-box;border:1px solid var(--nav-dropdown-border);border-radius:5px;background:var(--surface-input);color:var(--text-primary);font:inherit;font-size:12px;line-height:1.2;font-variant-numeric:tabular-nums}
.l1ng-color-picker-inputs input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.l1ng-color-picker-inputs input[type="number"]::-webkit-inner-spin-button,.l1ng-color-picker-inputs input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.l1ng-color-picker-inputs input[aria-invalid="true"]{border-color:#d55f69}
.l1ng-color-picker-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.l1ng-color-picker-tools button,.l1ng-color-picker-sampler button{min-height:30px;display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--nav-dropdown-border);border-radius:6px;background:var(--surface-input);color:var(--text-primary);font-size:11px;cursor:pointer}
.l1ng-color-picker-tools svg{width:15px;height:15px}
.l1ng-color-picker-sampler{margin-top:8px}
.l1ng-color-picker-sampler canvas{display:block;width:100%;height:120px;border-radius:6px;background:var(--surface-panel);touch-action:none;cursor:crosshair}
.l1ng-color-picker-sampler-note{margin:5px 0;font-size:10.5px;line-height:1.5;color:var(--text-secondary)}
@media (pointer:coarse){.l1ng-color-picker-tools button{min-height:40px}.l1ng-color-picker-inputs input{font-size:16px;height:32px;min-height:32px}}

@media (prefers-reduced-motion:reduce){.l1ng-color-picker-hue-rest,.l1ng-color-picker-hue-lens{transition:none}}