/* Product surfaces: emphasis follows the scope and consequence of each action. */.secondary.danger{background:var(--danger-soft);border-color:#e5bbaa;color:var(--danger-ink)}.secondary.danger:hover{background:#f7ded3;border-color:#cc937c}#close-detail{background:transparent;border:0;min-height:44px;padding:0;margin:0 0 4px;color:var(--text-secondary)}#close-detail:hover{background:#e0e6ee}.copy-action{display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;border:1px solid var(--action-secondary-border);background:var(--action-soft);border-radius:var(--control-radius);padding:8px;color:var(--action-primary-hover);font-size:12px}.copy-action:hover{background:var(--action-soft-hover)}.copy-action svg{width:17px;height:17px;flex-shrink:0}.project-editor .help{margin:10px 0 0;font-size:12px}/* Login borrows Linear's focused column, with the product's own identity. */.login{background:var(--canvas);padding:56px 24px;min-height:100vh;min-height:100dvh;display:grid;place-items:center}.login-shell{max-width:460px;width:100%}.login .login-brand{justify-content:center;font-size:25px;margin-bottom:28px}.login .brand-icon{width:40px;height:44px;border-radius:var(--connect-radius-panel)}.login .brand .light{font-size:11px;letter-spacing:3.2px}.login .login-card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--action-primary);border-radius:var(--connect-radius-panel);box-shadow:0 12px 40px #15233808;overflow:visible;padding:36px;max-width:none}.login .login-access{padding:0}.login-access h1{font-size:26px;letter-spacing:-.7px;line-height:1.25;margin-bottom:10px}.login-access>p{margin-bottom:30px;font-size:var(--connect-text-sm)}.login-access label{font-size:var(--connect-text-sm);color:#333d4b;font-weight:550}.login-access input{background:#fff;border-color:var(--control-border);border-radius:8px;font-size:15px;height:48px;margin-top:8px}.login-access input+label{margin-top:22px}.login .wide{justify-content:center;min-height:48px;margin-top:24px;font-size:var(--connect-text-sm)}.login #login-submit{box-shadow:0 2px 3px #16253c10}.login-access .login-help{font-size:12px;padding:16px;background:var(--surface-header);border:1px solid var(--line);border-radius:8px;margin-top:26px;line-height:1.7}.login-caption{border-top:0;padding-top:0;text-align:center;font-size:11px;margin-top:28px;color:#5d6571}.login #admin-key-access{margin:20px 0 0;font-size:12px}.login #admin-key-access>summary{display:flex;align-items:center;list-style:none;min-height:var(--control-height);padding:8px 0;color:#4b5565;cursor:pointer}.login #key-form{padding:16px;background:var(--surface);border:1px solid #d2d9e3;border-radius:8px;margin-top:8px}.password-control{position:relative;margin-top:8px}.login-access .password-control input{padding-right:76px;margin-top:0}.password-toggle{position:absolute;right:4px;top:4px;min-height:40px;padding:0 10px;border:0;border-radius:5px;background:transparent;font-size:12px;color:#31425b;font-weight:550}.password-toggle:hover{background:#e9edf3}.password-control+label{margin-top:22px}
@media(max-width:1100px){}
@media(max-width:800px){.copy-action span{display:none}.login{padding:28px 16px}.login .login-card{padding:24px 20px}.login .login-access{padding:0}.login-access h1{font-size:28px}.login-access input{font-size:var(--connect-text-base)}.login .login-brand{margin-bottom:32px}}/* Pairing is the first task; technical configuration follows in reading order. */.panel-intro{border:0;padding-bottom:0}
@media(max-width:800px){}
@media(max-width:500px){}

@media(max-width:500px){}

/* Instance workspace: each group has a readable boundary and contextual actions. */
.detail-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;margin-bottom:20px;background:transparent}.detail-top>div{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0}.detail-top h1{font-size:var(--connect-text-title);font-weight:600;letter-spacing:-.7px;margin:0;overflow-wrap:anywhere}.detail-top #rename-instance{flex-shrink:0;font-size:var(--connect-text-sm)}
.tabs{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:var(--connect-radius-panel);overflow-x:auto;background:var(--surface);scroll-padding:6px}.tab{padding:12px 18px;min-height:44px;border:0;border-radius:var(--control-radius);font-size:var(--connect-text-sm);font-weight:500;color:var(--text-secondary);background:transparent;white-space:nowrap}.tab.active{background:var(--surface-selected);color:var(--action-primary-hover);font-weight:600}.tab:hover:not(.active){background:var(--surface-header)}.panel{padding:24px 0}.panel:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--connect-radius-panel)}
.connection-layout{display:flex;flex-direction:column;gap:24px}.connection-status{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:var(--connect-radius-panel);background:var(--surface);text-align:left;min-width:0}.connection-status .qr-area{width:220px;min-height:220px;max-width:100%;margin:0;border:1px solid var(--line);border-radius:var(--connect-radius-panel);background:var(--surface);padding:20px}.connection-status .qr-area .symbol{display:grid;place-items:center;color:var(--action-primary);margin:0 0 16px}.connection-status .symbol svg{width:32px;height:32px}.connection-status .qr-area h3{font-size:var(--connect-text-base);margin:0 0 8px}.connection-status .qr-area p{font-size:var(--connect-text-xs);margin:0;line-height:1.6}.connection-guide{max-width:560px}.connection-guide h3{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0 0 18px}.connection-guide ol{font-size:var(--connect-text-sm);color:var(--text-secondary);line-height:1.7;padding-left:20px;margin:0}.connection-guide li+li{margin-top:10px}.connection-status .actions{margin-top:24px;justify-content:flex-start}.connection-status .actions button{min-width:160px}.connection-note{font-size:var(--connect-text-xs);margin:16px 0 0;color:var(--text-secondary)}
.instance-settings{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;min-width:0}.connection-section{padding:24px;border:1px solid var(--line);border-radius:var(--connect-radius-panel);background:var(--surface);min-width:0}.connection-section-heading{margin-bottom:24px}.connection-section h3{font-size:var(--connect-text-section);font-weight:600;letter-spacing:-.3px;margin:0 0 8px}.connection-section-heading p{font-size:var(--connect-text-sm);color:var(--text-secondary);margin:0;line-height:1.6}.connection-section .credential{background:var(--surface-header);border:1px solid var(--line);border-radius:var(--control-radius);padding:16px;margin:0 0 20px}.credential label{font-size:var(--connect-text-xs);color:var(--text-secondary);margin-bottom:8px}.credential-value{display:flex;align-items:center;gap:8px;justify-content:space-between}.credential-value code{font-size:12px;line-height:1.7;min-width:0}.credential-value .copy-action{flex-shrink:0}.api-access-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}.api-access-row strong{font-size:var(--connect-text-sm);font-weight:600}.api-access-row p{font-size:var(--connect-text-xs);margin:5px 0 0}.api-access-row .secondary{font-size:var(--connect-text-xs)}.token-action{border-top:1px solid var(--line);margin-top:20px;padding-top:20px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.token-action .secondary{font-size:var(--connect-text-xs)}.token-action .help{font-size:var(--connect-text-xs);margin:0;max-width:270px}.connection-section .project-editor{margin:0;max-width:none}.project-save-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:10px}.project-save-row input{margin:0}.project-save-row .primary{font-size:var(--connect-text-sm)}
.instance-settings .advanced-actions{grid-column:1/-1;padding:0 20px;border:1px solid var(--line);border-radius:var(--connect-radius-panel);margin:0;background:var(--surface)}.advanced-actions>summary{padding:18px 0;min-height:64px;display:flex;align-items:center;gap:16px;list-style:none;border-radius:var(--control-radius);font-size:var(--connect-text-sm);font-weight:600;color:var(--text-primary);cursor:pointer}.advanced-actions>summary .help{display:block;float:none;font-weight:400;margin:4px 0 0}.advanced-actions[open]>summary{border-bottom:1px solid var(--line)}.danger-zone{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:0;padding:24px 0;background:var(--surface);border:0}.danger-zone strong{font-size:var(--connect-text-sm)}.danger-zone p{font-size:var(--connect-text-xs);margin:6px 0 0;line-height:1.6}
#webhook-form,#send-form{padding:24px;border:1px solid var(--line);border-radius:var(--connect-radius-panel);background:var(--surface)}#send-form{max-width:760px}.panel-intro{padding:0;margin-bottom:24px;border:0}.panel-intro h3{font-size:var(--connect-text-section);margin-bottom:8px}.panel-intro p{font-size:var(--connect-text-sm);max-width:760px;margin:0;line-height:1.6}
@media(max-width:1100px){.instance-settings{grid-template-columns:1fr}.connection-status{grid-template-columns:200px minmax(0,1fr);gap:28px}.connection-status .qr-area{width:200px}.token-action{align-items:center}}
@media(max-width:650px){.detail-top{padding-bottom:0}.detail-top>div{align-items:flex-start;flex-wrap:wrap;gap:12px}.detail-top h1{font-size:24px}.tabs{gap:2px}.tab{padding:12px;font-size:12px}.panel{padding:20px 0}.connection-status{grid-template-columns:1fr;padding:20px;gap:24px}.connection-status .qr-area{width:100%;min-height:160px}.connection-status .qr-placeholder{min-height:80px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 12px;text-align:left;padding:16px}.connection-status .qr-placeholder .symbol{grid-row:1/3;margin:0}.connection-status .qr-placeholder h3,.connection-status .qr-placeholder p{margin:0}.connection-guide h3{font-size:20px}.connection-status .actions button{width:100%}.connection-section{padding:20px}.connection-section h3{font-size:18px}.instance-settings{gap:20px}.credential-value{align-items:flex-start}.credential-value .copy-action span{display:none}.credential-value code{font-size:11px}.token-action{gap:12px}.advanced-actions>summary .help{padding-left:0}.danger-zone{grid-template-columns:1fr;gap:12px}.danger-zone button{justify-self:start;margin-bottom:12px}#webhook-form,#send-form{padding:20px}.connection-guide{max-width:none}}

.connection-status.is-connected{background:var(--surface)}.connection-status.is-connected .qr-area{background:var(--success-soft);border-color:var(--success-border)}.connection-status.is-connected .qr-area .symbol,.connection-status.is-connected .qr-area h3,.connection-status.is-connected #connection-title{color:var(--success-ink)}.connection-status.is-connected #connection-description{font-size:var(--connect-text-sm);margin:8px 0 20px;color:var(--text-secondary)}

/* Message records use the same white result surface as collections. */
.incoming-card{background:var(--surface);border-color:var(--line)}