/* 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;border-bottom:1px solid #BDC3C7;position:sticky;top:0;z-index:100;transition:padding 0.3s ease,box-shadow 0.3s ease;}
.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);transition:all 0.3s ease;}
.site-logo{display:flex;align-items:center;text-decoration:none;color:#2c3e50;font-weight:600;font-size:1.2em;transition:all 0.3s ease;}
.site-logo img{height:24px;margin-right:10px;transition:height 0.3s ease;}
/* Pixel Fonts Page - Header shrink on scroll */
#pagePixelFonts.scrolled .site-header, #pageDotMatrixFonts.scrolled .site-header{box-shadow:0 2px 8px rgba(0,0,0,0.1);}
#pagePixelFonts.scrolled .site-logo, #pageDotMatrixFonts.scrolled .site-logo{font-size:1em;}
#pagePixelFonts.scrolled .site-logo img, #pageDotMatrixFonts.scrolled .site-logo img{height:16px;}
#pagePixelFonts.scrolled .site-header-flex, #pageDotMatrixFonts.scrolled .site-header-flex{gap:10px;}
#pagePixelFonts.scrolled .nav-link, #pageDotMatrixFonts.scrolled .nav-link{padding:4px 12px;font-size:0.95em;}
.site-slogan{display:none;color:#7f8c8d;font-size:0.95em;font-weight:400;font-style:italic;white-space:nowrap;}
@media (min-width:1200px) {
.site-slogan{display:inline-block;}
}
.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:#ffffff;color:#3498db;border:1px solid #3498db;}
.nav-link.active{background:#3498db;color:white;border:1px solid #3498db;}
/* Account link styles - button-like when not logged in */
.account-link{display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid transparent !important;box-sizing:border-box;}
.account-link:not(.logged-in){background:transparent;color:#95a5a6 !important;font-weight:400;padding:8px 12px;}
.account-link:not(.logged-in):hover{background:#f8f9fa;color:#7f8c8d !important;transform:none;box-shadow:none;border:1px solid transparent !important;}
.account-link:not(.logged-in) i{color:#95a5a6;}
.account-link.logged-in{color:#2c3e50;border:1px solid transparent !important;}
.account-link.logged-in:hover{background:#f8f9fa;color:#3498db;border:1px solid transparent !important;}
.account-link.logged-in i{color:#3498db;}
.account-link i{font-size:1.2em;}
.account-dropdown{position:relative;display:inline-block;}
.account-dropdown-menu{display:none;position:absolute;top:100%;right:0;background:white;border:1px solid #e0e0e0;box-shadow:0 4px 12px rgba(0,0,0,0.15);min-width:160px;z-index:1000;margin-top:0;padding-top:5px;}
.account-dropdown-menu::before{content:'';position:absolute;top:-5px;left:0;right:0;height:5px;background:transparent;}
.account-dropdown-menu .dropdown-item{display:block;padding:12px 16px;color:#2c3e50;text-decoration:none;transition:background 0.2s;border-bottom:1px solid #f0f0f0;}
.account-dropdown-menu .dropdown-item:last-child{border-bottom:none;}
.account-dropdown-menu .dropdown-item:hover{background:#f8f9fa;color:#3498db;}
.account-dropdown-menu .dropdown-item i{margin-right:8px;width:16px;text-align:center;}
.account-dropdown-menu .dropdown-account-name{font-weight:600;color:#2c3e50;cursor:default;background:#f8f9fa;}
.account-dropdown-menu .dropdown-account-name:hover{background:#f8f9fa;color:#2c3e50;}
.account-dropdown-menu .dropdown-login-prompt{font-weight:500;color:#7f8c8d;cursor:default;background:#f8f9fa;font-style:italic;}
.account-dropdown-menu .dropdown-login-prompt:hover{background:#f8f9fa;color:#7f8c8d;}
/* 移动端菜单按钮 */
.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:#ffffff;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;}
.mobile-nav .nav-link:hover{background:#ffffff;color:#3498db;border-color:#3498db;}
/* 主容器 */
.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;}
#modalTextPreviewSection h3{margin-bottom:10px;}
/* 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;}
/* Refresh button (formerly clearLocalDataBtn) - changed to refresh icon */
#clearLocalDataBtn.top-toolbar-btn:hover{background:#3498db !important;color:#ffffff !important;}
#clearLocalDataBtn.top-toolbar-btn:hover i{color:#ffffff !important;}
#clearLocalDataBtn.top-toolbar-btn:active{background:#2980b9 !important;}
/* Update badge for refresh button */
.update-badge{position:relative;background:#e74c3c;color:white;border-radius:50%;width:12px;height:12px;font-size:8px;line-height:12px;text-align:center;box-shadow:0 0 4px rgba(231,76,60,0.6);animation:pulse 2s infinite;display:block;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.2);opacity:0.8;}}
/* 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;}
/* Custom select wrapper */
.custom-select-wrapper{position:relative;}
.custom-select-dropdown{position:absolute;top:100%;left:0;right:0;background:#ffffff;border:1px solid #bdc3c7;border-top:none;box-shadow:0 4px 8px rgba(0,0,0,0.15);z-index:1000;padding:5px;margin-top:1px;}
/* Grid size dropdown with button-style options */
.grid-size-dropdown{display:flex;flex-wrap:wrap;gap:4px;padding:5px;min-height:auto;width:100%;box-sizing:border-box;align-items:flex-start;line-height:1.2;}
.grid-size-btn{padding:3.6px 9px;font-size:11.7px;border:1px solid #bdc3c7;background:#ffffff;color:#333;cursor:pointer;transition:all 0.2s ease;border-radius:0;white-space:nowrap;text-align:center;font-weight:400;text-decoration:none;display:inline-block;line-height:1.2;width:auto;min-width:auto;flex:0 0 auto;margin:0;}
.grid-size-btn:hover{background:#f8f9fa;color:#333;border-color:#bdc3c7;}
.grid-size-btn.active{background:#3498db;color:#ffffff;border-color:#3498db;font-weight:400;font-size:11.7px;}
.grid-size-btn.active:hover{background:#2980b9;color:#ffffff;border-color:#2980b9;font-weight:400;font-size:11.7px;}
.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;white-space:nowrap;}
.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%);}
/* Tooltip text highlight style - red background with white text (matches update badge color) */
.tooltip .tooltip-text .highlight{background:#e74c3c;color:#ffffff;padding:2px 4px;border-radius:3px;font-weight:600;display:inline-block;}
/* 表单元素 - 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;right:auto;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;}
/* Always show Reload Data button for all users (including admin) */
#clearLocalDataBtnContainer{display:inline-block !important;visibility:visible !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 dots/grid for Pixel Fonts & Dot Matrix preview text */
.preview-char-grid{
display:grid;
grid-template-columns:repeat(var(--preview-col-count,1),var(--preview-cell-size,1px));
grid-auto-rows:var(--preview-cell-size,1px);
gap:var(--preview-gap,0px);
margin-right:var(--preview-spacing,0px);
padding-top:var(--preview-top-padding,0px);
vertical-align:top;
position:relative;
flex-shrink:0;
}
.preview-dot{
width:var(--preview-cell-size,1px);
height:var(--preview-cell-size,1px);
background-color:transparent;
}
.preview-dot.ascender{background-color:#fff8e1;}
.preview-dot.descender{background-color:#ffcccc;}
.preview-dot.is-on{background-color:#333;}
.preview-dot.inactive{opacity:1;}
/* 字符映射表 */
: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 !important;}
/* 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;}
/* Dot Matrix Style Toggle Button */
.dot-matrix-style-toggle{display:inline-flex;align-items:center;cursor:pointer;user-select:none;height:40px;padding:0 8px;transition:all 0.2s ease;}
.dot-matrix-style-toggle:hover{background:#e0e0e0;border-color:#95a5a6;}
.dot-matrix-style-toggle input[type="checkbox"]{display:none;}
.dot-matrix-style-toggle .toggle-container{display:flex;align-items:center;gap:6px;position:relative;}
.dot-matrix-style-toggle .toggle-slider{position:relative;width:36px;height:20px;background-color:#ccc;border-radius:10px;transition:background-color 0.2s ease;flex-shrink:0;overflow:hidden;}
.dot-matrix-style-toggle .toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background-color:white;border-radius:50%;transition:transform 0.2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:2;}
.dot-matrix-style-toggle .toggle-slider::after{content:'OFF';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:8px;font-weight:600;color:#666;transition:opacity 0.2s ease;z-index:1;}
.dot-matrix-style-toggle input[type="checkbox"]:checked + .toggle-container .toggle-slider{background-color:#3498db;}
.dot-matrix-style-toggle input[type="checkbox"]:checked + .toggle-container .toggle-slider::before{transform:translateX(16px);}
.dot-matrix-style-toggle input[type="checkbox"]:checked + .toggle-container .toggle-slider::after{content:'ON';left:4px;right:auto;color:#fff;opacity:1;}
.dot-matrix-style-toggle input[type="checkbox"]:not(:checked) + .toggle-container .toggle-slider::after{opacity:1;}
.dot-matrix-style-toggle .toggle-text{font-size:13px;color:#495057;font-weight:500;white-space:nowrap;line-height:1;}
.dot-matrix-style-toggle:hover .toggle-text{color:#333;}
.dot-matrix-style-toggle input[type="checkbox"]:checked + .toggle-container .toggle-text{color:#3498db;}
/* Dot Matrix Style Classes */
.dot-matrix-mode .char-item .pixel{border-radius:50%;}
.dot-matrix-mode .char-item .pixel.active{box-shadow: 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1);}
.dot-matrix-mode .char-item .pixel-preview{gap:2px !important;}
.dot-matrix-mode .preview-area .preview-pixel:not(.inactive){box-shadow: 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1), 0 0 1px rgba(0, 0, 0, 1);}
.dot-matrix-mode .style-preview{gap:2px !important;}
.dot-matrix-mode .style-preview .preview-pixel{border-radius:50%;}
.dot-matrix-mode .preview-char-grid{gap:2px !important;}
.dot-matrix-mode .preview-dot{border-radius:50%;}
.dot-matrix-mode .pixel-grid{gap:2px !important;}
.dot-matrix-mode .pixel{border-radius:50%;}
/* 字符网格中的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:10004;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;width:auto;max-width:500px;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;margin-bottom:15px;}
#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;}
/* Unsaved Changes 对话框按钮样式优化 */
#saveChangesBtn:hover{background:#218838 !important;transform:translateY(-1px);box-shadow:0 2px 8px rgba(40,167,69,0.3);}
#saveChangesBtn:active{background:#1e7e34 !important;transform:translateY(0);}
#discardChangesBtn:hover{background:#c82333 !important;transform:translateY(-1px);box-shadow:0 2px 8px rgba(220,53,69,0.3);}
#discardChangesBtn:active{background:#bd2130 !important;transform:translateY(0);}
/* 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;}
/* 响应式设计 */
/* 大屏幕（1920px及以上）- 模态框使用固定最大宽度，避免过宽 */
@media (min-width: 1920px) {
#modalOverlay > div{max-width:500px;width:auto;min-width:300px;}
}
/* 中等屏幕（768px-1919px）- 模态框使用适中的宽度 */
@media (min-width: 768px) and (max-width: 1919px) {
#modalOverlay > div{max-width:600px;width:70%;}
}
@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;}
/* 移动端模态框 - 使用更大的宽度百分比 */
#modalOverlay > div{width:95%;max-width:calc(100% - 20px);padding:20px;padding-right:25px;}
}
/* 在非常窄的屏幕上（手机），允许 tooltip 换行显示完整文本 */
@media (max-width: 480px) {
/* Override for specific tooltips that need wrapping (if any) */
.tooltip.allow-wrap .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;}
/* 小屏幕模态框 - 几乎全宽，减少内边距 */
#modalOverlay > div{width:98%;max-width:calc(100% - 10px);padding:15px;padding-right:20px;}
}
/* Generate TTF Font Modal Styles */
#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;}
/* 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;background:#f0f0f0;color:#333;border:1px solid #95a5a6;cursor:pointer;font-size:14px;transition:all 0.2s;}
#generateTtfModal > div:last-child button:hover{background:#e0e0e0;border-color:#7f8c8d;}
#generateTtfModal > div:last-child button.primary{background:#27ae60;color:#ffffff;border:1px solid #27ae60;font-weight:600;}
#generateTtfModal > div:last-child button.primary:hover{background:#229954;border-color:#229954;}
#generateTtfModal > div:last-child button:last-child{margin-right:0;}
#generateTtfModal input#ttfFamilyName{margin:0 0 -1px 0;}
/* Preview Section */
#generateTtfModal > div:nth-child(2){margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0;}
#generateTtfModal > div:nth-child(2) h4{margin:0 0 10px 0;font-size:14px;color:#333;font-weight:600;}
#ttfPreviewArea{display:flex;justify-content:center;align-items:center;padding:20px;border:1px solid #ddd;background:#f9f9f9;border-radius:4px;min-height:80px;}
#ttfPreviewChar{display:flex;justify-content:center;align-items:center;}
/* 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);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;}
/* User Auth Page Styles */
#user-auth{font-family:'Aptos-Display','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;padding:0;}
#user-auth .auth-container{max-width:var(--site-max-width);margin:20px auto;border-radius:0;overflow:hidden;}
#user-auth #userInfoContainer{max-width:var(--site-max-width);margin:20px auto;border-radius:0;overflow:hidden;}
#user-auth #vipPlansContainer{max-width:var(--site-max-width);margin:20px auto;border-radius:0;overflow:hidden;}
#user-auth .auth-content{padding:40px;}
#user-auth .auth-form{max-width:400px;margin:0 auto;}
#user-auth .form-group{margin-bottom:20px;}
#user-auth .form-group label{display:block;margin-bottom:8px;color:#555;font-weight:500;}
#user-auth .form-group input{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:0;font-size:16px;transition:border-color 0.3s;box-sizing:border-box;}
#user-auth .form-group input:focus{outline:none;border-color:#3498db;}
#user-auth .auth-btn{width:100%;padding:14px;background:#3498db;color:white;border:1px solid #3498db;border-radius:0;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;}
#user-auth .auth-btn:hover{background:#2980b9;border-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 8px rgba(52,152,219,0.3);}
#user-auth .auth-btn:active{transform:translateY(0);}
#user-auth .message{display:none;padding:12px;border-radius:0;margin-top:15px;text-align:center;}
#user-auth .message.error{background:#fee;color:#c33;}
#user-auth .message.success{background:#efe;color:#3c3;}
#user-auth .user-info{text-align:left;}
#user-auth .user-info h2{color:#2c3e50;margin-bottom:20px;text-align:left;}
#user-auth .user-info p{color:#666;margin:10px 0;text-align:left;}
#user-auth #userInfoSection{text-align:left;background:white;padding:30px;margin-bottom:20px;border:1px solid #e0e0e0;}
#user-auth #userInfoSection h2,#user-auth #userInfoSection h3{text-align:left;}
#user-auth #userInfoSection p{text-align:left;}
#user-auth .vip-badge{display:inline-block;background:#27ae60;color:white;padding:8px 16px;border-radius:0;font-weight:600;margin:10px 0;}
#user-auth .vip-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:0;}
#user-auth .vip-plan-card{border:2px solid #e0e0e0;border-radius:0;padding:30px;text-align:center;transition:all 0.3s;background:white;}
#user-auth .vip-plan-card:hover{border-color:#3498db;box-shadow:0 10px 30px rgba(52,152,219,0.2);}
#user-auth .vip-plan-card.featured{border-color:#3498db;background:white;}
#user-auth .vip-plan-card h3{color:#2c3e50;margin-bottom:10px;}
#user-auth .vip-plan-card .price{font-size:2em;font-weight:700;color:#3498db;margin:20px 0;}
#user-auth .vip-plan-card .price span{font-size:0.5em;color:#666;}
#user-auth .vip-plan-card ul{list-style:none;padding:0;margin:20px 0;text-align:left;}
#user-auth .vip-plan-card ul li{padding:8px 0;color:#555;}
#user-auth .vip-plan-card ul li:before{content:"✓ ";color:#27ae60;font-weight:bold;margin-right:8px;}
#user-auth .purchase-btn{width:100%;padding:12px;background:#3498db;color:white;border:1px solid #3498db;border-radius:0;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;}
#user-auth .purchase-btn:hover{background:#2980b9;border-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 8px rgba(52,152,219,0.3);}
#user-auth .hidden{display:none;}
#user-auth .auth-section{margin-top:30px;}
#user-auth .register-prompt{text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0;}
#user-auth .register-prompt p{color:#666;margin-bottom:10px;}
#user-auth .register-prompt a{color:#3498db;text-decoration:none;font-weight:600;}
#user-auth .register-prompt a:hover{text-decoration:underline;}
/* Register Modal Styles */
#user-auth .register-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;}
#user-auth .register-modal.hidden{display:none;}
#user-auth .register-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);}
#user-auth .register-modal-content{position:relative;background:white;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,0.3);z-index:10001;animation:modalFadeIn 0.3s ease-out;}
@keyframes modalFadeIn {
from{opacity:0;transform:scale(0.95) translateY(-20px);}
to{opacity:1;transform:scale(1) translateY(0);}
}
#user-auth .register-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #e0e0e0;background:#f8f9fa;}
#user-auth .register-modal-header h2{margin:0;color:#2c3e50;font-size:24px;font-weight:600;white-space:nowrap;flex:1;min-width:0;}
#user-auth .register-modal-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:5px 10px;transition:all 0.2s;line-height:1;flex-shrink:0;width:auto;}
#user-auth .register-modal-close:hover{color:#e74c3c;background:#f0f0f0;}
#user-auth .register-modal-body{padding:25px;}
#user-auth .user-comparison{margin:40px auto 0;padding:30px;background:white;}
#user-auth .user-comparison h3{text-align:center;margin-bottom:30px;color:#2c3e50;font-size:1.5em;}
#user-auth .comparison-table-wrapper{overflow-x:auto;background:white;border-radius:0;}
#user-auth .comparison-table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed;}
#user-auth .comparison-table thead{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;}
#user-auth .comparison-table th{padding:18px 20px;text-align:center;font-weight:600;font-size:16px;border-right:1px solid rgba(255,255,255,0.2);width:18.75%;}
#user-auth .comparison-table th:first-child{text-align:left;background:#2c3e50;width:25%;}
#user-auth .comparison-table th:last-child{border-right:none;}
#user-auth .comparison-table th i{margin-right:8px;}
#user-auth .comparison-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background-color 0.2s ease;}
#user-auth .comparison-table tbody tr:hover{background-color:#f8f9fa;}
#user-auth .comparison-table tbody tr:last-child{border-bottom:none;}
#user-auth .comparison-table .feature-name{padding:18px 20px;font-weight:500;color:#2c3e50;text-align:left;width:25%;}
#user-auth .comparison-table .status-cell{padding:18px 20px;text-align:center;width:18.75%;}
#user-auth .comparison-table .status-cell.vip-cell{background:linear-gradient(135deg,rgba(102,126,234,0.1) 0%,rgba(118,75,162,0.1) 100%);}
#user-auth .comparison-table .status-cell.svip-cell{background:linear-gradient(135deg,rgba(255,215,0,0.1) 0%,rgba(255,165,0,0.1) 100%);}
#user-auth .comparison-table .status-check{display:inline-block;width:32px;height:32px;line-height:32px;background:#27ae60;color:white;border-radius:0;font-size:20px;font-weight:bold;text-align:center;}
#user-auth .comparison-table .status-x{display:inline-block;width:32px;height:32px;line-height:32px;background:#e74c3c;color:white;border-radius:0;font-size:20px;font-weight:bold;text-align:center;}
#user-auth .comparison-table .vip-cell .status-check{background:#27ae60;}
#user-auth .comparison-table .svip-cell .status-check{background:#27ae60;}
#user-auth .comparison-table .purchase-btn{transition:all 0.3s ease;}
#user-auth .comparison-table .purchase-btn:hover{background:#2980b9 !important;transform:translateY(-2px);box-shadow:0 4px 8px rgba(52,152,219,0.3);}
#user-auth .admin-header-container{display:flex;justify-content:flex-start;align-items:center;gap:15px;}
#user-auth .admin-header-container h2{white-space:nowrap;flex-shrink:0;margin:0;}
#user-auth .admin-logout-btn{background:#c0392b;color:white;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:5px;transition:all 0.2s ease;flex-shrink:0;white-space:nowrap;width:auto;min-width:auto;max-width:none;}
#user-auth .admin-logout-btn:hover{background:#a93226;transform:translateY(-1px);box-shadow:0 2px 4px rgba(192,57,43,0.3);}
#user-auth .admin-logout-btn i{margin-right:0;}
@media (max-width: 768px) {
#user-auth .comparison-table{font-size:13px;}
#user-auth .comparison-table th,#user-auth .comparison-table td{padding:12px 10px;}
#user-auth .comparison-table .status-check,#user-auth .comparison-table .status-x{width:28px;height:28px;line-height:28px;font-size:18px;}
}
/* Site Footer Styles */
.site-footer{background:#2c3e50;color:#ecf0f1;padding:40px 0 20px;margin-top:60px;border-top:3px solid #3498db;}
.footer-content{display:grid;grid-template-columns:2.5fr 1fr 1fr;gap:40px;margin-bottom:30px;}
.footer-section{margin-bottom:20px;}
.footer-section.footer-main{grid-column:1;}
.footer-title{color:#ffffff;font-size:1.3em;font-weight:600;margin-bottom:15px;border-bottom:2px solid #3498db;padding-bottom:10px;}
.footer-heading{color:#ecf0f1;font-size:1.1em;font-weight:600;margin-bottom:15px;text-transform:uppercase;letter-spacing:0.5px;}
.footer-description{color:#bdc3c7;font-size:0.95em;line-height:1.6;margin:0;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:10px;}
.footer-links a{color:#bdc3c7;text-decoration:none;transition:all 0.3s ease;display:inline-block;font-size:0.95em;}
.footer-links a:hover{color:#3498db;transform:translateX(5px);}
.footer-bottom{border-top:1px solid #34495e;padding-top:20px;text-align:center;}
.footer-copyright{color:#95a5a6;font-size:0.9em;margin:0;}
@media (max-width: 768px) {
.footer-content{grid-template-columns:1fr;gap:25px;}
.footer-section{margin-bottom:25px;}
.footer-section.footer-main{grid-column:1;}
.footer-title{font-size:1.2em;}
.footer-heading{font-size:1em;}
}
/* Pixel Fonts Page Styles */
/* Pixel Fonts Mode: Hide editor-container initially, show tag cloud */
#pagePixelFonts .editor-container, #pageDotMatrixFonts .editor-container{display:none;}
#pagePixelFonts .tag-cloud-section, #pageDotMatrixFonts .tag-cloud-section{display:block;}
/* Pixel Fonts Mode: When editor is shown (via Customize), hide selector tabs and text preview */
#pagePixelFonts .editor-container.show-editor .selector-tab-container, #pageDotMatrixFonts .editor-container.show-editor .selector-tab-container,
#pageDotMatrixFonts .editor-container.show-editor .selector-tab-container,
#pagePixelFonts .editor-container.show-editor .text-preview-section, #pageDotMatrixFonts .editor-container.show-editor .text-preview-section,
#pageDotMatrixFonts .editor-container.show-editor .text-preview-section{display:none!important;}

/* Spacing for modal text preview blocks inside editor modals */
.modal-text-preview{margin-top:12px;}
/* Pixel Fonts Mode: Show close editor button in top toolbar */
#pagePixelFonts .editor-container.show-editor #closePixelFontsEditorBtn, #pageDotMatrixFonts .editor-container.show-editor #closePixelFontsEditorBtn{display:inline-block!important;}
#pagePixelFonts #closePixelFontsEditorBtn, #pageDotMatrixFonts #closePixelFontsEditorBtn{display:none;}
/* Home Mode: Show editor, hide tag cloud */
#pageHome .tag-cloud-section,
body:not(#pagePixelFonts, #pageDotMatrixFonts) .tag-cloud-section{display:none;}
#pagePixelFonts .pixelEditor-container, #pageDotMatrixFonts .pixelEditor-container{max-width:1400px;margin:0 auto;padding:0;}
#pagePixelFonts .tag-cloud-section, #pageDotMatrixFonts .tag-cloud-section{padding:20px 0;position:sticky;z-index:98;background:#ffffff;transition:padding 0.3s ease,top 0.3s ease;}
#pagePixelFonts .tag-cloud, #pageDotMatrixFonts .tag-cloud{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;align-items:center;}
#pagePixelFonts.scrolled .tag-cloud-section, #pageDotMatrixFonts.scrolled .tag-cloud-section{padding:10px 0;top:30px;}
#pagePixelFonts .tag-cloud .tag-cloud-title, #pageDotMatrixFonts .tag-cloud .tag-cloud-title{margin:0;padding-right:15px;font-size:1em;color:#2c3e50;font-weight:600;white-space:nowrap;flex-shrink:0;display:none;}
#pagePixelFonts .font-tag, #pageDotMatrixFonts .font-tag{padding:6px;cursor:pointer;font-size:1em;color:#2c3e50;transition:all 0.2s;white-space:nowrap;display:inline-block;width:auto;margin:0;font-family:'Aptos-Display';line-height:1.2;}
#pagePixelFonts.scrolled .font-tag, #pageDotMatrixFonts.scrolled .font-tag{padding:4.8px;font-size:0.8em;}
#pagePixelFonts .tag-cloud-hint, #pageDotMatrixFonts .tag-cloud-hint{text-align:left;color:#000;font-size:17px;margin-top:15px;padding:0 20px;}
#pagePixelFonts .font-tag:hover, #pageDotMatrixFonts .font-tag:hover{background:#f8f9fa;border-color:#3498db;}
#pagePixelFonts .font-tag.active, #pageDotMatrixFonts .font-tag.active{background:#3498db;border-color:#3498db;color:white;}
#pagePixelFonts .fonts-grid-container, #pageDotMatrixFonts .fonts-grid-container{display:flex;flex-direction:column;gap:0;}
#pagePixelFonts .font-card, #pageDotMatrixFonts .font-card{background:white;border-top:1px solid #e0e0e0;display:flex;align-items:center;gap:20px;padding:10px 0;}
#pagePixelFonts .font-card:hover, #pageDotMatrixFonts .font-card:hover{transform:translateY(-2px);background:#ffffdd;}
#pagePixelFonts .font-card h3.sequence-number, #pageDotMatrixFonts .font-card h3.sequence-number{color:white;font-weight:600;min-width:30px;width:30px;height:30px;margin:5px;display:flex;align-items:center;justify-content:center;background:#555;border-radius:50%;flex-shrink:0;}
/* Grid size tag - same style as tag cloud */
#pagePixelFonts .font-card .font-tag-grid-size-wrapper, #pageDotMatrixFonts .font-card .font-tag-grid-size-wrapper{position:relative;flex-shrink:0;}
#pagePixelFonts .font-card .font-tag-grid-size, #pageDotMatrixFonts .font-card .font-tag-grid-size{padding:6px 12px;cursor:pointer;font-size:1em;color:#2c3e50;transition:all 0.2s;white-space:nowrap;display:inline-block;width:auto;margin:0;font-family:'Aptos-Display';background:transparent;text-align:left;font-weight:500;min-width:auto;border:none;border-left:1px solid #E0E0E0;border-right:1px solid #E0E0E0;}
#pagePixelFonts .font-card .font-tag-grid-size:hover, #pageDotMatrixFonts .font-card .font-tag-grid-size:hover{background:#f8f9fa;color:#3498db;}
#pagePixelFonts .font-card .font-tag-grid-size.active, #pageDotMatrixFonts .font-card .font-tag-grid-size.active{background:#3498db;color:white;}
/* Tooltip for grid size tags */
#pagePixelFonts .font-card .font-tag-grid-size-wrapper .tooltip-text, #pageDotMatrixFonts .font-card .font-tag-grid-size-wrapper .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;white-space:nowrap;}
#pagePixelFonts .font-card .font-tag-grid-size-wrapper .tooltip-text::after, #pageDotMatrixFonts .font-card .font-tag-grid-size-wrapper .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;}
#pagePixelFonts .font-card .font-tag-grid-size-wrapper:hover .tooltip-text, #pageDotMatrixFonts .font-card .font-tag-grid-size-wrapper:hover .tooltip-text{visibility:visible;opacity:1;transform:translateY(-4px) translateX(-50%);}
#pagePixelFonts .font-card .preview-text, #pageDotMatrixFonts .font-card .preview-text{flex:1;padding:0;font-family:sans-serif;font-size:14px;overflow-x:auto;white-space:nowrap;display:block;}
#pagePixelFonts .font-card .button-group, #pageDotMatrixFonts .font-card .button-group{display:flex;gap:12px;flex-wrap:nowrap;align-items:center;}
#pagePixelFonts .font-card .download-link, #pageDotMatrixFonts .font-card .download-link,#pagePixelFonts .font-card .customize-link, #pageDotMatrixFonts .font-card .customize-link,#pagePixelFonts .font-card .random-link, #pageDotMatrixFonts .font-card .random-link,#pagePixelFonts .font-card .collection-link, #pageDotMatrixFonts .font-card .collection-link{color:#3498db;text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;padding:4px 0;}
#pagePixelFonts .font-card .download-link:hover, #pageDotMatrixFonts .font-card .download-link:hover,#pagePixelFonts .font-card .customize-link:hover, #pageDotMatrixFonts .font-card .customize-link:hover,#pagePixelFonts .font-card .random-link:hover, #pageDotMatrixFonts .font-card .random-link:hover,#pagePixelFonts .font-card .collection-link:hover, #pageDotMatrixFonts .font-card .collection-link:hover{color:#2980b9;text-decoration:none;}
#pagePixelFonts .font-card .customize-link, #pageDotMatrixFonts .font-card .customize-link,#pagePixelFonts .font-card .collection-link, #pageDotMatrixFonts .font-card .collection-link{color:#f39c12;}
#pagePixelFonts .font-card .customize-link:hover, #pageDotMatrixFonts .font-card .customize-link:hover,#pagePixelFonts .font-card .collection-link:hover, #pageDotMatrixFonts .font-card .collection-link:hover{color:#e67e22;}
/* Clicked state for font-card actions (purple) */
#pagePixelFonts .font-card .download-link.clicked, #pagePixelFonts .font-card .customize-link.clicked,#pagePixelFonts .font-card .random-link.clicked, #pagePixelFonts .font-card .collection-link.clicked{color:#8400FF !important;}
#pagePixelFonts .font-card .download-link.clicked:hover, #pagePixelFonts .font-card .customize-link.clicked:hover,#pagePixelFonts .font-card .random-link.clicked:hover, #pagePixelFonts .font-card .collection-link.clicked:hover{color:#8400FF !important;}
#pageDotMatrixFonts .font-card .download-link.clicked, #pageDotMatrixFonts .font-card .customize-link.clicked,#pageDotMatrixFonts .font-card .random-link.clicked, #pageDotMatrixFonts .font-card .collection-link.clicked{color:#8400FF !important;}
#pageDotMatrixFonts .font-card .download-link.clicked:hover, #pageDotMatrixFonts .font-card .customize-link.clicked:hover,#pageDotMatrixFonts .font-card .random-link.clicked:hover, #pageDotMatrixFonts .font-card .collection-link.clicked:hover{color:#8400FF !important;}
/* Preview text animation for randomize */
#pagePixelFonts .font-card .preview-text, #pageDotMatrixFonts .font-card .preview-text{position:relative;transition:background 0.1s ease;}
#pagePixelFonts .font-card .preview-text.randomized, #pageDotMatrixFonts .font-card .preview-text.randomized{animation:randomizeGlow 0.3s ease-out;}
@keyframes randomizeGlow{0%{background:#ffffff;}50%{background:#ffffff;}100%{background:transparent;}}
#pagePixelFonts .font-card .loading, #pageDotMatrixFonts .font-card .loading{display:none;margin-top:10px;color:#666;font-size:12px;}
#pagePixelFonts .load-more-container, #pageDotMatrixFonts .load-more-container{text-align:center;margin-top:20px;}
#pagePixelFonts .load-more-btn, #pageDotMatrixFonts .load-more-btn{padding:12px 30px;background:#3498db;color:white;border:1px solid #3498db;font-weight:600;cursor:pointer;transition:all 0.2s;font-size:1em;}
#pagePixelFonts .load-more-btn:hover, #pageDotMatrixFonts .load-more-btn:hover{background:#2980b9;border-color:#2980b9;}
#pagePixelFonts .empty-message, #pageDotMatrixFonts .empty-message{text-align:center;color:#666;padding:40px;}
#pagePixelFonts .loading-state, #pageDotMatrixFonts .loading-state{text-align:center;color:#666;padding:40px;}
#pagePixelFonts .loading-state p, #pageDotMatrixFonts .loading-state p{margin:0;font-size:1.1em;color:#3498db;}
#pagePixelFonts .error-message, #pageDotMatrixFonts .error-message{text-align:center;color:#ff6b6b;}
#pagePixelFonts .pixelEditor-toast, #pageDotMatrixFonts .pixelEditor-toast{position:fixed!important;bottom:20px!important;right:20px!important;padding:15px 20px;border-radius:8px;color:white;font-size:14px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:10000;opacity:0;transition:opacity 0.3s;max-width:400px;word-wrap:break-word;}
/* Test Font Modal - Reuse homepage modal style */
#pagePixelFonts #testFontModal, #pageDotMatrixFonts #testFontModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:10000;overflow-y:auto;}
#pagePixelFonts #testFontModal > div, #pageDotMatrixFonts #testFontModal > 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;width:auto;max-width:800px;max-height:calc(100vh - 40px);border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
#pagePixelFonts #testFontTitle, #pageDotMatrixFonts #testFontTitle{color:#2c3e50;font-size:1.2em;flex-shrink:0;margin-bottom:15px;}
#pagePixelFonts #testFontContent, #pageDotMatrixFonts #testFontContent{margin-bottom:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;}
#pagePixelFonts #testFontContent, #pageDotMatrixFonts #testFontContent > div:last-child{flex-shrink:0;text-align:right;margin-top:auto;padding-right:8px;}
#pagePixelFonts #testFontModal .form-group, #pageDotMatrixFonts #testFontModal .form-group{margin-bottom:15px;}
#pagePixelFonts #testFontModal label, #pageDotMatrixFonts #testFontModal label{display:block;margin-bottom:5px;font-size:14px;font-weight:500;color:#333;}
#pagePixelFonts #testFontModal textarea, #pageDotMatrixFonts #testFontModal textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ddd;border-radius:4px;resize:vertical;font-family:inherit;min-height:80px;box-sizing:border-box;}
#pagePixelFonts #testFontModal input[type="range"], #pageDotMatrixFonts #testFontModal input[type="range"]{width:100%;}
#pagePixelFonts #testFontModal .size-value, #pageDotMatrixFonts #testFontModal .size-value{font-size:13px;color:#666;}
#pagePixelFonts #testFontModal .preview-area, #pageDotMatrixFonts #testFontModal .preview-area{padding:20px;border:1px solid #ddd;border-radius:4px;background:#f9f9f9;min-height:150px;text-align:left;font-size:24px;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;}
/* Editor Modal - Reuse homepage modal style */
#pagePixelFonts #editorModal, #pageDotMatrixFonts #editorModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:100;overflow-y:auto;padding:15px;box-sizing:border-box;}
#pagePixelFonts #editorModal .editor-backdrop, #pageDotMatrixFonts #editorModal .editor-backdrop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 30px);max-width:1800px;max-height:calc(100vh - 30px);background:white;border:1px solid #2c3e50;border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;box-sizing:border-box;align-items:center;justify-content:center;}
#pagePixelFonts #editorModal .close-editor-btn, #pageDotMatrixFonts #editorModal .close-editor-btn{display:none;}
#pagePixelFonts .pixelEditor-top-buttons, #pageDotMatrixFonts .pixelEditor-top-buttons{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;z-index:10002;}
#pagePixelFonts .pixelEditor-download-btn, #pageDotMatrixFonts .pixelEditor-download-btn{background:#27ae60;color:white;border:none;padding:5px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;line-height:1;height:28px;transition:all 0.2s ease;min-width:70px;display:flex;align-items:center;justify-content:center;}
#pagePixelFonts .pixelEditor-download-btn:hover, #pageDotMatrixFonts .pixelEditor-download-btn:hover{background:#229954;}
#pagePixelFonts .pixelEditor-close-btn, #pageDotMatrixFonts .pixelEditor-close-btn{background:#e74c3c;color:white;border:none;padding:4px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:700;line-height:1;height:28px;width:28px;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;}
#pagePixelFonts .pixelEditor-close-btn:hover, #pageDotMatrixFonts .pixelEditor-close-btn:hover{background:#c0392b;color:white;}
/* Embedded Download Dialog in Editor Modal */
#pagePixelFonts #editorDownloadDialog, #pageDotMatrixFonts #editorDownloadDialog{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:10006;display:flex;align-items:center;justify-content:center;pointer-events:auto;}
#pagePixelFonts #editorDownloadDialog .pixelEditor-download-dialog-content, #pageDotMatrixFonts #editorDownloadDialog .pixelEditor-download-dialog-content{background:white;padding:25px;padding-right:35px;border:1px solid #2c3e50;min-width:260px;width:auto;max-width:500px;max-height:calc(100vh - 40px);border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;position:relative;pointer-events:auto;}
#pagePixelFonts .pixelEditor-download-dialog-title, #pageDotMatrixFonts .pixelEditor-download-dialog-title{color:#2c3e50;font-size:1.2em;flex-shrink:0;margin-bottom:15px;margin-top:0;}
#pagePixelFonts .pixelEditor-download-dialog-body, #pageDotMatrixFonts .pixelEditor-download-dialog-body{margin-bottom:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;}
#pagePixelFonts #editorDownloadDialog .pixelEditor-download-dialog-content > div:last-child, #pageDotMatrixFonts #editorDownloadDialog .pixelEditor-download-dialog-content > div:last-child{flex-shrink:0;text-align:right;margin-top:auto;padding-right:8px;}
#pagePixelFonts #editorModal .editor-container-wrapper, #pageDotMatrixFonts #editorModal .editor-container-wrapper{position:relative;width:100%;max-width:100%;margin:0 auto;height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;}
#pagePixelFonts #editorModal .editor-container-wrapper .editor-container, #pageDotMatrixFonts #editorModal .editor-container-wrapper .editor-container{display:flex!important;gap:0px;background:#ffffff;margin:0;box-sizing:border-box;padding:0;}
#pagePixelFonts #editorModal .editor-options, #pageDotMatrixFonts #editorModal .editor-options{padding:40px;text-align:center;}
#pagePixelFonts #editorModal .editor-options h2, #pageDotMatrixFonts #editorModal .editor-options h2{margin-bottom:20px;color:#2c3e50;}
#pagePixelFonts #editorModal .editor-options p, #pageDotMatrixFonts #editorModal .editor-options p{margin-bottom:30px;color:#666;}
#pagePixelFonts #editorModal .editor-options .options-group, #pageDotMatrixFonts #editorModal .editor-options .options-group{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
#pagePixelFonts #editorModal .editor-options .option-btn, #pageDotMatrixFonts #editorModal .editor-options .option-btn{padding:15px 30px;color:white;border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:600;}
#pagePixelFonts #editorModal .editor-options #openEditorNewTab, #pageDotMatrixFonts #editorModal .editor-options #openEditorNewTab{background:#3498db;}
#pagePixelFonts #editorModal .editor-options #openEditorIframe, #pageDotMatrixFonts #editorModal .editor-options #openEditorIframe{background:#27ae60;}
#pagePixelFonts #editorModal .editor-options .help-text, #pageDotMatrixFonts #editorModal .editor-options .help-text{margin-top:30px;font-size:12px;color:#999;}
#pagePixelFonts #editorModal .editor-iframe, #pageDotMatrixFonts #editorModal .editor-iframe{width:100%;height:calc(100vh - 200px);border:none;border-radius:4px;}
#pagePixelFonts #editorModal .iframe-controls, #pageDotMatrixFonts #editorModal .iframe-controls{margin-top:10px;text-align:center;}

/* Pixel Fonts Page Editor - Custom Styling */
#pagePixelFonts .pixelEditor-editor, #pageDotMatrixFonts .pixelEditor-editor{display:flex;gap:20px;padding:15px;position:relative;}
#pagePixelFonts .pixelEditor-left-panel, #pageDotMatrixFonts .pixelEditor-left-panel{gap:15px;}
#pagePixelFonts .pixelEditor-right-panel, #pageDotMatrixFonts .pixelEditor-right-panel{flex:1;display:flex;flex-direction:column;gap:15px;min-width:0;border-left:none;}
#pagePixelFonts .pixelEditor-top-buttons, #pageDotMatrixFonts .pixelEditor-top-buttons{position:absolute;top:-10px;right:10px;display:flex;align-items:center;gap:6px;}
#pagePixelFonts .pixelEditor-download-btn, #pageDotMatrixFonts .pixelEditor-download-btn{background:#27ae60;color:white;border:none;padding:4px 10px;border-radius:3px;cursor:pointer;font-size:14px;font-weight:600;line-height:1;height:30px;transition:all 0.2s ease;width:auto}
#pagePixelFonts .pixelEditor-download-btn:hover, #pageDotMatrixFonts .pixelEditor-download-btn:hover{background:#229954;}
#pagePixelFonts .pixelEditor-close-btn, #pageDotMatrixFonts .pixelEditor-close-btn{min-width:54px;height:28px;background:#e74c3c;color:white;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;}
#pagePixelFonts .pixelEditor-close-btn:hover, #pageDotMatrixFonts .pixelEditor-close-btn:hover{background:#c0392b;color:white;}
#pagePixelFonts .pixelEditor-section-header, #pageDotMatrixFonts .pixelEditor-section-header{margin-bottom:8px;padding-bottom:0;border-bottom:none;}
#pagePixelFonts .pixelEditor-styles-header, #pageDotMatrixFonts .pixelEditor-styles-header{margin-bottom:6px;padding-top:0;padding-bottom:0;}
#pagePixelFonts .pixelEditor-styles-title, #pageDotMatrixFonts .pixelEditor-styles-title{border-bottom:none!important;}
#pagePixelFonts .pixelEditor-section-title, #pageDotMatrixFonts .pixelEditor-section-title{font-size:16px;font-weight:600;color:#2c3e50;margin:0;}
#pagePixelFonts .pixelEditor-char-map, #pageDotMatrixFonts .pixelEditor-char-map{flex:1;min-height:0;display:flex;flex-direction:column;}
#pagePixelFonts .pixelEditor-char-grid, #pageDotMatrixFonts .pixelEditor-char-grid{flex:1;overflow-y:auto;margin-bottom:0;padding:0;gap:0px;}
#pagePixelFonts .char-grid-control-panel, #pageDotMatrixFonts .char-grid-control-panel{border:none;margin-top:10px;}
#pagePixelFonts .pixelEditor-styles-section, #pageDotMatrixFonts .pixelEditor-styles-section{flex:0 0 auto;max-height:300px;display:flex;flex-direction:column;min-height:0;}
#pagePixelFonts .pixelEditor-styles-container, #pageDotMatrixFonts .pixelEditor-styles-container{flex:1;overflow-y:auto;padding:8px;gap:8px;}
#pagePixelFonts .pixelEditor-add-style, #pageDotMatrixFonts .pixelEditor-add-style{padding:12px;border:2px dashed #ccc;border-radius:6px;cursor:pointer;transition:all 0.2s;}
#pagePixelFonts .pixelEditor-add-style:hover, #pageDotMatrixFonts .pixelEditor-add-style:hover{border-color:#3498db;background:#f0f8ff;}
#pagePixelFonts .pixelEditor-editor-section, #pageDotMatrixFonts .pixelEditor-editor-section{flex:1;display:flex;flex-direction:column;min-height:0;}
#pagePixelFonts .pixelEditor-editor-section h3, #pageDotMatrixFonts .pixelEditor-editor-section h3{margin-bottom:10px;}
#pagePixelFonts .pixelEditor-toolbar, #pageDotMatrixFonts .pixelEditor-toolbar{display:flex;flex-wrap:wrap;gap:1px;padding:5.6px;background:#f8f9fa;border:1px solid #bdc3c7;margin-bottom:10.5px;}
#pagePixelFonts .pixelEditor-toolbar-group, #pageDotMatrixFonts .pixelEditor-toolbar-group{display:flex;align-items:center;gap:1px;}
#pagePixelFonts .pixelEditor-toolbar-btn, #pageDotMatrixFonts .pixelEditor-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;border-radius:4px;padding:0;}
#pagePixelFonts .pixelEditor-toolbar-btn:hover, #pageDotMatrixFonts .pixelEditor-toolbar-btn:hover{background:#e3f2fd;color:#2196f3;}
#pagePixelFonts .pixelEditor-toolbar-btn i, #pageDotMatrixFonts .pixelEditor-toolbar-btn i{font-size:16px;color:#6c757d;transition:color 0.2s ease;}
#pagePixelFonts .pixelEditor-toolbar-btn:hover i, #pageDotMatrixFonts .pixelEditor-toolbar-btn:hover i{color:#2196f3;}
#pagePixelFonts .pixelEditor-separator, #pageDotMatrixFonts .pixelEditor-separator{width:1px;background:#bdc3c7;height:24px;margin:0 2px;}
#pagePixelFonts .pixelEditor-pixel-editor, #pageDotMatrixFonts .pixelEditor-pixel-editor{flex:1;min-height:400px;border:1px solid #ddd;border-radius:6px;background:#fff;overflow:auto;}
#pagePixelFonts #editorModal, #pageDotMatrixFonts #editorModal .iframe-controls button{padding:8px 16px;color:white;border:none;border-radius:4px;cursor:pointer;}
/* Font Generation Overlay - Reuse homepage modal style */
#pagePixelFonts .font-generation-overlay, #pageDotMatrixFonts .font-generation-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:10002;overflow-y:auto;}
#pagePixelFonts .font-generation-content, #pageDotMatrixFonts .font-generation-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;max-width:500px;width:auto;min-width:300px;padding:40px;background:white;border:1px solid #2c3e50;border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
#pagePixelFonts .font-generation-content h2, #pageDotMatrixFonts .font-generation-content h2{margin-bottom:30px;color:#2c3e50;font-size:1.2em;flex-shrink:0;}
#pagePixelFonts .font-generation-progress-bar, #pageDotMatrixFonts .font-generation-progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:20px;flex-shrink:0;}
#pagePixelFonts .font-generation-progress, #pageDotMatrixFonts .font-generation-progress{width:0%;height:100%;background:linear-gradient(90deg,#3498db,#2980b9);transition:width 0.3s ease;border-radius:4px;}
#pagePixelFonts .font-generation-status, #pageDotMatrixFonts .font-generation-status{color:#666;font-size:14px;margin:0;flex-shrink:0;}
/* Font Combination Info Section */
#pagePixelFonts .font-combination-info, #pageDotMatrixFonts .font-combination-info{padding:10px;background:#fffff0;border-left:20px solid orange;}
#pagePixelFonts .font-combination-info p, #pageDotMatrixFonts .font-combination-info p{margin:0;}
/* Preview Input Section */
#pagePixelFonts #preview-input-section, #pageDotMatrixFonts #preview-input-section{padding:0 6px;background:#f0f0f0;position:sticky;top:100px;z-index:98;transition:padding 0.3s ease,top 0.3s ease;margin:0 auto;}
#pagePixelFonts.scrolled #preview-input-section, #pageDotMatrixFonts.scrolled #preview-input-section{top:105px;}
#pagePixelFonts .preview-input-wrapper, #pageDotMatrixFonts .preview-input-wrapper{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;width:100%;}
#pagePixelFonts #preview-input-section label, #pageDotMatrixFonts #preview-input-section label{font-weight:600;color:#2c3e50;white-space:nowrap;margin:0;flex:0 0 auto;}
#pagePixelFonts #previewTextInput, #pageDotMatrixFonts #previewTextInput{flex:1 1 auto;min-width:240px;height:32px;padding:6px 10px;border:1px solid #ddd;border-radius:0;font-size:14px;box-sizing:border-box;}
#pagePixelFonts #preview-input-section button, #pageDotMatrixFonts #preview-input-section button{width:auto;min-width:auto;display:inline-flex;}
#pagePixelFonts #monospacedToggleBtn, #pageDotMatrixFonts #monospacedToggleBtn{padding:6px 10px;height:32px;background:#f2f2f2;color:#2c2c2c;border:1px solid #d0d0d0;border-radius:0;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.18s ease;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-width:auto;justify-content:center;box-sizing:border-box;}
#pagePixelFonts #monospacedToggleBtn::before, #pageDotMatrixFonts #monospacedToggleBtn::before{content:'';width:14px;height:14px;border:1px solid #b5b5b5;border-radius:3px;display:inline-block;background:#fff;box-sizing:border-box;}
#pagePixelFonts #monospacedToggleBtn:hover, #pageDotMatrixFonts #monospacedToggleBtn:hover{background:#e6e6e6;border-color:#b5b5b5;}
#pagePixelFonts #monospacedToggleBtn.active, #pageDotMatrixFonts #monospacedToggleBtn.active{background:#3498db;color:white;border-color:#3498db;}
#pagePixelFonts #monospacedToggleBtn.active::before, #pageDotMatrixFonts #monospacedToggleBtn.active::before{content:'✓';color:white;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.8);display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
#pagePixelFonts #monospacedToggleBtn.active:hover, #pageDotMatrixFonts #monospacedToggleBtn.active:hover{background:#2980b9;border-color:#2980b9;}
#pagePixelFonts #previewUpdateBtn, #pageDotMatrixFonts #previewUpdateBtn{padding:0 10px;height:32px;min-width:auto;background:#3498db;color:white;border:none;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all 0.2s ease;box-sizing:border-box;}
#pagePixelFonts #previewUpdateBtn:hover, #pageDotMatrixFonts #previewUpdateBtn:hover{background:#2980b9;}
#pagePixelFonts .preview-char-grid, #pageDotMatrixFonts .preview-char-grid{display:grid;}
#pageDotMatrixFonts .dot-matrix-pixel{border-radius:0;box-shadow:0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1);}
#pageDotMatrixFonts .dot-matrix-pixel.is-on{background-color:#000;}
#pageDotMatrixFonts .dot-matrix-pixel.inactive{box-shadow:none;background-color:transparent;}
/* Pixel Fonts Page - Modal Overlay Styles (Independent) */
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:10004;overflow-y:auto;pointer-events:auto;}
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #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;width:auto;max-width:500px;max-height:calc(100vh - 40px);border-radius:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;pointer-events:auto;}
#pagePixelFonts #modalOverlay > div *, #pageDotMatrixFonts #modalOverlay > div *{pointer-events:auto;}
#pagePixelFonts #ttfCancelBtn, #pageDotMatrixFonts #ttfCancelBtn{pointer-events:auto!important;cursor:pointer!important;z-index:10005!important;position:relative;}
#pagePixelFonts #ttfExportBtn, #pageDotMatrixFonts #ttfExportBtn{pointer-events:auto!important;cursor:pointer!important;z-index:10005!important;position:relative;}
#pagePixelFonts #generateTtfModal button, #pageDotMatrixFonts #generateTtfModal button{pointer-events:auto!important;cursor:pointer!important;z-index:10005!important;position:relative;}
#pagePixelFonts #modalTitle, #pageDotMatrixFonts #modalTitle{color:#2c3e50;font-size:1.2em;flex-shrink:0;margin-bottom:15px;}
#pagePixelFonts #modalContent, #pageDotMatrixFonts #modalContent{margin-bottom:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;}
#pagePixelFonts #modalOverlay > div > div:last-child, #pageDotMatrixFonts #modalOverlay > div > div:last-child{flex-shrink:0;text-align:right;margin-top:auto;padding-right:8px;}
/* Modal 滚动条美化 - 显示在边框外 */
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay > div::-webkit-scrollbar{width:12px;}
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay > div::-webkit-scrollbar-track{background:transparent;margin:8px 0;}
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay > div::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#95a5a6,#7f8c8d);border-radius:6px;border:2px solid white;}
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay > div::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#7f8c8d,#6c7a7b);}
#pagePixelFonts #modalOverlay, #pageDotMatrixFonts #modalOverlay > div::-webkit-scrollbar-thumb:active{background:linear-gradient(to bottom,#6c7a7b,#5d6d6e);}
#pagePixelFonts #modalContent::-webkit-scrollbar, #pageDotMatrixFonts #modalContent::-webkit-scrollbar{width:8px;}
#pagePixelFonts #modalContent::-webkit-scrollbar-track, #pageDotMatrixFonts #modalContent::-webkit-scrollbar-track{background:transparent;margin:4px 0;}
#pagePixelFonts #modalContent::-webkit-scrollbar-thumb, #pageDotMatrixFonts #modalContent::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#bdc3c7,#95a5a6);border-radius:4px;border:2px solid transparent;}
#pagePixelFonts #modalContent::-webkit-scrollbar-thumb:hover, #pageDotMatrixFonts #modalContent::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#95a5a6,#7f8c8d);}
/* Firefox 滚动条 */
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #modalOverlay > div{scrollbar-width:thin;scrollbar-color:#95a5a6 transparent;}
#pagePixelFonts #modalContent, #pageDotMatrixFonts #modalContent{scrollbar-width:thin;scrollbar-color:#bdc3c7 transparent;}
#pagePixelFonts #modalCancel, #pageDotMatrixFonts #modalCancel,#pagePixelFonts #modalConfirm, #pageDotMatrixFonts #modalConfirm{width:auto;padding:8px 16px;margin-left:8px;}
#pagePixelFonts #modalCancel, #pageDotMatrixFonts #modalCancel{background:#f0f0f0;color:#333;border:1px solid #95a5a6;}
#pagePixelFonts #modalConfirm, #pageDotMatrixFonts #modalConfirm{background:#e74c3c;color:white;border:1px solid #e74c3c;}
/* Generate TTF Font Modal Styles for Pixel Fonts Page */
#pagePixelFonts #generateTtfModal > .ttf-settings-grid, #pageDotMatrixFonts #generateTtfModal > .ttf-settings-grid{display:grid;grid-template-columns:140px 1fr;gap:0px 10px;align-items:center;}
#pagePixelFonts #generateTtfModal label, #pageDotMatrixFonts #generateTtfModal label{padding:0;margin:0;font-size:14px;color:#333;}
#pagePixelFonts #generateTtfModal input[type="text"],#pageDotMatrixFonts #generateTtfModal input[type="text"],#pagePixelFonts #generateTtfModal input[type="number"], #pageDotMatrixFonts #generateTtfModal input[type="number"],#pagePixelFonts #generateTtfModal select,#pageDotMatrixFonts #generateTtfModal select{padding:6px;border:1px solid #ddd;font-size:14px;width:100%;box-sizing:border-box;}
#pagePixelFonts #generateTtfModal input[type="number"], #pageDotMatrixFonts #generateTtfModal input[type="number"]{width:80px;}
#pagePixelFonts #generateTtfModal select,#pageDotMatrixFonts #generateTtfModal select{width:auto;min-width:120px;}
#pagePixelFonts #generateTtfModal > .ttf-actions, #pageDotMatrixFonts #generateTtfModal > .ttf-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0;}
#pagePixelFonts #generateTtfModal button,#pageDotMatrixFonts #generateTtfModal button{width:auto;padding:8px 16px;font-size:14px;cursor:pointer;border:none;border-radius:4px;transition:all 0.2s;}
#pagePixelFonts #generateTtfModal button.primary,#pageDotMatrixFonts #generateTtfModal button.primary{background:#27ae60;color:white;}
#pagePixelFonts #generateTtfModal button.primary:hover,#pageDotMatrixFonts #generateTtfModal button.primary:hover{background:#229954;}
#pagePixelFonts #ttfPreviewArea,#pageDotMatrixFonts #ttfPreviewArea{margin-top:15px;padding:12px;border:1px dashed #d0d0d0;border-radius:6px;background:#fafafa;}
#pagePixelFonts #ttfPreviewArea .download-preview-placeholder,#pageDotMatrixFonts #ttfPreviewArea .download-preview-placeholder{color:#888;font-size:13px;text-align:center;}
#pagePixelFonts #ttfPreviewArea .download-preview-row,#pageDotMatrixFonts #ttfPreviewArea .download-preview-row{display:flex;gap:8px;flex-wrap:wrap;}
#pagePixelFonts #ttfPreviewArea .download-preview-cell,#pageDotMatrixFonts #ttfPreviewArea .download-preview-cell{display:flex;align-items:center;justify-content:center;}
#pagePixelFonts #ttfPreviewArea .download-preview-dot,#pageDotMatrixFonts #ttfPreviewArea .download-preview-dot{display:block;}
/* Responsive Modal Styles for Pixel Fonts Page */
@media (min-width: 1920px) {
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #modalOverlay > div{max-width:500px;width:auto;min-width:300px;}
}
@media (min-width: 768px) and (max-width: 1919px) {
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #modalOverlay > div{max-width:600px;width:70%;}
}
@media (max-width: 768px) {
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #modalOverlay > div{width:95%;max-width:calc(100% - 20px);padding:20px;padding-right:25px;}
}
@media (max-width: 480px) {
#pagePixelFonts #modalOverlay > div, #pageDotMatrixFonts #modalOverlay > div{width:98%;max-width:calc(100% - 10px);padding:15px;padding-right:20px;}
}