/* Creator directory and scoped team management. */
.cr-page { max-width: 1440px; margin: 22px auto 36px; }
.cr-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.cr-heading h1 { margin: 7px 0 10px; font-size: clamp(25px, 2.5vw, 35px); font-weight: 600; letter-spacing: -.045em; line-height: 1.18; }
.cr-heading p { margin: 0; max-width: 620px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cr-heading > .btn { flex-shrink: 0; }
.cr-heading .eyebrow { color: #64889f; font-size: 9px; letter-spacing: .16em; }
.cr-page .btn { min-height: 36px; }
.cr-page .btn.sm { min-height: 31px; }
.cr-feedback { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.cr-feedback .warnbox { flex: 1; margin: 0; }
.cr-notice { padding: 12px 15px; background: #eaf7f0; color: #27734d; border: 1px solid #d0eadd; border-radius: 8px; font-size: 12px; margin: 0 0 18px; }
.cr-search { display: flex; align-items: center; gap: 9px; margin: 22px 0; }
.cr-search input { width: min(100%, 380px); }
.cr-search > span { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.cr-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr)); gap: 18px; }
.cr-creator-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-width: 0; }
.cr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.cr-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 55px; height: 55px; border-radius: 15px; background: #def1fc; color: #1277a9; font-size: 23px; font-weight: 600; object-fit: cover; }
.cr-avatar.small { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
.cr-creator-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cr-username { margin: 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.cr-card-counts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; font-size: 11px; color: #4d667b; }
.cr-card-team { display: flex; align-items: center; gap: 9px; min-height: 42px; font-size: 10px; color: #7a8c9d; line-height: 1.6; }
.cr-card-team > span { overflow-wrap: anywhere; }
.cr-avatar-stack { display: flex; padding-left: 4px; flex-shrink: 0; }
.cr-avatar-stack .cr-avatar { border: 2px solid #fff; margin-left: -4px; width: 29px; height: 29px; border-radius: 50%; font-size: 10px; }
.cr-card-link { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 21px; color: #127cae; background: #f3faff; border-color: #d9edf8; font-size: 12px; }
.cr-card-link:hover { background: #e9f6fd; border-color: #b9dff3; }
.cr-empty { text-align: center; border: 1px dashed #d0deeb; border-radius: 12px; background: #fff; padding: 54px 22px; color: var(--muted); }
.cr-empty > span { font-size: 34px; display: block; margin-bottom: 14px; }
.cr-empty h2, .cr-empty h3 { color: var(--text); font-weight: 500; margin: 9px 0; }
.cr-empty p { font-size: 12px; line-height: 1.7; max-width: 390px; margin: 0 auto; }
.cr-loading, .cr-hint { color: var(--muted); font-size: 11px; line-height: 1.7; }
.cr-back { margin-bottom: 23px; color: #678197; }
.cr-person-heading { display: flex; align-items: center; gap: 17px; min-width: 0; }
.cr-person-heading > div { min-width: 0; }
.cr-person-heading h1 { overflow-wrap: anywhere; }
.cr-person-heading p { overflow-wrap: anywhere; }
.cr-person-heading p > span { margin: 0 7px; color: #a2b5c3; }
.cr-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 290px); gap: 22px; align-items: start; }
.cr-team-panel, .cr-accounts-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 24px; }
.cr-section-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cr-section-head h2, .cr-accounts-panel h2 { margin: 5px 0 8px; font-size: 20px; letter-spacing: -.03em; font-weight: 600; }
.cr-section-head p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0; }
.cr-section-head > .btn { flex-shrink: 0; }
.cr-section-label { color: #7894a7; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.cr-member { border-top: 1px solid #eaf0f5; padding: 18px 0; }
.cr-member:first-child { border-top: 0; padding-top: 0; }
.cr-member:last-child { padding-bottom: 0; }
.cr-member-main { display: flex; align-items: center; gap: 12px; }
.cr-member-name { flex: 1; min-width: 0; }
.cr-member-name b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cr-member-name > span { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.cr-member-name > .badge { display: inline-block; }
.cr-member-rate { text-align: right; padding-left: 10px; flex-shrink: 0; }
.cr-member-rate b { display: block; color: #167cad; font-size: 17px; font-weight: 600; }
.cr-member-rate > span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.cr-member-actions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.cr-subtle { background: transparent; color: #58768a; }
.cr-danger { color: #ab5361; background: transparent; }
.cr-danger:hover { border-color: #e4b4bc; background: #fff7f8; }
.cr-existing { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding-top: 22px; margin-top: 22px; border-top: 1px solid #eaf0f5; }
.cr-existing > span { font-size: 11px; color: var(--muted); }
.cr-account { display: flex; gap: 11px; border-top: 1px solid #eaf0f5; padding: 17px 0; }
.cr-account > div:last-child { min-width: 0; }
.cr-account-mark { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; border-radius: 9px; background: #eff8fe; font-size: 17px; }
.cr-account b { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.cr-account span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.cr-account .cr-account-status { margin-top: 10px; color: #8e8060; }
.cr-account-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #c5ae7c; vertical-align: 1px; }
.cr-account .cr-account-status.online { color: #328563; }
.cr-account-status.online i { background: #63b690; }
.cr-account .cr-account-status.login_required { color: #a01747; }
.cr-account-status.login_required i { background: #d6336c; }
.cr-access-note { display: flex; align-items: flex-start; gap: 8px; background: #f5f9fc; border-radius: 8px; padding: 12px; margin-top: 12px; }
.cr-access-note > span { font-size: 13px; }
.cr-access-note p { color: #72899b; font-size: 10px; line-height: 1.7; margin: 0; }
.cr-editor { background: #fff; border: 1px solid #cde4f4; border-radius: 12px; padding: 24px; margin: 0 0 24px; }
.cr-editor.inset { background: #f8fcff; padding: 20px; }
.cr-editor h3 { font-size: 15px; font-weight: 600; margin: 0 0 17px; }
.cr-form fieldset { display: flex; flex-direction: column; gap: 15px; min-width: 0; border: 0; margin: 0; padding: 0; }
.cr-form .f { gap: 7px; font-size: 10px; letter-spacing: .035em; }
.cr-form .f input, .cr-form .f select { width: 100%; }
.cr-form .cr-hint { margin: -4px 0 0; font-size: 10px; }
.cr-form .cr-split { padding: 11px 12px; background: #eaf5fd; border-radius: 7px; color: #357696; margin-top: -4px; }
.cr-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cr-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.cr-form .warnbox { margin: 14px 0 0; }
.cr-member > .cr-form { background: #f6faff; border-radius: 8px; padding: 16px; margin-top: 15px; }
@media (max-width: 1150px) { .cr-detail-grid { grid-template-columns: minmax(0, 1fr); } .cr-accounts-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .cr-accounts-panel > .cr-section-label, .cr-accounts-panel > h2, .cr-accounts-panel > .cr-hint, .cr-access-note { grid-column: 1 / -1; } }
@media (max-width: 700px) { .cr-heading { align-items: flex-start; flex-direction: column; gap: 18px; } .cr-detail-heading { flex-direction: row; align-items: center; gap: 12px; } .cr-detail-heading .cr-avatar { width: 43px; height: 43px; font-size: 18px; border-radius: 12px; } .cr-detail-heading h1 { font-size: 25px; } .cr-detail-heading > .btn { padding: 6px; font-size: 10px; } .cr-search { flex-wrap: wrap; } .cr-search input { flex: 1; min-width: 0; } .cr-search > span { flex-basis: 100%; margin-top: 5px; } .cr-team-panel, .cr-accounts-panel, .cr-editor { padding: 18px; } .cr-section-head { flex-direction: column; align-items: flex-start; gap: 14px; } .cr-field-grid { grid-template-columns: minmax(0, 1fr); } .cr-existing { flex-direction: column; align-items: flex-start; gap: 9px; } .cr-member-actions { justify-content: flex-start; } .cr-feedback { align-items: flex-start; flex-direction: column; } }
@media (max-width: 420px) { .cr-person-heading { gap: 10px; } .cr-detail-heading .cr-avatar { display: none; } .cr-accounts-panel { display: block; } .cr-member-rate { padding-left: 0; } .cr-member-rate b { font-size: 15px; } .cr-editor.inset { padding: 14px; } .cr-form-actions > .btn.primary { width: 100%; } }