*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{background-color:#f8fafc;color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.container{margin:0 auto;max-width:1200px;padding:0 1rem}.header{background-color:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a;position:sticky;top:0;z-index:100}.header-content{align-items:center;display:flex;justify-content:space-between;padding:1rem 0}.logo{color:#2563eb;font-size:1.5rem;font-weight:700;text-decoration:none}.nav{display:flex;gap:2rem}.nav a{color:#64748b;font-weight:500;text-decoration:none;transition:color .2s}.nav a:hover{color:#2563eb}.main-layout{display:flex;min-height:calc(100vh - 80px)}.sidebar{background-color:#fff;border-right:1px solid #e2e8f0;overflow-y:auto;padding:2rem 1rem;width:280px}.main-content{flex:1;overflow-y:auto;padding:2rem}.tool-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:2rem}.tool-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:1.5rem;transition:all .2s}.tool-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.tool-title{color:#1e293b;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.tool-description{color:#64748b;margin-bottom:1rem}.tool-link{background-color:#2563eb;border-radius:6px;color:#fff;display:inline-block;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s}.tool-link:hover{background-color:#1d4ed8}.sidebar-nav{list-style:none}.sidebar-nav li{margin-bottom:.5rem}.sidebar-nav a{border-radius:6px;color:#64748b;display:block;padding:.75rem 1rem;text-decoration:none;transition:all .2s}.sidebar-nav a.active,.sidebar-nav a:hover{background-color:#eff6ff;color:#2563eb}.tool-content{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:2rem}.tool-header{border-bottom:1px solid #e2e8f0;margin-bottom:2rem;padding-bottom:1rem}.tool-header h1{color:#1e293b;font-size:1.875rem;font-weight:700;margin-bottom:.5rem}.tool-header p{color:#64748b}.form-group{margin-bottom:1.5rem}.form-label{color:#374151;display:block;font-weight:500;margin-bottom:.5rem}.form-input,.form-select,.form-textarea{border:1px solid #d1d5db;border-radius:6px;font-size:1rem;padding:.75rem;transition:border-color .2s;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a;outline:none}.form-textarea{min-height:120px;resize:vertical}.btn{border:none;border-radius:6px;cursor:pointer;display:inline-block;font-size:1rem;font-weight:500;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s}.btn-primary{background-color:#2563eb;color:#fff}.btn-primary:hover{background-color:#1d4ed8}.btn-secondary{background-color:#6b7280;color:#fff}.btn-secondary:hover{background-color:#4b5563}.result-box{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:Courier New,monospace;margin-top:1rem;padding:1rem}@media (max-width:768px){.container{padding:0 .5rem}.header-content{flex-direction:column;gap:1rem;text-align:center}.nav{flex-wrap:wrap;gap:1rem;justify-content:center}.main-layout{flex-direction:column}.sidebar{border-bottom:1px solid #e2e8f0;border-right:none;padding:1rem;width:100%}.sidebar-nav{display:flex;flex-wrap:wrap;gap:.5rem}.sidebar-nav li{margin-bottom:0}.sidebar-nav a{font-size:.875rem;padding:.5rem .75rem}.main-content{padding:1rem}.tool-grid{gap:1rem;grid-template-columns:1fr}.tool-card,.tool-content{padding:1rem}.tool-header h1{font-size:1.5rem}}@media (max-width:480px){.container{padding:0 .25rem}.logo,.tool-header h1{font-size:1.25rem}.btn{font-size:.875rem;padding:.625rem 1.25rem}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.p-2{padding:.5rem}.p-4{padding:1rem}.hidden{display:none}.loading{animation:spin 1s linear infinite;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#2563eb;display:inline-block;height:20px;width:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}