:root{
  --z-canvas:    10; --z-canvas-ui: 20; --z-chrome:    50;
  --z-panel:     100; --z-dropdown:  200; --z-modal:     500; --z-tooltip:   9999;
  --bg-canvas: #ffffff; --bg-panel: #f4f4f5; --bg-panel-2: #eaeaeb;
  --border-soft: rgba(0,0,0,0.08); --border-mid: rgba(0,0,0,0.12);
  --text-primary: #1a1a1a; --text-secondary: #6e6e73; --text-tertiary: #a1a1a6;
  --accent: #3a5fff; --accent-soft: rgba(58,95,255,0.10);
  --danger: #ff453a; --danger-soft: rgba(255,69,58,0.1);
  --grid-line: rgba(0,0,0,0.06);
  --nav-width: 56px; --sidebar-width: 265px; --panel-width: 285px; --footer-height: 28px;
  --radius-sm: 6px; --radius-md: 10px;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'PingFang SC', 'Helvetica Neue', sans-serif;
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-pop: 0.18s; --dur-modal: 0.22s; --dur-fast: 0.15s;
}

[data-theme="dark"]{
  --bg-canvas: #1c1c1e; --bg-panel: #232325; --bg-panel-2: #2e2e32;
  --border-soft: rgba(255,255,255,0.08); --border-mid: rgba(255,255,255,0.14);
  --text-primary: #f2f2f3; --text-secondary: #9a9a9e; --text-tertiary: #6b6b6f;
  --accent: #6f8cff; --accent-soft: rgba(111,140,255,0.16); --grid-line: rgba(255,255,255,0.06);
}

*{box-sizing:border-box; -webkit-font-smoothing:antialiased; font-family: inherit;}
html,body{height:100%; margin:0; overflow:hidden; font-family:var(--sans);}
body{ color:var(--text-primary); background:var(--bg-panel); font-size:13px; display:flex; flex-direction:column; height:100vh; opacity: 0; animation: fadeIn 0.4s ease forwards;}
@keyframes fadeIn { to { opacity: 1; } }

button{cursor:pointer; border:none; background:none; color:inherit; padding:0;}
input,select,textarea{color:inherit; border:1px solid var(--border-soft); border-radius:4px; background:var(--bg-canvas);}
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background:var(--border-mid); border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}

/* SVG 图标尺寸控制 */
.gn-item svg, .panel-toggle-btn svg { width: 18px; height: 18px; }
/* 给 SVG 图标加上翻转动画 */
.panel-toggle-btn svg { 
  transition: transform 0.3s var(--ease-pop); 
}

/* 当面板是非 active (收起) 状态时，图标水平翻转 180 度 */
.panel-toggle-btn:not(.active) svg {
  transform: rotateY(180deg);
}

.tab-current svg, .tab-dd-add svg, .tab-dd-clear svg, .zi-reset svg, .pp-section-title svg, .fs-search svg, .fs-upload-btn svg, .dl-btn svg, .pp-align-btn svg, .multi-align-group button svg { width: 14px; height: 14px; }
.tab-dd-close svg, .fc-axes svg, .pp-play-btn svg { width: 12px; height: 12px; }
.pp-reset-btn svg { width: 13px; height: 13px; }
.drop-overlay-inner svg { width: 32px; height: 32px; }

.app-shell{ display:flex; flex:1; min-height:0; position:relative; }

/* Global Nav */
.global-nav{ width:var(--nav-width); background:var(--bg-panel); border-right:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:center; padding:14px 0; flex-shrink:0; z-index:var(--z-panel); }
.gn-logo{ position:relative; width:32px; height:32px; flex-shrink:0; margin-bottom:20px; cursor:pointer; display:block; text-decoration:none; }
.gn-logo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:8px; }
.gn-logo-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity .15s; }
.gn-logo-overlay svg { width:16px; height:16px; }
.gn-logo:hover .gn-logo-overlay { opacity:1; }
.gn-tools, .gn-bottom { display:flex; flex-direction:column; gap:6px; width:100%; align-items:center; }
.gn-bottom{ margin-top:auto; }
.gn-item{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color:var(--text-tertiary); text-decoration:none; transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-pop); position:relative; }
.gn-item:hover{ background:var(--bg-panel-2); color:var(--text-primary); transform: translateY(-1px); }
.gn-item:active{ transform: scale(0.92); transition-duration: 0.08s; }
.gn-item.active{ background:var(--accent-soft); color:var(--accent); }

