*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#fffffff2;padding:2rem;text-align:center;box-shadow:0 2px 10px #0000001a}.app-header h1{color:#333;margin-bottom:.5rem;font-size:2.5rem}.app-header p{color:#666;font-size:1.1rem}.app-main{flex:1;padding:2rem;max-width:1200px;width:100%;margin:0 auto}.form-container,.result-container{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000001a}.server-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:#333;font-size:.95rem}.required{color:#e74c3c}.form-group input{padding:.75rem;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.form-group input:disabled{background-color:#f5f5f5;cursor:not-allowed}.form-group small{color:#666;font-size:.85rem}.submit-button,.action-button,.reset-button{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .3s}.submit-button:hover:not(:disabled),.action-button:hover,.reset-button:hover{background:#5568d3}.submit-button:disabled{background:#ccc;cursor:not-allowed}.error-message{margin-top:1rem;padding:1rem;background:#fee;border:1px solid #fcc;border-radius:6px;color:#c33}.result-container{display:flex;flex-direction:column;gap:2rem}.result-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:2px solid #e0e0e0}.result-header h2{color:#333;font-size:1.5rem}.reset-button{background:#6c757d}.reset-button:hover{background:#5a6268}.client-config{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media (max-width: 768px){.client-config{grid-template-columns:1fr}}.config-section,.qr-section{display:flex;flex-direction:column;gap:1rem}.config-section h3,.qr-section h3{color:#333;font-size:1.25rem}.config-info{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#f8f9fa;border-radius:6px}.info-item{font-size:.9rem;color:#555}.key-display{font-family:Courier New,monospace;font-size:.8rem;word-break:break-all;background:#fff;padding:.25rem .5rem;border-radius:4px}.config-textarea{width:100%;padding:1rem;border:2px solid #e0e0e0;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;resize:vertical;background:#f8f9fa}.config-actions{display:flex;gap:1rem;flex-wrap:wrap}.qr-code-display{display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-code-image{max-width:100%;height:auto;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;background:#fff}.qr-code-hint{color:#666;font-size:.9rem;text-align:center}.qr-download{width:100%}.app-footer{background:#fffffff2;padding:1.5rem;text-align:center;color:#666;margin-top:auto}