.settings-tabs { gap: 30px; }
.settings-tabs a { display: inline-flex; align-items: center; gap: 8px; }
.settings-tabs i { font-size: var(--cw-text-md); }
.settings-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.settings-destination { display: flex; flex-direction: column; align-items: start; gap: 22px; padding: 28px; color: var(--cw-text); border: 1px solid var(--cw-border); border-radius: var(--cw-radius-lg); background: var(--cw-surface); box-shadow: var(--cw-shadow-sm); text-decoration: none !important; transition: transform var(--cw-motion), box-shadow var(--cw-motion), border-color var(--cw-motion); }
.settings-destination:hover { transform: var(--cw-lift); box-shadow: var(--cw-shadow-hover); border-color: var(--cw-border-hover); color: var(--cw-text); }
.settings-destination div > span i { transition: transform var(--cw-motion); } .settings-destination:hover div > span i { transform: translateX(3px); }
.settings-destination-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--cw-radius-md); background: var(--cw-accent-icon); color: var(--cw-accent-hover); font-size: 20px; }
.settings-destination h2 { font-size: var(--cw-text-lg); margin-bottom: 10px; }
.settings-destination p { font-size: var(--cw-text-sm); line-height: 1.75; color: var(--cw-text-secondary); margin-bottom: 24px; }
.settings-destination div > span { display: inline-flex; align-items: center; gap: 12px; color: var(--cw-accent); font-size: var(--cw-text-sm); font-weight: 600; }
.settings-note { display: flex; gap: 16px; align-items: center; margin-top: 26px; padding: 22px 0; border-top: 1px solid var(--cw-border); }
.settings-note > i { color: var(--cw-text-secondary); font-size: 22px; }
.settings-note strong { font-size: var(--cw-text-base); font-weight: 600; }
.settings-note p { color: var(--cw-text-secondary); font-size: var(--cw-text-sm); margin: 5px 0 0; }
.settings-note .btn { margin-left: auto; }
.settings-form { max-width: 1000px; }
.settings-section { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 2fr); align-items: start; gap: 40px; padding: 6px 0 28px; }
.settings-section + .settings-section { border-top: 1px solid var(--cw-border); padding-top: 28px; }
.settings-section > header { padding-top: 12px; }
.settings-section h2 { font-size: var(--cw-text-md); }
.settings-section header p { color: var(--cw-text-secondary); font-size: var(--cw-text-sm); line-height: 1.7; margin-top: 8px; max-width: 220px; }
.settings-save { display: flex; justify-content: end; gap: 10px; border-top: 1px solid var(--cw-border); padding-top: 20px; }
.profile-identity { display: flex; align-items: center; gap: 16px; }
.profile-identity strong { font-size: var(--cw-text-md); font-weight: 600; overflow-wrap: anywhere; }
.profile-identity p { color: var(--cw-text-secondary); font-size: var(--cw-text-sm); margin: 4px 0 0; overflow-wrap: anywhere; }
.member-avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; font-size: var(--cw-text-sm); font-weight: 650; color: var(--cw-accent); background: var(--cw-accent-soft); border-radius: 50%; }
.profile-avatar { width: 52px; height: 52px; font-size: var(--cw-text-lg); }
.team-list { border: 1px solid var(--cw-border); border-radius: var(--cw-radius-lg); background: var(--cw-surface); box-shadow: var(--cw-shadow-sm); }
.team-member { display: flex; align-items: center; gap: 14px; padding: 20px; }
.team-member + .team-member { border-top: 1px solid var(--cw-border); }
.member-identity { flex: 1; min-width: 0; }
.member-identity h3 { font-size: var(--cw-text-base); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.member-identity p { font-size: var(--cw-text-xs); color: var(--cw-text-secondary); margin: 5px 0 0; overflow-wrap: anywhere; }
.member-role { margin-inline: 12px; }
.member-role-form { display: flex; align-items: center; gap: 8px; width: 240px; }
.member-role-form select { min-height: 32px; padding: 6px 8px; font-size: var(--cw-text-xs); }
.team-invite .panel-header > i { color: var(--cw-accent); font-size: 23px; }
.team-invite-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) auto; gap: 16px; align-items: start; }
.team-invite-form > .btn { margin-top: 31px; }
.team-feedback { overflow-wrap: anywhere; }
.team-empty { display: flex; align-items: center; gap: 18px; padding: 25px; background: var(--cw-surface-secondary); border: 1px dashed var(--cw-border); border-radius: var(--cw-radius-md); }
.team-empty > i { font-size: 23px; color: var(--cw-text-secondary); }
.team-empty strong { font-size: var(--cw-text-sm); font-weight: 600; }
.team-empty p { font-size: var(--cw-text-sm); color: var(--cw-text-secondary); margin: 5px 0 0; }
.invite-avatar { color: var(--cw-text-secondary); background: var(--cw-surface-secondary); font-size: var(--cw-text-lg); }
.onboarding-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 28px; align-items: start; }
.onboarding-progress { background: var(--cw-sidebar); color: #f1f5ee; border-radius: var(--cw-radius-lg); box-shadow: var(--cw-shadow-sm); padding: 32px; }
.onboarding-progress-icon { display: grid; place-items: center; width: 45px; height: 45px; background: #ffffff10; border: 1px solid #ffffff18; border-radius: var(--cw-radius-sm); color: var(--cw-mint); font-size: 21px; margin-bottom: 32px; }
.onboarding-progress .page-eyebrow { color: #b1c2b7; }
.onboarding-progress h2 { color: #f1f5ee; font-size: 27px; line-height: 1.2; font-weight: 500; letter-spacing: -.035em; }
.onboarding-progress > p:not(.page-eyebrow) { color: #b1c2b7; font-size: var(--cw-text-sm); line-height: 1.8; margin: 16px 0 30px; }
.onboarding-progress-caption { display: flex; justify-content: space-between; align-items: center; font-size: var(--cw-text-xs); gap: 10px; }
.onboarding-progress-caption strong { color: var(--cw-mint); }
.onboarding-progress-caption span { color: #b1c2b7; }
.onboarding-progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 4px; overflow: hidden; margin: 12px 0 28px; background: #ffffff20; accent-color: var(--cw-mint); }
.onboarding-progress progress::-webkit-progress-bar { background: #ffffff20; }
.onboarding-progress progress::-webkit-progress-value { background: var(--cw-mint); }
.onboarding-progress progress::-moz-progress-bar { background: var(--cw-mint); }
.onboarding-business-link { display: flex; align-items: center; gap: 9px; color: #e0ebdf; font-size: var(--cw-text-xs); border-top: 1px solid #ffffff20; padding-top: 22px; }
.onboarding-business-link:hover { color: var(--cw-mint); }
.onboarding-business-link i:last-child { margin-left: auto; }
.onboarding-steps { display: grid; gap: 14px; }
.onboarding-step { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 18px; color: var(--cw-text); padding: 27px 22px; background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: var(--cw-radius-lg); box-shadow: var(--cw-shadow-sm); text-decoration: none !important; transition: transform var(--cw-motion), box-shadow var(--cw-motion), border-color var(--cw-motion); }
.onboarding-step:hover { color: var(--cw-text); transform: var(--cw-lift); box-shadow: var(--cw-shadow-hover); border-color: var(--cw-border-hover); }
.step-number { width: 35px; height: 35px; display: grid; place-items: center; color: var(--cw-text-secondary); background: var(--cw-surface-secondary); border-radius: 50%; font-size: var(--cw-text-xs); font-weight: 600; }
.is-complete .step-number { background: var(--cw-accent-soft); color: var(--cw-accent); }
.step-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.step-heading h2 { font-size: var(--cw-text-md); margin: 0; }
.onboarding-step p { color: var(--cw-text-secondary); line-height: 1.7; font-size: var(--cw-text-sm); margin: 10px 0 14px; }
.step-detail { color: var(--cw-accent); font-size: var(--cw-text-xs); font-weight: 600; }
.step-arrow { color: var(--cw-text-secondary); align-self: center; }
.error-state { max-width: 600px; margin: clamp(25px, 9vh, 100px) auto; padding: 24px; width: 100%; text-align: center; }
.error-state-icon { width: 65px; height: 65px; display: grid; place-items: center; color: var(--cw-text-secondary); background: var(--cw-surface-secondary); border: 1px solid var(--cw-border); border-radius: var(--cw-radius-lg); margin: 0 auto 30px; font-size: 27px; }
.error-state h1 { font-size: clamp(27px, 3vw, 38px); line-height: 1.18; letter-spacing: -.045em; }
.error-state > p:not(.page-eyebrow):not(.error-request-id) { color: var(--cw-text-secondary); line-height: 1.8; font-size: var(--cw-text-base); max-width: 400px; margin: 18px auto 28px; }
.error-actions { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.error-request-id { border-top: 1px solid var(--cw-border); padding-top: 23px; margin-top: 38px; color: var(--cw-text-secondary); font-size: var(--cw-text-2xs); }
.error-request-id span { display: block; margin-top: 6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .settings-overview { grid-template-columns: 1fr; gap: 12px; } .settings-destination { flex-direction: row; gap: 18px; padding: 22px; } .settings-destination-icon { flex-shrink: 0; } .settings-destination p { margin-bottom: 12px; } .settings-section { gap: 25px; grid-template-columns: minmax(140px, .65fr) minmax(0, 2fr); } .member-role { margin-inline: 0; } .onboarding-layout { gap: 18px; } .onboarding-progress { padding: 26px; } .onboarding-step { gap: 12px; padding: 22px 18px; } }
@media (max-width: 760px) { .settings-section,.onboarding-layout { grid-template-columns: 1fr; gap: 14px; } .settings-section header p { max-width: none; margin-bottom: 0; } .settings-section > header { padding-top: 0; } .settings-note { flex-wrap: wrap; } .settings-note .btn { margin-left: 38px; } .onboarding-progress { padding: 26px; } .onboarding-progress-icon { margin-bottom: 22px; } .team-member { flex-wrap: wrap; gap: 12px; } .member-identity { min-width: 140px; } .member-role-form { flex-basis: 100%; padding-left: 50px; } .team-invite-form { grid-template-columns: 1fr 1fr; } .team-invite-form > .field:first-child { grid-column: 1 / -1; } .team-invite-form > .btn { align-self: end; } }
@media (max-width: 480px) { .settings-tabs { gap: 22px; } .settings-tabs a { font-size: var(--cw-text-sm); } .settings-destination { padding: 20px; } .settings-note .btn { margin-left: 0; width: 100%; } .settings-note > div { flex: 1; } .team-invite-form { grid-template-columns: 1fr; } .team-invite-form > .btn { margin-top: 0; } .member-role { margin-left: 50px; } .team-member { padding: 16px; } .invitation-row > .badge { margin-left: 50px; } .onboarding-step { grid-template-columns: 30px minmax(0, 1fr); } .step-number { width: 30px; height: 30px; } .step-arrow { display: none; } .error-state { padding: 10px 0; } }