/* ==== Tooltip 系统与层级提权优化 ==== */
[data-tooltip]:hover { z-index: var(--z-tooltip) !important; }
.gn-hover-wrap:hover { z-index: var(--z-tooltip) !important; }
.tea-btn:hover, .panel-toggle-btn:hover { z-index: var(--z-tooltip) !important; }

[data-tooltip]::after { content: attr(data-tooltip); position: absolute; background: var(--text-primary); color: var(--bg-canvas); padding: 5px 9px; border-radius: 5px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); z-index: var(--z-tooltip); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
[data-tooltip]::before { content: ''; position: absolute; width: 6px; height: 6px; background: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); z-index: calc(var(--z-tooltip) - 1); }
/* 修改后：增加了 transition-delay，悬浮 0.4s 后再显示 */
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.4s; }
[data-tooltip]:hover::before { opacity: 1; transform: translateY(0) rotate(45deg); transition-delay: 0.4s; }
.open > [data-tooltip]::after, .open > [data-tooltip]::before, .open[data-tooltip]::after, .open[data-tooltip]::before { display: none !important; }
[data-tooltip]::after { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px); }
[data-tooltip]:hover::after { transform: translateX(-50%) translateY(0); }
[data-tooltip]::before { bottom: calc(100% + 5px); left: calc(50% - 3px); transform: translateY(2px) rotate(45deg); }
[data-tooltip]:hover::before { transform: translateY(0) rotate(45deg); }
[data-tooltip-pos="right"]::after { bottom:auto; left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-2px); }
[data-tooltip-pos="right"]:hover::after { transform: translateY(-50%) translateX(0); }
[data-tooltip-pos="right"]::before { bottom:auto; left: calc(100% + 5px); top: calc(50% - 3px); transform: translateX(-2px) rotate(45deg); }
[data-tooltip-pos="right"]:hover::before { transform: translateX(0) rotate(45deg); }
[data-tooltip-pos="left"]::after { bottom:auto; left:auto; right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(2px); }
[data-tooltip-pos="left"]:hover::after { transform: translateY(-50%) translateX(0); }
[data-tooltip-pos="left"]::before { bottom:auto; left:auto; right: calc(100% + 5px); top: calc(50% - 3px); transform: translateX(2px) rotate(45deg); }
[data-tooltip-pos="left"]:hover::before { transform: translateX(0) rotate(45deg); }
[data-tooltip-pos="bottom"]::after { bottom:auto; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-2px); }
[data-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
[data-tooltip-pos="bottom"]::before { bottom:auto; top: calc(100% + 5px); left: calc(50% - 3px); transform: translateY(-2px) rotate(45deg); }
[data-tooltip-pos="bottom"]:hover::before { transform: translateY(0) rotate(45deg); }
[data-tooltip-pos="bottom-end"]::after { bottom:auto; top: calc(100% + 8px); left: auto; right: 0; transform: translateY(-2px); }
[data-tooltip-pos="bottom-end"]:hover::after { transform: translateY(0); }
[data-tooltip-pos="bottom-end"]::before { bottom:auto; top: calc(100% + 5px); left: calc(50% - 3px); right: auto; transform: translateY(-2px) rotate(45deg); }
[data-tooltip-pos="bottom-end"]:hover::before { transform: translateY(0) rotate(45deg); }
@media (max-width: 768px) { [data-tooltip]::after, [data-tooltip]::before { display: none !important; } }

/* 菜单 */
.gn-hover-wrap { position: relative; }
.gn-hover-menu { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 12px; background: var(--bg-canvas); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 180px; padding: 6px; display: none; z-index: var(--z-dropdown); }
.gn-hover-wrap.open .gn-hover-menu { display: block; animation: menuPop var(--dur-pop) var(--ease-pop); }
@keyframes menuPop { from { opacity: 0; transform: translateY(-50%) scale(0.96); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes menuPopUp { from { opacity: 0; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.gn-hover-menu::after { content: ''; position: absolute; left: -12px; top: 0; width: 12px; height: 100%; }
.gn-hover-menu::before { content: ''; position: absolute; left: -5px; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--bg-canvas); border-left: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); transform: rotate(45deg); }
.gn-hover-menu-up { top: auto; bottom: 0; transform: translateY(0); margin-bottom: 0; }
.gn-hover-menu-up::before { top: auto; bottom: 15px; }
.gn-hover-wrap.open .gn-hover-menu-up { animation: menuPopUp var(--dur-pop) var(--ease-pop); }
.gn-hover-item { padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-primary); transition: background .15s; cursor: pointer; display: flex; align-items:center; justify-content:space-between; text-decoration: none; }
.gn-hover-item:hover { background: var(--bg-panel); color: var(--accent); }
.ext-icon { width: 12px; height: 12px; opacity: 0.4; margin-left:8px; }
.gn-hover-divider { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.app-settings-menu { width: 240px; padding: 12px; }
.setting-group { margin-bottom: 18px; }
.setting-group:last-child { margin-bottom: 4px; }
.setting-title { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; padding-left: 2px; }
.seg-control { position: relative; display: flex; background: var(--bg-panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 3px; z-index: 1; }
.seg-slider { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--count, 2)); transform: translateX(calc(var(--index, 0) * 100%)); background: var(--bg-canvas); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; }
.seg-control button { flex: 1; padding: 6px 0; font-size: 12px; color: var(--text-secondary); border-radius: 5px; text-align: center; transition: color 0.2s; position: relative; z-index: 2; font-weight: 400; }
.seg-control button.active { color: var(--text-primary); font-weight: 500; background: transparent; box-shadow: none; }

/* Font Sidebar (移除原本的 z-index 防止覆盖左侧导航) */
.font-sidebar { position:relative; width: var(--sidebar-width); background: var(--bg-panel); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; overflow: hidden; opacity: 1; min-height: 0; }
.font-sidebar.collapsed { width: 0 !important; opacity: 0; border-right-color: transparent; }
.drop-overlay { position:absolute; inset:0; background:rgba(var(--accent), 0.05); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.drop-overlay.active { opacity:1; pointer-events:auto; }
.drop-overlay-inner { border:2px dashed var(--accent); padding:30px 40px; border-radius:12px; color:var(--accent); font-weight:600; text-align:center; background:var(--bg-canvas); box-shadow: 0 10px 30px rgba(0,0,0,0.1); display:flex; flex-direction:column; gap:10px; align-items:center;}
.fs-header{ padding:18px 12px 10px; flex-shrink:0; width:var(--sidebar-width); }
.fs-search-row{ display:flex; gap:6px; width: 100%;}
.fs-search{ flex:1; display:flex; align-items:center; gap:6px; background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:7px 10px; min-width: 0;}
.fs-search input{ border:none; outline:none; background:none; width:100%; font-size:12.5px; color:var(--text-primary); min-width: 0; }
.fs-upload-btn{ width:32px; height:32px; flex-shrink:0; border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:var(--bg-canvas); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all .15s; }
.fs-upload-btn:hover{ color:var(--accent); border-color:var(--accent); }
.fs-tags{ display:flex; gap:6px; padding:10px 12px 0; flex-wrap:wrap; flex-shrink:0; width:var(--sidebar-width); }
.fs-tag{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border-soft); color:var(--text-secondary); background:var(--bg-canvas); transition:all .15s; cursor:pointer; user-select:none; }
.fs-tag:hover{ border-color:var(--accent); color:var(--accent); }
.fs-tag.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.fs-list{ flex:1; overflow-y:auto; padding:10px 12px 4px; display:flex; flex-direction:column; gap:6px; min-height:0; width:var(--sidebar-width); }
.fs-empty{ text-align:center; color:var(--text-tertiary); font-size:12px; padding:30px 10px; }
.font-card{ border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px; background:var(--bg-canvas); cursor:pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast); }
.font-card:hover{ border-color:var(--border-mid); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.font-card.selected{ border-color:var(--accent); background:var(--accent-soft); }
.font-card:active{ transform: translateY(0) scale(0.99); transition-duration: 0.08s; }
.fc-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:8px; }
.fc-name{ font-size:13px; font-weight:600; color:var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fc-axes{ display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-tertiary); font-family: var(--mono); background: var(--bg-panel); padding: 2px 6px; border-radius: 4px; flex-shrink:0; }
.fc-preview{ font-size:18px; line-height:1.3; color:var(--text-secondary); margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.fc-tag{ font-size:10px; padding:2px 7px; border-radius:4px; background:var(--bg-panel); color:var(--text-tertiary); border:1px solid var(--border-soft); }
.fs-info-panel{ border-top:1px solid var(--border-soft); padding:12px; flex-shrink:0; font-size:11.5px; color:var(--text-secondary); line-height:1.7; background:var(--bg-panel-2); max-height:145px; overflow-y:auto; width:var(--sidebar-width); }
.fs-info-panel .ip-title{ font-weight:600; color:var(--text-primary); font-size:12.5px; margin-bottom:4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dl-btn { display:inline-flex; align-items:center; gap:4px; color:var(--accent); text-decoration:none; font-weight:500; margin-top:8px; border: 1px solid var(--accent); padding: 4px 10px; border-radius: 6px; transition:all var(--dur-fast); }
.dl-btn:hover { background: var(--accent-soft); }
.dl-btn svg { transition: transform var(--dur-pop) var(--ease-pop); }
.dl-btn:hover svg { transform: translateX(3px); }
.dl-btn.disabled { color:var(--text-tertiary); border-color:var(--border-mid); cursor:default; pointer-events:none; }

/* Main Column & Canvas */
.main-col{ flex:1; display:flex; flex-direction:column; position:relative; min-width:0; min-height:0; }
.top-left-bar{ position: absolute; top: 14px; left: 14px; z-index: var(--z-chrome); display:flex; align-items:center; gap:8px; max-width: calc(100% - 28px); }
.tab-dropdown { position: relative; z-index: var(--z-dropdown); }
.tab-current { height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.05); cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-pop); box-sizing: border-box; }
.tab-current:hover { background: var(--bg-canvas); }
.tab-current:active { transform: scale(0.98); transition-duration: 0.08s; }
.tab-current span { font-size: 13px; font-weight: 500; color: var(--text-primary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-current span[contenteditable="true"] { outline: 1px dashed var(--accent); border-radius: 3px; cursor: text; }
.tab-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--bg-canvas); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 210px; padding: 6px; display: none; }
.tab-dropdown.open .tab-dropdown-menu { display: block; animation: menuPopUp var(--dur-pop) var(--ease-pop); }
.tab-dd-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; transition: background .15s; }
.tab-dd-item:hover { background: var(--bg-panel); }
.tab-dd-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.tab-dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-dd-close { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-tertiary); opacity: 0; transition: all .15s; }
.tab-dd-item:hover .tab-dd-close { opacity: 1; }
.tab-dd-close:hover { background: var(--border-mid); color: var(--danger); }
.tab-dd-divider { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.tab-dd-actions { display: flex; align-items: center; justify-content: space-between; }
.tab-dd-add { flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; }
.tab-dd-add:hover { background: var(--bg-panel); color: var(--accent); }
.tab-dd-clear { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-tertiary); cursor: pointer; transition: all .15s; margin-left: 4px; }
.tab-dd-clear:hover { background: var(--border-mid); color: var(--danger); }

