/* Creator presentation tokens and layouts. Business state is owned by existing controllers. */
.creator-preview {
  --bg:#f6f7f9; --bg2:#f8f9fb; --panel:#fff; --card:#fff;
  --line:#e5e9ef; --text:#242a34; --muted:#657080; --soft:#657080;
  --brand:#d53f33; --brand2:#b9342a; --accent:#d53f33; --brand-soft:#fff1ed;
  --green:#287052; --red:#b4322c; --gold:#865d17; --gold-soft:#fff6e2;
  --shadow:none; --shadow-sm:none; --hover-row:#fafbfc;
  margin:0; min-width:320px; background:var(--bg); color:var(--text);
  font-family:var(--type-family); font-size:var(--type-size-body); line-height:var(--type-line-body);
  -webkit-font-smoothing:antialiased;
}
.creator-preview *, .creator-preview *::before, .creator-preview *::after {box-sizing:border-box; letter-spacing:0}
.creator-preview [hidden] {display:none!important}
.creator-preview button, .creator-preview input, .creator-preview select, .creator-preview textarea {font-family:inherit}
.creator-preview button, .creator-preview a {touch-action:manipulation}
.creator-preview a {text-decoration:none}
.creator-preview :focus-visible {outline:2px solid #a92e24; outline-offset:3px}
.creator-preview h1, .creator-preview h2, .creator-preview h3, .creator-preview p {letter-spacing:0}
.creator-preview h2::before {display:none}
.creator-preview .cp-icon {width:20px; height:20px; flex:none; object-fit:contain}
.creator-preview .btn, .creator-preview .jbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:9px 17px; border:1px solid var(--brand); border-radius:6px;
  background:var(--brand); color:#fff; font-size:14px; font-weight:600;
  box-shadow:none; line-height:1.5; cursor:pointer; white-space:normal;
}
.creator-preview .btn:hover, .creator-preview .jbtn:hover {background:var(--brand2); transform:none}
.creator-preview .btn:disabled, .creator-preview .jbtn:disabled {cursor:not-allowed; opacity:.55}
.creator-preview .ghost-btn {background:#fff!important; border-color:#dce1e7!important; color:#536070!important}
.creator-preview .ghost-btn:hover {background:#f8f9fb!important; border-color:#bcc5d1!important}
.creator-preview input:not([type=checkbox]):not([type=radio]):not([type=file]), .creator-preview select, .creator-preview textarea {
  min-width:0; max-width:100%; min-height:42px; padding:10px 12px;
  border:1px solid #dce1e7; border-radius:5px; background:#fff; color:var(--text);
  font-size:14px; line-height:1.5; box-shadow:none;
}
.creator-preview input:disabled, .creator-preview select:disabled {background:#f4f5f7; color:#7a8491}
.creator-preview textarea {resize:vertical}
.creator-preview input[type=checkbox], .creator-preview input[type=radio] {accent-color:var(--brand)}
.creator-preview .panel, .creator-preview .form, .creator-preview .card, .creator-preview .data-card,
.creator-preview table, .creator-preview .asset-lightbox-box {box-shadow:none; border-radius:8px}
.creator-preview .panel:hover, .creator-preview .card:hover {transform:none; box-shadow:none}
.creator-preview .muted {color:var(--muted); line-height:1.7}
.creator-preview .badge {border-radius:4px; padding:3px 7px}
.creator-preview .cp-text-button {border:0; padding:6px 0; background:none; color:var(--brand); font:inherit; font-size:13px; cursor:pointer}
.creator-preview .cp-text-button:hover {text-decoration:underline}
.creator-preview .cp-page-heading {display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px}
.creator-preview .cp-page-heading h2 {margin:0; font-size:25px; font-weight:600; line-height:1.4}
.creator-preview .cp-page-heading p {margin:5px 0 0; font-size:13px; color:var(--muted)}

/* Platform identity, business navigation and a sidebar matching the supplied design. */
.cp-center .ws-header {position:sticky; top:0; z-index:45; padding:0; background:#fff; backdrop-filter:none}
.creator-preview.cp-center {padding:0}
.cp-center .cp-public-surface {font-family:var(--type-family); font-size:16px; line-height:normal; color:#232831}
/* Leave public header dimensions and breakpoints to the homepage stylesheet. */
.cp-center .ws-header-inner {max-width:none; padding:0}
.cp-center .ws-brand {flex:none; color:inherit; font-size:inherit; font-weight:inherit}
.cp-center .ws-brand span {color:inherit}
.cp-center .cp-header-tools {display:flex; align-items:center; flex:none; gap:8px}
.cp-center .cp-message-shortcut {display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border-radius:6px; color:#596373; position:relative}
.cp-center .cp-message-shortcut:hover {background:#f3f5f7; color:var(--text)}
.cp-center .cp-message-shortcut .cp-icon {width:19px; height:19px; opacity:.72}
.cp-center .cp-message-shortcut .cp-unread {position:absolute; top:-3px; right:-5px; min-width:17px; height:17px; padding:0 3px; font-size:10px}
.cp-center #creator-notifications .notification-icon {width:36px; height:36px; padding:8px; border:0; border-radius:6px; background:transparent}
.cp-center #creator-notifications .notification-icon img {width:20px; height:20px; opacity:.72}
.cp-center #creator-notifications .cp-notifications-muted img {opacity:.5}
.cp-center #creator-notifications .notification-icon:hover {background:#f3f5f7}
.cp-center #creator-notifications .notification-icon:hover img {opacity:1}
.cp-center #creator-notifications .notification-icon.needs-activation:after {width:5px; height:5px; top:4px; right:4px}
.cp-center #creator-notifications .notification-enable {display:none!important}
.creator-preview .cp-unread {display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; font-size:11px; font-weight:600; color:#fff; background:var(--brand); line-height:1}
.cp-center .ws-account {margin-left:0}
.cp-center .ws-account-trigger {min-height:44px; border-radius:24px; padding:5px 10px 5px 5px; background:#fff}
.cp-center .ws-account-trigger:hover {background:#fafbfc}
.cp-center .ws-account-menu {border-radius:8px; box-shadow:0 8px 24px #2328311a}
.cp-center .ws-account-menu button, .cp-center .ws-account-menu a {border-radius:5px; min-height:40px}
.cp-center .cp-business-bar {display:flex; align-items:center; gap:26px; padding:0 30px; min-height:56px}
.cp-center .cp-business-title {width:150px; flex:none; font-size:14px; font-weight:600}
.cp-center .ws-nav {display:flex; align-items:stretch; flex:1; gap:26px; margin:0; min-height:56px; padding:0; overflow-x:auto; scrollbar-width:thin}
.cp-center .ws-nav a {position:relative; display:inline-flex; align-items:center; gap:5px; flex:none; padding:10px 0; border-radius:0; color:#4b5665; background:none; font-size:14px}
.cp-center .ws-nav a.active {color:var(--brand); font-weight:600; background:none}
.cp-center .ws-nav a.active::after {content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand)}
.cp-center .cp-layout {display:grid; grid-template-columns:208px minmax(0,1fr); max-width:1800px; margin:0 auto; min-height:calc(100vh - var(--cp-header-height,139px))}
.cp-center .cp-sidebar {position:sticky; top:var(--cp-header-height,139px); align-self:start; height:calc(100vh - var(--cp-header-height,139px)); overflow:auto; padding:22px 13px 24px 20px; border-right:1px solid var(--line); background:#fafbfc}
.cp-center .cp-side-heading {display:flex; align-items:center; gap:9px; padding:8px 11px 19px; font-size:14px}
.cp-center .cp-side-link {display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:10px 12px; margin-bottom:4px; border:0; border-radius:5px; background:transparent; font-size:13px; color:#576172; text-align:left; cursor:pointer}
.cp-center .cp-side-link.active {background:var(--brand-soft); color:#b33a30; font-weight:600}
.cp-center .cp-side-link:hover {background:#f0f2f5}
.cp-center .cp-side-link.active:hover {background:var(--brand-soft)}
.cp-center .cp-side-link .cp-icon {width:17px; height:17px; opacity:.75}
.cp-center .cp-side-link .cp-unread {margin-left:auto}
.cp-center .cp-menu-toggle, .cp-center .cp-menu-close {display:none}
.cp-center .ws-main {width:100%; min-width:0; max-width:none; margin:0; padding:26px 30px 35px}
.cp-center .ws-tab {margin:0; min-width:0}
.cp-center .ws-tab>h2, .cp-center #orders-list-view>h2 {margin:0 0 20px; font-size:25px; line-height:1.4; font-weight:600}
.cp-center .cp-workspace-footer {display:flex; justify-content:space-between; gap:16px; padding-top:30px; margin-top:24px; color:var(--muted); font-size:11px}
.cp-center .cp-workspace-footer>div {display:flex; gap:20px}
.cp-center .cp-workspace-footer a {color:inherit}
.cp-center .creator-capacity {margin-bottom:20px; padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:6px}
.cp-center .creator-capacity p {font-size:12px}
.cp-center.cp-overview-active .creator-capacity {display:none}

/* Overview uses the same normalized order records as the existing list. */
.cp-center .cp-profile-line {display:flex; align-items:center; gap:14px; padding:20px 0; margin:0 0 25px; border-bottom:1px solid var(--line)}
.cp-center .cp-profile-symbol {display:grid; place-items:center; width:44px; height:44px; background:#fff; border:1px solid var(--line); border-radius:8px}
.cp-center .cp-profile-line h3 {font-size:16px; margin:0 0 5px}
.cp-center .cp-profile-line a {font-size:12px; color:var(--brand)}
.cp-center .cp-capacity-summary {display:flex; flex-direction:column; gap:4px; margin-left:auto; font-size:13px}
.cp-center .cp-capacity-summary small {font-size:12px; color:var(--muted)}
.cp-center .cp-overview-grid {display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start}
.cp-center .cp-section-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px}
.cp-center .cp-section-head h3 {margin:0; font-size:16px; font-weight:600}
.cp-center .cp-section-head a {color:var(--brand); font-size:12px}
.cp-center .cp-metrics {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.cp-center .cp-metric {min-width:0; min-height:112px; padding:17px 16px; border:1px solid var(--line); border-radius:6px; background:#fff; text-align:left; color:var(--text); cursor:pointer}
.cp-center .cp-metric:hover {border-color:#dba89f}
.cp-center .cp-metric>span {display:block; font-size:12px; color:var(--muted)}
.cp-center .cp-metric>strong {display:block; margin-top:12px; font-size:25px; font-weight:600; font-variant-numeric:tabular-nums}
.cp-center .cp-task-heading {margin-top:28px}
.cp-center .cp-task-row {display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--line)}
.cp-center .cp-task-index {display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; font-size:11px; background:#edeff2; color:var(--muted)}
.cp-center .cp-task-row>div {flex:1; min-width:0}
.cp-center .cp-task-row strong {display:block; font-size:14px; overflow-wrap:anywhere}
.cp-center .cp-task-row small {display:block; margin-top:4px; font-size:12px; color:var(--muted)}
.cp-center .cp-task-row button {flex:none; max-width:112px}
.cp-center .cp-empty {display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; min-height:170px; padding:25px 12px; color:var(--muted); font-size:13px; text-align:center}
.cp-center .cp-empty .cp-icon {width:28px; height:28px; opacity:.6}
.cp-center .cp-empty p {margin:0; font-size:12px}
.cp-center .cp-quick-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cp-center .cp-quick-grid>a {display:flex; align-items:center; justify-content:center; gap:10px; min-height:86px; padding:12px 8px; color:var(--text)}
.cp-center .cp-quick-grid>a:hover {background:#fff}
.cp-center .cp-quick-grid strong {display:block; font-size:12px; font-weight:600}
.cp-center .cp-quick-grid small {display:block; margin-top:4px; font-size:11px; color:var(--muted)}
.cp-center .cp-overview-side {border-left:1px solid var(--line); padding-left:24px}
.cp-center .cp-overview-side>p {font-size:13px; color:var(--muted); margin:0}
.cp-center .cp-recent-message {display:block; padding:12px 0; border-bottom:1px solid var(--line); color:var(--text); font-size:13px}
.cp-center .cp-recent-message small {display:block; margin-top:4px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cp-center .cp-balance-heading {margin-top:28px}
.cp-center #cp-overview-balance {display:grid; gap:10px}
.cp-center #cp-overview-balance .data-card {padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:#fff}
.cp-center #cp-overview-balance .dc-value {font-size:20px}
.cp-center .cp-learning-band {display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:32px; padding:22px 0; border-top:1px solid var(--line)}
.cp-center .cp-learning-band h3 {font-size:16px; margin:0 0 5px}
.cp-center .cp-learning-band p {margin:0; font-size:13px; color:var(--muted)}
.cp-center .cp-learning-band>a {display:flex; align-items:center; gap:10px; color:var(--brand); font-size:13px; white-space:nowrap}

/* Existing list, delivery, finance and profile controls retain their IDs and events. */
.cp-center .hall-filters {display:grid; grid-template-columns:minmax(160px,2fr) repeat(2,minmax(100px,1fr)) minmax(110px,1fr) minmax(140px,1fr) auto auto; gap:10px; background:#fff; border-radius:6px}
.cp-center .hall-view-toggle {border:0; padding:0; background:none}
.cp-center .hall-view-toggle .layout-btn {min-height:36px; padding:6px 12px; border-radius:5px}
.cp-center #hall-list {padding:0; border:0; background:none; overflow:visible}
.cp-center .hall-card-grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cp-center .hall-card {border:1px solid var(--line); padding:18px; border-radius:8px; background:#fff; box-shadow:none}
.cp-center .hall-card-head .link-button {color:var(--text); font-size:15px; font-weight:600}
.cp-center .hall-card-head {flex-wrap:wrap}
.cp-center .cp-campaign-identity {min-width:0; flex:1}
.cp-center .cp-campaign-identity .link-button {white-space:normal; overflow-wrap:anywhere; text-align:left}
.cp-center .hall-card-platform {border-radius:4px}
.cp-center .cp-campaign-id {display:block; margin-top:4px; color:var(--muted); font-size:11px; font-weight:400}
.cp-center .hall-card-brief {font-size:13px; line-height:1.7}
.cp-center .hall-card-meta b {color:var(--brand); font-size:18px}
.cp-center .hall-card-actions {display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding-top:14px; margin-top:12px; border-top:1px solid var(--line)}
.cp-center .hall-card-actions .btn {font-size:13px; padding:8px 12px}
.cp-center .hall-card-media {margin-top:14px}
.cp-center .hall-card .asset-strip {min-width:0}
.cp-center .hall-card .asset-thumb {width:68px; height:60px; border-radius:5px}
.cp-center .hall-card.cp-has-reference .hall-card-media {order:-1; margin:0 0 6px}
.cp-center .hall-card.cp-has-reference .asset-strip {display:flex; flex-wrap:wrap}
.cp-center .hall-card.cp-has-reference .asset-thumb:first-child {width:100%; height:180px; background:#f8f9fb}
.cp-center .hall-card.cp-has-reference .asset-thumb:first-child img {object-fit:contain}
.cp-center .creator-order-tab {min-height:40px; border-radius:6px; background:#fff; border:1px solid var(--line); color:var(--muted); box-shadow:none}
.cp-center .creator-order-tab.active {color:var(--brand); background:var(--brand-soft); border-color:#f0c4bc}
.cp-center .creator-order-tab span {background:#f0f2f5; color:#657080}
.cp-center #orders-query {padding:18px; background:#fff; border:1px solid var(--line); border-radius:6px}
.cp-center .orders-table {background:#fff}
.cp-center #tab-orders #submit-detail {padding:0; background:none}
.cp-center #tab-orders .detail-head {padding:0 0 18px; background:none}
.cp-center #tab-orders .detail-head h3 {font-size:23px}
.cp-center .order-detail-summary {margin-bottom:12px; padding:18px 0}
.cp-center .order-detail-progress {gap:10px; margin-bottom:20px}
.cp-center .order-detail-progress button {background:#fff; border:1px solid var(--line); border-bottom:3px solid var(--line); border-radius:5px; min-height:70px; height:auto}
.cp-center .order-detail-progress li.selected button {border-bottom-color:var(--brand); background:var(--brand-soft)}
.cp-center .order-detail-layout {grid-template-columns:minmax(0,1fr) 300px; gap:28px}
.cp-center .order-detail-side {padding-left:24px}
.cp-center .order-detail-reference, .cp-center .order-detail-money {position:static; margin:0}
.cp-center #tab-orders #submit-form textarea[name=content] {background:#fff}
.cp-center .order-delivery-deadline {background:#fff3e9; border-color:#eed8bd; border-left-color:#b97826; color:#84531c}
.cp-center .order-delivery-deadline-copy strong {color:#84531c}
.cp-center .creator-message-query {padding:18px; background:#fff; border:1px solid var(--line); border-radius:6px}
.cp-center .creator-message-row {border-radius:6px; box-shadow:none}
.cp-center .creator-message-row.is-unread {border-left:3px solid var(--brand); background:#fff7f4}
.cp-center .finance-layout {display:grid!important; grid-template-columns:165px minmax(0,1fr)!important; gap:22px!important; padding:0!important; min-height:0!important}
.cp-center .finance-layout>.finance-sidebar {position:static!important; width:auto!important; min-width:0!important; padding:0 18px 0 0; background:none; border:0; border-right:1px solid var(--line); border-radius:0}
.cp-center .finance-sidebar button {border-radius:5px; background:none; font-size:13px}
.cp-center .finance-sidebar button.active {background:var(--brand-soft); color:var(--brand)}
.cp-center .finance-layout>.finance-content {grid-column:2!important; grid-row:1!important; min-width:0}
.cp-center .finance-filter-bar {display:flex; flex-wrap:wrap; align-items:end; gap:12px}
.cp-center .finance-filter-bar label {flex:1 1 140px; min-width:0}
.cp-center .finance-filter-bar input, .cp-center .finance-filter-bar select {width:100%}
.cp-center .finance-panel-head {padding:0 0 16px}
.cp-center #tab-earnings .finance-filter-bar {gap:12px; padding:16px; border:1px solid var(--line); border-radius:6px}
.cp-center #tab-earnings .finance-order-tabs,
.cp-center #tab-earnings .finance-summary-grid>div,
.cp-center #tab-earnings .data-card,
.cp-center #tab-earnings #finance-details,
.cp-center #tab-earnings #cf-withdraw-list,
.cp-center #tab-earnings .cf-detail,
.cp-center #tab-earnings .cf-application-layout,
.cp-center #tab-earnings #cf-application-preview,
.cp-center #tab-earnings .withdrawal-history {border-radius:6px}
.cp-center #tab-earnings .cf-shortcuts {gap:8px}
.cp-center #tab-earnings .cf-shortcuts button {min-height:36px; border-radius:5px}
.cp-center #tab-earnings .cf-link {min-height:36px}
.cp-center #tab-earnings .cf-info>div {min-width:0}
.cp-center #tab-earnings .cf-info dd {overflow-wrap:anywhere}
.cp-center .data-card {background:#fff; border:1px solid var(--line); border-radius:6px}
.cp-center .data-card .dc-value {font-size:23px; color:var(--text)}
.cp-center .data-card .dc-label {font-size:12px; color:var(--muted)}
.cp-center .profile-grid {gap:18px}
.cp-center .profile-summary {margin-bottom:20px}
.cp-center .profile-summary .dc-value {font-size:18px}
.cp-center #profile-form {max-width:none; padding:22px; background:#fff}
.cp-center #platform-accounts-editor .platform-editor {border-radius:6px!important; padding:16px!important}
.cp-center #password-panel {max-width:820px; margin-top:20px; background:#fff; padding:22px}
.cp-center .showcase-panel {background:none; border:0; border-top:1px solid var(--line); padding:24px 0 0}
.cp-center .showcase-preference-row {border-radius:6px; background:#fff}
.cp-center .cp-setting-actions {padding-bottom:16px; border-bottom:1px solid var(--line)}
.cp-center .table-scroll {max-width:100%; overflow:auto}
.cp-center .tbl {border-radius:6px}
.cp-center th {background:#f0f2f5}
.cp-center .asset-lightbox-box, .cp-center .message-notification-dialog {border-radius:8px}
.cp-center .banya-support-trigger {display:none!important}
.cp-center #order-detail-support .banya-support-trigger {display:block!important; width:34px; height:34px}

/* Public onboarding uses the homepage header/footer and the production registration form. */
.cp-join {--join-primary:var(--brand); --join-primary-d:var(--brand2); --join-line:var(--line); --join-text:var(--text); --join-muted:var(--muted)}
.cp-join .site-header {padding:0; backdrop-filter:none; background:#fff}
.cp-join .site-footer {margin-top:0}
.cp-join .join-wrap {max-width:1020px; padding:35px 24px 56px; margin:auto}
.cp-join .cp-page-heading {display:block; margin-bottom:24px}
.cp-join .cp-page-heading h1 {font-size:25px; font-weight:600; line-height:1.4}
.cp-join .cp-page-heading .sub {margin:8px 0 0; font-size:13px; color:var(--muted)}
.cp-join .join-card {max-width:820px; margin:auto; padding:0 32px 28px; border-radius:8px; border:1px solid var(--line); box-shadow:none; overflow:hidden}
.cp-join .join-steps {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:22px 0; margin:0 0 24px; border-bottom:1px solid var(--line); flex-wrap:nowrap}
.cp-join .join-steps>span {display:flex; align-items:center; justify-content:center; gap:9px; padding:0; color:var(--muted); background:none; border-radius:0; font-size:12px}
.cp-join .join-steps b {display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:#f0f2f5; font-size:12px; font-weight:500}
.cp-join .join-steps>span.on {color:var(--brand); font-weight:600}
.cp-join .join-steps>span.on b {background:var(--brand); color:#fff}
.cp-join .join-steps>span>span {padding:0; border-radius:0; background:none; color:inherit}
.cp-join .notice-box {margin:0 0 25px; padding:12px 15px; border:0; border-radius:5px; background:#f0f4fa; color:#53677f; font-size:13px; line-height:1.8}
.cp-join .notice-box.warn {background:#fff6e2; color:#865d17}
.cp-join .jf {margin-bottom:22px}
.cp-join .jf>label {margin-bottom:8px; font-size:14px; font-weight:600}
.cp-join .jf .hint {font-size:12px; line-height:1.7; margin-top:7px}
.cp-join .jf .opt {font-size:12px}
.cp-join .cp-platform-fields {padding:0 16px 16px; margin-top:12px; border:1px solid var(--line); border-radius:6px; background:#fff}
.cp-join .cp-platform-fields>summary {min-height:48px; padding:12px 0; font-size:14px; font-weight:600; color:#435062; cursor:pointer}
.cp-join .cp-platform-fields:not([open]) {padding-bottom:0}
.cp-join .cp-account-field {display:block; font-size:13px; color:#536070; font-weight:500; min-width:0; margin:0}
.cp-join .cp-account-field input {display:block; width:100%; margin-top:7px}
.cp-join .cp-platform-fields>.cp-account-field {margin-top:16px}
.cp-join .cp-platform-fields .jf-row {display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px}
.cp-join .jf-row>.jbtn.code {flex:0 0 auto; white-space:nowrap; font-size:13px}
.cp-join .jmsg {min-height:22px}
.cp-join .jmsg.err {padding:10px 12px; border-left:3px solid var(--red); background:#fff0ed}
.cp-join #submit {width:100%; min-height:46px; font-size:14px}
.cp-join .join-foot {margin-top:20px; font-size:13px}
.cp-join .join-foot a {color:var(--brand)}

/* Native-dialog fallbacks are preview-only and also cover existing notification controls. */
.creator-preview dialog:not([open]) {display:none}
.creator-preview .cp-dialog-fallback[open] {
  display:block; position:fixed; z-index:10000; top:50%; left:50%; right:auto; bottom:auto;
  width:440px; max-width:calc(100vw - 28px); max-height:85vh; margin:0;
  transform:translate(-50%,-50%); padding:22px; overflow:auto; background:#fff;
  border:1px solid #dce1e7; border-radius:8px; box-shadow:0 0 0 100vmax rgba(20,24,32,.5);
}

@media (max-width:1390px) {
  .cp-center .hall-filters {grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-center .hall-card-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center .cp-overview-grid {grid-template-columns:minmax(0,1fr) 240px; gap:22px}
  .cp-center .cp-quick-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center .order-detail-layout {grid-template-columns:minmax(0,1fr) 260px; gap:22px}
  .cp-center .orders-query-main {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1179px) {
  .cp-center .cp-menu-toggle {display:grid; place-items:center; width:40px; height:40px; flex:none; background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--text); font-size:20px; cursor:pointer}
  .cp-center .cp-business-bar {padding:0 20px; min-height:50px}
  .cp-center .cp-business-title {display:none}
  .cp-center .ws-nav {min-height:50px; gap:26px}
  .cp-center .cp-layout {display:block}
  .cp-center .cp-sidebar {display:none; position:fixed; z-index:80; left:0; top:0; height:100vh; height:100dvh; width:300px; max-width:calc(100vw - 30px); padding:12px 14px 30px; background:#fff}
  .cp-center.cp-menu-open .cp-sidebar {display:block}
  .cp-center.cp-menu-open {overflow:hidden}
  .cp-center .cp-side-heading {padding:8px 10px 15px; border-bottom:1px solid var(--line); margin-bottom:12px}
  .cp-center .cp-menu-close {display:grid; place-items:center; width:40px; height:40px; margin-left:auto; background:none; border:0; font-size:25px; cursor:pointer}
  .cp-center .cp-menu-shade {position:fixed; inset:0; z-index:75; background:rgba(20,24,32,.45)}
  .cp-center .cp-side-link {min-height:44px; font-size:14px}
  .cp-center .ws-main {padding:24px}
  .cp-center .order-detail-layout {grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:1100px) {
  .cp-center .ws-header-inner {padding-top:12px}
}
@media (max-width:760px) {
  .cp-center .ws-header-inner {padding-top:10px}
}
@media (max-width:959px) {
  .cp-center .cp-overview-grid {grid-template-columns:minmax(0,1fr)}
  .cp-center .cp-overview-side {border-left:0; border-top:1px solid var(--line); padding:22px 0 0}
  .cp-center #cp-overview-balance {grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-center .order-detail-layout {grid-template-columns:minmax(0,1fr)}
  .cp-center .order-detail-side {grid-column:1; grid-row:auto; border-left:0; padding:0; border-top:1px solid var(--line)}
  .cp-center .order-detail-work {grid-column:1; grid-row:auto}
  .cp-center .finance-layout {grid-template-columns:minmax(0,1fr)!important}
  .cp-center .finance-layout>.finance-sidebar {grid-column:1!important; grid-row:1!important; border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px!important; display:flex; flex-wrap:wrap; gap:8px}
  .cp-center .finance-layout>.finance-content {grid-column:1!important; grid-row:2!important}
  .cp-center .finance-side-group {display:contents!important}
  .cp-center .finance-side-group>strong {display:none}
  .cp-center .finance-sidebar button {width:auto; padding:8px 12px; min-height:40px; border:1px solid var(--line); background:#fff}
}
@media (max-width:639px) {
  .creator-preview {font-size:14px}
  .creator-preview input:not([type=checkbox]):not([type=radio]):not([type=file]), .creator-preview select, .creator-preview textarea {font-size:16px; min-height:46px}
  .creator-preview .btn, .creator-preview .btn-sm, .creator-preview .jbtn {min-height:44px; font-size:13px; padding:10px 13px}
  .cp-center .cp-menu-toggle {width:36px; height:36px}
  .cp-center .ws-account-meta, .cp-center .ws-account-chevron {display:none}
  .cp-center .ws-account-trigger {padding:0; border:0; width:36px; min-height:36px; justify-content:center}
  .cp-center .ws-account-avatar {width:30px; height:30px}
  .cp-center .cp-header-tools {gap:4px}
  .cp-center .cp-message-shortcut {width:34px}
  .cp-center #creator-notifications .notification-icon {width:34px; height:36px; padding:8px 7px}
  .cp-center .cp-business-bar {padding:0 14px; gap:12px; min-height:48px}
  .cp-center .ws-nav {min-height:48px; gap:24px; scrollbar-width:none}
  .cp-center .ws-nav::-webkit-scrollbar {display:none}
  .cp-center .ws-nav a {font-size:13px}
  .cp-center .ws-main {padding:20px 14px 30px}
  .cp-center .ws-tab>h2, .cp-center #orders-list-view>h2, .creator-preview .cp-page-heading h2 {font-size:24px; margin-bottom:18px}
  .cp-center .cp-page-heading h2 {margin-bottom:0}
  .cp-center .creator-capacity {padding:12px; margin-bottom:18px}
  .cp-center .creator-capacity p {font-size:11px}
  .cp-center .cp-profile-line {flex-wrap:wrap; padding:4px 0 18px; gap:12px; margin-bottom:20px}
  .cp-center .cp-capacity-summary {width:100%; margin:3px 0 0 0; padding-top:12px; border-top:1px solid var(--line)}
  .cp-center .cp-metrics {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .cp-center .cp-metric {min-height:105px; padding:15px}
  .cp-center .cp-task-row {gap:10px}
  .cp-center .cp-task-row>button {max-width:92px}
  .cp-center .cp-task-row strong {font-size:13px}
  .cp-center .cp-quick-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center .cp-quick-grid>a {justify-content:flex-start; padding:12px 8px}
  .cp-center #cp-overview-balance {grid-template-columns:minmax(0,1fr)}
  .cp-center .cp-learning-band {align-items:flex-start; flex-direction:column; gap:12px}
  .cp-center .cp-workspace-footer {flex-direction:column; gap:8px; padding-top:24px}
  .cp-center .hall-filters {grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px}
  .cp-center .hall-filters #hall-keyword {grid-column:1/-1}
  .cp-center .hall-card-grid {grid-template-columns:minmax(0,1fr)}
  .cp-center .hall-card {padding:16px}
  .cp-center .hall-card-head .link-button {font-size:16px}
  .cp-center .hall-view-toggle {flex-wrap:wrap; gap:8px}
  .cp-center .hall-view-toggle .layout-btn {min-height:40px}
  .cp-center .orders-query-main, .cp-center .orders-query-extra {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center .orders-query-main>label:first-child, .cp-center .orders-query-actions {grid-column:1/-1}
  .cp-center .orders-query-actions .btn {flex:1}
  .cp-center #orders-query {padding:16px}
  .cp-center .orders-results-bar {flex-direction:column; align-items:stretch}
  .cp-center #tab-orders .orders-results-bar label {justify-content:space-between}
  .cp-center .orders-results-bar select {max-width:75%}
  .cp-center .orders-pagination, .cp-center .order-detail-secondary {padding-bottom:16px}
  .cp-center .creator-order-tabs {gap:6px}
  .cp-center .creator-order-tab {font-size:12px; padding:8px; min-height:44px}
  .cp-center #tab-orders .detail-head {flex-wrap:wrap; gap:12px}
  .cp-center #tab-orders .detail-head h3 {font-size:20px}
  .cp-center .order-detail-summary {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center .order-detail-progress {gap:6px}
  .cp-center .order-detail-progress button {font-size:12px; padding:8px; min-height:78px}
  .cp-center .order-detail-progress small {font-size:11px}
  .cp-center .order-delivery-deadline {padding:14px; align-items:flex-start}
  .cp-center .order-delivery-deadline-copy strong {font-size:23px}
  .cp-center .creator-message-query {padding:16px}
  .cp-center #tab-earnings .finance-filter-bar {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px}
  .cp-center #tab-earnings .finance-filter-bar label,
  .cp-center #tab-earnings .cf-shortcuts {grid-column:1/-1; min-width:0}
  .cp-center #tab-earnings .finance-filter-bar>.btn:last-child {grid-column:1/-1}
  .cp-center #tab-earnings .cf-shortcuts button,
  .cp-center #tab-earnings .cf-link {min-height:44px}
  .cp-center .finance-sidebar {gap:8px}
  .cp-center .finance-side-group {gap:8px}
  .cp-center .finance-sidebar button {font-size:12px; min-height:44px}
  .cp-center .finance-panel-head {flex-wrap:wrap; gap:12px}
  .cp-center .finance-summary-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-center #tab-earnings #earnings-card,
  .cp-center #tab-earnings #finance-balance-card,
  .cp-center #tab-earnings #cf-withdraw-balances {grid-template-columns:minmax(0,1fr)}
  .cp-center .profile-summary {grid-template-columns:minmax(0,1fr)}
  .cp-center #profile-form, .cp-center #password-panel {padding:18px}
  .cp-center #platform-accounts-editor .platform-editor {padding:13px!important}
  .cp-center #platform-accounts-editor input {width:100%!important; min-width:0!important; flex-basis:100%!important}
  .cp-center .showcase-preference-row {grid-template-columns:minmax(0,1fr) auto; padding:12px}
  .cp-center .showcase-preference-row>button {grid-column:1/-1; width:100%}
  .cp-center .cp-record-table {display:block; width:100%; min-width:0!important; box-shadow:none; background:none}
  .cp-center .cp-record-table tbody {display:grid; gap:14px}
  .cp-center .cp-record-table .cp-record-head {position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
  .cp-center .cp-record-table tr:not(.cp-record-head) {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:14px; border:1px solid var(--line); border-radius:6px; background:#fff}
  .cp-center .cp-record-table td {display:block; min-width:0; padding:0; border:0; font-size:13px; overflow-wrap:anywhere; white-space:normal!important}
  .cp-center .cp-record-table td::before {content:attr(data-cp-label); display:block; margin-bottom:5px; font-size:11px; color:var(--muted)}
  .cp-center .cp-record-table td:first-child, .cp-center .cp-record-table td:last-child {grid-column:1/-1}
  .cp-center .cp-record-table td:last-child {padding-top:12px; border-top:1px solid var(--line)}
  .cp-center .cp-record-table .asset-cell {min-width:0}
  .cp-center .cp-record-table .asset-strip {min-width:0}
  .cp-join .join-wrap {padding:24px 14px 40px}
  .cp-join .cp-page-heading h1 {font-size:24px}
  .cp-join .join-card {padding:0 18px 22px}
  .cp-join .join-steps {gap:6px; padding:18px 0; margin-bottom:20px}
  .cp-join .join-steps>span {flex-direction:column; gap:6px; font-size:11px; white-space:nowrap}
  .cp-join .jf>label {font-size:14px}
  .cp-join .cp-platform-fields {padding-left:13px; padding-right:13px}
  .cp-join .cp-platform-fields .jf-row {grid-template-columns:minmax(0,1fr); gap:16px}
  .cp-join .jf-row>.jbtn.code {min-width:104px; padding:10px; font-size:12px}
  .cp-join .notice-box {font-size:12px}
}