/* Shared dialog / form system. Spacing scale: 4, 8, 12, 16, 24, 32. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--field-border:#cfd9e8;--text-strong:#24334a;--text-body:#4c5e77;--text-secondary:#5d6e85;--radius-control:10px}
.modal-backdrop{padding:24px;overflow:auto;align-items:center;background:#1d2b4459}
.modal{width:min(560px,100%);padding:32px;border-radius:20px;max-height:calc(100dvh - 48px);color:var(--text-body);box-shadow:0 24px 80px #17294529;overscroll-behavior:contain;scrollbar-gutter:stable}
.modal,.modal *{box-sizing:border-box}.modal-top{display:flex;align-items:flex-start;gap:16px;margin:0 0 24px}.modal-top h2{font:700 24px/1.3 Manrope,system-ui,sans-serif;letter-spacing:-.6px;color:var(--text-strong);overflow-wrap:anywhere;margin:4px 0 0;flex:1}.modal-top>.icon-btn{width:40px;height:40px;min-width:40px;min-height:40px;margin:-4px -8px 0 0;display:grid;place-items:center}.modal-top>.icon-btn svg{width:22px;height:22px}
.modal p{font-size:15px;line-height:1.7;color:var(--text-body);margin:0 0 16px;overflow-wrap:anywhere}.modal h3{font:700 16px/1.5 Manrope,system-ui,sans-serif;color:var(--text-strong);margin:24px 0 12px}.modal strong{color:var(--text-strong)}
.modal form{display:flex;flex-direction:column;gap:20px;margin:0}.modal form>label,.modal label{display:block;margin:0;font-size:14px;line-height:1.5;color:var(--text-strong);font-weight:600}.modal label+label{margin-top:16px}.modal form>label+label{margin-top:0}
.modal input:not([type=range]):not([type=checkbox]),.modal select,.modal textarea{display:block;width:100%;min-width:0;min-height:46px;padding:11px 13px;margin:8px 0 0;border:1px solid var(--field-border);border-radius:var(--radius-control);background:#fbfcff;color:var(--text-strong);font:400 16px/1.5 Manrope,system-ui,sans-serif;box-shadow:none}.modal textarea{min-height:108px;resize:vertical}.modal input::placeholder,.modal textarea::placeholder{color:#708098;opacity:1}.modal input:focus,.modal select:focus,.modal textarea:focus{outline:3px solid #3872dc24;border-color:#477bd1;outline-offset:0}.modal input[type=checkbox]{width:20px;height:20px}.modal select:not(label select){margin:0}.modal [hidden]{display:none!important}
.modal .primary,.modal .outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;margin:0;border-radius:10px;font:600 14px/1.5 Manrope,system-ui,sans-serif;text-decoration:none;white-space:normal;text-align:center;width:auto;max-width:100%}.modal>.primary,.modal form>button.primary{width:100%}.modal form>button.primary{margin:4px 0 0}.modal .outline{color:#405b80;border:1px solid #ced9eb;background:white}.modal .outline:hover{background:#f1f5fc}.modal button:focus-visible,.modal a:focus-visible{outline:3px solid #477bd170;outline-offset:3px}.modal button:disabled{opacity:.55;cursor:wait}
.modal .dialog-actions,.modal .hub-actions,.modal .x-flow{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.modal .dialog-actions:last-child,.modal .hub-actions:last-child{margin-bottom:0}.modal .dialog-actions>*{flex:1 1 140px}.modal .hub-actions .primary{margin:0;width:auto}.modal .hub-member{padding:16px 0;border-bottom:1px solid #e5eaf2}.modal .hub-member p{margin:8px 0}.modal .hub-member .outline{margin:8px 8px 0 0}.modal>.hub-tag{margin-bottom:16px}.modal .hub-card{padding:20px;margin:0 0 16px;border-radius:14px;background:#f8faff}.modal .hub-card h3{margin:0 0 8px}.modal .hub-card>.outline,.modal .hub-card>a:not(.outline){margin:8px 8px 0 0}.modal .network-row{padding:16px 0;border-bottom:1px solid #e9edf4;flex-wrap:nowrap;gap:12px}.modal .network-row>div{min-width:0;flex:1}.modal .network-row .platform{flex-shrink:0;width:36px;height:36px}.modal .network-row strong{font-size:15px}.modal .network-row small{font-size:13px;line-height:1.5;color:var(--text-secondary)}.modal .connect-small{font-size:13px;min-height:40px;padding:8px 12px;flex-shrink:0}.modal .network-row:last-of-type{margin-bottom:20px}
.modal .default-info,.modal .browser-notice{font-size:14px;line-height:1.7;padding:14px 16px;margin:16px 0;color:#4c6281}.modal .range-row{gap:12px;padding:16px 0;font-size:14px}.modal .range-row input{min-width:30px}.modal .hub-note,.modal .field-help{font-size:13px!important;line-height:1.6;color:var(--text-secondary)!important;margin:6px 0 0!important;font-weight:400}.modal .field-meta{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:13px;color:var(--text-secondary)}.modal .field-meta small{font-size:13px}.modal .private-info{padding:12px 14px;background:#f3f6fb;border-radius:10px;font-size:13px;margin:0}.modal .dialog-section{padding-top:24px;margin-top:24px;border-top:1px solid #e5eaf2}.modal .dialog-section h3{margin:0 0 12px}.modal .profile-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}.modal .profile-header .hub-initial{width:48px;height:48px;font-size:20px;margin:0;flex-shrink:0}.modal .profile-header strong{font-size:16px}.modal .profile-header p{font-size:13px;margin:3px 0 0}.modal .profile-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal .profile-links .outline{justify-content:flex-start;text-align:left}.modal .signout{color:#9f3841}.modal .step-label{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#4a6ba0;margin-bottom:12px}.modal .steps-progress{display:flex;gap:6px;margin:0 0 24px}.modal .steps-progress span{height:4px;flex:1;background:#e2e9f5;border-radius:4px}.modal .steps-progress span.active{background:#3b6ccc}.modal #hub-basic,.modal #hub-advanced{display:flex;flex-direction:column;gap:20px}.modal #hub-basic label+label,.modal #hub-advanced label+label{margin:0}.modal form>.hub-actions{margin:0;padding-bottom:16px;border-bottom:1px solid #e5eaf2}.modal form>.hub-actions .outline{flex:1}.modal [role=alert]:empty{display:none}.modal .hub-qr{margin:24px auto;width:200px;max-width:100%}.modal .hub-person{padding:8px 0 16px}.modal .person-modal-head{margin:0 0 20px}.modal .person-modal-head p{margin:4px 0 0}
.hub-grid{gap:24px;margin-top:24px}.hub-card{padding:24px;margin:0;border-radius:16px}.hub-card h2{font-size:20px;line-height:1.4}.hub-card p{font-size:15px;line-height:1.7}.hub-tabs{gap:8px;margin:0 0 24px}.hub-tabs .outline{min-height:44px}.hub-card .hub-tag{font-size:13px}.browser-controls{gap:10px}.x-connection-bar{padding:16px;gap:12px}.contact-row{gap:16px}.hub-actions+.hub-card{margin-top:20px}
@media(max-width:700px){.modal-backdrop{padding:16px}.modal{padding:24px 20px;border-radius:16px;max-height:calc(100dvh - 32px)}.modal-top{margin-bottom:20px}.modal-top h2{font-size:22px}.modal .profile-links{grid-template-columns:1fr}.modal .dialog-actions>*{flex-basis:100%}.modal .network-row{gap:10px}.modal .network-row .platform{width:30px;height:30px}.modal .network-row small{font-size:12px}.modal .connect-small{padding:8px;font-size:12px}.modal .range-row{gap:8px}.modal .range-row .rhythm-range-label{max-width:120px}.hub-card{padding:20px}.hub-grid{grid-template-columns:1fr}.hub-tabs{margin-top:16px}.modal .private-info{overflow-wrap:anywhere}}
.hub-card+.hub-card{margin-top:16px}.hub-grid>.hub-card+.hub-card{margin-top:0}.modal>.primary{margin-top:20px}.modal>label{margin-top:20px}

.modal form>p{margin:0}.modal [role=alert],.modal #hub-cloud-error{color:#a93242;font-size:14px;line-height:1.6}.modal .hub-note{margin:8px 0 0!important}
.profile-avatar,.hub-person-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%;background:#e9eef7;flex-shrink:0}.top-actions .top-avatar{width:34px;height:34px}.sidebar .profile .profile-avatar{width:42px;height:42px}.modal .profile-header .profile-avatar{width:64px;height:64px}.avatar-controls{margin:0 0 24px;display:flex;flex-wrap:wrap;gap:10px}.avatar-controls .field-help,.avatar-controls [role=alert]{flex-basis:100%;margin:0!important}.modal .avatar-controls .avatar-upload{margin:0;font-weight:600;cursor:pointer;position:relative;overflow:hidden}.avatar-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0!important;padding:0!important}