.panel-toggle-btn { position: absolute; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.05); color: var(--text-secondary); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-pop); z-index: var(--z-chrome); box-sizing: border-box; }
.panel-toggle-btn:hover { background: var(--bg-canvas); color: var(--text-primary); transform: scale(1.05); }
.panel-toggle-btn:active { transform: scale(0.93); transition-duration: 0.08s; }
.panel-toggle-btn.active { color: var(--accent); }
.btn-top-right { top: 14px; right: 14px; }
.btn-bottom-left { bottom: 14px; left: 14px; }

/* Canvas Area */
.canvas-area{ flex:1; position:relative; overflow:hidden; min-height:0; }
.canvas-viewport{ position:absolute; inset:0; overflow:hidden; cursor:default; background-color: var(--bg-canvas); transition: background-color 0.3s; touch-action: none; }
.canvas-viewport.panning{ cursor:grabbing; }
.canvas-world{ position:absolute; top:0; left:0; width:4000px; height:4000px; transform-origin:0 0; z-index: var(--z-canvas); will-change: transform; touch-action: none;}
.background-system { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.canvas-viewport.bg-mode-fluid .layer-fluid { opacity: 1; }
.canvas-viewport.bg-mode-image .layer-image { opacity: 1; }
.layer-image { background-position: center; background-size: cover; } 

@keyframes floatAnim { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(5%, 5%) scale(1.1); } }
.fluid-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation-play-state: paused; will-change: transform; }
.canvas-viewport.bg-mode-fluid .fluid-blob { animation-play-state: running; }
.blob-a { background: #c4f5fc; width: 50vw; height: 50vw; top: -10%; left: -10%; animation: floatAnim 15s infinite alternate ease-in-out; }
.blob-b { background: #e8dff5; width: 45vw; height: 45vw; bottom: -10%; right: -10%; animation: floatAnim 18s infinite alternate-reverse ease-in-out; }
.blob-c { background: #fff9c4; width: 30vw; height: 30vw; top: 30%; left: 30%; animation: floatAnim 20s infinite alternate ease-in-out; }
[data-theme="dark"] .fluid-blob { opacity: 0.15; filter: blur(100px); }

.bg-pattern-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; }
.bg-pattern-dots { background-image: radial-gradient(var(--grid-line) 1.5px, transparent 1.5px); background-size: 40px 40px; }

.canvas-text-box{ position:absolute; left:0; top:0; padding:0.12em 0.08em; border:1.5px solid transparent; border-radius:4px; white-space:pre-wrap; word-break:break-word; color:var(--text-primary); min-width:40px; min-height:24px; transition:border-color .1s; will-change: transform; cursor:move; }
.canvas-text-box:hover{ border-color:var(--border-mid); }
.canvas-text-box.selected{ border-color:var(--accent); }
.canvas-text-box[contenteditable="true"] { cursor:text; outline:none; }
.box-text[contenteditable="true"] { outline:none; cursor:text; }
.handle{ position:absolute; background:var(--accent); border:1.5px solid var(--bg-canvas); border-radius:50%; display:none; z-index:5; }
.canvas-text-box.selected .handle{display:block;}
.handle-resize{ width:11px; height:11px; right:-6px; bottom:-6px; cursor:nwse-resize; }
.handle-width{ width:8px; height:22px; border-radius:3px; right:-5px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.hide-selection-ui .canvas-text-box.selected { border-color: transparent !important; }
.hide-selection-ui .canvas-text-box.selected .handle { display: none !important; }

.canvas-empty-hint{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:var(--text-tertiary); pointer-events:none; user-select:none; z-index: var(--z-canvas-ui);}
.canvas-empty-hint .cehi{ font-size:13px; margin-bottom:6px; color:var(--text-secondary); mix-blend-mode: difference;}
.canvas-empty-hint .cehk{ font-size:11px; font-family:var(--mono); background:var(--bg-panel); color:var(--text-primary); padding:2px 8px; border-radius:4px; display:inline-block; mix-blend-mode: normal;}

.zoom-indicator{ position:absolute; bottom:14px; right:14px; z-index:var(--z-chrome); background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:6px; padding:4px; font-size:11px; font-family:var(--mono); color:var(--text-secondary); display:flex; align-items:center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.zi-divider { width: 1px; height: 14px; background: var(--border-soft); margin: 0 4px; }
.zoom-indicator .zi-value{ padding:0 8px; min-width:48px; text-align:center; }
.zoom-indicator .zi-reset{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:4px; color:var(--text-secondary); transition:all .15s; }
.zoom-indicator .zi-reset:hover{ background:var(--bg-panel-2); color:var(--accent); }

/* 快捷键与模板 */
.shortcuts-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; }
.shortcuts-overlay.open{ display:flex; }
.shortcuts-modal{ width:min(420px, 92vw); max-height:80vh; background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-md); box-shadow:0 20px 60px rgba(0,0,0,0.25); display:flex; flex-direction:column; overflow:hidden; animation: modalPop var(--dur-modal) var(--ease-pop); }
@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.shortcuts-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-soft); flex-shrink:0; }
.shortcuts-header h3{ margin:0; font-size:14px; font-weight:600; color:var(--text-primary); }
.shortcuts-close{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:var(--text-secondary); transition:all .15s; }
.shortcuts-close:hover{ background:var(--bg-panel-2); color:var(--text-primary); }
.shortcuts-body{ overflow-y:auto; padding:6px 16px 16px; }
.shortcuts-group{ margin-top:14px; }
.shortcuts-group-title{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-tertiary); margin-bottom:8px; }
.shortcut-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--text-primary); }
.shortcut-row:last-child{ border-bottom:none; }
.kbd-combo{ color:var(--text-secondary); font-size:11.5px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; text-align:right; }
kbd{ font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:4px; background:var(--bg-panel-2); border:1px solid var(--border-mid); color:var(--text-primary); }

