/* Navigation shared by both independent account workspaces. */
.sidebar { overflow-y: auto; }
.primary-nav .nav-icon { flex-shrink: 0; }
.primary-nav .nav-item { padding-top: 9px; padding-bottom: 9px; line-height: 1.55; }
.primary-nav .nav-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sidebar .nav-label { margin-top: 18px; }
.topbar-title { min-width: 0; }
.topbar-title strong { overflow-wrap: anywhere; }
body[data-page="roster"] .character-card-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) 30px 30px; }
body[data-page="roster"] .character-card-footer .button.icon-only { width: 30px; min-width: 0; padding: 0; }
body[data-page="roster"] .character-card-footer .add-share-button { border-color: #e9a12d; background: linear-gradient(135deg, #ffdd69, #ffb838); color: #17283b; font-weight: 850; white-space: nowrap; box-shadow: 0 3px 10px rgba(255, 184, 56, 0.22); }
body[data-page="roster"] .character-card-footer .add-share-button:hover { background: #ffe394; box-shadow: 0 4px 15px rgba(255, 184, 56, 0.36); }
body[data-page="listing"] .listing-hero-actions { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 8px; }
.listing-export-row, .listing-market-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
body[data-page="listing"] .listing-hero-actions .button { white-space: nowrap; }
body[data-page="listing"] .listing-hero-actions .market-link { border-color: #ec8225; background: linear-gradient(135deg, #ffb43e, #f48228); color: #192735; font-weight: 850; box-shadow: 0 4px 14px rgba(244, 130, 40, 0.22); }
body[data-page="listing"] .listing-hero-actions .channel-link { border-color: #2487c6; background: linear-gradient(135deg, #53c6ec, #2798d8); color: #092d49; font-weight: 850; box-shadow: 0 4px 14px rgba(39, 152, 216, 0.22); }
body[data-page="listing"] .listing-hero-actions .market-link:hover { background: #ffc267; }
body[data-page="listing"] .listing-hero-actions .channel-link:hover { background: #83dcf3; }

body[data-mode="classic"] .classic-toolbar { grid-template-columns: minmax(0, 1fr) 150px; }
body[data-mode="classic"] .dialog:has(.character-editor-form) { width: min(1160px, calc(100vw - 20px)); }
body[data-mode="classic"] .character-editor-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.72fr); gap: 14px; align-items: start; }
body[data-mode="classic"] .character-editor-fields, body[data-mode="classic"] .character-live-panel { min-width: 0; }
body[data-mode="classic"] .character-live-sticky { position: sticky; top: 0; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
body[data-mode="classic"] .character-live-sticky > p { margin: 8px 2px 0; color: var(--muted); font-size: 10px; text-align: center; }
.classic-stats { display: grid; gap: 8px; margin-top: 12px; }
.classic-attribute-row, .classic-attribute-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.classic-social-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px; }
.classic-social-fields { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.classic-social-fields > .field { min-width: 0; }
.classic-job-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: start; }
.classic-job-name { grid-column: 1; grid-row: 1 / 3; display: grid; gap: 4px; min-width: 0; container-type: inline-size; }
.classic-job-english { min-width: 0; font-size: min(13px, calc(100cqw / var(--classic-job-title-width))); font-weight: 850; line-height: 1.5; white-space: nowrap; }
.classic-job-chinese { min-width: 0; color: var(--muted); font-size: 12px; font-weight: 780; line-height: 1.5; }
.classic-panel-badge { grid-column: 2; grid-row: 1 / 4; min-width: 0; width: 100%; height: 100%; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.classic-panel-badge > strong { white-space: normal; overflow-wrap: anywhere; }
.classic-job-meta { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.classic-level { color: var(--text); font-size: 17px; font-weight: 900; line-height: 1.25; }
.classic-job-group { width: max-content; max-width: 100%; }
.classic-attribute-row > .mini-stat { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px; min-height: 20px; padding: 2px 6px; border-radius: 7px; }
.classic-attribute-row > .mini-stat:not(.equipment-set-badge) { background: var(--surface-2); color: var(--muted); }
.classic-attribute-row > .mini-stat > span { margin: 0; color: inherit; font-size: 8px; font-weight: 780; letter-spacing: 0; }
.classic-attribute-row > .mini-stat > strong { margin: 0; font-size: 11px; font-weight: 780; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.classic-social-row > .mini-stat > strong { white-space: normal; }
.classic-social-row [data-classic-stat="pets"] > strong { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 650; }
.classic-level-panel-fields { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: 10px; align-items: end; }
.classic-attack-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.classic-level-panel-fields [hidden] { display: none; }
.classic-legacy-panel-note { padding: 8px 10px; border: 1px solid #e6a941; border-radius: 8px; color: var(--text); background: rgba(255, 183, 65, 0.12); }
.classic-stat-field { min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 9px; }
.classic-stat-field.equipment-set-badge { display: block; padding: 6px; }
body[data-mode="classic"] .classic-stat-field .input { min-width: 0; padding-right: 6px; padding-left: 6px; font-size: 15px; }
body[data-mode="classic"] .classic-stat-field .field > label { font-size: 10px; }
.classic-stats .mini-stat { min-width: 0; }
.classic-stats strong { overflow-wrap: anywhere; }
.classic-character-body .character-name { white-space: normal; line-height: 1.6; }
body[data-mode="classic"] .classic-character-body .character-head { display: block; }
body[data-mode="classic"] .classic-character-body .character-name-row { display: block; }
body[data-mode="classic"] .classic-character-body .character-name { display: block; width: auto; max-width: none; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.classic-appearance { display: grid; place-items: center; min-height: 70px; margin-bottom: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.classic-appearance img { width: 100%; max-height: 170px; object-fit: contain; }
.classic-detail { margin-top: 12px; font-size: 12px; }
.classic-detail > strong { display: block; color: var(--muted); font-size: 11px; }
.classic-detail p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.classic-upload-field { gap: 8px; }
.classic-upload-field input[type="file"] { width: 100%; height: auto; padding: 10px; }
.classic-upload-field .button { justify-self: start; }
.classic-share-character .classic-appearance { border-color: #d5e0ec; background: #f3f7fc; }
.classic-share-character .classic-appearance img { max-height: 150px; }
body[data-page="listing"] .classic-share-character .share-character-name { white-space: normal; overflow: visible; line-height: 1.5; }
.classic-share-stats .mini-stat:not(.equipment-set-badge) { background: #f2f7fc; border: 1px solid #d5e0ec; color: #233e57; }
.classic-share-stats .classic-social-row .mini-stat { padding: 6px; }
.classic-share-stats .classic-social-row .mini-stat span { color: #657487; font-size: 8px; }
.classic-share-stats .classic-social-row .mini-stat strong { color: #233e57; font-size: 11px; }
body[data-page="listing"] .classic-share-stats .classic-attribute-stat > span { font-size: 7px; }
body[data-page="listing"] .classic-share-stats .classic-attribute-stat > strong { color: inherit; font-size: 9px; font-weight: 850; }
.classic-share-character .classic-detail > strong { color: #657487; }
.classic-share-character .classic-detail p { color: #31475a; }
.classic-share-character .classic-job-english { color: #203c55; }
.classic-share-character .classic-job-chinese { color: #536980; }
.classic-share-character .classic-level { color: #234765; font-size: 22px; }
.classic-job-meta .share-character-family { display: inline-flex; }
body[data-page="listing"][data-mode="classic"] .share-server-block strong { font-size: 13px; white-space: nowrap; }

@media (max-width: 980px) {
  body[data-mode="classic"] .character-editor-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-mode="classic"] .character-live-panel { order: 0; }
  body[data-mode="classic"] .character-live-sticky { position: static; }
  .mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .mobile-nav .nav-item { flex-direction: column; gap: 1px; padding: 6px 2px; font-size: 11px; line-height: 1.3; text-align: center; }
  .mobile-nav .nav-icon { height: 20px; }
}
@media (max-width: 1250px) {
  body[data-page="listing"] .page-hero { flex-direction: column; align-items: stretch; }
  body[data-page="listing"] .listing-hero-actions { align-self: flex-end; }
}
@media (max-width: 680px) {
  body[data-mode="classic"] .classic-toolbar { grid-template-columns: minmax(0, 1fr); }
  .topbar-title strong { max-width: 210px; font-size: 13px; }
  body[data-page="listing"] .listing-hero-actions { width: 100%; align-self: stretch; }
  .listing-export-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-market-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  body[data-mode="classic"] .listing-export-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-mode="classic"] .listing-market-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="listing"] .listing-hero-actions .button { width: 100%; min-width: 0; padding-right: 6px; padding-left: 6px; font-size: 11px; }
}