/* Aptos-Display字体引入 */
@font-face {
font-family: 'Aptos-Display';
src: url('/static/fonts/Aptos-Display.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Aptos-Display';
src: url('/static/fonts/Aptos-Display-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* 基础重置和全局样式 */
*{margin:0;padding:0;box-sizing:border-box;}
:root{--site-max-width:1800px;/* 最大宽度：1800px（用户要求） */ --site-side-padding:20px;--tooltip-max-width:320px;}
body{font-family:'Aptos-Display','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;color:#333;font-size:15px;overflow-x:hidden;}
.site-width{max-width:var(--site-max-width);margin:0 auto;padding:0 var(--site-side-padding);width:100%;box-sizing:border-box;}
/* 如果保留旧选择器，保持向后兼容 */
.site-nav{display:flex;gap:20px;font-size:1.1em;}
/* Header样式 */
.site-header{background:#ffffff;padding:15px 0;border-bottom:1px solid #2c3e50;position:sticky;top:0;z-index:100;}
.site-header-flex{display:flex;justify-content:space-between;align-items:center;max-width:var(--site-max-width);margin:0 auto;padding:0 var(--site-side-padding);}
.site-logo{display:flex;align-items:center;text-decoration:none;color:#2c3e50;font-weight:600;font-size:1.2em;}
.site-logo img{height:24px;margin-right:10px;}
.nav-link{color:#2c3e50;text-decoration:none;padding:8px 16px;transition:all 0.3s ease;font-weight:500;border:1px solid transparent;}
.nav-link:hover{background:#f0f0f0;color:#3498db;border:1px solid #3498db;}
.nav-link.active{background:#3498db;color:white;border:1px solid #3498db;}
/* 移动端菜单按钮 */
.mobile-menu-btn{display:none;background:none;border:1px solid transparent;font-size:24px;color:#2c3e50;cursor:pointer;padding:8px;width:auto;margin:0;}
.mobile-menu-btn:hover{background:#f0f0f0;border:1px solid #2c3e50;}
/* Import Loading Overlay */
.import-loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content:center;align-items:center;z-index:10000;}
.import-loading-content{background:white;padding:40px 50px;border-radius:12px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.import-spinner{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
/* 移动端导航菜单 */
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#ffffff;border-top:1px solid #2c3e50;border-bottom:1px solid #2c3e50;padding:10px 0;}
.mobile-nav.active{display:block;}
.mobile-nav .nav-link{display:block;padding:12px 20px;margin:0;border:1px solid transparent;border-bottom:1px solid #e0e0e0;}
.mobile-nav .nav-link:last-child{border-bottom:none;}
/* 主容器 */
.editor-container{display:flex;gap:15px;background:#ffffff;padding:20px;margin-bottom:20px;max-width:var(--site-max-width);margin-left:auto;margin-right:auto;}
/* 面板通用样式 */
.left-panel,.right-panel{background:white;padding:20px;border:1px solid #bdc3c7;}
.left-panel{width:38%;}
.right-panel{width:62%;}
/* 面板分区 */
/* VIP字体遮罩样式 */
.vip-char-item{position:relative;}
.vip-mask-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;color:white;font-weight:bold;font-size:14px;z-index:10;cursor:not-allowed;}
.vip-mask-overlay::after{content:"VIP";text-shadow:0 0 3px rgba(0,0,0,0.5);}
.panel-section{margin-bottom:15px;}
.panel-section:last-child{border-bottom:none;margin-bottom:0;}
.panel-section h3,.two-column-section h3{margin-bottom:10px;color:#2c3e50;font-size:1.15em;font-weight:600;}
/* Top actions section - ultra compact */
.top-actions-section{margin-bottom:6px;padding:0;border:none;background:transparent;}
.top-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:0;gap:2px;margin-bottom:-25px;}
.top-toolbar-btn{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:none;background:transparent;color:#666;font-size:12px;cursor:pointer;transition:all 0.15s ease;padding:0;margin:0;border-radius:2px;}
.top-toolbar-btn:hover{background:#e3f2fd;color:#2196f3;}
.top-toolbar-btn:active{transform:scale(0.92);background:#bbdefb;}
.top-toolbar-btn i{font-size:16px;color:inherit;}
/* Delete button special style in top toolbar */
#clearLocalDataBtn.top-toolbar-btn:hover{background:#f44336 !important;color:#ffffff !important;}
#clearLocalDataBtn.top-toolbar-btn:hover i{color:#ffffff !important;}
#clearLocalDataBtn.top-toolbar-btn:active{background:#d32f2f !important;}
/* Selector Tab Navigation */
.selector-tab-navigation{display:flex;gap:4px;margin-bottom:-1px;;background:transparent;}
.selector-tab{padding:4px 12px;background:#e0e0e0;border:1px solid #bdc3c7;border-bottom:1px solid #bdc3c7;color:#666;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease;width:auto;margin:0;}
.selector-tab:hover{background:#d0d0d0;color:#333;}
.selector-tab.active{background:#ffffff;color:#2c3e50;border-bottom:1px solid #ffffff;position:relative;z-index:1;}
.selector-tab-content{padding:12px;border:1px solid #bdc3c7;background:#ffffff;margin-bottom:25px;}
/* 新增样式：两列布局 */
.two-column-section{display:flex;gap:15px;margin-bottom:0;}
.selector-tab-content .two-column-section{margin-bottom:0;}
.column{flex:1;display:flex;flex-direction:column;}
.column-header{display:flex;align-items:center;margin-bottom:4px;}
.column-header h3{margin:0;flex:1;}
.input-with-button{display:flex;gap:8px;align-items:center;}
.input-with-button select{flex:1;margin:0;}
.icon-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0;border:1px solid #bdc3c7;}
/* Selector buttons (Grid Size and Sub Style buttons) */
.selector-btn{border:none !important;background:#f8f9fa;color:#666;transition:all 0.2s ease;}
.selector-btn:hover{background:#e0e0e0;color:#333;}
.selector-btn.delete-btn{color:#e74c3c;}
.selector-btn.delete-btn:hover{background:#e74c3c;color:#fff;}
.selector-btn.delete-btn:hover i{color:#fff;}
/* Compact select boxes in selector area */
#sizeSelector,#subStyleSelector,#fontNameSelector,#gridSizeByNameSelector{padding:4px 8px;height:32px;font-size:13px;margin-top:-8px;}
.tooltip{position:relative;display:inline-block;}
.tooltip .tooltip-text{visibility:hidden;max-width:var(--tooltip-max-width);width:auto;background:#2c3e50;color:#fff;text-align:center;padding:8px 12px;position:absolute;z-index:1000;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:all 0.18s ease;font-size:14px;font-weight:500;border:1px solid #ffffff;pointer-events:none;}
.tooltip .tooltip-text::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:#2c3e50 transparent transparent transparent;}
.tooltip:hover .tooltip-text{visibility:visible;opacity:1;transform:translateY(-4px) translateX(-50%);}
/* 表单元素 - Metro风格无圆角 */
select,input,button{width:100%;padding:10px 12px;margin:6px 0;border:1px solid #bdc3c7;font-size:14px;transition:all 0.2s ease;border-radius:0;}
select:focus,input:focus{outline:none;border-color:#3498db;}
/* Radio buttons and checkboxes should not be 100% width */
input[type="radio"],input[type="checkbox"]{width:auto;}
/* 按钮样式 - Metro扁平风格 */
button{background:#fff;color:#333;border:1px solid #bdc3c7;cursor:pointer;font-weight:500;transition:all 0.2s ease;border-radius:0;}
button:hover{background:#3498db;color:#fff;border-color:#3498db;}
button:active{transform:scale(0.98);}
.btn-secondary{background:#f0f0f0;color:#333;border:1px solid #95a5a6;}
.btn-secondary:hover{background:#95a5a6;color:#fff;border-color:#95a5a6;}
.btn-primary{background:#e74c3c;color:white;border:1px solid #e74c3c;}
.btn-primary:hover{background:#c0392b;border-color:#c0392b;}
/* 编辑器工具栏 - Metro扁平风格 */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:1px;align-items:center;margin-bottom:15px;padding:8px;background:#f8f9fa;border:1px solid #bdc3c7;}
.toolbar-group{display:flex;align-items:center;gap:1px;}
.toolbar-group label{font-weight:500;color:#495057;margin:0;}
.toolbar-group button{width:auto;padding:8px;}
.toolbar-separator{width:1px;height:24px;background:#bdc3c7;margin:0 2px;flex-shrink:0;}
/* 覆盖全局表单规则：工具栏内的表单元素不应占满整行 */
.editor-toolbar select,.editor-toolbar input,.editor-toolbar button{width:auto !important;margin:0 !important;padding:6px 8px !important;}
.toolbar-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:#495057;font-size:14px;cursor:pointer;transition:all 0.2s ease;position:relative;border-radius:4px;}
.toolbar-btn:hover{background:#e3f2fd;color:#2196f3;}
.toolbar-btn:hover i{color:#2196f3;}
/* Toolbar dropdown menu */
.toolbar-dropdown{position:relative;display:inline-block;}
.toolbar-dropdown-menu{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:#ffffff;border:1px solid #bdc3c7;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:1000;min-width:180px;padding:4px 0;}
.toolbar-dropdown-menu.show{display:block;}
.toolbar-dropdown-menu .dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;color:#495057;font-size:14px;text-align:left;cursor:pointer;transition:all 0.2s ease;}
.toolbar-dropdown-menu .dropdown-item:hover{background:#e3f2fd;color:#2196f3;}
.toolbar-dropdown-menu .dropdown-item i{width:16px;text-align:center;color:inherit;}
.toolbar-dropdown-menu .dropdown-item span{flex:1;}
/* Extension Pixels Menu - prevent hover on container */
.toolbar-dropdown-menu .dropdown-item:has(select){cursor:default;}
.toolbar-dropdown-menu .dropdown-item:has(select):hover{background:transparent;}
.toolbar-dropdown-menu .menu-select{cursor:pointer;}
/* Icon action buttons (Random, Save Tag, Load Tag) */
.icon-action-btn{display:inline-flex !important;align-items:center;justify-content:center;border:none;background:transparent;color:#495057;font-size:16px;cursor:pointer;transition:all 0.2s ease;border-radius:4px;padding:0;position:relative;flex-shrink:0;}
.icon-action-btn:hover{background:#e3f2fd;color:#2196f3;}
.icon-action-btn:active{transform:scale(0.95);background:#bbdefb;}
.icon-action-btn i{font-size:16px;color:inherit;display:inline-block;}
/* Tag items in Load Tag dialog */
.tag-item:hover{background:#f0f0f0 !important;}
.tag-item:active{background:#e0e0e0 !important;}
.tag-delete-btn:hover{background:#cc0000 !important;}
/* Panel section headers and toolbars */
.panel-section-header{display:flex;justify-content:space-between;align-items:center;}
.panel-section-header h3{margin:0;}
.panel-toolbar{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.panel-toolbar .icon-button{padding:4px;font-size:16px;}
/* Character Map Control Panel */
#charGridControlPanel{display:flex;align-items:stretch;justify-content:space-between;padding:0;background:white;border-left:1px solid #bdc3c7;border-right:1px solid #bdc3c7;border-top:1px solid #bdc3c7;border-bottom:1px solid #bdc3c7;margin-top:-1px;line-height:0;overflow:hidden;}
#charMapZoomControls{display:flex;align-items:center;padding-right:10px;}
.char-map-zoom-level{font-size:11px;color:#666;font-family:monospace;min-width:20px;text-align:center;}
#charNavigation{display:flex;align-items:center;flex:1;justify-content:center;}
.current-char-unicode{font-size:13px;color:#666;font-family:monospace;min-width:60px;text-align:center;}
#charGridControlPanel .generate-btn-wrapper{display:flex;align-items:stretch;padding:0;margin:0;align-self:stretch;line-height:0;font-size:0;}
#charGridControlPanel .generate-btn-wrapper #generateTtfBtn{padding:8px 16px;font-size:14px;font-weight:500;flex:1;border-radius:0;border-left:none;border-top:none;border-bottom:none;border-right:1px solid #27ae60;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:normal;min-height:100%;align-self:stretch;}
/* Text Preview Section */
#textPreviewSection{margin-bottom:15px;}
#textPreviewHeader{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
#textPreviewTitle{margin:0;flex-shrink:0;}
.text-preview-input{flex:1;min-width:150px;padding:6px 10px;border:1px solid #ddd;font-size:14px;border-radius:0;transition:all 0.2s ease;}
.text-preview-input:focus{outline:none;border-color:#3498db;}
#textPreviewControlPanel{display:flex;align-items:stretch;justify-content:space-between;padding:0;background:white;border-left:1px solid #bdc3c7;border-right:1px solid #bdc3c7;border-top:1px solid #bdc3c7;border-bottom:1px solid #bdc3c7;margin-top:-1px;line-height:0;overflow:hidden;}
#textPreviewLeftControls{display:flex;align-items:center;gap:8px;padding-left:10px;flex-wrap:wrap;}
.monospaced-mode-label{display:flex;align-items:center;gap:4px;margin:0;cursor:pointer;font-size:13px;color:#666;}
.monospaced-mode-label input[type="checkbox"]{margin:0;cursor:pointer;width:auto;}
.text-preview-control-separator{width:1px;height:16px;background:#bdc3c7;flex-shrink:0;margin:0 4px;}
.spacing-label{display:flex;align-items:center;gap:4px;margin:0;font-size:13px;color:#666;}
.spacing-input{width:50px;padding:2px 4px;border:1px solid #ddd;border-radius:0;font-size:12px;margin:0;}
.spacing-input:focus{outline:none;border-color:#3498db;}
.spacing-unit{font-size:11px;color:#999;}
#textPreviewZoomControls{display:flex;align-items:center;padding-right:10px;gap:2px;}
.preview-zoom-level{font-size:11px;color:#666;font-family:monospace;min-width:20px;text-align:center;}
.hidden{display:none !important;}
/* Mobile responsive for text preview */
@media (max-width: 768px) {
#textPreviewHeader{flex-direction:column;align-items:stretch;}
#textPreviewHeader .text-preview-input{width:100%;min-width:100%;}
#textPreviewLeftControls{flex-direction:column;align-items:flex-start;gap:8px;padding:8px;}
#textPreviewLeftControls .text-preview-control-separator{display:none;}
#textPreviewControlPanel{flex-wrap:wrap;}
#textPreviewZoomControls{width:100%;justify-content:center;padding:8px;border-top:1px solid #bdc3c7;margin-left:10px;}
}
/* Admin-only elements - hidden by default */
.admin-only{display:none !important;}
body.admin-logged-in .admin-only{display:flex !important;}
.non-admin-only{display:flex !important;}
body.admin-logged-in .non-admin-only{display:none !important;}
/* Character navigation buttons */
.char-nav-btn{width:20px;height:20px;border:1px solid #bdc3c7;background:#fff;color:#495057;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;padding:0;}
.char-nav-btn:hover{background:#3498db;color:#fff;border-color:#3498db;}
.char-nav-btn:disabled{background:#f0f0f0;color:#ccc;cursor:not-allowed;border-color:#ddd;}
.char-nav-btn i{font-size:12px;}
#currentCharUnicode{user-select:all;cursor:text;}
/* Clear Local Data button - red warning on hover */
#clearLocalDataBtn:hover{background:#dc3545;border-color:#dc3545;}
/* SubStyle optgroup separator */
#subStyleSelector optgroup{background:#f0f0f0;font-style:normal;font-weight:bold;color:#666;padding:5px;}
#subStyleSelector optgroup option{background:#fff;font-weight:normal;color:#333;padding-left:10px;}
/* Import Font Tab Styles */
.import-tab{transition:all 0.3s ease;}
.import-tab:hover{background:#f8f9fa;color:#333;}
.import-tab.active{color:#3498db;border-bottom-width:4px;border-bottom-color:#3498db !important;}
/* Compact Selector Group (for Descenders/Ascenders/Right Extension) - Deprecated, moved to menu */
.compact-selector-group{display:flex;align-items:center;gap:2px;background:#f8f9fa;padding:2px 4px;border:1px solid #bdc3c7;}
.compact-selector-group label{margin:0;cursor:pointer;display:flex;align-items:center;padding:0 2px;}
.compact-selector-group .compact-select{width:38px;padding:2px 4px;border:1px solid #ddd;background:white;font-size:12px;cursor:pointer;min-width:38px;}
/* Tooltip for compact selector groups */
.tooltip:has(.compact-selector-group) .tooltip-text{white-space:nowrap;max-width:400px;}
.toolbar-btn:active{transform:scale(0.90);background:#bbdefb;animation:bounce 0.15s ease;}
@keyframes bounce{0%{transform:scale(1);}50%{transform:scale(0.90);}100%{transform:scale(0.95);}}
.toolbar-btn:focus{outline:none;}
.toolbar-btn i{font-size:16px;color:#6c757d;transition:color 0.2s ease;}
/* Delete button special hover effect */
#clearLocalDataBtn:hover{background:#f44336 !important;color:#ffffff !important;}
#clearLocalDataBtn:hover i{color:#ffffff !important;}
#clearLocalDataBtn:active{background:#d32f2f !important;}
.toolbar-label{font-size:14px;font-weight:600;color:#495057;margin:0 5px;}
.zoom-display{font-size:14px;font-weight:600;color:#007bff;background:white;padding:5px 10px;min-width:50px;text-align:center;border:1px solid #bdc3c7;}
.descender-select{padding:4px 8px;border:1px solid #bdc3c7;background:white;font-size:14px;width:60px;}
.ascender-select{padding:4px 8px;border:1px solid #bdc3c7;background:white;font-size:14px;width:60px;}
/* 像素编辑器 */
#pixelEditor{margin:15px 0;}
.pixel-grid-container{display:flex;align-items:stretch;justify-content:center;gap:12px;margin:15px auto;}
.pixel-grid{display:grid;gap:2px;background:#ecf0f1;padding:8px;border:1px solid #bdc3c7;justify-content:center;width:fit-content;max-width:100%;overflow-x:auto;align-self:center;}
/* Character navigation arrows for pixel grid */
.char-nav-arrow{background:#f8f9fa;border:2px solid #bdc3c7;border-radius:6px;width:40px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:20px;color:#495057;user-select:none;flex-shrink:0;padding:0;align-self:stretch;min-height:200px;}
.char-nav-arrow:hover{background:#e9ecef;border-color:#3498db;color:#3498db;}
.char-nav-arrow:active{opacity:0.8;}
.char-nav-arrow:focus{outline:none;box-shadow:0 0 0 3px rgba(52,152,219,0.2);}
.char-nav-arrow i{font-size:20px;}
.pixel{background:white;cursor:pointer;border:1px solid #bdc3c7;}
.pixel:hover{border-color:#3498db;background:#e3f2fd;}
.pixel.active{background:#2c3e50;border-color:#2c3e50;}
/* 合并网格样式 */
.pixel-grid .ascender-pixel{background-color:#ffd700 !important;border:1px solid #ddd !important;}
.pixel-grid .ascender-pixel.active{background-color:#333 !important;}
.pixel-grid .descender-pixel{background-color:#FF33FF !important;border:1px solid #ddd !important;}
.pixel-grid .descender-pixel.active{background-color:#333 !important;}
.pixel-grid .right-extension-pixel{background-color:#33FFFF !important;border:1px solid #ddd !important;}
.pixel-grid .right-extension-pixel.active{background-color:#333 !important;}
/* 预览区域 */
.preview-area{background:#f8f9fa;padding:20px 10px;min-height:50px;border:1px solid #bdc3c7;font-family:'Courier New',monospace;font-size:16px;line-height:1.4;display:block;overflow:hidden;}
.preview-char{float:left;vertical-align:top;}
.preview-pixel{display:inline-block;width:1px;height:1px;margin:0px;background-color:#2c3e50;}
.preview-pixel.inactive{background-color:transparent;}
/* 字符映射表 */
:root{--char-map-pixel-size:2px;/* 默认2px (200%) */ --char-map-zoom-scale:1.0;--char-item-min-width:30px;/* 默认最小宽度，根据缩放级别动态调整 */}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--char-item-min-width),1fr));gap:2px;max-height:800px;overflow-y:auto;padding:10px;background:#ecf0f1;border:1px solid #bdc3c7;}
.char-item{display:flex;flex-direction:column;align-items:center;padding:6px 0 0 0;cursor:pointer;transition:all 0.2s ease;background:white;border:1px solid #bdc3c7;position:relative;}
.char-item:hover{border-color:#3498db;background:#e3f2fd;}
.char-item.selected{border-color:#e74c3c;background:#ffeaa7;}
.char-item .pixel-preview{display:grid;gap:0px;}
/* grid-template-columns is set dynamically by JavaScript based on actual grid width */
.char-item .pixel{width:var(--char-map-pixel-size);height:var(--char-map-pixel-size);background-color:#eee;border:none;margin:0;padding:0;}
.char-item.selected .pixel{background:#ccc;}
.char-item .pixel.active{background-color:#2d3436;}
/* Character map zoom buttons */
.char-zoom-btn{background:white;border:1px solid #ddd;border-radius:3px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:11px;color:#666;}
.char-zoom-btn:hover{background:#f0f0f0;border-color:#3498db;color:#3498db;}
.char-zoom-btn:active{background:#e0e0e0;}
.char-zoom-btn:disabled{opacity:0.4;cursor:not-allowed;}
.char-zoom-btn:disabled:hover{background:white;border-color:#ddd;color:#666;}
/* 字符网格中的ascenders和descenders预览 */
.char-item .pixel-preview .ascender-pixel{width:var(--char-map-pixel-size) !important;height:var(--char-map-pixel-size) !important;margin:0 !important;padding:0 !important;background-color:#ffd700 !important;}
.char-item .pixel-preview .ascender-pixel.active{background-color:#333 !important;}
.char-item .pixel-preview .descender-pixel{width:var(--char-map-pixel-size) !important;height:var(--char-map-pixel-size) !important;margin:0 !important;padding:0 !important;background-color:#FF33FF !important;}
.char-item .pixel-preview .descender-pixel.active{background-color:#333 !important;}
.char-item .pixel-preview .right-extension-pixel{width:var(--char-map-pixel-size) !important;height:var(--char-map-pixel-size) !important;margin:0 !important;padding:0 !important;background-color:#33FFFF !important;}
.char-item .pixel-preview .right-extension-pixel.active{background-color:#333 !important;}
.char-display{font-size:12px;font-weight:bold;color:#2c3e50;margin-bottom:4px;}
.char-unicode{font-size:10px;color:#7f8c8d;font-family:monospace;display:none;}
/* Add Unicode button in char grid with light red background */
.char-item.add-unicode-button{border:1px solid #e74c3c;background:#ffe6e6;}
.char-item.add-unicode-button:hover{border-color:#c0392b;background-color:#ffcccc;}
.char-item.add-unicode-button:hover .add-icon{color:#ff6666;}
/* Delete button for custom characters - no background, larger X */
.char-delete-btn{position:absolute;top:-4px;right:-1px;color:#ff4757;border:none;width:16px;height:16px;font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;line-height:1;background:transparent;z-index:10;}
.char-item:hover .char-delete-btn{display:flex;background:transparent;}
.char-delete-btn:hover{color:#ff0000;background:transparent !important;transform:scale(1.1);}
/* 样式选择器 */
.styles-container{display:flex;flex-wrap:wrap;gap:10px;max-height:250px;overflow-y:auto;padding:12px;background:#f8f9fa;border:1px solid #bdc3c7;position:relative;}
.style-item{display:flex;flex-direction:column;align-items:center;padding:6px;border:1px solid #bdc3c7;cursor:pointer;transition:all 0.2s ease;background:white;position:relative;overflow:hidden;flex-shrink:0;}
.style-item:hover{border-color:#27ae60;background:#d5f5e3;}
.style-item.selected{border-color:#27ae60;background:#d5f5e3;}
.style-preview{display:grid;gap:0px;margin:4px 0;overflow:hidden;justify-content:center;}
/* Style-item preview pixels - fixed 3px size for better visibility */
.style-preview .preview-pixel{display:block;width:3px;height:3px;margin:0;border:none;}
.style-preview .preview-pixel.ascender-pixel{background-color:#ffd700;}
.style-preview .preview-pixel.ascender-pixel[data-active="1"]{background-color:#333;}
.style-preview .preview-pixel:not(.ascender-pixel):not(.descender-pixel):not(.right-extension-pixel){background-color:#f5f5f5;}
.style-preview .preview-pixel:not(.ascender-pixel):not(.descender-pixel):not(.right-extension-pixel)[data-active="1"]{background-color:#333;}
.style-preview .preview-pixel.descender-pixel{background-color:#FF33FF;}
.style-preview .preview-pixel.descender-pixel[data-active="1"]{background-color:#333;}
.style-preview .preview-pixel.right-extension-pixel{background-color:#33FFFF;}
.style-preview .preview-pixel.right-extension-pixel[data-active="1"]{background-color:#333;}
.style-delete-btn{position:absolute;top:-2px;right:5px;color:#ff4757;border:none;width:20px;height:20px;font-size:15px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;}
.style-item:hover .style-delete-btn{display:flex;}
.style-delete-btn:hover{background:yellow;color:#ff4757;}
.style-name{font-size:12px;text-align:center;color:#2c3e50;font-weight:500;}
.style-item.add-style-button{border:1px solid #95a5a6;background:#f8f9fa;}
.add-icon{font-size:30px;color:#95a5a6;font-weight:bold;}
.style-item.add-style-button:hover{border-color:#3498db;background-color:#e3f2fd;}
.style-item.add-style-button:hover .add-icon{color:#3498db;}
/* 样式项拖拽相关样式 */
.style-item.dragging{
    opacity:0.6 !important;
    transform:scale(0.9) rotate(-5deg) !important;
    box-shadow:0 10px 25px rgba(0,0,0,0.4) !important;
    z-index:1000 !important;
    position:relative;
    transition:transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.style-item.drag-over{
    background-color:#e3f2fd !important;
    border:2px solid #2196f3 !important;
    box-shadow:inset 0 0 20px rgba(33,150,243,0.3), 0 0 15px rgba(33,150,243,0.4) !important;
    z-index:999 !important;
    position:relative;
    transition:background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}
.style-item[draggable="true"]{cursor:grab;}
.style-item[draggable="true"]:active{cursor:grabbing;}
/* 拖拽预览效果 */
.style-item::before{content:"⋮⋮";position:absolute;top:5px;right:5px;color:#999;font-size:12px;opacity:0;transition:opacity 0.3s ease;}
.style-item:hover::before{opacity:1;}
/* 插入位置指示器 - 显示在两个item之间 */
.style-insert-indicator{
    position:absolute;
    width:4px;
    height:60px;
    background:#2196f3;
    box-shadow:0 0 12px rgba(33,150,243,0.8), 0 0 6px rgba(33,150,243,0.6);
    z-index:1001;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s ease;
    border-radius:2px;
    top:50%;
    transform:translateY(-50%);
}
.style-insert-indicator.show{
    opacity:1;
}
.style-insert-indicator.before{
    left:-12px;
}
.style-insert-indicator.after{
    right:-12px;
}
/* 在两个item之间的插入指示器 */
.styles-container .insert-indicator-between{
    position:absolute;
    width:4px;
    height:80px;
    background:#2196f3;
    box-shadow:0 0 12px rgba(33,150,243,0.8), 0 0 6px rgba(33,150,243,0.6);
    z-index:1001;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s ease;
    border-radius:2px;
    top:0;
    left:0;
}
.styles-container .insert-indicator-between.show{
    opacity:1;
}
/* 堆叠效果 - 拖拽时的视觉反馈 */
.style-item.dragging::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(33,150,243,0.1);
    border:2px dashed #2196f3;
    border-radius:4px;
    pointer-events:none;
    animation:stackPulse 1s ease-in-out infinite;
}
@keyframes stackPulse{
    0%,100%{transform:translate(0,0) rotate(0deg);opacity:0.3;}
    50%{transform:translate(2px,-2px) rotate(1deg);opacity:0.5;}
}
/* 容器插入指示器 */
.styles-container .insert-indicator{
    position:absolute;
    width:100%;
    height:4px;
    background:#2196f3;
    box-shadow:0 0 8px rgba(33,150,243,0.6);
    z-index:1001;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s ease;
    border-radius:2px;
}
.styles-container .insert-indicator.show{
    opacity:1;
}
/* Descenders 设置 */
.descenders-controls{background:#f8f9fa;padding:12px;border:1px solid #bdc3c7;}
.descender-group{margin-bottom:12px;}
.descender-group label{display:block;margin-bottom:8px;font-weight:500;color:#495057;}
.descender-options{display:flex;flex-direction:column;gap:6px;}
.descender-options label{display:flex;align-items:center;gap:6px;margin:0;font-weight:normal;cursor:pointer;}
.descender-options input[type="radio"]{width:auto;margin:0;}
.quick-descenders{margin-top:12px;}
.quick-descenders label{display:block;margin-bottom:6px;font-weight:500;}
.quick-descenders button{width:auto;padding:5px 10px;margin:2px;font-size:11px;}
/* 保存按钮 */
.bottomButtons{padding:12px 25px;font-size:15px;margin:10px;display:block;width:auto;float:left;border:1px solid #27ae60;background:#27ae60;color:white;}
.bottomButtons:hover{background:#229954;border-color:#229954;}
/* Generate 按钮 - 深绿背景白色文字，凸显按钮 */
#generateTtfBtn,button#generateTtfBtn,.primary-button#generateTtfBtn{background:#27ae60 !important;color:#ffffff !important;border:1px solid #27ae60 !important;font-weight:600;display:flex;align-items:center;justify-content:center;}
#generateTtfBtn:hover,button#generateTtfBtn:hover,.primary-button#generateTtfBtn:hover{background:#229954 !important;color:#ffffff !important;border-color:#27ae60 !important;}
/* 模态框 - Metro 风格，无圆角 */
#modalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000;overflow-y:auto;}
#modalOverlay > div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:25px;padding-right:35px;border:1px solid #2c3e50;min-width:260px;max-width:calc(100% - 40px);max-height:calc(100vh - 40px);border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
#modalTitle{color:#2c3e50;font-size:1.2em;flex-shrink:0;}
#modalContent{margin-bottom:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;}
#modalOverlay > div > div:last-child{flex-shrink:0;text-align:right;margin-top:auto;padding-right:8px;}
/* Modal 滚动条美化 - 显示在边框外 */
#modalOverlay > div::-webkit-scrollbar{width:12px;}
#modalOverlay > div::-webkit-scrollbar-track{background:transparent;margin:8px 0;}
#modalOverlay > div::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#95a5a6,#7f8c8d);border-radius:6px;border:2px solid white;}
#modalOverlay > div::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#7f8c8d,#6c7a7b);}
#modalOverlay > div::-webkit-scrollbar-thumb:active{background:linear-gradient(to bottom,#6c7a7b,#5d6d6e);}
#modalContent::-webkit-scrollbar{width:8px;}
#modalContent::-webkit-scrollbar-track{background:transparent;margin:4px 0;}
#modalContent::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#bdc3c7,#95a5a6);border-radius:4px;border:2px solid transparent;}
#modalContent::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#95a5a6,#7f8c8d);}
/* Firefox 滚动条 */
#modalOverlay > div{scrollbar-width:thin;scrollbar-color:#95a5a6 transparent;}
#modalContent{scrollbar-width:thin;scrollbar-color:#bdc3c7 transparent;}
#modalCancel,#modalConfirm{width:auto;padding:8px 16px;margin-left:8px;}
#modalCancel{background:#f0f0f0;color:#333;border:1px solid #95a5a6;}
#modalConfirm{background:#e74c3c;color:white;border:1px solid #e74c3c;}
/* Special character buttons in modal */
.special-char-btn{min-width:32px;width:auto;height:32px;padding:4px 8px;background:#ffffff;border:1px solid #ddd;cursor:pointer;font-size:16px;transition:all 0.2s ease;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;}
.special-char-btn:hover{background:#3498db;color:#fff;border-color:#3498db;}
/* Language buttons in modal - responsive width */
.language-btn{width:auto;padding:6px 12px;background:#f8f9fa;border:1px solid #bdc3c7;cursor:pointer;font-size:12px;transition:all 0.2s ease;white-space:nowrap;min-width:80px;flex:0 0 auto;}
.language-btn:hover{background:#3498db;color:#fff;border-color:#3498db;}
/* Delete all custom button in modal */
.delete-all-btn{width:100%;padding:8px 12px;background:#dc3545;color:white;border:1px solid #dc3545;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;}
.delete-all-btn:hover{background:#c82333;border-color:#c82333;}
/* 确保bottom-section不溢出 */
.bottom-section .site-width{overflow-x:hidden;}
/* 滚动条样式 */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#f1f1f1;}
::-webkit-scrollbar-thumb{background:#bdc3c7;}
::-webkit-scrollbar-thumb:hover{background:#95a5a6;}
/* 响应式设计 */
@media (max-width: 1200px) {
.editor-container{flex-direction:column;}
.left-panel,.right-panel{width:100%;}
/* 在较小屏幕上，保持工具栏水平排列并允许横向滚动，避免纵向堆叠 */
.editor-toolbar{display:flex;flex-wrap:nowrap;/* no wrap */ align-items:center;gap:1px;overflow-x:auto;/* horizontal scroll */ -webkit-overflow-scrolling:touch;padding:8px 6px;}
.editor-toolbar .toolbar-group{flex:0 0 auto;display:flex;align-items:center;gap:1px;}
.editor-toolbar .toolbar-group select,
.editor-toolbar .toolbar-group input,
.editor-toolbar .toolbar-group button{width:auto !important;}
.toolbar-btn{width:32px;height:32px;font-size:14px;flex:0 0 auto;}
}
@media (max-width: 768px) {
/* Header响应式 */
.site-nav{display:none !important;}
.mobile-menu-btn{display:block;}
.site-header{position:relative;}
/* 编辑器工具栏 */
.editor-toolbar{padding:8px;gap:4px;flex-wrap:wrap;overflow-x:visible;}
.toolbar-group{flex:0 0 auto;justify-content:flex-start;}
.toolbar-btn{width:28px;height:28px;font-size:12px;flex:0 0 auto;}
.toolbar-label,.zoom-display{font-size:12px;}
.width-input{width:50px !important;font-size:12px !important;}
/* Top toolbar on mobile - keep compact */
.top-toolbar-btn{width:20px;height:20px;}
.top-toolbar-btn i{font-size:11px;}
/* Panel toolbars on mobile - allow wrapping only, keep original size and spacing */
.panel-toolbar{justify-content:flex-start;}
}
/* 在非常窄的屏幕上（手机），允许 tooltip 换行显示完整文本 */
@media (max-width: 480px) {
.tooltip .tooltip-text{white-space:normal;/* 允许换行 */ max-width:calc(100vw - 40px);/* 视口宽度减去边距 */ left:50%;transform:translateX(-50%);word-break:break-word;padding:8px 12px;}
/* Panel section header on small mobile - allow wrapping */
.panel-section-header{flex-wrap:wrap;}
.panel-section-header h3{width:100%;margin-bottom:8px;}
}
/* Generate TTF Font Modal Styles */
#generateTtfModal{max-width:600px;}
#generateTtfModal > div:first-child{display:grid;grid-template-columns:140px 1fr;gap:0;align-items:center;}
#generateTtfModal label{padding:0;margin:0;font-size:14px;color:#333;}
#generateTtfModal input[type="text"],
#generateTtfModal input[type="number"],
#generateTtfModal select{margin:0;padding:10px 0;margin-bottom:-1px;font-size:14px;height:auto;border:1px solid #ddd;background:white;}
#generateTtfModal input[type="text"],
#generateTtfModal input[type="number"]{padding-left:8px;padding-right:8px;}
#generateTtfModal select{flex:1;padding-left:8px;padding-right:8px;}
#generateTtfModal input[type="range"]{flex:1;margin:0;padding:10px 0}
#generateTtfModal input[type="checkbox"]{cursor:pointer;width:18px;height:18px;margin:8px 0;}
#generateTtfModal > div:first-child > div{display:flex;align-items:center;gap:8px;}
#generateTtfModal > div:first-child > div:has(#ttfPixelScale){gap:10px;}
#generateTtfModal #ttfRightBearingInput,
#generateTtfModal #ttfRowSpacingInput{width:70px;display:none;}
#generateTtfModal #ttfPixelScaleValue{min-width:40px;font-size:14px;color:#666;}
/* Preview Section */
#generateTtfModal > div:nth-child(2){margin-top:20px;padding:15px;border:1px solid #ddd;background:#f9f9f9;}
#generateTtfModal > div:nth-child(2) h4{margin:0 0 10px 0;font-size:16px;color:#333;}
#generateTtfModal #ttfPreviewArea{display:flex;justify-content:center;align-items:center;min-height:80px;background:white;border:1px solid #ccc;overflow:visible;}
#generateTtfModal #ttfPreviewChar{display:inline-block;overflow:visible;}
/* Button Section */
#generateTtfModal > div:last-child{margin-top:15px;text-align:right;}
#generateTtfModal > div:last-child button{margin-right:10px;width:auto;padding:8px 16px;}
#generateTtfModal > div:last-child button:last-child{margin-right:0;}
#generateTtfModal input#ttfFamilyName{margin:0 0 -1px 0;}
/* Pixel Stretch Modal Styles */
.stretch-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;justify-content:center;align-items:center;}
.stretch-modal-content{background:white;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;}
.stretch-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #ddd;}
.stretch-modal-header h3{margin:0;font-size:18px;color:#333;}
.stretch-modal-close{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.stretch-modal-close:hover{color:#333;}
.stretch-modal-body{padding:20px;flex:1;}
.stretch-option-group{margin-bottom:20px;}
.stretch-label{display:block;font-weight:500;color:#495057;margin-bottom:10px;font-size:14px;}
.stretch-radio-group{display:flex;gap:15px;flex-wrap:wrap;}
.stretch-radio-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:#495057;}
.stretch-radio-label input[type="radio"]{cursor:pointer;}
.stretch-checkbox-group{display:flex;flex-direction:column;gap:8px;}
.stretch-checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#495057;}
.stretch-checkbox-label input[type="checkbox"]{cursor:pointer;width:18px;height:18px;}
.stretch-input-group{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.stretch-input{width:80px;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px;text-align:center;}
.stretch-input:focus{outline:none;border-color:#3498db;}
.stretch-hint{font-size:12px;color:#666;margin-top:5px;}
.stretch-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #ddd;}
.stretch-btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all 0.2s ease;}
.stretch-btn-cancel{background:#95a5a6;color:white;}
.stretch-btn-cancel:hover{background:#7f8c8d;}
.stretch-btn-apply{background:#3498db;color:white;}
.stretch-btn-apply:hover{background:#2980b9;}
/* JSON Data Manager Tab Styles */
.json-data-tab{transition:all 0.2s ease;}
.json-data-tab:hover{background:#e8e8e8 !important;}
.json-data-tab-content{display:none;}
.json-data-tab-content h3{margin-top:0;margin-bottom:20px;color:#333;font-size:18px;font-weight:600;}
.dafont-spinner{width:16px;height:16px;border:2px solid #d0d0d0;border-top-color:#3498db;border-radius:50%;animation:dafont-spin .8s linear infinite;}
@keyframes dafont-spin{to{transform:rotate(360deg);}}
/* Context Menu Styles */
.context-menu{position:fixed;background:#ffffff;border:1px solid #bdc3c7;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:10000;min-width:180px;padding:4px 0;font-size:14px;display:none;}
.context-menu-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;color:#2c3e50;transition:background-color 0.15s ease;user-select:none;}
.context-menu-item:hover{background-color:#e3f2fd;color:#1976d2;}
.context-menu-item:active{background-color:#bbdefb;}
.context-menu-item i{width:16px;text-align:center;font-size:14px;color:inherit;}
.context-menu-item span{flex:1;font-size:14px;color:inherit;}
.context-menu-divider{height:1px;background:#e0e0e0;margin:4px 0;}
.context-menu-item.disabled{opacity:0.5;cursor:not-allowed;}
.context-menu-item.disabled:hover{background-color:transparent;}