.tab-extra-actions{ display:flex; gap:6px; flex-shrink:0; }
.tea-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.05); color: var(--text-secondary); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-pop); position: relative; box-sizing: border-box; }
.tea-btn:hover{ background:var(--bg-canvas); color:var(--accent); border-color:var(--accent); transform: translateY(-1px); }
.tea-btn:active{ transform: translateY(0) scale(0.92); transition-duration: 0.08s; }
.tea-btn svg{ width:15px; height:15px; } 
.template-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:var(--z-dropdown); background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,0.12); padding:12px; display:none; width:300px; }
.template-menu.open{ display:block; animation: menuPopUp var(--dur-pop) var(--ease-pop); }
.template-menu-title{ font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; }
.template-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.template-card{ border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 8px; background:var(--bg-panel); cursor:pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-pop); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.template-card:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); transform: translateY(-2px); }
.template-card:active{ transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.template-card svg{ width:28px; height:28px; color:var(--text-secondary); }
.template-card:hover svg{ color:var(--accent); }
.template-card span{ font-size:11.5px; color:var(--text-primary); }
.template-card:hover span{ color:var(--accent); }

/* Properties Panel (移除 z-index 防止遮挡左侧全局导航) */
.props-panel { width: var(--panel-width); background: var(--bg-panel); border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; overflow-x: hidden; opacity: 1; min-height: 0; }
.props-panel.collapsed { width: 0 !important; opacity: 0; border-left-color: transparent; }
.pp-container { width: var(--panel-width); display: flex; flex-direction: column; flex: 1; padding-bottom: 24px; }
.pp-content{ display:flex; flex-direction:column; transition: opacity 0.2s; }
.disabled-panel { opacity: 0.5; pointer-events: none; user-select: none; }
.disabled-panel .pp-slider::-webkit-slider-thumb { background: var(--text-tertiary); }
.multi-align-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.multi-align-group button { height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft); border-radius:5px; background:var(--bg-canvas); color:var(--text-secondary); transition:all .15s; }
.multi-align-group button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.multi-align-group button:hover:not(:disabled) { background:var(--bg-panel); color:var(--accent); border-color:var(--border-mid); }
.pp-empty-text { font-size: 12px; color: var(--text-tertiary); text-align: center; padding: 12px 0; }
.pp-section{ padding:20px 12px; border-bottom:1px solid var(--border-soft); }
.pp-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.pp-section-title{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-tertiary); margin:0; display: flex; align-items: center; gap: 6px; }
.pp-reset-btn { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); border-radius:4px; transition:all .15s; cursor:pointer;}
.pp-reset-btn:hover { background:var(--bg-panel-2); color:var(--text-primary); }
.pp-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; width: 100%;}
.pp-row:last-child{margin-bottom:0;}
.pp-label{ width:44px; flex-shrink:0; font-size:12px; color:var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-control{flex:1; display:flex; align-items:center; gap:4px; min-width: 0;}
.pp-slider{ flex:1; -webkit-appearance:none; height:3px; border-radius:2px; background:var(--border-mid); outline:none; min-width: 0;}
.pp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--bg-panel); box-shadow:0 0 0 1px var(--border-mid); }
.pp-num{ width:46px; flex-shrink:0; text-align:right; border:1px solid var(--border-soft); border-radius:5px; background:var(--bg-canvas); padding:4px; font-size:11.5px; font-family:var(--mono); color:var(--text-primary); }
.pp-unit{ font-size:11px; color:var(--text-tertiary); width:14px; }
.pp-play-btn { width:24px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); background:var(--bg-panel-2); transition:all .15s; border: 1px solid transparent; flex-shrink:0; cursor:pointer;}
.pp-play-btn:hover { color:var(--accent); }
.pp-play-btn.playing { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.pp-align-group{ display:flex; gap:4px; flex:1; width: 100%;}
.pp-align-btn{ flex:1; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft); border-radius:5px; background:var(--bg-canvas); color:var(--text-secondary); transition:all .15s; min-width: 0;}
.pp-align-btn:hover { color:var(--text-primary); }
.pp-align-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.multi-align-group button { flex:1; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft); border-radius:5px; background:var(--bg-canvas); color:var(--text-secondary); transition:all .15s; min-width: 0;}
.multi-align-group button:hover { background:var(--bg-panel); color:var(--accent); border-color:var(--border-mid); }
.pp-color-swatch{ width:28px; height:28px; border-radius:6px; border:1px solid var(--border-soft); cursor:pointer; position:relative; overflow:hidden; flex-shrink:0;}
.pp-color-swatch input[type="color"]{ position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:none; cursor:pointer; opacity:0; }

