:root{--bg:#fafafa;--bg-sidebar:#fff;--text:#1a1a1a;--text-secondary:#666;--text-muted:#999;--border:#e8e8e8;--accent:#1a1a1a;--accent-hover:#333;--focus-ring:#bdbdbd;--surface-bg:#fff;--danger:#d32f2f;--success:#2e7d32;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6}.app{min-height:100vh;display:flex}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);flex-shrink:0;width:220px;height:100vh;padding:32px 0;position:sticky;top:0;overflow-y:auto}.sidebar-brand{border-bottom:1px solid var(--border);margin-bottom:24px;padding:0 24px 32px}.sidebar-brand-name{color:var(--text);letter-spacing:-.01em;font-size:14px;font-weight:600}.sidebar-brand-sub{color:var(--text-muted);margin-top:2px;font-size:12px}.sidebar-nav{list-style:none}.sidebar-nav-item{padding:0}.sidebar-nav-link{color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:0;align-items:center;gap:10px;width:100%;padding:10px 24px;font-family:inherit;font-size:13.5px;text-decoration:none;transition:color .15s,background .15s;display:flex}.sidebar-nav-link:hover{color:var(--text);background:#00000006}.sidebar-nav-link.active{color:var(--text);background:#00000009;font-weight:500}.sidebar-nav-link:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}.main{flex:1;max-width:800px;padding:48px 64px}.page-header{margin-bottom:40px}.page-title{letter-spacing:-.02em;color:var(--text);font-size:24px;font-weight:600;line-height:1.2}.page-subtitle{color:var(--text-muted);margin-top:6px;font-size:14px}.surface-list{flex-direction:column;gap:12px;display:flex}.surface-card{background:var(--surface-bg);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 20px;transition:border-color .15s;display:flex}.surface-card:hover{border-color:#d0d0d0}.surface-info{flex-direction:column;gap:2px;display:flex}.surface-name{color:var(--text);font-size:15px;font-weight:500}.surface-url{color:var(--text-muted);font-size:12px}.surface-status{border-radius:2px;margin-top:4px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.surface-status.connected{color:var(--success);background:#2e7d3214}.surface-status.not_connected{color:var(--text-muted);background:#0000000d}.surface-right{align-items:center;gap:16px;display:flex}.surface-changes{color:var(--text-muted);font-size:12px}.surface-changes.has-changes{color:#e65100}.btn{border:1px solid var(--border);background:var(--surface-bg);color:var(--text);cursor:pointer;align-items:center;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:#00000005;border-color:#b0b0b0}.btn:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.danger:hover{background:#d32f2f0f}.form-group{margin-bottom:20px}.form-label{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.form-label .optional{color:var(--text-muted);margin-left:4px;font-weight:400}.form-input,.form-textarea,.form-select{width:100%;color:var(--text);background:var(--surface-bg);border:1px solid var(--border);outline:none;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .15s}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:#a0a0a0}.form-input:focus-visible,.form-textarea:focus-visible,.form-select:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}.form-textarea{resize:vertical;min-height:80px;line-height:1.6}.form-hint{color:var(--text-muted);margin-top:4px;font-size:12px}.form-row{gap:12px;display:flex}.form-row .form-group{flex:1}.status-banner{border:1px solid var(--border);border-radius:2px;align-items:center;gap:8px;margin-bottom:24px;padding:10px 14px;font-size:13px;display:flex}.status-banner.changes{color:#bf600a;background:#e67e220f;border-color:#e0a060}.status-banner.clean{color:var(--success);background:#2e7d320d;border-color:#a0d8a0}.status-banner.loading{border-color:var(--border);color:var(--text-muted);background:#00000005}.status-actions{gap:8px;margin-left:auto;display:flex}.list-item{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 0;display:flex}.list-item:last-child{border-bottom:none}.list-item-drag{color:var(--text-muted);cursor:default;opacity:.4;padding:4px;font-size:12px}.list-item-fields{flex-wrap:wrap;flex:1;gap:10px;display:flex}.list-item-field{flex-direction:column;gap:3px;display:flex}.list-item-field label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:500}.list-item-field input{border:1px solid var(--border);background:var(--surface-bg);color:var(--text);outline:none;padding:6px 8px;font-family:inherit;font-size:13px}.list-item-field input:focus{border-color:#a0a0a0}.list-item-actions{gap:6px;display:flex}.list-item-actions button{cursor:pointer;border:1px solid var(--border);color:var(--text-secondary);background:0 0;padding:5px 10px;font-family:inherit;font-size:12px}.list-item-actions button:hover{color:var(--text);border-color:#b0b0b0}.list-add{padding:8px 0}.list-add button{cursor:pointer;border:1px dashed var(--border);color:var(--text-secondary);background:0 0;width:100%;padding:8px 16px;font-family:inherit;font-size:13px}.list-add button:hover{color:var(--text);border-color:#b0b0b0}.section{margin-bottom:40px}.section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:8px;font-size:12px;font-weight:600}.toggle{cursor:pointer;align-items:center;gap:8px;display:flex}.toggle input{accent-color:var(--text);width:15px;height:15px}.toggle-label{color:var(--text-secondary);font-size:13px}.loading{color:var(--text-muted);justify-content:center;align-items:center;padding:48px;font-size:14px;display:flex}.error-msg{color:var(--danger);background:#d32f2f0f;border:1px solid #d32f2f33;border-radius:2px;margin-bottom:16px;padding:16px;font-size:13px}