/* Main theme color - Green (#27ae60) */
:root{--primary-green:#27ae60;--primary-green-dark:#229954;--primary-green-light:#d5f5e3;--primary-green-lighter:#e8f8f0;--text-on-green:#ffffff;--border-green:#229954;}
/* Override header colors - keep white background like other pages */
.site-header{background:#ffffff !important;border-bottom:1px solid #2c3e50 !important;}
.nav-link{color:#2c3e50 !important;border:1px solid transparent !important;}
.nav-link:hover{background:var(--primary-green-lighter) !important;color:var(--primary-green) !important;border-color:var(--primary-green) !important;}
.nav-link.active{background:var(--primary-green) !important;color:var(--text-on-green) !important;border-color:var(--primary-green) !important;}
.site-logo{color:#2c3e50 !important;}
.mobile-menu-btn{color:#2c3e50 !important;}
.mobile-menu-btn:hover{background:var(--primary-green-lighter) !important;border-color:var(--primary-green) !important;}
/* Mobile nav links green theme */
.mobile-nav .nav-link:hover{background:var(--primary-green-lighter) !important;color:var(--primary-green) !important;}
.mobile-nav .nav-link.active{background:var(--primary-green) !important;color:var(--text-on-green) !important;}
/* Upload Font link style */
#uploadFontBtnInline{color:var(--primary-green) !important;text-decoration:none !important;border-bottom:1px solid var(--primary-green) !important;transition:all 0.2s !important;}
#uploadFontBtnInline:hover{color:var(--primary-green-dark) !important;border-bottom-color:var(--primary-green-dark) !important;opacity:0.8;}
/* Main container */
.pixelating-container{max-width:1800px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 80px);}
.pixelating-container > div:last-child{display:flex;gap:20px;align-items:stretch;flex:1;min-height:0;}
/* Page header */
.pixelating-container > h2{color:#333;margin:20px 0 10px 0;font-weight:600;font-size:1.1rem;align-items:center;gap:8px;flex-wrap:wrap;}
/* Common panel styles - white background, border, no border-radius, padding */
.panel-common,#fontFamilyColumn > div,#textInputPanel,#imagePreviewPanel,#configPanel,#filtersPanel{background:#fff;border:1px solid #ddd;border-radius:0;padding:15px;}
/* Left column - Font Family */
#fontFamilyHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;position:relative;}
#fontFamilyHeader label{margin:0;font-weight:600;font-size:13px;color:#333;flex:1;}
#categoryFilterToggle{flex-shrink:0;width:auto;min-width:auto;margin-left:10px;}
#categoryFilterPanel{position:absolute;top:calc(100% + 5px);right:0;width:auto;z-index:10000;background:#fff;border:1px solid #ddd;border-radius:0;padding:10px;max-height:400px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);display:none;transform:translateZ(0);}
#categoryFilterPanel label{cursor:pointer;display:flex;align-items:center;}
#categoryFilterPanel input[type="checkbox"]{margin-right:6px;cursor:pointer;flex-shrink:0;}
#categoryFilterPanel .category-checkbox{accent-color:var(--primary-green);}
.category-filter-header{font-size:11px;font-weight:600;margin-bottom:8px;color:#555;display:flex;align-items:center;justify-content:space-between;margin-right:-10px;}
#clearCategoryFilter{font-size:9px;padding:2px 6px;height:auto;line-height:1.2;margin:0;flex-shrink:0;width:auto;}
.category-menu-item{margin-bottom:4px;}
.category-menu-header{display:flex;align-items:center;cursor:pointer;padding:0 4px;font-size:12px;font-weight:600;color:#333;background:#f5f5f5;border:1px solid #ddd;user-select:none;}
.category-menu-header:hover{background:#ebebeb !important;}
.category-submenu-item:hover{background:#f5f5f5;}
.category-expand-icon{transition:transform 0.2s ease;}
#fontFamilyList{background:#f9f9f9;border:1px solid #ddd;border-radius:0;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;}
#fontFamilyList > div:first-child:not(.font-family-item):not(.font-loading-more){padding:15px;text-align:center;color:#999;font-size:12px;}
/* Loading progress bar animation */
.loading-progress-bar{width:100%;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden;position:relative;}
.loading-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-green-light),var(--primary-green),var(--primary-green-light));background-size:200% 100%;animation:loading-progress 1.5s ease-in-out infinite;width:60%;position:absolute;left:0;top:0;}
@keyframes loading-progress{0%{transform:translateX(-100%);}50%{transform:translateX(0%);}100%{transform:translateX(100%);}}
/* Loading text animation - pulse effect */
.loading-text{animation:loading-text-pulse 1.5s ease-in-out infinite;}
@keyframes loading-text-pulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
#fontFamilyColumn > div > div:last-child{margin-top:10px;padding-top:10px;border-top:1px solid #eee;}
/* Middle column - Text Preview */
#textInputPanel{margin-bottom:15px;}
#textInputPanel > label{display:block;font-weight:600;margin-bottom:8px;font-size:13px;color:#333;}
#textFormatToolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 8px;background:#f9f9f9;border:1px solid #ddd;border-radius:0;}
#textFormatToolbar > span:first-child{font-size:11px;color:#666;margin-right:4px;}
.text-format-btn{padding:4px 8px;font-size:11px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:all 0.2s;border-radius:0;}
.text-format-btn:hover{background:#f0f0f0;border-color:#999;}
.text-format-btn.active{background:var(--primary-green-light);border-color:var(--primary-green);color:var(--primary-green-dark);}
#textFormatToolbar input[type="number"]{width:50px;padding:2px 4px;font-size:11px;border:1px solid #ccc;border-radius:0;}
#textInput{width:100%;min-height:60px;padding:10px;border:1px solid #ddd;border-radius:0;font-size:72px;font-family:inherit;resize:vertical;text-align:center;white-space:nowrap;overflow-x:auto;}
#charCountWrapper{display:flex;justify-content:space-between;align-items:center;margin-top:5px;}
#charCountWrapper > div:first-child{display:flex;align-items:center;gap:4px;font-size:11px;color:#999;}
#charCount{font-size:11px;color:#999;}
#currentFontName{font-size:13px;color:#666;font-weight:500;text-align:right;}
#generateBtnWrapper{margin-top:10px;}
#imagePreviewPanel{position:relative;min-height:400px;display:flex;flex-direction:column;}
#emptyState{text-align:center;padding:60px 20px;color:#999;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}
#emptyState i{font-size:48px;margin-bottom:15px;opacity:0.3;}
#emptyState p{font-size:14px;margin:0;}
#canvasWrapper{display:none;text-align:center;position:relative;flex:1;overflow:auto;padding:10px;padding-bottom:50px;justify-content:center;align-items:center;}
#canvasControls{display:none;position:absolute;top:10px;right:10px;z-index:20;background:rgba(255,255,255,0.9);padding:0 8px;border:1px solid #ddd;flex-direction:row;align-items:center;}
#pixelCanvas{width:auto;height:auto;display:block;margin:0 auto;object-fit:none;}
#downloadBtnWrapper{position:absolute;bottom:10px;left:10px;z-index:10;}
#downloadBtn{display:none;width:auto;min-width:150px;}
/* Right column - Configuration */
#configPanel > h3{font-size:14px;font-weight:600;margin:0 0 15px 0;color:#333;border-bottom:1px solid #eee;padding-bottom:8px;}
#configPanel > div{margin-bottom:10px;}
#configPanel label{display:block;font-weight:600;margin-bottom:5px;font-size:11px;color:#555;}
#configPanel > div:last-child{margin-top:15px;}
#configPanel > div > div{display:flex;align-items:center;gap:10px;}
#configPanel > div > div > span{font-size:11px;color:#666;min-width:30px;}
#configPanel > div:nth-child(2) > div,#configPanel > div:nth-child(3) > div:first-child{display:flex;gap:8px;align-items:center;}
#configPanel input[type="color"]{width:50px;height:28px;border:1px solid #ddd;border-radius:0;}
#configPanel input[type="text"]{flex:1;padding:4px;border:1px solid #ddd;border-radius:0;font-size:11px;}
#configPanel > div > label:last-child{display:flex;align-items:center;gap:5px;font-size:11px;color:#555;cursor:pointer;margin-top:5px;}
#configPanel input[type="checkbox"]{margin:0;}
#filtersPanelHeader{font-size:14px;font-weight:600;margin:0 0 15px 0;color:#333;border-bottom:1px solid #eee;padding-bottom:8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
#filtersToggleIcon{font-size:12px;color:#666;transition:transform 0.2s;}
#filtersPanelContent > div > label{display:block;font-weight:600;margin-bottom:2px;font-size:11px;color:#555;}
#filtersPanelContent > div:last-of-type:has(input[type="checkbox"]) > label,#filtersPanelContent > div:nth-last-child(2):has(input[type="checkbox"]) > label{display:flex;align-items:center;gap:5px;font-size:11px;color:#555;cursor:pointer;}
#filtersPanelContent input[type="range"]{width:100%;padding:0;}
#filtersPanelContent input[type="checkbox"]{margin:0;}
/* Hidden file input */
#fontFile{display:none;}
/* Loading overlay */
#loadingOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10000;justify-content:center;align-items:center;flex-direction:column;}
#loadingOverlay > div{background:white;padding:30px;border-radius:8px;text-align:center;}
#loadingOverlay i{font-size:32px;color:var(--primary-green);margin-bottom:15px;}
#loadingOverlay p{color:#333;margin:0;}
/* Removed upload-panel gradient background */
.upload-area{background:rgba(255,255,255,0.1);border:3px dashed rgba(255,255,255,0.5);border-radius:0;padding:60px 40px;cursor:pointer;transition:all 0.3s;margin-top:20px;}
.upload-area:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.8);transform:translateY(-2px);}
.upload-area.dragging{background:rgba(255,255,255,0.3);border-color:white;}
.upload-area i{font-size:64px;margin-bottom:20px;opacity:0.9;}
.upload-area p{font-size:18px;margin:10px 0;}
.upload-area input[type="file"]{display:none;}
.control-panel{background:#fff;border-radius:0;padding:30px;margin-bottom:30px;box-shadow:0 4px 20px rgba(0,0,0,0.08);}
.control-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
.control-group{flex:1;min-width:200px;}
.control-group label{display:block;font-weight:600;margin-bottom:10px;color:#2c3e50;font-size:14px;}
.control-group input,
.control-group select,
.control-group textarea{width:100%;padding:12px;border:2px solid #e8e8e8;border-radius:0;font-size:14px;transition:all 0.2s;}
.control-group input:focus,
.control-group select:focus,
.control-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.text-input-group{flex:100%;}
.text-input-group textarea{font-family:monospace;resize:vertical;min-height:100px;}
.color-picker-row{display:flex;align-items:center;gap:12px;}
.color-picker-row input[type="color"]{width:60px;height:45px;border:2px solid #e8e8e8;border-radius:0;cursor:pointer;padding:4px;}
.color-picker-row input[type="text"]{flex:1;font-family:monospace;text-transform:uppercase;}
.checkbox-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.checkbox-row input[type="checkbox"]{width:22px;height:22px;cursor:pointer;margin:0;}
.checkbox-row label{margin:0;cursor:pointer;user-select:none;}
.slider-row{display:flex;align-items:center;gap:15px;}
.slider-row input[type="range"]{flex:1;height:6px;}
.slider-value{min-width:45px;text-align:right;font-weight:700;color:#667eea;font-size:16px;}
.action-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.btn{padding:14px 28px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);}
/* Override button colors to use green theme */
.btn-primary{background:var(--primary-green) !important;color:var(--text-on-green) !important;border:1px solid var(--primary-green) !important;}
.btn-primary:hover{background:var(--primary-green-dark) !important;border-color:var(--primary-green-dark) !important;}
.btn-success{background:var(--primary-green) !important;color:var(--text-on-green) !important;border:1px solid var(--primary-green) !important;}
.btn-success:hover{background:var(--primary-green-dark) !important;border-color:var(--primary-green-dark) !important;}
.btn-secondary{background:#f0f0f0 !important;color:#333 !important;border:1px solid #ccc !important;}
.btn-secondary:hover{background:#e0e0e0 !important;border-color:#999 !important;}
.canvas-container{background:#fff;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,0.08);text-align:center;min-height:400px;}
.canvas-wrapper{display:inline-block;position:relative;background:repeating-conic-gradient(#f0f0f0 0% 25%,#ffffff 0% 50%) 50% / 20px 20px;padding:30px;border:2px solid #e8e8e8;}
#pixelCanvas{display:block;width:auto;height:auto;border:1px solid #ddd;border-radius:0;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;}
.info-badge{display:inline-flex;align-items:center;gap:8px;background:#ecf0f1;padding:10px 20px;margin-top:20px;font-size:13px;color:#7f8c8d;font-weight:600;}
.empty-state{padding:80px 30px;color:#bdc3c7;}
.empty-state i{font-size:80px;margin-bottom:25px;opacity:0.4;}
.empty-state h3{font-size:22px;margin:15px 0;color:#95a5a6;}
.empty-state p{font-size:16px;margin:10px 0;}
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:9999;}
.loading-content{background:white;padding:40px;text-align:center;}
.spinner{border:4px solid #f3f3f3;border-top:4px solid #667eea;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px;}
@keyframes spin {
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.font-info{background:#e8f5e9;border-left:4px solid #4caf50;padding:15px 20px;margin-bottom:20px;}
.font-info strong{color:#2e7d32;}
.font-tab-btn{padding:12px 24px;border:2px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.1);color:white;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:8px;}
.font-tab-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.8);}
.font-tab-btn.active{background:rgba(255,255,255,0.3);border-color:white;}
.font-family-item{padding:10px 12px;cursor:pointer;transition:all 0.2s;border-bottom:1px solid #eee;color:#333;font-size:13px;display:flex;align-items:center;gap:8px;}
.font-family-item:hover{background:var(--primary-green-lighter);}
.font-family-item.selected{background:var(--primary-green-light);border-left:3px solid var(--primary-green);font-weight:600;color:var(--primary-green-dark);}
.font-family-expand-icon{font-size:10px;color:#666;transition:transform 0.2s;width:12px;text-align:center;}
.font-family-item.expanded .font-family-expand-icon{transform:rotate(90deg);}
.font-family-item.has-styles .font-family-expand-icon{visibility:visible;}
.font-family-item:not(.has-styles) .font-family-expand-icon{visibility:hidden;}
.font-style-list{display:none;position:relative;width:100%;margin-top:10px;background:#f9f9f9;clear:both;float:none;}
.font-family-item.expanded .font-style-list{display:block;}
.font-style-item{padding:8px 12px;cursor:pointer;transition:all 0.2s;border-bottom:1px solid #eee;color:#555;font-size:12px;display:flex;justify-content:space-between;align-items:center;}
.font-style-item:hover{background:#f0f0f0;}
.font-style-item.selected{background:var(--primary-green-light);border-left:3px solid var(--primary-green);font-weight:600;color:var(--primary-green-dark);}
.font-style-badge{display:none;/* Hide badge as requested */}
/* Upload Font button in left panel - white background, black text, green border, smaller font */
#uploadFontBtnInList{background:#fff !important;color:#000 !important;border:1px solid var(--primary-green) !important;font-size:12px !important;padding:8px 12px !important;border-radius:0 !important;}
#uploadFontBtnInList:hover{background:var(--primary-green-lighter) !important;color:var(--primary-green-dark) !important;border-color:var(--primary-green-dark) !important;}
/* Generate Pixel Art button - not full width */
#generateBtn{width:auto !important;min-width:200px !important;border-radius:0 !important;}
/* Three panels unified height - adaptive to viewport */
#fontFamilyColumn,#textPreviewColumn,#configurationColumn{display:flex;flex-direction:column;align-items:stretch;height:100%;overflow:hidden;}
#fontFamilyColumn > div{display:flex;flex-direction:column;height:100%;overflow:hidden;}
#fontFamilyColumn > div #fontFamilyList{flex:1;overflow-y:auto;min-height:0;}
#textPreviewColumn{display:flex;flex-direction:column;gap:15px;height:100%;overflow:hidden;}
#textInputPanel{flex-shrink:0;}
#imagePreviewPanel{flex:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;overflow:auto;}
#configurationColumn{display:flex;flex-direction:column;gap:15px;height:100%;overflow:hidden;}
#configPanel{flex-shrink:0;display:block;overflow-y:visible;height:auto;}
#filtersPanel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#filtersPanelContent{flex:1;overflow-y:auto;min-height:0;max-height:100%;overflow-x:hidden;}
#filtersPanelContent > div{margin-bottom:0px;}
#filtersPanelContent > div:last-child{margin-bottom:0;}
#filtersPanelContent input[type="range"]{padding:0 !important;margin:0;}
/* Right panel button and control sizes */
#configurationColumn button{font-size:12px !important;padding:8px 12px !important;border-radius:0 !important;}
#configurationColumn input[type="range"],#configurationColumn input[type="color"],#configurationColumn input[type="text"]{height:28px !important;padding:4px !important;border-radius:0 !important;font-size:11px !important;margin:0;}
#configurationColumn label{font-size:13px !important;margin-bottom:3px !important;}
/* All border-radius to 0 - specific selectors */
div,button,input,textarea,select,canvas{border-radius:0 !important;}
/* But keep font-family-item display block to ensure styles appear below */
.font-family-item{display:block !important;position:relative;width:100%;}
/* Collapsible panel styles */
.collapsible-panel{overflow:hidden;transition:max-height 0.3s ease;}
.collapsible-panel.collapsed{max-height:0;}
.collapsible-panel.expanded{max-height:2000px;}
#fontFamilyList::-webkit-scrollbar,
#fontStyleList::-webkit-scrollbar{width:10px;}
#fontFamilyList::-webkit-scrollbar-track,
#fontStyleList::-webkit-scrollbar-track{background:#e8e8e8;border-radius:5px;}
#fontFamilyList::-webkit-scrollbar-thumb,
#fontStyleList::-webkit-scrollbar-thumb{background:#b0b0b0;border-radius:5px;}
#fontFamilyList::-webkit-scrollbar-thumb:hover,
#fontStyleList::-webkit-scrollbar-thumb:hover{background:#888888;}
/* Firefox scrollbar */
#fontFamilyList{scrollbar-width:thin;scrollbar-color:#b0b0b0 #e8e8e8;}
@media (max-width: 768px) {
.control-row{flex-direction:column;}
.control-group{min-width:100%;}
.action-buttons{flex-direction:column;}
.btn{width:100%;justify-content:center;}
.upload-panel{padding:30px 20px;}
.upload-area{padding:40px 20px;}
}