:root {
            --primary-blue: #2a6ac4; --light-gray-bg: #f0f2f5; --border-color: #e0e4e7; --btn-blue: #1d73be;
            --text-color: #333; --text-light: #6c757d;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--light-gray-bg); margin: 0; color: var(--text-color); font-size:14px; }
        .site-header { background-color: #fff; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 55px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
        .site-header .container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; width: 100%; max-width: 1140px; margin-right: auto; margin-left: auto; }
        .header-left{display:flex;align-items:center;gap:25px}.mobile-toggle{display:none;font-size:20px;align-items:left;cursor:pointer;color:#1a202c;margin-right:0px}
        .header-left, .header-right, .main-nav ul, .user-profile { display: flex; align-items: center; gap: 1.5rem; }
        .logo { font-size: 1.5rem; font-weight: 700; color: #1d73be; text-decoration: none; display: flex; align-items: center; }
        .logo-img { height: 35px; margin-right: 8px; }
        .main-nav ul { list-style: none; margin: 0; padding: 0; }
        .main-nav a { text-decoration: none; color: var(--text-color); font-weight: 400; display: flex; align-items: center; gap: 8px; transition: color 0.3s; font-size: 14px; }
        .main-nav a:hover { color: var(--primary-blue); }
        .search-btn { background: none; border: 1px solid #ccc; border-radius: 6px; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        
        .login-link{text-decoration:none;color:#333;font-weight:500;font-size:15px}.register-btn{background-color:var(--btn-blue);color:white;text-decoration:none;padding:8px 18px;border-radius:6px;font-weight:600;font-size:15px;transition:opacity 0.2s}.register-btn:hover{opacity:0.9}.mobile-toggle{display:none;font-size:20px;cursor:pointer;color:#555;padding:5px}@media(max-width:1024px){.main-nav{display:none}.mobile-toggle{display:block}}@media(max-width:480px){.register-btn{padding:10px 16px;font-size:13px}.logo-img{height:35px}}
        
        .user-profile { gap: 10px; }
        .user-avatar { font-size: 24px; color: #666; }
        .page-wrapper { display: flex; gap: 2rem; padding: 2rem; max-width: 1140px; margin: 0 auto; align-items: flex-start; }
        .main-content { flex: 1; min-width: 0; }
        .sidebar { width: 25%; flex-shrink: 0; position: sticky; top: calc(55px + 2rem); }
        .sidebar-widget { background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
        .widget-header { background-color: var(--primary-blue); color: #fff; padding: 1rem 1.5rem; font-size: 1.1rem; font-weight: 600; }
        .widget-list { list-style: none; margin: 0; padding: 0; }
        .widget-list li a { display: flex; align-items: center; gap: 10px; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); text-decoration: none; color: var(--text-color); font-weight: 500; transition: background-color 0.2s; }
        .widget-list li:last-child a { border-bottom: none; }
        .widget-list li a:hover { background-color: #f8f9fa; }
        .widget-list i { color: #28a745; }
        .tool-container { background-color: #fff; border-radius: 8px; border: 1px solid var(--border-color); }
        .tool-intro { padding: 1rem; border-bottom: 1px solid var(--border-color); }
        .tool-intro h4 { padding: 0; margin: 0; font-size: 1rem; }
        .tool-intro p { font-size: 1rem; color: var(--text-light); margin-top: 0.5rem; }
        .generator-wrapper { padding: 1.5rem; }
        .discover-more { padding: 1.5rem; border-top: 1px solid var(--border-color); }
        .discover-more h4 { margin: 0 0 1rem 0; font-weight: 500; }
        .tags-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .tag { display: inline-flex; align-items: center; gap: 0.3rem; background-color: #fff; border: 1px solid var(--border-color); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; color: var(--text-color); text-decoration: none; transition: all 0.2s; }
        .tag:hover { background-color: #f5f5f5; border-color: #bbb; }
        .tag i { color: var(--primary-blue); }
        .tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 1.5rem; }
        .tab-button { padding: 1rem 1.5rem; cursor: pointer; border: none; background-color: transparent; font-size: 1rem; font-weight: 600; color: #606770; position: relative; transition: color 0.3s; border-bottom: 3px solid transparent; }
        .tab-button.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        .form-group { margin-bottom: 1rem; }
        .full-width { grid-column: 1 / -1; }
        label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #444; }
        input, select { width: 100%; padding: 0.75rem; border: 1px solid #ccd0d5; border-radius: 6px; box-sizing: border-box; font-size: 1rem; }
        .generate-button { padding: 0.7rem; background: linear-gradient(45deg, #2a6ac4, #1d4a8c); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .generate-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(42, 106, 196, 0.3); }
        .generate-button:disabled { background: #9db2bf; cursor: not-allowed; }
        .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; display: none; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .preview-section { margin-top: 2rem; text-align: center; }
        .preview-section h2 { color: #333; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
        .preview-grid { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; background-color: #f8f9fa; padding: 1rem; border-radius: 8px; min-height: 50px; }
        .preview-grid img { background-color: #fff; padding: 5px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s; }
        .site-footer { background-color: #fff; padding: 1rem 1rem 0.1rem 1rem; text-align: center; border-top: 1px solid var(--border-color); margin-top: 2rem; }
        .footer-content h4 { margin: 0 0 1rem 0; font-weight: 600; color: #555; }
        .social-icons { display: flex; justify-content: center; gap: 10px; margin-bottom: 1.5rem; }
        .social-icons a { color: #fff; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; text-decoration: none; font-size: 1.2rem; transition: transform 0.2s; }
        .social-icons a:hover { transform: scale(1.1); }
        .social-facebook { background-color: #3b5998; } .social-twitter { background-color: #1da1f2; } .social-youtube { background-color: #ff0000; }
        .copyright { color: var(--text-light); font-size: 0.9rem; }
        .copyright a { color: var(--primary-blue); text-decoration: none; font-weight: 500; }
        #scrollToTopBtn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #555; color: #fff; border: none; border-radius: 5px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; opacity: 0; visibility: hidden; z-index: 1001; }
        #scrollToTopBtn.show { opacity: 1; visibility: visible; }
        #scrollToTopBtn:hover { background-color: #333; }
        
        @media (max-width: 992px) { .page-wrapper { flex-direction: column; padding: 1rem 0.5rem; } .sidebar { width: 100%; position: static; } .main-nav { display: none; } }