.er-character-library,
.er-character-editor {
    width: min(1240px, calc(100% - 36px));
    margin: 0 auto;
    padding: 36px 0 72px;
}

.er-character-library__hero,
.er-character-editor__hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 28px;
    border: 1px solid rgba(201, 164, 95, .24);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(23, 30, 40, .98), rgba(10, 15, 22, .98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.er-character-library__hero > div,
.er-character-editor__hero > div { max-width: 820px; }
.er-character-library__kicker,
.er-character-editor__hero > div > span {
    display: block;
    margin-bottom: 8px;
    color: #c9a45f;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
}
.er-character-library__hero h1,
.er-character-editor__hero h1 { margin: 0; color: #f4ead5; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.er-character-library__hero p,
.er-character-editor__hero p { margin: 14px 0 0; color: #aab4bf; line-height: 1.65; }

.er-character-library__tabs { display: flex; gap: 8px; margin: 22px 0; }
.er-character-library__tabs a {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    color: #9ea9b4;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 850;
}
.er-character-library__tabs a.is-active { border-color: rgba(201, 164, 95, .52); background: rgba(201, 164, 95, .1); color: #efd9aa; }

.er-character-library__empty {
    display: grid;
    justify-items: start;
    gap: 9px;
    padding: 34px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .018);
}
.er-character-library__empty strong { color: #edf1f4; font-size: 1.05rem; }
.er-character-library__empty p { max-width: 700px; margin: 0; color: #8f9aa6; line-height: 1.55; }

.er-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.er-character-card {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(19, 26, 35, .97), rgba(9, 14, 20, .98));
}
.er-character-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.er-character-card__head span { color: #aa8d55; font-size: .61rem; font-weight: 900; letter-spacing: .13em; }
.er-character-card__head h2 { margin: 5px 0 3px; color: #f2ead8; font-size: 1.42rem; }
.er-character-card__head small { color: #8f9aa5; line-height: 1.4; }
.er-character-card__badge {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(201, 164, 95, .42);
    border-radius: 13px;
    place-items: center;
    background: rgba(201, 164, 95, .08);
    color: #e7cb92;
    font-weight: 950;
}
.er-character-card__profile { display: grid; gap: 10px; }
.er-character-card__profile p { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; margin: 0; font-size: .77rem; line-height: 1.45; }
.er-character-card__profile strong { color: #c6cdd4; }
.er-character-card__profile span { color: #929da8; }
.er-character-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.er-character-stat-grid > span { display: grid; gap: 3px; padding: 9px 7px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; background: rgba(255, 255, 255, .025); text-align: center; }
.er-character-stat-grid small { color: #7f8b97; font-size: .58rem; font-weight: 800; }
.er-character-stat-grid strong { color: #e5d6b4; font-size: .96rem; }
.er-character-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 3px; border-top: 1px solid rgba(255, 255, 255, .06); }
.er-character-card__actions form { margin: 0; }
.er-character-card__actions .er-btn { min-height: 36px; }

.er-character-editor__back { display: inline-block; margin-bottom: 12px; color: #9da8b2; text-decoration: none; font-size: .75rem; font-weight: 800; }
.er-character-editor__form { display: grid; gap: 18px; margin-top: 20px; }
.er-character-editor__section {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(12, 18, 25, .92);
}
.er-character-editor__section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 19px; }
.er-character-editor__section-head > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(201, 164, 95, .36); border-radius: 10px; place-items: center; color: #d2ae68; font-size: .69rem; font-weight: 900; }
.er-character-editor__section-head h2 { margin: 0; color: #edf0f2; font-size: 1.05rem; }
.er-character-editor__section-head p { margin: 4px 0 0; color: #84909c; font-size: .72rem; line-height: 1.45; }
.er-character-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.er-character-form-grid--identity { grid-template-columns: 1.5fr .8fr .55fr; }
.er-character-form-grid__wide { grid-column: 1 / -1; }
.er-character-form-grid label,
.er-character-stats-editor label { display: grid; gap: 6px; color: #bec7cf; font-size: .72rem; font-weight: 800; }
.er-character-form-grid label > span small { color: #79848f; font-weight: 600; }
.er-character-form-grid input,
.er-character-form-grid select,
.er-character-form-grid textarea,
.er-character-stats-editor input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    background: #0a1017;
    color: #edf1f3;
    font: inherit;
}
.er-character-form-grid input,
.er-character-form-grid select,
.er-character-stats-editor input { min-height: 44px; padding: 0 12px; }
.er-character-form-grid textarea { min-height: 82px; padding: 11px 12px; resize: vertical; line-height: 1.45; }
.er-character-form-grid input:focus,
.er-character-form-grid select:focus,
.er-character-form-grid textarea:focus,
.er-character-stats-editor input:focus { border-color: rgba(201, 164, 95, .6); outline: none; box-shadow: 0 0 0 3px rgba(201, 164, 95, .08); }
.er-character-stats-editor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.er-character-editor__validation { color: #ffb4b4; font-size: .75rem; }
.er-character-editor__validation:empty { display: none; }
.er-character-editor__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid rgba(201, 164, 95, .18); border-radius: 16px; background: rgba(201, 164, 95, .045); }
.er-character-editor__footer > div:first-child { display: grid; gap: 4px; }
.er-character-editor__footer strong { color: #d7dce0; font-size: .75rem; }
.er-character-editor__footer span { color: #838e99; font-size: .68rem; }
.er-character-editor__footer > div:last-child { display: flex; gap: 8px; }

.er-saved-character-picker { display: grid; min-width: 220px; gap: 4px; }
.er-saved-character-picker > span { color: #b8c1c9; font-size: .66rem; font-weight: 850; }
.er-saved-character-picker select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid rgba(201, 164, 95, .28); border-radius: 9px; background: #0b1118; color: #e7edf1; font-size: .72rem; }
.er-character-library-link { color: #bfa36b; font-size: .68rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.er-character-library-link:hover { color: #ecd49f; }

@media (max-width: 900px) {
    .er-character-grid { grid-template-columns: 1fr; }
    .er-character-form-grid--identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .er-character-stats-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-character-editor__footer { align-items: stretch; flex-direction: column; }
    .er-character-editor__footer > div:last-child { justify-content: flex-end; }
}

@media (max-width: 620px) {
    .er-character-library,
    .er-character-editor { width: min(100% - 20px, 1240px); padding-top: 18px; }
    .er-character-library__hero,
    .er-character-editor__hero,
    .er-character-editor__section { padding: 18px; }
    .er-character-form-grid,
    .er-character-form-grid--identity { grid-template-columns: 1fr; }
    .er-character-form-grid__wide { grid-column: auto; }
    .er-character-stats-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .er-character-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .er-character-card__profile p { grid-template-columns: 1fr; gap: 3px; }
    .er-saved-character-picker { min-width: 100%; width: 100%; }
}