.vmw-character-fields { display: grid; gap: 16px; }
.vmw-character-name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vmw-character-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vmw-character-field > label { font-size: .82rem; font-weight: 600; }
.vmw-character-field .rz-textbox, .vmw-character-select { width: 100%; min-height: 42px; }
.vmw-character-option { display: flex; align-items: center; gap: 9px; }
.vmw-character-option img { object-fit: cover; border-radius: var(--vmw-radius-sm); flex-shrink: 0; }
.vmw-character-quest { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; color: #f2c94c; font-size: 1.4rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 1px #17140b; }
.vmw-character-fields .vmw-field-help { margin: -7px 0 0; }
.vmw-enrollment-card { padding: clamp(20px, 4vw, 36px); display: grid; gap: 26px; border-top: 3px solid var(--vmw-accent); }
.vmw-enrollment-intro { display: flex; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid color-mix(in srgb, var(--rz-text-color) 13%, transparent); }
.vmw-enrollment-intro > img { flex-shrink: 0; }
.vmw-character-eyebrow { color: var(--vmw-accent); font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; }
.vmw-enrollment-intro h2 { font-family: var(--vmw-font-display); font-size: 1.5rem; margin: 8px 0; }
.vmw-enrollment-intro p { margin: 0; color: color-mix(in srgb, var(--rz-text-color) 68%, transparent); line-height: 1.6; }
.vmw-enrollment-outcome { display: flex; align-items: flex-start; gap: 12px; background: color-mix(in srgb, var(--vmw-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--vmw-accent) 25%, transparent); border-radius: var(--vmw-radius); padding: 16px; }
.vmw-enrollment-outcome > .rzi { color: var(--vmw-accent); }
.vmw-enrollment-outcome p { margin: 0; line-height: 1.6; font-size: .85rem; }
.vmw-enrollment-submit { display: flex; justify-content: flex-end; }
.vmw-profile-characters { margin-bottom: 0; }
.vmw-profile-characters .vmw-card-head { align-items: center; gap: 16px; flex-wrap: wrap; }
.vmw-profile-characters .vmw-card-head > div { flex: 1; min-width: 0; }
.vmw-profile-characters .vmw-card-head > .rz-button { margin-left: auto; flex-shrink: 0; align-self: center; }
.vmw-profile-characters .vmw-card-head .vmw-field-help { margin: 5px 0 0; }
.vmw-character-list { display: grid; gap: 10px; padding: 18px; }
.vmw-character-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--rz-text-color) 12%, transparent); border-radius: var(--vmw-radius); background: color-mix(in srgb, var(--rz-text-color) 2%, var(--rz-body-background-color)); }
.vmw-character-row.is-primary { border-color: color-mix(in srgb, var(--vmw-accent) 50%, transparent); background: color-mix(in srgb, var(--vmw-accent) 5%, var(--rz-body-background-color)); }
.vmw-character-icon { border-radius: var(--vmw-radius-sm); border: 1px solid color-mix(in srgb, var(--vmw-accent) 40%, transparent); flex-shrink: 0; }
.vmw-character-identity { flex: 1; min-width: 0; }
.vmw-character-identity > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vmw-character-identity h3 { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.vmw-character-identity p { margin: 5px 0 0; font-size: .78rem; color: color-mix(in srgb, var(--rz-text-color) 65%, transparent); }
.vmw-character-primary { display: inline-flex; align-items: center; gap: 4px; color: var(--vmw-accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vmw-character-primary .rzi { font-size: 15px; }
.vmw-character-sync { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid color-mix(in srgb, var(--rz-text-color) 10%, transparent); }
.vmw-character-sync > div { flex: 1; min-width: 0; }
.vmw-character-sync > .rzi { color: var(--vmw-accent); }
.vmw-character-sync strong { font-size: .8rem; }
.vmw-character-sync p { font-size: .78rem; margin: 4px 0 0; color: color-mix(in srgb, var(--rz-text-color) 68%, transparent); line-height: 1.5; }
.vmw-home-wishlist .vmw-card-head { gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px; }
.vmw-home-wishlist .vmw-card-head h2 { margin: 0; font-family: var(--vmw-font-display); font-size: 1.15rem; }
.vmw-home-wishlist .vmw-card-head p { margin: 5px 0 0; font-size: .82rem; color: color-mix(in srgb, var(--rz-text-color) 65%, transparent); }
.vmw-home-wishlist .vmw-card-head > div { flex: 1; }
.vmw-home-manage-wishlist, .vmw-wish-character-summary .vmw-link-btn { display: inline-flex; align-items: center; gap: 8px; line-height: 1.25; }
.vmw-home-manage-wishlist { flex-shrink: 0; }
.vmw-home-manage-wishlist > .rzi, .vmw-wish-character-summary .vmw-link-btn > .rzi { line-height: 1; }
.vmw-home-wish-items { list-style: none; margin: 0; padding: 18px; display: grid; grid-auto-flow: column; grid-auto-columns: max(220px, calc((100% - 144px) / 5)); gap: 36px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 18px; }
.vmw-home-wish-items:focus-visible { outline: 2px solid var(--vmw-accent); outline-offset: -4px; border-radius: var(--vmw-radius); }
.vmw-home-wish-items > li { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: color-mix(in srgb, var(--rz-text-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--rz-text-color) 9%, transparent); border-radius: var(--vmw-radius); scroll-snap-align: start; }
.vmw-home-upgrade-priority { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--vmw-dim); font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.vmw-home-upgrade-priority .vmw-wish-rank { font-weight: 400; letter-spacing: 0; }
.vmw-home-wish-items .vmw-wish-item-link { min-height: 90px; padding: 12px; }
.vmw-home-wish-items .vmw-wish-item-name { font-size: .9rem; }
.vmw-home-upgrade-arrow { position: absolute; right: -31px; top: 50%; transform: translateY(-50%); width: 24px; font-size: 24px; line-height: 1; color: var(--vmw-link); pointer-events: none; }

/* The selected character colors the workspace; item rarity remains independent. */
.vmw-wishlist-page { --vmw-class-color: var(--vmw-accent); }
.vmw-class-druid { --vmw-class-color: #ff7d0a; }
.vmw-class-hunter { --vmw-class-color: #abd473; }
.vmw-class-mage { --vmw-class-color: #69ccf0; }
.vmw-class-paladin { --vmw-class-color: #f58cba; }
.vmw-class-priest { --vmw-class-color: #ffffff; }
.vmw-class-rogue { --vmw-class-color: #fff569; }
.vmw-class-shaman { --vmw-class-color: #0070de; }
.vmw-class-warlock { --vmw-class-color: #8787ed; }
.vmw-class-warrior { --vmw-class-color: #c79c6e; }
.vmw-wishlist-page .vmw-wish-character {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-left: 3px solid var(--vmw-class-color);
    background: linear-gradient(105deg, color-mix(in srgb, var(--vmw-class-color) 14%, transparent), transparent 68%), var(--vmw-surface);
}
.vmw-wish-character .vmw-wish-character-choice { gap: 18px; }
.vmw-wish-character .vmw-wish-spec-icon { flex-basis: 56px; width: 56px; height: 56px; border-color: var(--vmw-class-color); box-shadow: 0 0 22px color-mix(in srgb, var(--vmw-class-color) 13%, transparent); }
.vmw-wish-character .vmw-wish-character-select { width: min(100%, 400px); gap: 7px; }
.vmw-wish-character .vmw-field-label { font-size: .67rem; letter-spacing: .09em; }
.vmw-wish-character-select-shell { position: relative; display: flex; min-width: 0; }
.vmw-wish-character select { appearance: none; min-height: 40px; height: 40px; font-size: .88rem; padding: 0 44px 0 14px; text-overflow: ellipsis; border-color: color-mix(in srgb, var(--vmw-class-color) 32%, var(--vmw-border)); cursor: pointer; }
.vmw-wish-character-select-shell > .rzi { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--vmw-dim); pointer-events: none; }
.vmw-wish-character select:disabled { cursor: default; opacity: .6; }
.vmw-wish-character select:disabled + .rzi { opacity: .6; }
.vmw-wish-character select:focus-visible { outline-color: var(--vmw-class-color); }
.vmw-wish-character-class { font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--vmw-class-color) 20%, var(--rz-text-color)); }
:root[data-theme="dark"] .vmw-wish-character-class { color: color-mix(in srgb, var(--vmw-class-color) 72%, var(--rz-text-color)); }
.vmw-wish-character .vmw-wish-character-summary { flex-direction: column; align-items: flex-end; gap: 14px; }
.vmw-wish-character .vmw-wish-primary { border-color: color-mix(in srgb, var(--vmw-class-color) 35%, var(--vmw-border)); background: color-mix(in srgb, var(--vmw-class-color) 7%, transparent); color: var(--rz-text-color); }
.vmw-wishlist-page .vmw-wish-priorities, .vmw-wishlist-page .vmw-wish-add { border-top-color: color-mix(in srgb, var(--vmw-class-color) 48%, var(--vmw-border)); }
@media (max-width: 760px) {
    .vmw-wishlist-page .vmw-wish-character { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
    .vmw-wish-character .vmw-wish-character-select { flex: 1; width: auto; }
    .vmw-wish-character .vmw-wish-character-summary { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}
@media (max-width: 640px) {
    .vmw-character-name-fields { grid-template-columns: 1fr; }
    .vmw-enrollment-intro { gap: 16px; align-items: flex-start; }
    .vmw-enrollment-intro > img { width: 64px; height: 64px; }
    .vmw-enrollment-submit .rz-button { width: 100%; }
    .vmw-character-row { flex-wrap: wrap; padding: 12px; }
    .vmw-character-row > .vmw-record-actions { margin-left: auto; }
    .vmw-character-sync { flex-wrap: wrap; align-items: flex-start; }
    .vmw-character-sync > div { flex-basis: calc(100% - 40px); }
    .vmw-home-wishlist .vmw-card-head { padding: 18px; }
    .vmw-home-wish-items { padding: 16px 12px; scroll-padding-inline: 12px; }
}
@media (forced-colors: active) { .vmw-wish-character select { appearance: auto; padding-inline-end: 14px; } .vmw-wish-character-select-shell > .rzi { display: none; } }
