.favicon-generator{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:2rem 1rem}.favicon-generator .tool-header{text-align:center;margin-bottom:2rem}.favicon-generator .tool-header h1{color:var(--primary-color);margin-bottom:.5rem}.favicon-generator .tool-header p{color:#666;max-width:600px;margin:0 auto}.favicon-generator .generator-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--tool-content-gap, 2rem);margin-bottom:2rem}.favicon-generator .settings-panel{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.favicon-generator .mode-selector{margin-bottom:1.5rem}.favicon-generator .mode-selector h3{font-size:1rem;color:#333;margin-bottom:.75rem}.favicon-generator .mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.favicon-generator .mode-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;background:var(--white);cursor:pointer;transition:all .2s ease}.favicon-generator .mode-btn:hover{border-color:var(--primary-color);background:#f8f9ff}.favicon-generator .mode-btn.active{border-color:var(--primary-color);background:var(--primary-color);color:var(--white)}.favicon-generator .mode-icon{font-size:1.25rem}.favicon-generator .form-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #eee}.favicon-generator .form-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.favicon-generator .form-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.favicon-generator .form-group{margin-bottom:1rem}.favicon-generator .form-group label{display:block;font-size:1rem;color:var(--gray-900);margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}.favicon-generator .form-group input[type=text],.favicon-generator .form-group select{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:6px;font-size:1rem}.favicon-generator .form-group input[type=range]{width:100%}.favicon-generator .emoji-input{font-size:2rem;text-align:center}.favicon-generator .color-input-group{display:flex;gap:.5rem}.favicon-generator .color-input-group input[type=color]{width:50px;height:38px;border:none;border-radius:6px;cursor:pointer}.favicon-generator .color-input-group input[type=text]{flex:1}.favicon-generator .color-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.favicon-generator .color-preset{width:28px;height:28px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.favicon-generator .color-preset:hover{transform:scale(1.1)}.favicon-generator .color-preset.active{border-color:#333}.favicon-generator .emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25rem;margin-bottom:1rem}.favicon-generator .emoji-btn{font-size:1.25rem;padding:.25rem;border:2px solid transparent;border-radius:6px;background:#f5f5f5;cursor:pointer;transition:all .2s ease}.favicon-generator .emoji-btn:hover{background:#e8e8e8;transform:scale(1.1)}.favicon-generator .emoji-btn.active{border-color:var(--primary-color);background:#e8f0fe}.favicon-generator .shape-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.favicon-generator .shape-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;background:var(--white);cursor:pointer;transition:all .2s ease}.favicon-generator .shape-btn:hover{border-color:var(--primary-color)}.favicon-generator .shape-btn.active{border-color:var(--primary-color);background:#f8f9ff}.favicon-generator .shape-preview{width:32px;height:32px}.favicon-generator .shape-preview.square{border-radius:0}.favicon-generator .shape-preview.rounded{border-radius:6px}.favicon-generator .shape-preview.circle{border-radius:50%}.favicon-generator .upload-area{border:2px dashed #ccc;border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s ease}.favicon-generator .upload-area:hover{border-color:var(--primary-color);background:#f8f9ff}.favicon-generator .upload-icon{font-size:2rem;display:block;margin-bottom:.5rem}.favicon-generator .upload-area p{margin:0 0 .25rem;color:#333}.favicon-generator .upload-area small{color:#888}.favicon-generator .uploaded-preview{display:flex;flex-direction:column;align-items:center;gap:.5rem}.favicon-generator .uploaded-preview img{max-width:100px;max-height:100px;border-radius:4px}.favicon-generator .uploaded-preview p{font-size:.875rem;color:#888}.favicon-generator .preview-panel{background:var(--white);border:2px solid #d1d5db;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;box-shadow:0 1px 3px #0000001a}.favicon-generator .preview-panel h3{font-size:1rem;color:#333;margin-bottom:1rem}.favicon-generator .preview-main{display:flex;justify-content:center;align-items:center;padding:2rem;background:repeating-conic-gradient(#ddd 0% 25%,transparent 0% 50%) 50% / 20px 20px;border:2px solid #d1d5db;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.favicon-generator .main-preview-img{width:128px;height:128px;box-shadow:0 4px 12px #00000026}.favicon-generator .browser-preview{margin-bottom:1.5rem}.favicon-generator .browser-preview h4{font-size:.875rem;color:#555;margin-bottom:.5rem}.favicon-generator .tab-mockup{background:#e8e8e8;border-radius:8px 8px 0 0;padding:.5rem .5rem 0;overflow:hidden}.favicon-generator .tab-bar{display:flex;gap:2px}.favicon-generator .tab{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#d0d0d0;border-radius:8px 8px 0 0;font-size:.75rem;color:#666;max-width:200px}.favicon-generator .tab.active{background:var(--white);color:#333}.favicon-generator .tab-favicon{width:16px;height:16px}.favicon-generator .tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favicon-generator .tab-close{margin-left:auto;opacity:.5}.favicon-generator .size-grid{margin-bottom:1.5rem}.favicon-generator .size-grid h4{font-size:.875rem;color:#555;margin-bottom:.75rem}.favicon-generator .sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.favicon-generator .size-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;background:#f8f8f8;border-radius:8px}.favicon-generator .size-preview{display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#ddd 0% 25%,transparent 0% 50%) 50% / 10px 10px;border:2px solid #d1d5db;border-radius:4px;padding:4px;box-shadow:0 1px 3px #0000001a}.favicon-generator .size-preview img{display:block}.favicon-generator .size-label{font-size:.7rem;color:#666}.favicon-generator .download-size-btn{font-size:.65rem;padding:.2rem .5rem;background:var(--primary-color);color:var(--white);border:none;border-radius:4px;cursor:pointer}.favicon-generator .download-size-btn:hover{background:var(--primary-hover)}.favicon-generator .download-actions{display:flex;justify-content:center;margin-bottom:1.5rem}.favicon-generator .btn-primary{padding:.75rem 2rem;background:var(--primary-color);color:var(--white);border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s ease}.favicon-generator .btn-primary:hover{background:var(--primary-hover)}.favicon-generator .code-section{margin-bottom:1.5rem}.favicon-generator .code-section h4{font-size:.875rem;color:#333;margin-bottom:.25rem}.favicon-generator .code-description{font-size:.8rem;color:#666;margin-bottom:.5rem}.favicon-generator .code-block{position:relative;background:#1e1e1e;border-radius:8px;padding:1rem;overflow:auto;max-height:250px}.favicon-generator .code-block pre{margin:0;font-size:.75rem;color:#d4d4d4;white-space:pre-wrap;word-break:break-all}.favicon-generator .code-block .copy-btn{position:absolute;top:.5rem;right:.5rem;padding:.25rem .5rem;background:#444;color:var(--white);border:none;border-radius:4px;font-size:.75rem;cursor:pointer}.favicon-generator .code-block .copy-btn:hover{background:#555}.favicon-generator .no-preview{text-align:center;padding:3rem;background:#f9fafb;color:#888;box-shadow:0 1px 3px #0000001a}.favicon-generator .tips-section{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem}.favicon-generator .tips-section h3{text-align:center;margin-bottom:1.5rem;color:#333}.favicon-generator .tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.favicon-generator .tip-card{text-align:center}.favicon-generator .tip-icon{font-size:2rem;display:block;margin-bottom:.5rem}.favicon-generator .tip-card h4{font-size:.95rem;margin-bottom:.25rem;color:#333}.favicon-generator .tip-card p{font-size:.85rem;color:#666;line-height:1.4}.favicon-generator .cta-section{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border-radius:12px;padding:2rem;text-align:center;color:var(--white)}.favicon-generator .cta-section h3{margin-bottom:.5rem}.favicon-generator .cta-section p{margin-bottom:1rem;opacity:.9}.favicon-generator .cta-button{display:inline-block;padding:.75rem 2rem;background:var(--white);color:var(--primary-color);text-decoration:none;border-radius:8px;font-weight:600;transition:transform .2s ease}.favicon-generator .cta-button:hover{transform:translateY(-2px)}@media (max-width: 992px){.favicon-generator .generator-container{grid-template-columns:1fr}.favicon-generator .tips-grid{grid-template-columns:repeat(2,1fr)}.favicon-generator .sizes{grid-template-columns:repeat(4,1fr)}}@media (max-width: 576px){.favicon-generator .mode-buttons,.favicon-generator .shape-buttons{grid-template-columns:1fr}.favicon-generator .emoji-grid{grid-template-columns:repeat(5,1fr)}.favicon-generator .sizes{grid-template-columns:repeat(2,1fr)}.favicon-generator .tips-grid{grid-template-columns:1fr}}