:root{--bg-primary: hsl(0, 0%, 7%);--bg-secondary: hsl(0, 0%, 10%);--bg-tertiary: hsl(0, 0%, 13%);--bg-hover: hsl(0, 0%, 18%);--accent-primary: hsl(0, 0%, 98%);--accent-light: hsl(0, 0%, 100%);--accent-dark: hsl(0, 0%, 90%);--text-primary: hsl(0, 0%, 92%);--text-secondary: hsl(0, 0%, 70%);--text-muted: hsl(0, 0%, 55%);--error: #ef4444;--error-bg: rgba(239, 68, 68, .1);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .1);--success: #22c55e;--success-bg: rgba(34, 197, 94, .1);--border-default: hsl(0, 0%, 20%);--border-focus: hsl(0, 0%, 55%);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}@media(min-width:1024px){html,body{height:100vh;overflow:hidden}.app{height:100vh;min-height:auto;overflow:hidden}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-secondary);border-bottom:1px solid var(--border-default);flex-wrap:wrap;gap:var(--spacing-md)}.header-brand{display:flex;align-items:center;gap:var(--spacing-md)}.logo{color:var(--text-primary);flex-shrink:0}.header-title h1{font-size:1.25rem;font-weight:600;color:var(--text-primary);line-height:1.2}.header-subtitle{font-size:.875rem;color:var(--text-secondary)}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.main{flex:1;display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);padding:var(--spacing-lg);max-width:1600px;margin:0 auto;width:100%}@media(min-width:1024px){.main{grid-template-columns:1fr 1fr;height:calc(100vh - 70px);overflow:hidden}.config-panel{overflow-y:auto;max-height:100%;padding-right:var(--spacing-md)}}@media(min-width:1280px){.main{grid-template-columns:1.2fr 1fr}}.config-panel,.output-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}@media(min-width:1024px){.output-panel{max-height:100%;overflow:hidden}}.usage-section{flex-shrink:0}.usage-box{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md)}.usage-title{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.usage-code{font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin:0;white-space:pre}.section{display:flex;flex-direction:column;gap:var(--spacing-md)}.section-header{display:flex;flex-direction:column;gap:var(--spacing-xs)}.section-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.section-hint{font-size:.875rem;color:var(--text-secondary)}.panel{background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--border-default)}.panel-title{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.panel-body{padding:var(--spacing-md)}.panel-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-md);border-top:1px solid var(--border-default)}.yaml-panel{flex:1;display:flex;flex-direction:column;min-height:300px}@media(min-width:1024px){.yaml-panel{flex:none;height:50vh;min-height:200px;max-height:50vh}}.yaml-panel .panel-body{flex:1;overflow:auto;padding:0}.yaml-output{margin:0;padding:var(--spacing-md);font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;white-space:pre;overflow-x:auto;min-height:100%}.yaml-output code{font-family:inherit}.yaml-key{color:var(--text-primary)}.yaml-value{color:var(--text-secondary)}.yaml-string{color:#bfbfbf}.yaml-number{color:#ccc}.yaml-boolean{color:#d9d9d9}.yaml-comment{color:var(--text-muted);font-style:italic}.validation-panel{flex-shrink:0}@media(min-width:1024px){.validation-panel{flex:1;min-height:100px;display:flex;flex-direction:column;overflow:hidden}.validation-panel .panel-body{flex:1;overflow-y:auto}}.validation-success{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--success)}.validation-success svg{flex-shrink:0}.validation-list{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-sm)}.validation-item{display:flex;align-items:flex-start;gap:var(--spacing-sm);font-size:.875rem;padding:var(--spacing-sm);border-radius:var(--radius-sm)}.validation-item-error{background-color:var(--error-bg);color:var(--error)}.validation-item-warning{background-color:var(--warning-bg);color:var(--warning)}.validation-item svg{flex-shrink:0;margin-top:2px}.validation-field{font-family:var(--font-mono);font-size:.75rem;opacity:.8}.card{background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-default)}.card-badge{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.card-badge-accent{color:var(--text-primary)}.card-body{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.peers-container,.services-container{display:flex;flex-direction:column;gap:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-sans);font-size:.875rem;font-weight:500;line-height:1.5;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--accent-primary);color:var(--bg-primary)}.btn-primary:hover:not(:disabled){background-color:var(--accent-dark)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-default)}.btn-secondary:hover:not(:disabled){background-color:var(--bg-hover)}.btn-icon{padding:var(--spacing-sm);background-color:transparent;color:var(--text-secondary);border:none}.btn-icon:hover:not(:disabled){color:var(--text-primary);background-color:var(--bg-tertiary)}.btn-add{width:100%;padding:var(--spacing-md);background-color:transparent;color:var(--text-secondary);border:2px dashed var(--border-default);border-radius:var(--radius-md)}.btn-add:hover:not(:disabled){background-color:var(--bg-secondary);border-color:var(--text-secondary);color:var(--text-primary)}.btn-add-secondary{color:var(--text-muted)}.btn-add-secondary:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-muted)}.btn-remove{color:var(--text-muted)}.btn-remove:hover:not(:disabled){color:var(--error);background-color:var(--error-bg)}.service-actions{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media(min-width:480px){.service-actions{flex-direction:row}.service-actions .btn{flex:1}}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group label{font-size:.875rem;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:var(--spacing-xs)}.form-row{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}@media(min-width:480px){.form-row{grid-template-columns:repeat(2,1fr)}}.form-row-3{grid-template-columns:1fr}@media(min-width:640px){.form-row-3{grid-template-columns:repeat(3,1fr)}}.required{color:var(--error)}.hint{font-weight:400;color:var(--text-muted)}.input,.select,.textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-sans);font-size:.875rem;color:var(--text-primary);background-color:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #ffffff0d}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--error)}.input[aria-invalid=true]:focus,.select[aria-invalid=true]:focus,.textarea[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--error-bg)}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-sm) center;padding-right:calc(var(--spacing-md) + 16px);cursor:pointer}.textarea{min-height:200px;resize:vertical;font-family:var(--font-mono)}.field-hint{font-size:.75rem;color:var(--text-muted)}.field-error{font-size:.75rem;color:var(--error);min-height:1rem}.field-error.field-warning{color:var(--warning)}.input-with-suffix{display:flex;align-items:stretch}.input-with-suffix .input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.input-suffix{display:flex;align-items:center;padding:0 var(--spacing-md);font-size:.875rem;color:var(--text-muted);background-color:var(--bg-tertiary);border:1px solid var(--border-default);border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.form-group-checkbox{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm)}.form-group-checkbox input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--accent-primary);cursor:pointer;flex-shrink:0}.form-group-checkbox label{flex-direction:column;align-items:flex-start;cursor:pointer}.routing-choice{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--spacing-md)}.routing-choice legend{font-size:.875rem;font-weight:500;color:var(--text-secondary);padding:0 var(--spacing-xs)}.radio-option{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm);margin-top:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast)}.radio-option:hover{background-color:var(--bg-tertiary)}.radio-option input[type=radio]{width:18px;height:18px;margin-top:2px;accent-color:var(--accent-primary);cursor:pointer;flex-shrink:0}.radio-option label{display:flex;flex-direction:column;gap:var(--spacing-xs);cursor:pointer;flex:1}.radio-option label strong{color:var(--text-primary);font-weight:500}.radio-description{font-size:.75rem;color:var(--text-muted)}.routing-config{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-primary);border-radius:var(--radius-md)}.routing-config[hidden]{display:none}.routes-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.route-entry{position:relative;padding:var(--spacing-md);background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md)}.route-entry .btn-remove-sm{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);padding:var(--spacing-xs);background:none;border:none;color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast)}.route-entry .btn-remove-sm:hover{color:var(--error)}.route-hint{font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-sm)}.route-error{font-size:.75rem;color:var(--error);margin-top:var(--spacing-xs)}.route-error:empty{display:none}.optional-section{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.optional-section summary{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);font-size:.875rem;font-weight:500;color:var(--text-secondary);background-color:var(--bg-tertiary);cursor:pointer;list-style:none}.optional-section summary::-webkit-details-marker{display:none}.optional-section summary:before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform var(--transition-fast)}.optional-section[open] summary:before{transform:rotate(90deg)}.optional-section>div{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);background-color:#000000bf;border:none;max-width:100%;max-height:100%;width:100%;height:100%}.modal::backdrop{background-color:#000000bf}.modal:not([open]){display:none}.modal-content{width:100%;max-width:600px;max-height:calc(100vh - 2 * var(--spacing-lg));background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-default)}.modal-header h2{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.modal-body{flex:1;padding:var(--spacing-lg);overflow-y:auto}.modal-description{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.modal-hint{font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-sm)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--border-default)}.modal-body.drag-over{background-color:var(--bg-tertiary);border:2px dashed var(--accent-primary);border-radius:var(--radius-md)}.file-upload-row{display:flex;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.file-upload-row .modal-hint{margin-top:0}.toast-container{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:1000;pointer-events:none}.toast{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:0 4px 12px #0000004d;pointer-events:auto;animation:toast-in .2s ease-out}.toast-success{border-color:var(--success)}.toast-error{border-color:var(--error)}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.toast.removing{animation:toast-out .2s ease-in forwards}.tooltip-trigger{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:none;border:none;color:var(--text-muted);cursor:help;position:relative;border-radius:50%}.tooltip-trigger:hover,.tooltip-trigger:focus{color:var(--accent-light);outline:none}.tooltip-trigger:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.tooltip-content{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:var(--spacing-sm) var(--spacing-md);font-size:.75rem;font-weight:400;color:var(--text-primary);background-color:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-sm);white-space:normal;width:max-content;max-width:250px;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:100;pointer-events:none;box-shadow:0 2px 8px #0000004d}.tooltip-content:before{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--border-default)}.tooltip-content:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--bg-tertiary)}.tooltip-trigger:hover+.tooltip-content,.tooltip-trigger:focus+.tooltip-content,.tooltip-content:hover{opacity:1;visibility:visible}.btn-tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;color:var(--text-muted);cursor:help;position:relative}.btn-tooltip:hover{color:var(--accent-light)}.btn-tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:var(--spacing-sm) var(--spacing-md);font-size:.75rem;font-weight:400;color:var(--text-primary);background-color:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-sm);white-space:normal;width:max-content;max-width:250px;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:100;pointer-events:none}.btn-tooltip:hover:after,.btn-tooltip:focus:after{opacity:1;visibility:visible}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-lg);text-align:center;color:var(--text-muted);background-color:var(--bg-secondary);border:2px dashed var(--border-default);border-radius:var(--radius-lg)}.empty-state svg{margin-bottom:var(--spacing-md);opacity:.4}.empty-state-title{font-size:.9375rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.empty-state-description{font-size:.8125rem;color:var(--text-muted);margin-bottom:var(--spacing-md)}.empty-state .btn{margin-top:var(--spacing-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent-primary);color:var(--bg-primary);padding:var(--spacing-sm) var(--spacing-md);z-index:1001;transition:top var(--transition-normal);text-decoration:none;font-weight:500}.skip-link:focus{top:0;outline:2px solid var(--border-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:767px){.header{padding:var(--spacing-sm) var(--spacing-md)}.header-title h1{font-size:1rem}.header-subtitle{display:none}.main{padding:var(--spacing-md)}.panel-footer{flex-wrap:wrap}.panel-footer .btn{flex:1;min-width:calc(50% - var(--spacing-sm) / 2)}.modal-content{max-height:calc(100vh - var(--spacing-md) * 2)}.toast-container{left:var(--spacing-md);right:var(--spacing-md);bottom:var(--spacing-md)}.toast{width:100%}}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}.modal-content-sm{max-width:400px}.confirm-details{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:.875rem}.confirm-details p{margin:0;color:var(--text-secondary)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.card-header-collapsible{cursor:pointer;user-select:none}.card-header-collapsible:hover{background-color:var(--bg-hover)}.card-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:none;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:transform var(--transition-normal),color var(--transition-fast);margin-right:var(--spacing-sm)}.card-collapse-toggle:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.card-collapse-toggle:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.card-collapse-toggle[aria-expanded=false]{transform:rotate(-90deg)}.card-body-collapsible{overflow:hidden;transition:max-height var(--transition-normal),opacity var(--transition-normal)}.card-body-collapsible[hidden]{display:block;max-height:0;opacity:0;padding-top:0;padding-bottom:0}.card-body-collapsible:not([hidden]){max-height:2000px;opacity:1}.error-summary{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background-color:var(--error-bg);border:1px solid var(--error);border-radius:var(--radius-md)}.error-summary-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem;font-weight:600;color:var(--error);margin-bottom:var(--spacing-sm)}.error-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.error-summary-list a{font-size:.8125rem;color:var(--error);text-decoration:underline;text-underline-offset:2px}.error-summary-list a:hover{color:var(--text-primary)}.error-summary-list a:focus-visible{outline:2px solid var(--error);outline-offset:2px}.section-title-count{font-weight:400;color:var(--text-muted);font-size:.875rem}.btn-copy-success{background-color:var(--success-bg)!important;border-color:var(--success)!important;color:var(--success)!important}.validation-suggestion{display:block;font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-xs);font-style:italic}@media(max-width:640px){.route-entry{padding-top:calc(var(--spacing-md) + 24px)}.route-entry .form-row-3{grid-template-columns:1fr;gap:var(--spacing-sm)}.route-entry .btn-remove-sm{width:32px;height:32px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;top:var(--spacing-xs);right:var(--spacing-xs)}.route-hint{margin-top:var(--spacing-md)}}