.global-footer{ height:var(--footer-height); border-top:1px solid var(--border-soft); background:var(--bg-panel); display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:10.5px; color:var(--text-tertiary); flex-shrink:0; position:relative; z-index:var(--z-panel); }
.global-footer a{ color:var(--text-tertiary); text-decoration:none; margin-left:10px; transition:color .15s;}
.global-footer a:hover{ color:var(--text-secondary); }

/* ==== 修复：手机端底部栏与全局自适应 ==== */
@media (max-width: 768px) {
  .canvas-empty-hint .cehk { white-space: normal; padding: 6px 12px; line-height: 1.5; }
  .canvas-empty-hint .cehk::after { content: " （手机端可直接单指拖动背景）"; }
  .top-left-bar { max-width: calc(100% - 60px); }
  .tab-current span { max-width: 90px; }
  .template-menu { width: calc(100vw - 28px); max-width: 320px; }
  
  .global-footer { 
    height: auto; 
    flex-direction: column; 
    justify-content: center; 
    padding: 10px 14px; 
    gap: 6px; 
    text-align: center; 
  }
  .global-footer span { display: block; line-height: 1.4; }
  .global-footer a { margin-left: 5px; margin-right: 5px; display: inline-block; }
}
/* ======================================================================
   欢迎弹窗与沉浸式层级缩放 (海报级大气空间感)
   ====================================================================== */
