*{margin:0;padding:0;box-sizing:border-box}:root{--hainke-blue:#004f7c;--hainke-blue-hover:#003d61;--green:#22c55e;--green-hover:#16a34a;--red-bg:rgba(239,68,68,.1);--red-border:rgba(239,68,68,.3);--red-text:#991b1b;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-600:#4b5563;--gray-700:#374151;--gray-900:#111827}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);color:var(--gray-900);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}header{background:#fff;border-bottom:1px solid var(--gray-200);box-shadow:0 1px 3px rgba(0,0,0,.05);padding:1rem 0}.header-content{display:flex;justify-content:space-between;align-items:center}.logo-section{display:flex;align-items:center;gap:1rem}.firewall-icon{width:3rem;height:3rem;color:var(--hainke-blue)}h1{font-size:1.5rem;font-weight:700;color:var(--gray-900)}.subtitle{font-size:.875rem;color:var(--gray-600)}main{padding:2rem 0}.view{display:none}.view.active{display:block}.intro{text-align:center;margin-bottom:2rem}.intro h2{font-size:2rem;font-weight:700;margin-bottom:.5rem}.intro p{color:var(--gray-600);max-width:48rem;margin:0 auto}.progress-steps{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;position:relative}.step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;cursor:pointer;transition:opacity .2s}.step:hover{opacity:.8}.step-number{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--gray-200);color:var(--gray-600);transition:all .3s;z-index:2}.step.active .step-number,.step.completed .step-number{background:var(--hainke-blue);color:#fff}.step:hover .step-number{transform:scale(1.1)}.step-title{font-size:.75rem;margin-top:.5rem;text-align:center;color:var(--gray-600)}.step-line{position:absolute;top:1.25rem;left:50%;right:-50%;height:2px;background:var(--gray-200);z-index:1}.step.completed .step-line{background:var(--hainke-blue)}.step:last-child .step-line{display:none}.step-card{background:#fff;border-radius:.5rem;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:1.5rem}.step-card h3{font-size:1.25rem;margin-bottom:.5rem}.step-card p{color:var(--gray-600);margin-bottom:1.5rem}.form-group{margin-bottom:1.5rem}label{display:block;font-weight:500;margin-bottom:.5rem;color:var(--gray-700)}input[type="text"],input[type="password"]{width:100%;padding:.625rem .75rem;border:1px solid var(--gray-300);border-radius:.375rem;font-size:1rem;transition:border-color .2s}input[type="text"]:focus,input[type="password"]:focus{outline:none;border-color:var(--hainke-blue);box-shadow:0 0 0 3px rgba(0,79,124,.1)}input.error{border-color:#ef4444}.error-message{color:#ef4444;font-size:.875rem;margin-top:.25rem}.checkbox-group{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem;padding:.5rem;border-radius:.375rem;transition:background .2s}.checkbox-group:hover{background:var(--gray-50)}.checkbox-group input[type="checkbox"]{margin-top:.25rem}.checkbox-group label{margin:0;cursor:pointer;flex:1}input[type="checkbox"]{width:1.125rem;height:1.125rem;cursor:pointer}.radio-group{display:flex;flex-direction:column;gap:.75rem}.radio-option{display:flex;align-items:center;gap:.5rem}input[type="radio"]{width:1.125rem;height:1.125rem;cursor:pointer}.btn-primary,.btn-outline{padding:.625rem 1.25rem;border-radius:.375rem;font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem;border:none}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover:not(:disabled) {background:var(--green-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-outline{background:#fff;color:var(--gray-700);border:1px solid var(--gray-300)}.btn-outline:hover:not(:disabled) {background:var(--gray-50)}.btn-outline:disabled{opacity:.5;cursor:not-allowed}.navigation{display:flex;justify-content:space-between;gap:1rem}.info-box{background:var(--red-bg);border:1px solid var(--red-border);border-radius:.5rem;padding:1.5rem;margin-top:2rem}.info-box h3{color:var(--red-text);font-size:1.125rem;margin-bottom:.75rem}.info-box ul{list-style:none;color:var(--red-text)}.info-box li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}.info-box li::before{content:"•";position:absolute;left:.5rem}.info-box a{color:var(--red-text);font-weight:600;text-decoration:underline}.vlan-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:.5rem;padding:1.5rem;margin-bottom:1rem}.vlan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.btn-remove{background:transparent;border:none;color:#ef4444;cursor:pointer;padding:.5rem}.btn-add{background:var(--hainke-blue);color:#fff;border:none;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-weight:500}.btn-add:hover{background:var(--hainke-blue-hover)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.summary-box{background:var(--gray-50);border-radius:.5rem;padding:1.5rem;margin-bottom:1.5rem}.summary-box h3{margin-bottom:1rem}.summary-item{display:flex;gap:.5rem;margin-bottom:.5rem;font-size:.875rem}.summary-item strong{min-width:150px}.success-card{background:#fff;border-radius:.5rem;padding:3rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.1);max-width:48rem;margin:2rem auto}.success-icon{width:4rem;height:4rem;color:var(--green);margin-bottom:1.5rem}.success-card h2{margin-bottom:.5rem}.success-card p{color:var(--gray-600);margin-bottom:1.5rem}.success-info{background:var(--gray-50);border-radius:.5rem;padding:1rem;margin-bottom:1.5rem}.success-actions{display:flex;gap:1rem;justify-content:center}.text-muted{color:var(--gray-600);font-size:.875rem}.service-category{margin-bottom:2rem}.service-category h4{font-size:1rem;margin-bottom:.75rem;color:var(--hainke-blue);font-weight:600}@media (max-width:768px){.progress-steps{overflow-x:auto}.step-title{display:none}.grid-2{grid-template-columns:1fr}.navigation{flex-direction:column}.success-actions{flex-direction:column}}