/* 底层缩放退后，隐藏底部栏 */
.app-shell { 
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.6s, filter 0.6s; 
  transform-origin: center center;
}
.global-footer { 
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; 
}
body.show-welcome .app-shell {
  transform: scale(0.96) translateY(6px);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border-soft), 0 20px 60px rgba(0,0,0,0.1);
  filter: brightness(0.7) saturate(0.85); /* 亮度提升，不再那么黑 */
  pointer-events: none;
}
body.show-welcome .global-footer { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* 遮罩：透明度大幅降低，保留清透感 */
.welcome-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.2); /* 从 0.4 降到 0.2 */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  padding: 20px;
}
.welcome-overlay.active { opacity: 1; pointer-events: auto; }

/* 宽屏弹窗主体：宽度飙升，极度宽裕的留白空间 */
.welcome-modal {
  width: 100%; max-width: 840px;
  background: var(--bg-canvas);
  border-radius: 12px; 
  padding: 80px 80px 0; /* 顶部留白 80px，底部 0 */
  box-shadow: 0 50px 120px rgba(0,0,0,0.25), 0 0 0 1px var(--border-soft);
  transform: translateY(30px) scale(0.98);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh; overflow-y: auto;
}
.welcome-overlay.active .welcome-modal { transform: translateY(0) scale(1); }
/* 贯穿式离场动效：不走回头路，顺势向上飞出并微微缩小 */
.welcome-modal.closing {
  transform: translateY(-60px) scale(0.95) !important;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* ========== 头部：海报级排版 ========== */
.wm-header { text-align: center; margin-bottom: 72px; }

/* 表情放大，间距拉开 */
.wm-playful-icon {
  display: block;
  margin: 0 auto 24px auto; 
  width: 52px; height: 52px;
  color: var(--text-primary);
  animation: playfulWiggle 4s infinite ease-in-out;
  transform-origin: center center;
}
@keyframes playfulWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  5% { transform: rotate(-15deg) scale(1.1); }
  10% { transform: rotate(15deg) scale(1.1); }
  15% { transform: rotate(-15deg) scale(1.1); }
  20% { transform: rotate(10deg) scale(1.1); }
  25% { transform: rotate(0deg) scale(1); }
}

/* 海报级巨大标题，极度收紧字距 */
.wm-title { 
  font-size: 56px; font-weight: 800; letter-spacing: -2px; 
  color: var(--text-primary); margin: 0 0 20px; font-family: var(--sans);
}
/* 介绍文案：松弛的行高，更浅的颜色拉开层级 */
.wm-intro { 
  font-size: 16.5px; line-height: 1.65; color: var(--text-secondary); 
  max-width: 560px; margin: 0 auto; font-weight: 400;
}

/* ========== 中间三列：空间感网格 ========== */
.wm-grid { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; /* 拉开巨大列间距 */
  margin-bottom: 72px; text-align: left;
}
.wm-card-num {
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 16px; border-bottom: 2px solid var(--text-primary); padding-bottom: 6px;
  display: inline-block;
}
.wm-card h4 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px;}
.wm-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }

/* ========== 底部交互：高耸的巨石拱门 ========== */
.wm-action { 
  display: flex; justify-content: center; 
  margin-top: 24px; 
}

/* 按钮变高、变宽，更像一个坚固的基座 */
.wm-btn-outline {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 40px 48px 32px; min-width: 180px;
  background: transparent; color: var(--text-primary);
  border: 2px solid var(--text-primary); 
  border-bottom: none; 
  border-radius: 120px 120px 0 0; 
  font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: 2px; /* 拉大字母间距提升高级感 */
  cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom center;
}

.wm-btn-text {
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wm-icon-flier {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.wm-btn-icon { 
  width: 22px; height: 22px; 
  animation: eagerBounce 1.5s infinite ease-in-out;
}
@keyframes eagerBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* 完美居中计算：因为盒子更高了，下潜距离增加 */
.wm-btn-outline:hover .wm-btn-text { transform: translateY(18px); }
.wm-btn-outline:hover .wm-icon-flier { transform: translateY(40px); opacity: 0; }
.wm-btn-outline:active { transform: scaleY(0.96); }

/* 暗黑模式适配 */
[data-theme="dark"] .welcome-modal { box-shadow: 0 50px 120px rgba(0,0,0,0.8), 0 0 0 1px var(--border-mid); }
[data-theme="dark"] .wm-card-num { border-bottom-color: var(--border-mid); }

/* 移动端适配 */
@media (max-width: 768px) {
  .welcome-modal { padding: 56px 32px 0; }
  .wm-playful-icon { width: 44px; height: 44px; margin-bottom: 16px; }
  .wm-title { font-size: 36px; letter-spacing: -1px; }
  .wm-grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
  .wm-card-num { border-bottom-width: 1px; }
  .wm-btn-outline { padding: 32px 32px 24px; }
  .wm-btn-outline:hover .wm-btn-text { transform: translateY(14px); }
}
/* ======================================================================
   剧院熄灯效应：底层缩放时，边缘空间过渡为纯黑色
   ====================================================================== */
/* 给 body 背景色加上平滑过渡动画 */
body {
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 当弹窗出现时，强制将最底层的背景变成纯黑 */
body.show-welcome {
  background-color: #000000 !important;
}
/* ================= 高级交互组件 ================= */
/* 1. 框选范围框 */
.marquee-selection { position: absolute; border: 1px solid var(--accent); background: var(--accent-soft); z-index: var(--z-canvas-ui); pointer-events: none; display: none; }