@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --bg-deep:     #100d0a;
    --bg-mid:      #151210;
    --bg-card:     #1e1a16;
    --bg-elevated: #28231e;
    --border:      #3d3530;
    --border-glow: #7a6030;
    --gold:        #c8a442;
    --gold-light:  #e8c870;
    --gold-dim:    #7a5e28;
    --win:         #4caf7a;
    --win-dim:     #1a3d2a;
    --win-glow:    rgba(76, 175, 122, 0.3);
    --loss:        #cf4f4f;
    --loss-dim:    #3d1a1a;
    --loss-glow:   rgba(207, 79, 79, 0.3);
    --text-primary:   #ddd4c0;
    --text-secondary: #8a7e6e;
    --text-muted:     #4a4038;
    --accent:      #7a8dd8;
    --radius:      4px;
    --surface:     #1e1a16;
    --surface-2:   #28231e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Remove focus outline on mouse click, keep for keyboard navigation */
:focus:not(:focus-visible) { outline: none; }
.app-header *:focus { outline: none; }
.header-logo, .header-logo *, .logo-icon { outline: none; user-select: none; }

body {
    font-family: 'EB Garamond', Georgia, serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(106, 125, 216, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(201, 168, 76, 0.04) 0%, transparent 50%);
}

/* ── HEADER ── */
.app-header {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(26, 29, 46, 0.9) 0%, transparent 100%);
    padding: 1.25rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* backdrop-filter on ::before so it doesn't create a containing block for position:fixed children (notif-panel) */
.app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    z-index: -1;
    pointer-events: none;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px var(--gold));
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 6px var(--gold)); }
    50% { filter: drop-shadow(0 0 16px var(--gold-light)); }
}

.header-logo h1 {
    font-family: 'Philosopher', serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dim));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.header-subtitle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
}

.period-badge {
    font-family: 'Philosopher', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--gold);
    border: 1px solid var(--gold-dim);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    background: rgba(201, 168, 76, 0.05);
}

/* ── STATS SECTION ── */
.app-container { max-width: 1400px; margin: 0 auto; padding: 2rem; }

.stats-section { margin-bottom: 2rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover { transform: translateY(-2px); }
.stat-card:hover::before { opacity: 1; }

.stat-wins { border-top: 2px solid var(--win); }
.stat-wins::before { background: linear-gradient(180deg, var(--win-glow) 0%, transparent 60%); }
.stat-losses { border-top: 2px solid var(--loss); }
.stat-losses::before { background: linear-gradient(180deg, var(--loss-glow) 0%, transparent 60%); }
.stat-winrate { border-top: 2px solid var(--accent); }
.stat-winrate::before { background: linear-gradient(180deg, rgba(147,112,219,0.1) 0%, transparent 60%); }
.stat-total { border-top: 2px solid var(--border-glow); }
.stat-total::before { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 60%); }
.stat-points { border-top: 2px solid var(--gold); }
.stat-points::before { background: linear-gradient(180deg, rgba(201, 168, 76, 0.1) 0%, transparent 60%); }
.stat-streak { border-top: 2px solid var(--gold-dim); }
.stat-streak::before { background: linear-gradient(180deg, rgba(201,168,76,0.07) 0%, transparent 60%); }

.stat-icon { font-size: 1.4rem; margin-bottom: 0.4rem; position: relative; z-index: 1; }
.stat-value { font-family: 'Philosopher', serif; font-size: 1.8rem; font-weight: 700; color: var(--gold-light); position: relative; z-index: 1; line-height: 1; }
.stat-label { font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 0.1em; margin-top: 0.3rem; text-transform: uppercase; position: relative; z-index: 1; }

.stat-value.positive { color: var(--win); }
.stat-value.negative { color: var(--loss); }
.stat-sub { font-size: .7rem; margin-top: .25rem; position: relative; z-index: 1; }

.winrate-bar { height: 3px; background: var(--bg-elevated); border-radius: 2px; margin-top: 0.6rem; overflow: hidden; position: relative; z-index: 1; }
.winrate-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--win)); border-radius: 2px; transition: width 0.6s ease; }

/* ── MAIN LAYOUT ── */
.main-content { padding: 0; min-height: calc(100vh - 64px); }
.home-layout { display: grid; grid-template-columns: 360px 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .home-layout { grid-template-columns: 1fr; } }

/* ── SECTION HEADERS ── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.section-header h2 {
    font-family: 'Philosopher', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--gold);
}

/* ── FORM ── */
.form-section, .table-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.add-form { display: flex; flex-direction: column; gap: 0.9rem; }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }

.form-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.55rem 0.75rem;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.form-input:focus { border-color: var(--border-glow); }
.form-input option { background: var(--bg-card); }
.form-input.input-invalid { border-color: var(--loss); box-shadow: 0 0 0 2px rgba(220,53,69,.18); }

.points-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.points-input {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.pts-btn {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.pts-btn.pts-plus  { border-color: #2a4a2a; color: var(--win); }
.pts-btn.pts-minus { border-color: #4a2a2a; color: var(--loss); }
.pts-btn:hover { brightness: 1.3; border-color: var(--border-glow); color: var(--text-primary); }
.pts-btn.pts-plus.pts-active  { background: #1a3a1a; border-color: var(--win); color: var(--win); font-weight: 700; }
.pts-btn.pts-minus.pts-active { background: #3a1a1a; border-color: var(--loss); color: var(--loss); font-weight: 700; }

.submit-btn {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #2a2518, #3d3420);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
    color: var(--gold);
    font-family: 'Philosopher', serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #3d3520, #554a28);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(201, 168, 76, 0.2);
}

.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.success-msg {
    text-align: center;
    color: var(--win);
    font-size: 0.9rem;
    padding: 0.4rem;
    animation: fadeIn 0.3s ease;
}

.error-msg {
    text-align: center;
    color: var(--loss);
    font-size: 0.9rem;
    padding: 0.4rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* ── CLASS STATS ── */
.class-stats { display: flex; flex-direction: column; gap: 0.5rem; }

.class-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.class-name { flex: 1; color: var(--text-primary); }
.class-record { font-size: 0.85rem; }
.win-count { color: var(--win); }
.loss-count { color: var(--loss); }
.separator { color: var(--text-muted); margin: 0 0.2rem; }
.class-wr { font-family: 'Philosopher', serif; font-size: 0.85rem; font-weight: 600; min-width: 40px; text-align: right; }
.wr-good { color: var(--win); }
.wr-bad { color: var(--loss); }

/* ── TABLE ── */
.filter-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.search-input, .filter-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus, .filter-select:focus { border-color: var(--border-glow); }
.filter-select option { background: var(--bg-card); }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .search-input { padding-right: 1.8rem; width: 100%; }
.search-clear {
    position: absolute; right: 0.4rem;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 0.75rem; padding: 0 0.2rem; line-height: 1;
}
.search-clear:hover { color: var(--text); }

/* Result toggle buttons in battle history filters */
.result-toggle-group { display: flex; gap: 0.25rem; flex-shrink: 0; }
.result-toggle {
    padding: 0.4rem 0.65rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    white-space: nowrap;
}
.result-toggle:hover { border-color: var(--border-glow); color: var(--text-primary); }
.result-toggle.result-toggle-active { background: var(--bg-card); border-color: var(--gold-dim); color: var(--gold); font-weight: 600; }
.result-toggle.result-toggle-win.result-toggle-active  { background: var(--win-dim);  border-color: var(--win);  color: var(--win);  }
.result-toggle.result-toggle-loss.result-toggle-active { background: var(--loss-dim); border-color: var(--loss); color: var(--loss); }

/* ClanPicker inside filter row */
.filter-row .clan-picker { margin: 0; }
.filter-row .clan-picker-input { font-size: .95rem; padding: .4rem .7rem; }
.filter-row .clan-picker-selected { font-size: .9rem; }

/* History filters: single flex row */
.hf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.hf-filters .search-wrap         { flex: 1 1 110px; }
.hf-filters .search-wrap .search-input { padding-right: 0.7rem; }
.hf-filters .result-toggle-group { flex-shrink: 0; }
.hf-filters .clan-picker          { flex: 1 1 110px; margin: 0; }
.hf-filters .clan-picker-wrap     { width: 100%; }
.hf-filters .clan-picker-input    { font-size: .95rem; padding: .4rem .7rem; }
.hf-filters .clan-picker-selected { display: flex; width: 100%; font-size: .9rem; box-sizing: border-box; }

.table-wrapper { overflow-x: auto; }

.battle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.battle-table th {
    font-family: 'Philosopher', serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.battle-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(42, 45, 69, 0.5); }

.battle-table tr:last-child td { border-bottom: none; }
.battle-table tr:hover td { background: rgba(255, 255, 255, 0.02); }

.row-win td:first-child { border-left: 2px solid var(--win); }
.row-loss td:first-child { border-left: 2px solid var(--loss); }

.date-cell { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
.name-cell { color: var(--text-primary); font-weight: 600; }
.class-cell { color: var(--text-secondary); font-size: 0.85rem; }
.notes-cell { color: var(--text-muted); font-style: italic; font-size: 0.85rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-cell { font-family: 'Philosopher', serif; font-weight: 600; }
.positive { color: var(--win); }
.negative { color: var(--loss); }
.rank-cell { font-family: 'Philosopher', serif; color: var(--gold-dim); font-weight: 700; }

.result-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 2px;
    font-family: 'Philosopher', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.badge-win { background: var(--win-dim); color: var(--win); border: 1px solid rgba(76, 175, 122, 0.3); }
.badge-loss { background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(207, 79, 79, 0.3); }

.delete-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius);
    transition: all 0.2s;
    font-size: 0.75rem;
}

.delete-btn:hover { color: var(--loss); border-color: var(--loss); background: var(--loss-dim); }

/* ── FIRST BATTLE TIP ── */
.first-battle-tip {
    background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.05));
    border: 1px solid var(--gold-dim);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    animation: tip-pulse 2.5s ease-in-out infinite;
}

@keyframes tip-pulse {
    0%, 100% { border-left-color: var(--gold); }
    50%       { border-left-color: var(--gold-dim); }
}

/* ── EMPTY STATE ── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.empty-state p { font-size: 1rem; line-height: 1.6; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── INLINE AUTOCOMPLETE ── */
.autocomplete-wrap {
    position: relative;
}

.autocomplete-ghost {
    position: absolute;
    inset: 0;
    padding: 0.55rem 0.75rem;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    pointer-events: none;
    white-space: pre;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius);
    line-height: inherit;
}

.ghost-typed {
    color: transparent; /* same width as real text, but invisible */
}

.ghost-hint {
    color: #5fa8c8;
    font-style: italic;
}

.autocomplete-input {
    position: relative;
    background: transparent;
    z-index: 1;
}

/* make the underlying bg visible through transparent input */
.autocomplete-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    z-index: 0;
}

.autocomplete-input:focus {
    border-color: var(--border-glow);
}

.autocomplete-input:focus ~ .autocomplete-ghost,
.autocomplete-wrap:focus-within::before {
    border-color: var(--border-glow);
}

.autocomplete-input-hinted { padding-right: 4.5rem; }

.tab-badge {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(95, 168, 200, .15);
    border: 1px solid rgba(95, 168, 200, .4);
    color: #5fa8c8;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .1rem .35rem;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

/* ── CLAN BADGE ── */
.clan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    vertical-align: middle;
    margin-right: .3rem;
}
.clan-icon {
    width: 16px;
    height: 12px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 1px;
}
/* Combined look when both alliance + clan icons appear together */
.alliance-icon  { width: 8px !important; }
.clan-icon-ph   { display: inline-block; height: 12px; width: 16px; flex-shrink: 0; }
.clan-icon-ph.alliance-icon { width: 8px; }
.clan-badge .clan-icon                              { object-fit: fill; display: block; }
.clan-badge .clan-icon:first-child:not(:only-child) { border-radius: 2px 0 0 2px; }
.clan-badge .clan-icon:last-child:not(:only-child)  { border-radius: 0 2px 2px 0; }
.clan-badge .clan-icon:only-child                   { border-radius: 2px; }

/* ── CLAN PICKER (Scout filter) ── */
.clan-picker { margin: .4rem 0 .5rem; }
.clan-picker-wrap { position: relative; }
.clan-picker-input { width: 100%; padding-right: 1.8rem; }
.clan-picker-icon { width: 18px; height: 13px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.clan-picker-icon-ph { font-size: .75rem; line-height: 1; flex-shrink: 0; }
.clan-picker-dropdown {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    max-height: 180px; overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.clan-picker-option {
    display: flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; cursor: pointer;
    font-size: .85rem; color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.clan-picker-option:last-child { border-bottom: none; }
.clan-picker-option:hover { background: rgba(122,96,48,.25); }
.clan-picker-selected {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(122,96,48,.18);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    padding: .2rem .5rem .2rem .4rem;
    font-size: .82rem; color: var(--text);
    position: relative;
}
.clan-picker-sel-name { font-weight: 500; }
.clan-picker-clear { position: static; font-size: .7rem; margin-left: .1rem; }

/* ── CLAN ICON UPLOAD ── */
.icon-upload-preview {
    display: block;
    width: 48px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    margin: .3rem 0 .2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.clan-upload-input {
    display: block;
    width: 100%;
    font-size: .78rem;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .25rem .4rem;
    cursor: pointer;
}
.clan-upload-input::-webkit-file-upload-button {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .15rem .5rem;
    cursor: pointer;
    font-size: .75rem;
    margin-right: .5rem;
}

/* ── AUTH PAGE ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(106, 125, 216, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(201, 168, 76, 0.06) 0%, transparent 50%);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dim);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.auth-logo {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 12px var(--gold));
    animation: pulse-glow 3s ease-in-out infinite;
}

.auth-title {
    font-family: 'Philosopher', serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.3rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    pointer-events: none;
}

.auth-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    margin-bottom: 2rem;
}

.auth-form { text-align: left; display: flex; flex-direction: column; gap: 1rem; }

.auth-error {
    background: var(--loss-dim);
    border: 1px solid var(--loss);
    color: var(--loss);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    text-align: center;
}

.auth-hint {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── NAV ── */
.header-right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.char-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--gold);
    padding: 0.35rem 0.7rem;
    font-family: 'Philosopher', serif;
    font-size: 0.8rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    max-width: 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.char-select:focus { border-color: var(--gold-dim); }
.char-select option { background: var(--bg-card); color: var(--text-primary); font-family: 'EB Garamond', Georgia, serif; }

.nav-link {
    font-family: 'Philosopher', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius);
    transition: color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-link:hover { color: var(--gold); }
.nav-link.nav-active {
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    padding-bottom: calc(0.3rem - 2px);
}

.nav-admin {
    color: var(--gold-dim);
    border: 1px solid var(--gold-dim);
}

.nav-admin:hover { color: var(--gold); border-color: var(--gold); }

.nav-user {
    font-family: 'Philosopher', serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius);
    font-family: 'Philosopher', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover { color: var(--loss); border-color: var(--loss); }

.lang-switcher {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.lang-opt {
    background: none;
    border: none;
    padding: .25rem .6rem;
    font-family: 'Philosopher', serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.5;
}
.lang-opt:not(.lang-active):hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
.lang-opt.lang-active { background: var(--gold); color: #0d1117; cursor: default; }

/* ── ADMIN ── */
.admin-title { color: var(--gold); }

.result-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .2rem .8rem;
    font-size: .75rem;
    font-family: 'Philosopher', serif;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
}
.result-btn:hover { border-color: var(--border-glow); color: var(--text-primary); }
.result-btn.active-win  { border-color: var(--win);  color: var(--win);  background: var(--win-dim); }
.result-btn.active-win:hover  { background: rgba(74,222,128,.18); }
.result-btn.active-loss { border-color: var(--loss); color: var(--loss); background: var(--loss-dim); }
.result-btn.active-loss:hover { background: rgba(229,115,115,.18); }
.result-btn.active-muted { border-color: var(--border); color: #0d1117; background: var(--text-muted); }
.result-btn.active-muted:hover { opacity: .85; }

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.tab-btn {
    font-family: 'Philosopher', serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover { color: var(--text-primary); border-color: var(--border-glow); }

.tab-active {
    background: var(--bg-elevated);
    color: var(--gold);
    border-color: var(--gold-dim);
}

.admin-section { }

.admin-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ── CHARACTERS PAGE ── */
.char-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) { .char-layout { grid-template-columns: 1fr; } }

.char-list { display: flex; flex-direction: column; gap: 0.6rem; }

.char-card {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    transition: border-color 0.2s;
    cursor: pointer;
}

.char-card:hover { border-color: var(--border-glow); }
.char-selected { border-color: var(--gold-dim) !important; background: var(--bg-elevated); }

.char-info { flex: 1; }
.char-name { font-family: 'Philosopher', serif; font-size: 1rem; color: var(--gold-light); }
.char-meta { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem; }
.char-class { color: var(--text-secondary); }
.char-server { color: var(--text-muted); }

.char-edit-form { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: .25rem 0; }
.char-edit-form .form-input { font-size: .8rem; padding: .25rem .4rem; }
.char-edit-actions { display: flex; gap: .3rem; justify-content: flex-end; margin-top: .15rem; }

/* ── Snapshot editor in Characters page ── */
.snap-editor-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.snap-editor-sub {
    font-size: .82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.snap-periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}
.snap-period-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: border-color .2s;
}
.snap-period-active {
    border-color: rgba(196,164,65,.35);
    background: rgba(196,164,65,.04);
}
.snap-period-name {
    font-family: 'Philosopher', serif;
    font-size: .82rem;
    color: var(--gold-light);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.snap-period-values {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-size: .82rem;
}
.snap-val-pts { color: var(--gold); font-weight: 600; }
.snap-val     { font-size: .78rem; }
.snap-period-empty {
    font-size: .78rem;
    color: var(--text-muted);
    font-style: italic;
}
.snap-edit-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: .2rem .6rem;
    font-size: .75rem;
    cursor: pointer;
    align-self: flex-start;
    transition: all .15s;
}
.snap-edit-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.snap-inline-form {
    display: flex;
    gap: .4rem;
}
.snap-inline-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.snap-inline-field label {
    font-size: .68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.snap-inline-actions {
    display: flex;
    gap: .4rem;
}

/* ── PAGE HEADER ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-title {
    font-family: 'Philosopher', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold);
}

.back-link {
    font-family: 'Philosopher', serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}

.back-link:hover { color: var(--gold); }

/* ── SERVER TABS ── */
.server-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ── LEADERBOARD CONTROLS ── */
.lb-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.lb-label {
    font-family: 'Philosopher', serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-right: 0.25rem;
}

.lb-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    font-style: italic;
}

.sort-btn {
    font-family: 'Philosopher', serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.sort-btn:hover { color: var(--text-primary); border-color: var(--border-glow); }
.sort-active    { border-color: var(--gold-dim); color: var(--gold); background: var(--bg-elevated); }

/* ── LEADERBOARD TABLE ── */
.lb-table .medal { font-size: 1.1rem; }

.lb-row.top1 td { background: rgba(201, 168, 76, 0.06); }
.lb-row.top1 td:first-child { border-left: 2px solid var(--gold); }
.lb-row.top2 td:first-child { border-left: 2px solid #aaa; }
.lb-row.top3 td:first-child { border-left: 2px solid #cd7f32; }

.wr-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 80px; }

.wr-mini-bar {
    height: 3px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.wr-mini-fill { height: 100%; border-radius: 2px; }
.fill-good    { background: var(--win); }
.fill-bad     { background: var(--loss); }

/* ── HERO PODIUM ── */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

.podium-crown { font-size: 2rem; margin-bottom: 0.4rem; animation: pulse-glow 2s ease-in-out infinite; }
.podium-medal { font-size: 1.6rem; margin-bottom: 0.4rem; }

.podium-name {
    font-family: 'Philosopher', serif;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.15rem;
    text-align: center;
}

.podium-name-1 { color: var(--gold-light); font-size: 1.1rem; }

.podium-class {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    text-align: center;
}

.podium-pts {
    font-family: 'Philosopher', serif;
    font-size: 0.85rem;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.podium-block {
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--border);
}

.p1-block { height: 80px; background: linear-gradient(180deg, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0.05) 100%); border-color: var(--gold-dim); }
.p2-block { height: 56px; background: linear-gradient(180deg, rgba(170,170,170,0.12) 0%, rgba(170,170,170,0.03) 100%); border-color: #555; }
.p3-block { height: 40px; background: linear-gradient(180deg, rgba(205,127,50,0.12) 0%, rgba(205,127,50,0.03) 100%); border-color: #7a5020; }

@media (max-width: 600px) {
    .podium { gap: 0.4rem; }
    .podium-place { width: 110px; }
}

/* ── PERIOD BAR ── */
.period-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.period-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.period-tab {
    font-family: 'Philosopher', serif;
    font-size: .72rem;
    letter-spacing: .1em;
    padding: .3rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.period-tab:hover  { color: var(--text-primary); border-color: var(--border-glow); }
.period-active     { border-color: var(--gold-dim) !important; color: var(--gold) !important; background: var(--bg-card) !important; }

.period-live {
    font-size: .6rem;
    background: var(--win-dim);
    color: var(--win);
    border: 1px solid var(--win);
    border-radius: 2px;
    padding: 0 .3rem;
    letter-spacing: .08em;
}

.period-current-label {
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── WEEK FILTER BAR ── */
.week-filter-bar {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .55rem .75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.week-tab {
    font-family: 'Philosopher', serif;
    font-size: .7rem;
    letter-spacing: .06em;
    padding: .22rem .65rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.week-tab:hover { border-color: var(--border-glow); color: var(--text-secondary); }
.week-active    { border-color: var(--gold-dim) !important; color: var(--gold) !important; background: rgba(212,175,55,.07) !important; }


.period-current-label strong { color: var(--gold); }

/* ── NO PERIOD WARNING ── */
.no-period-warn {
    background: rgba(207, 79, 79, 0.08);
    border: 1px solid var(--loss);
    border-radius: var(--radius);
    color: var(--loss);
    padding: .5rem .75rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* ── INLINE EDIT ROW ── */
.edit-row td { background: rgba(106, 125, 216, 0.07) !important; padding: .3rem .5rem !important; }
.edit-row .form-input { padding: .3rem .5rem; font-size: .85rem; }

.action-cell { display: flex; gap: .3rem; align-items: center; }

.icon-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    padding: .2rem .45rem;
    font-size: .9rem;
    transition: all .15s;
    color: var(--text-muted);
}

.icon-btn:hover   { border-color: var(--border-glow); color: var(--text-primary); }
.edit-btn:hover   { color: var(--accent); border-color: var(--accent); }
.save-btn         { color: var(--win); }
.save-btn:hover   { border-color: var(--win); background: var(--win-dim); }
.delete-btn:hover { color: var(--loss); border-color: var(--loss); background: var(--loss-dim); }
.active-btn       { color: var(--accent); border-color: var(--accent); }
.active-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Change history ── */
.history-row > td { padding: 0 !important; background: rgba(0,0,0,.25) !important; }
.history-empty    { padding: .5rem 1rem; color: var(--text-muted); font-style: italic; font-size: .85rem; }
.history-table    { width: 100%; border-collapse: collapse; font-size: .82rem; }
.history-table th { padding: .3rem .6rem; text-align: left; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.2); }
.history-table td { padding: .3rem .6rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.history-table tr:last-child td { border-bottom: none; }

/* ── Rankings page ── */
.rankings-filters       { margin-bottom: 1rem; align-items: center; }
.rankings-group-header  { margin-top: 1.5rem; }
.rankings-add-header    { margin-top: 2rem; }
.rankings-add-form      { display: flex; flex-direction: column; gap: .5rem; }
.rankings-add-row       { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: nowrap; }
.rankings-add-row2      { margin-top: .1rem; }
.rankings-field-name    { flex: 3; min-width: 0; }
.rankings-field-class   { flex: 2; min-width: 0; }
.rankings-field-clan    { flex: 2; min-width: 0; }
.rankings-field-num     { width: 68px; flex-shrink: 0; }
.rankings-field-notes   { flex: 1; min-width: 0; }
.rankings-field-cand    { flex-shrink: 0; }
.rankings-field-action  { flex-shrink: 0; }
/* remove the global clan-picker margin so it aligns with other inputs in flex rows */
.rankings-add-row .clan-picker,
.edit-row .clan-picker  { margin: 0; }

.updated-by { color: var(--text-muted); font-size: .75em; }
.text-muted    { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.wl-inputs  { display: flex; gap: .3rem; align-items: center; }
.wl-sep     { color: var(--text-secondary); }

/* ── Name autocomplete picker ── */
.name-picker-wrap        { position: relative; }
.name-picker-dropdown    {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.name-picker-option      {
    padding: .35rem .65rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text-primary);
    transition: background .1s;
}
.name-picker-option:hover { background: rgba(212,175,55,.12); }

/* ══════════════════════════════════════════════════════
   BUILD PLANNER
══════════════════════════════════════════════════════ */

/* ── Hero header ── */
.build-hero {
    align-items: flex-start;
    gap: 1rem;
}

.build-hero-copy {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.build-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.build-hero-pill {
    padding: .32rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 168, 76, .22);
    background: rgba(14, 12, 10, .65);
    color: var(--text-secondary);
    font-size: .75rem;
    letter-spacing: .05em;
}

.build-hero-pill-accent {
    color: var(--gold);
    border-color: rgba(201, 168, 76, .42);
    background: rgba(201, 168, 76, .08);
}

.build-hero-meta {
    min-width: 180px;
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 1px solid rgba(201, 168, 76, .18);
    background: linear-gradient(180deg, rgba(24, 20, 16, .96), rgba(14, 12, 10, .92));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}

.build-hero-meta-name {
    color: var(--gold);
    font-family: 'Philosopher', serif;
    font-size: .9rem;
    letter-spacing: .08em;
}

.build-hero-meta-time {
    color: var(--text-muted);
    font-size: .72rem;
    letter-spacing: .06em;
}

/* ── Top bar ── */
.build-topbar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem .9rem;
    background: linear-gradient(180deg, rgba(27, 23, 19, .98), rgba(19, 16, 13, .96));
    border: 1px solid rgba(201, 168, 76, .14);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.build-char-row,
.preset-row,
.preset-name-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.preset-tab {
    font-family: 'Philosopher', serif;
    font-size: .72rem;
    letter-spacing: .1em;
    padding: .3rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.preset-tab:hover  { color: var(--text-primary); border-color: var(--border-glow); }
.preset-active     { border-color: var(--gold-dim) !important; color: var(--gold) !important; }
.preset-new        { border-style: dashed; color: var(--text-muted); }
.preset-new:hover  { color: var(--gold); border-color: var(--gold-dim); }

.preset-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .7rem;
    padding: 0 .1rem;
    line-height: 1;
    transition: color .15s;
}
.preset-delete-btn:hover { color: var(--loss); }

/* ── Two-column layout ── */
.build-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 390px);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .build-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    }
}

@media (max-width: 900px) {
    .build-layout { grid-template-columns: 1fr; }
    .build-left,
    .build-right { order: initial; }
    .build-hero { flex-direction: column; }
    .build-hero-meta { align-items: flex-start; min-width: 0; width: 100%; }
}

/* ── Buff inputs ── */
.buff-grid {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.buff-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.buff-label {
    font-size: .78rem;
    color: var(--text-secondary);
    min-width: 64px;
}
.buff-input {
    width: 72px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: 'Philosopher', serif;
    font-size: .85rem;
    padding: .2rem .4rem;
    text-align: right;
}
.buff-input:focus { outline: none; border-color: var(--gold-dim); }
.buff-checks {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.buff-check-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.buff-check-row input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; }

/* ── Class config ── */
.char-config-row {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: .5rem;
}
.char-config-class {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-width: 0;
}
.char-config-lvl {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 64px;
    flex-shrink: 0;
}
.char-class-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: .82rem;
    padding: .3rem .5rem;
    outline: none;
    transition: border-color .2s;
    font-family: 'EB Garamond', Georgia, serif;
    width: 100%;
    max-width: 220px;
}
.char-class-select:focus { border-color: var(--gold-dim); }
.attr-class-name {
    font-size: .85rem;
    color: var(--gold);
    font-weight: 600;
    padding: .3rem 0;
}
.char-class-select option { background: var(--bg-card); }

.build-phase-note {
    margin-top: .85rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, .14);
    background: rgba(12, 10, 8, .55);
    color: var(--text-secondary);
    font-size: .8rem;
    line-height: 1.55;
}

/* ── Dye grid in Build ── */
.dye-grid-build {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    margin-bottom: .25rem;
}
@media (max-width: 700px) { .dye-grid-build { grid-template-columns: repeat(3, 1fr); } }

.dye-cell-build {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
}
.dye-lbl { font-size: .68rem; color: var(--text-secondary); font-weight: 700; }
.dye-btn-b {
    width: 20px; height: 20px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .85rem;
    cursor: pointer;
    line-height: 1;
}
.dye-btn-b:hover { background: var(--gold-dim); }
.dye-val-b { font-size: .8rem; font-weight: 700; color: var(--text-primary); min-width: 24px; text-align: center; }
.dye-pos { color: #4ade80; }
.dye-neg { color: #f87171; }

/* ── Universal DyeAdjuster component ── */
.dye-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
}
.dye-btn {
    width: 20px; height: 20px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .85rem;
    cursor: pointer;
    line-height: 1;
}
.dye-btn:hover { background: var(--gold-dim); }
.dye-val { font-size: .8rem; font-weight: 700; color: var(--text-primary); min-width: 24px; text-align: center; }

/* ── Dye slot rows (Build.razor — 3 fixed slots with dropdown) ── */
.dye-slots-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .4rem; }

.dye-slot-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.dye-slot-num {
    font-size: .68rem;
    color: var(--text-muted);
    min-width: 14px;
    text-align: right;
    flex-shrink: 0;
    margin-top: .6rem;
}
.dye-slot-inner {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
    min-width: 0;
}

.dye-net-row {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .45rem;
    padding-top: .4rem;
    border-top: 1px solid var(--border);
}
.dye-net-chip {
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
}

/* ── TATTOO PICKER ── */
.tattoo-picker-wrap { margin: 0; }
.tattoo-picker-inner { position: relative; }
.tattoo-picker-dropdown {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    max-height: 220px; overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.tattoo-picker-group {
    padding: .2rem .6rem;
    font-size: .7rem;
    font-family: 'Philosopher', serif;
    letter-spacing: .08em;
    color: var(--gold);
    background: rgba(201,168,76,.07);
    border-bottom: 1px solid var(--border);
}
.tattoo-picker-option {
    padding: .3rem .6rem .3rem 1rem;
    cursor: pointer;
    font-size: .83rem;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(61,53,48,.5);
    transition: background .1s;
}
.tattoo-picker-option:last-child { border-bottom: none; }
.tattoo-picker-option:hover { background: rgba(122,96,48,.25); }
.tattoo-picker-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius);
    padding: .38rem .55rem;
    font-size: .83rem;
    color: var(--text-primary);
}
.tattoo-picker-badge { font-weight: 500; }
.tattoo-picker-clear { position: static; font-size: .7rem; color: var(--text-secondary); }

/* ── Build buff bar (L2-стилизованные ряды иконок) ───────────────────── */

.build-buffbar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.build-buffbar-row {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: .4rem;
    align-items: center;
    padding: 2px 3px;
    background: linear-gradient(180deg, rgba(16,13,10,.65), rgba(10,8,6,.55));
    border: 1px solid #2a2420;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.build-buffbar-row-has-actions {
    grid-template-columns: 74px 1fr;
}

.build-buffbar-label {
    font-family: 'Cinzel', serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-dim);
    text-align: center;
    line-height: 1;
    padding: 0 .25rem;
    border-right: 1px solid rgba(61,53,48,.55);
    cursor: help;
}

.build-buffbar-label-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.build-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.build-row-action-btn {
    min-height: 16px;
    padding: 1px 3px;
    border: 1px solid rgba(197,160,90,.34);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(65,48,27,.82), rgba(28,21,14,.9));
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.build-row-action-btn:hover:not(:disabled) {
    border-color: rgba(244,213,141,.7);
    background: linear-gradient(180deg, rgba(92,68,35,.95), rgba(42,30,18,.96));
}

.build-row-action-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.build-buffbar-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.build-buff-slot {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #2a2420;
    border-radius: 2px;
    background: linear-gradient(180deg, #1a1612 0%, #0e0b08 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 1px rgba(0,0,0,.5);
    cursor: pointer;
    transition: opacity .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .12s ease;
    overflow: hidden;
}
.build-buff-slot::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(0,0,0,.55);
    border-radius: 2px;
    pointer-events: none;
}
.build-buff-slot:hover {
    border-color: var(--gold-dim);
    opacity: 1;
    transform: translateY(-1px);
}

.build-buff-slot:not(.is-selected) {
    opacity: .58;
    border-color: rgba(62, 53, 43, .72);
    background: linear-gradient(180deg, #13100d 0%, #090706 100%);
}

.build-buff-slot input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.build-buff-slot.is-selected {
    opacity: 1;
    border-color: var(--gold);
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 226, 129, .2), transparent 46%),
        linear-gradient(180deg, #4b3919 0%, #1f1608 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 224, 124, .58),
        inset 0 -10px 14px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(200,164,66,.35),
        0 0 10px rgba(200,164,66,.42);
}
.build-buff-slot.is-selected::before {
    inset: 0;
    border-color: rgba(255, 233, 159, .52);
    box-shadow: inset 0 0 8px rgba(255, 220, 122, .18);
}
.build-buff-slot.is-selected .build-buff-slot-icon {
    filter: none;
}

.build-buff-slot.is-disabled {
    opacity: .38;
    border-color: #3c332a;
}

.build-buff-slot.is-disabled .build-buff-slot-icon,
.build-buff-slot.is-disabled .build-buff-slot-code {
    filter: grayscale(.32) brightness(.9);
}

.build-buff-slot.is-exclusive::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 3px rgba(200,164,66,.6);
    z-index: 3;
}

.build-buff-slot-code {
    position: relative;
    z-index: 1;
    font-family: 'Philosopher', serif;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #bfb596;
    text-align: center;
    line-height: 1;
    padding: 0 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.build-buff-slot:not(.is-selected) .build-buff-slot-code {
    color: #716755;
    text-shadow: none;
}
.build-buff-slot.is-selected .build-buff-slot-code {
    color: var(--gold-light);
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

@media (max-width: 900px) {
    .build-buffbar-row {
        grid-template-columns: 48px 1fr;
        gap: .35rem;
    }
    .build-buffbar-row-has-actions {
        grid-template-columns: 70px 1fr;
    }
    .paperdoll-inline-fields {
        grid-template-columns: 1fr;
    }
    .paperdoll-preset-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .paperdoll-preset-row .preset-new {
        grid-column: 1 / -1;
    }
    .equip-paperdoll {
        grid-template-columns: repeat(5, 36px);
        padding: .3rem;
    }
}

/* ── Buff sliders in Build ── */
.buff-grid-build { display: flex; flex-direction: column; gap: 5px; margin-bottom: .5rem; }
.buff-row-build {
    display: grid;
    grid-template-columns: 52px 1fr 44px;
    align-items: center;
    gap: 8px;
}
.buff-lbl-build { font-size: .75rem; color: var(--text-secondary); }
.buff-slider-build { width: 100%; accent-color: var(--gold); cursor: pointer; }
.buff-val-build { font-size: .75rem; font-weight: 700; color: #4fc3f7; text-align: right; }
.buff-toggles { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.buff-toggle-label {
    display: flex; align-items: center; gap: 7px;
    font-size: .8rem; color: var(--text-secondary); cursor: pointer;
}
.buff-toggle-label input { accent-color: var(--gold); }

.attr-cell  { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.attr-label {
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--gold);
    font-weight: 700;
}

.attr-input {
    width: 100%;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: 'Philosopher', serif;
    font-size: .9rem;
    padding: .3rem .2rem;
    outline: none;
    transition: border-color .2s;
}
.attr-input:focus { border-color: var(--gold-dim); }
.attr-input::-webkit-inner-spin-button { opacity: .4; }

/* ── Equipment slots ── */
.slot-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.slot-label {
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--text-muted);
    text-align: right;
}

.slot-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: .82rem;
    padding: .3rem .5rem;
    outline: none;
    transition: border-color .2s;
    font-family: 'EB Garamond', Georgia, serif;
    width: 100%;
}
.slot-select:focus { border-color: var(--gold-dim); }
.slot-select option { background: var(--bg-card); }

.enchant-row  { display: flex; align-items: center; gap: .2rem; }
.enchant-plus { color: var(--gold); font-family: 'Philosopher', serif; font-size: .85rem; font-weight:700; }
.enchant-input {
    width: 42px;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--gold);
    font-family: 'Philosopher', serif;
    font-size: .85rem;
    padding: .25rem .2rem;
    outline: none;
}
.enchant-input::-webkit-inner-spin-button { display: none; }
.enchant-input:focus { border-color: var(--gold-dim); }

.sa-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: .75rem;
    padding: .25rem .4rem;
    outline: none;
    max-width: 130px;
    font-family: 'EB Garamond', Georgia, serif;
}
.sa-select option { background: var(--bg-card); }

/* ── Stats panel ── */
.build-left {
    order: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.build-left  .section-header:first-child,
.build-right .section-header:first-child { padding-top: 0; }
.build-right {
    order: 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

/* ── Setup + Dyes: two-column subgrid on wider viewports ───────────────── */
.build-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}
.build-setup-cell { min-width: 0; }
.build-setup-row {
    display: flex;
    gap: .55rem;
    padding: .55rem 0 1rem;
}
.build-dyes-body { padding: .55rem 0 1rem; }

@media (max-width: 1100px) {
    .build-setup-grid { grid-template-columns: 1fr; gap: 0; }
}

.skill-library {
    margin-top: .65rem;
    border: 1px solid rgba(66, 56, 46, .72);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 15, 11, .9), rgba(11, 9, 7, .88));
    overflow: hidden;
}

.skill-library summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .85rem;
    cursor: pointer;
    user-select: none;
    font-family: 'Cinzel', serif;
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--gold-light);
    text-transform: uppercase;
}

.skill-library summary::-webkit-details-marker {
    display: none;
}

.skill-library summary::after {
    content: "Open";
    margin-left: auto;
    color: var(--gold-dim);
    font-size: .64rem;
    letter-spacing: .12em;
}

.skill-library[open] summary::after {
    content: "Hide";
}

.skill-library-note {
    padding: 0 .85rem .35rem;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}

.skill-library-group {
    padding: 0 .85rem .85rem;
}

.skill-library-group-title {
    margin-bottom: .45rem;
    font-family: 'Philosopher', serif;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

.skill-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .35rem;
}

.skill-library-card {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .45rem;
    align-items: center;
    padding: .5rem .55rem;
    border: 1px solid rgba(50, 43, 36, .82);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(25, 20, 15, .9), rgba(14, 11, 8, .88));
    min-width: 0;
}

.skill-library-card.is-supported {
    border-color: rgba(114, 90, 43, .8);
}

.skill-library-card.is-active {
    border-color: rgba(199, 168, 76, .92);
    box-shadow: 0 0 0 1px rgba(199, 168, 76, .18), 0 0 10px rgba(199, 168, 76, .12);
}

.skill-library-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    padding: .04rem .28rem;
    border-radius: 999px;
    background: rgba(199, 168, 76, .12);
    color: var(--gold);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.skill-library-card.is-legacy .skill-library-badge {
    background: rgba(110, 96, 76, .12);
    color: #9f927c;
}

.skill-library-icon-frame {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(59, 50, 41, .9);
    background: linear-gradient(180deg, #19140f 0%, #0e0b08 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.skill-library-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    filter: saturate(.88) brightness(.9);
}

.skill-library-copy {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.skill-library-copy strong {
    display: block;
    color: var(--text-primary);
    font-size: .78rem;
    line-height: 1.15;
    padding-right: 3.2rem;
}

.skill-library-copy span {
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 1.2;
}

.build-left .section-header,
.build-right .section-header {
    margin-bottom: .9rem;
    padding-bottom: .55rem;
}

.build-left .section-header h2,
.build-right .section-header h2 {
    font-size: .94rem;
    letter-spacing: .13em;
}

.stats-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.stat-group { display: flex; flex-direction: column; gap: 0; }

.stat-group-title {
    font-family: 'Philosopher', serif;
    font-size: .65rem;
    letter-spacing: .15em;
    color: var(--gold-dim);
    text-transform: uppercase;
    padding: .5rem 0 .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .25rem;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}

.stat-row-icon  { width: 1.2rem; text-align: center; font-size: .85rem; }
.stat-row-label { flex: 1; font-size: .82rem; color: var(--text-secondary); font-family: 'EB Garamond', Georgia, serif; }
.stat-row-value {
    font-family: 'Philosopher', serif;
    font-size: .88rem;
    color: var(--gold-light);
    font-weight: 700;
    min-width: 60px;
    text-align: right;
}

/* ── Summary ── */
.equip-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.summary-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    padding: .15rem 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}

.summary-slot  { width: 52px; font-family: 'Philosopher', serif; font-size: .62rem; color: var(--text-muted); text-align: right; flex-shrink:0; }
.summary-name  { flex: 1; color: var(--text-primary); font-family: 'EB Garamond', Georgia, serif; }

.enchant-badge {
    font-family: 'Philosopher', serif;
    font-size: .7rem;
    color: var(--gold);
    background: rgba(201,168,76,.12);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    padding: 0 .35rem;
}

.sa-badge {
    font-size: .68rem;
    color: var(--accent);
    background: rgba(106,125,216,.12);
    border: 1px solid rgba(106,125,216,.3);
    border-radius: 3px;
    padding: 0 .35rem;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   L2 GAME-STYLE WINDOW — используется на Build страницe
   ═══════════════════════════════════════════════════════════════════════════ */

.l2-window {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold-dim);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
}

.l2-window-title {
    font-family: 'Philosopher', serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    background: linear-gradient(90deg, rgba(200,164,66,.12), transparent);
    border-bottom: 1px solid var(--border);
    padding: .45rem .75rem;
}

.l2-section-title {
    font-family: 'Philosopher', serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-dim);
    padding: .3rem .75rem .15rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
}

/* ── Паппердолл ────────────────────────────────────────────────────────── */

.paperdoll-meta {
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.paperdoll-stage {
    display: grid;
    gap: .55rem;
    padding: 0 0 .75rem;
}

.paperdoll-preset-toolbar {
    display: grid;
    gap: .45rem;
    padding: .1rem 0 .35rem;
}

.paperdoll-preset-group {
    display: grid;
    gap: .35rem;
}

.paperdoll-preset-group label {
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.paperdoll-preset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .35rem;
    align-items: center;
}

.paperdoll-preset-row .preset-new {
    padding-inline: .7rem;
}

.paperdoll-preset-row .preset-tab {
    padding: .28rem .72rem;
    font-size: .66rem;
}

.equip-paperdoll {
    display: grid;
    width: fit-content;
    max-width: 100%;
    grid-template-columns: repeat(5, 36px);
    gap: 2px;
    grid-template-areas:
        ". . helmet . ."
        ". gloves chest boots ."
        ". cloak legs belt ."
        ". weapon . shield ."
        ". ear-left under ear-right ."
        ". necklace ring-left ring-right .";
    padding: .45rem;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(22,18,14,.96), rgba(11,9,7,.94));
    border: 1px solid #2a2420;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(0,0,0,.35);
}

.equip-empty {
    /* пустая ячейка паппердолла */
}

.equip-slot-box {
    appearance: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1a1612 0%, #0f0c0a 100%);
    border: 1px solid #2a2420;
    border-radius: 2px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 1px rgba(0,0,0,.45);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.equip-slot-box::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(0,0,0,.55);
    border-radius: 2px;
    pointer-events: none;
}
.equip-slot-box:hover {
    border-color: var(--gold-dim);
}
.equip-slot-box:focus-visible {
    outline: 1px solid rgba(200,164,66,.8);
    outline-offset: 1px;
}
.equip-slot-box.slot-active {
    border-color: var(--gold);
    box-shadow:
        inset 0 0 0 1px rgba(200,164,66,.45),
        0 0 0 1px rgba(200,164,66,.25),
        0 0 8px rgba(200,164,66,.18);
}
.equip-slot-box.slot-equipped {
    background: linear-gradient(180deg, #221c14 0%, #14110d 100%);
}
.equip-slot-box.slot-future {
    border-style: dashed;
    opacity: .55;
    background: linear-gradient(180deg, rgba(28,24,20,.95), rgba(18,15,13,.95));
}
.equip-slot-box.slot-locked {
    opacity: .45;
    cursor: not-allowed;
    border-style: dashed;
}
.equip-slot-box.slot-locked:hover {
    border-color: var(--border);
}

/* ── Грейд-тинт рамок (как цвет ауры предмета в L2) ────────────────────── */
.equip-slot-box.slot-grade-ng { border-color: rgba(190,190,190,.45); }
.equip-slot-box.slot-grade-d  { border-color: rgba(118,200,128,.55); box-shadow: inset 0 0 0 1px rgba(118,200,128,.18); }
.equip-slot-box.slot-grade-c  { border-color: rgba(120,170,255,.55); box-shadow: inset 0 0 0 1px rgba(120,170,255,.18); }
.equip-slot-box.slot-grade-b  { border-color: rgba(196,160,255,.55); box-shadow: inset 0 0 0 1px rgba(196,160,255,.18); }
.equip-slot-box.slot-grade-a  { border-color: rgba(232,120,120,.6);  box-shadow: inset 0 0 0 1px rgba(232,120,120,.2); }
.equip-slot-box.slot-grade-s  { border-color: rgba(240,180,73,.7);   box-shadow: inset 0 0 0 1px rgba(240,180,73,.25), 0 0 6px rgba(240,180,73,.18); }
.equip-slot-box.slot-grade-s.slot-active,
.equip-slot-box.slot-grade-a.slot-active,
.equip-slot-box.slot-grade-b.slot-active,
.equip-slot-box.slot-grade-c.slot-active,
.equip-slot-box.slot-grade-d.slot-active {
    border-color: var(--gold);
}

/* ── L2 game-icon art (real PNG from l2j.ru assets) ─────────────────────── */
.slot-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}
.equip-slot-box.slot-has-art {
    background: linear-gradient(180deg, #120f0c 0%, #080605 100%);
}
.equip-slot-box.slot-has-art::after {
    content: "";
    position: absolute;
    inset: 1px;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45) 100%),
        linear-gradient(180deg, rgba(200, 164, 66, .06), transparent 40%);
    pointer-events: none;
}

.build-buff-slot-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 1;
    filter: none;
    transition: filter .12s ease, opacity .12s ease, transform .12s ease;
}
.build-buff-slot:not(.is-selected) .build-buff-slot-icon {
    opacity: .62;
    filter: grayscale(.42) saturate(.72) brightness(.58);
}
.build-buff-slot:hover .build-buff-slot-icon {
    opacity: 1;
    filter: grayscale(.12) saturate(.9) brightness(.9);
}
.build-buff-slot.is-selected:hover .build-buff-slot-icon {
    filter: none;
}
.build-buff-slot-has-icon .build-buff-slot-code {
    display: none;
}

/* ── Иконка слота (mask-based, тинтуется через background-color) ──────── */
.slot-icon {
    width: 56%;
    height: 56%;
    background-color: rgba(170,150,110,.55);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color .15s, opacity .15s;
}
.slot-equipped .slot-icon { background-color: var(--gold-light); opacity: 1; }
.slot-active   .slot-icon { background-color: #f3e0b4; }
.slot-future   .slot-icon { opacity: .45; }
.slot-grade-ng .slot-icon { background-color: #d8d8d8; }
.slot-grade-d  .slot-icon { background-color: #94e8a3; }
.slot-grade-c  .slot-icon { background-color: #99c2ff; }
.slot-grade-b  .slot-icon { background-color: #d6b8ff; }
.slot-grade-a  .slot-icon { background-color: #ff9a9a; }
.slot-grade-s  .slot-icon { background-color: #ffd070; }

.slot-icon-weapon   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M4 20l4 0 0 -4M5 19l6 -6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M4 20l4 0 0 -4M5 19l6 -6'/></svg>"); }
.slot-icon-shield   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z'/></svg>"); }
.slot-icon-helmet   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13c0-5 3-8 7-8s7 3 7 8v5H5v-5zM5 13h14M9 18v3M15 18v3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13c0-5 3-8 7-8s7 3 7 8v5H5v-5zM5 13h14M9 18v3M15 18v3'/></svg>"); }
.slot-icon-chest    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l3-2h6l3 2v3l-2-1v12H8V8L6 9V6z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l3-2h6l3 2v3l-2-1v12H8V8L6 9V6z'/></svg>"); }
.slot-icon-legs     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h8v4l-1 12h-3l-0.5-9-0.5 9H8L7 8V4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h8v4l-1 12h-3l-0.5-9-0.5 9H8L7 8V4z'/></svg>"); }
.slot-icon-gloves   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h6v3h2v8H6v-7h2V4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4h6v3h2v8H6v-7h2V4z'/></svg>"); }
.slot-icon-boots    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h3v12l5 2v2H6v-2l3-1V4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h3v12l5 2v2H6v-2l3-1V4z'/></svg>"); }
.slot-icon-necklace { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5c0 6 4 11 7 11s7-5 7-11M12 16v3'/><circle cx='12' cy='20' r='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5c0 6 4 11 7 11s7-5 7-11M12 16v3'/><circle cx='12' cy='20' r='1.5'/></svg>"); }
.slot-icon-earring  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><circle cx='12' cy='15' r='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><circle cx='12' cy='15' r='1'/></svg>"); }
.slot-icon-ring     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='14' r='6'/><path d='M9 6h6l-2 4h-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='14' r='6'/><path d='M9 6h6l-2 4h-2z'/></svg>"); }
.slot-icon-under    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 5l5-1 5 1v3l-5-1-5 1V5zM7 9v11h10V9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 5l5-1 5 1v3l-5-1-5 1V5zM7 9v11h10V9'/></svg>"); }
.slot-icon-cloak    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4h12l3 16H3l3-16zM10 4l2 6 2-6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4h12l3 16H3l3-16zM10 4l2 6 2-6'/></svg>"); }
.slot-icon-belt     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='10' width='18' height='4' rx='1'/><rect x='10' y='9' width='4' height='6'/><circle cx='12' cy='12' r='.8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='10' width='18' height='4' rx='1'/><rect x='10' y='9' width='4' height='6'/><circle cx='12' cy='12' r='.8'/></svg>"); }
.slot-icon-unknown  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/></svg>"); }

/* ── Бейджи в углах слота ──────────────────────────────────────────────── */

.slot-enchant {
    position: absolute;
    top: 2px;
    right: 3px;
    font-family: 'Philosopher', serif;
    font-size: .56rem;
    font-weight: 700;
    color: #4fc3f7;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
    z-index: 2;
}

.slot-grade-badge {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-family: 'Cinzel', serif;
    font-size: .52rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--gold-light);
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    z-index: 2;
}
.slot-grade-ng .slot-grade-badge { color: #d8d8d8; }
.slot-grade-d  .slot-grade-badge { color: #94e8a3; }
.slot-grade-c  .slot-grade-badge { color: #99c2ff; }
.slot-grade-b  .slot-grade-badge { color: #d6b8ff; }
.slot-grade-a  .slot-grade-badge { color: #ff9a9a; }
.slot-grade-s  .slot-grade-badge { color: #ffd070; }

.slot-soon-badge {
    position: absolute;
    top: 2px;
    left: 3px;
    font-family: 'Philosopher', serif;
    font-size: .5rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .08em;
    line-height: 1;
    z-index: 2;
}
.slot-legacy-badge { color: #a8b7ff; }

/* ── MW бейдж на слоте ─────────────────────────────────────────────────── */
.slot-mw-badge {
    position: absolute;
    top: 2px;
    left: 3px;
    font-family: 'Philosopher', serif;
    font-size: .48rem;
    font-weight: 700;
    color: #7ab8ff;
    letter-spacing: .06em;
    line-height: 1;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    pointer-events: none;
}

/* ── Чекбокс MW в панели деталей слота ────────────────────────────────── */
.mw-toggle {
    display: flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    user-select: none;
    padding: 0 .25rem;
    align-self: flex-end;
    padding-bottom: .18rem;
}
.mw-toggle input[type="checkbox"] {
    accent-color: #7ab8ff;
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.mw-toggle span {
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    font-weight: 700;
    color: #7ab8ff;
    letter-spacing: .06em;
    line-height: 1;
}
.mw-toggle:has(input:checked) span {
    text-shadow: 0 0 6px rgba(122,184,255,.5);
}

.oly-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .55rem;
    padding: .24rem .45rem;
    border: 1px solid rgba(86, 70, 46, .72);
    background: rgba(18, 14, 10, .72);
    cursor: pointer;
    user-select: none;
}
.oly-mode-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--gold);
    cursor: pointer;
}
.oly-mode-toggle span {
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1;
}
.oly-mode-toggle:has(input:checked) {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(214, 178, 82, .18), inset 0 0 12px rgba(214, 178, 82, .08);
}

.build-setup-toggles {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .15rem 0 .55rem;
}
.build-setup-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 24px;
    padding: .18rem .42rem;
    border: 1px solid rgba(86, 70, 46, .56);
    background: rgba(18, 14, 10, .55);
    color: var(--text-secondary);
    font-size: .78rem;
    cursor: pointer;
    user-select: none;
}
.build-setup-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--gold);
    cursor: pointer;
}
.build-setup-toggle:has(input:checked) {
    border-color: rgba(214, 178, 82, .72);
    color: var(--gold-light);
    box-shadow: inset 0 0 12px rgba(214, 178, 82, .08);
}

.ls-compact-block {
    margin-top: .45rem;
    border: 1px solid rgba(86, 70, 46, .62);
    background: rgba(18, 14, 10, .52);
    padding: .42rem;
}
.ls-compact-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    color: var(--gold-light);
    font-size: .78rem;
    line-height: 1.25;
}
.ls-compact-summary > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ls-compact-actions {
    display: inline-flex;
    gap: .25rem;
    flex: 0 0 auto;
}
.ls-effect-list {
    display: grid;
    gap: .28rem;
    max-height: 138px;
    overflow-y: auto;
    padding-top: .4rem;
}
.ls-effect-row {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) minmax(72px, .72fr) 22px;
    gap: .28rem;
    align-items: center;
}
.ls-effect-select {
    min-width: 0;
    height: 26px;
    padding: .12rem .28rem;
    border: 1px solid rgba(86, 70, 46, .72);
    background: rgba(33, 26, 20, .92);
    color: var(--text-primary);
    font-size: .75rem;
}
.ls-effect-remove {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(200,164,66,.42);
    background: rgba(30,22,14,.88);
    color: var(--gold-dim);
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
}
.ls-add-empty {
    width: 100%;
    height: 26px;
    border: 1px dashed rgba(200,164,66,.45);
    background: rgba(18, 14, 10, .45);
    color: var(--gold-light);
    font-size: .76rem;
    cursor: pointer;
}

/* ── Обёртка ячейки паппердолла (нужна для кнопки снятия) ─────────────── */
.equip-slot-cell {
    position: relative;
}
.equip-slot-cell .equip-slot-box {
    width: 100%;
}

/* ── Кнопка снятия предмета (крестик) ──────────────────────────────────── */
.slot-unequip-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-family: sans-serif;
    font-weight: 700;
    background: rgba(30,22,14,.92);
    border: 1px solid rgba(200,164,66,.45);
    color: var(--gold-dim);
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}
.slot-unequip-btn:hover {
    background: #b33;
    border-color: #f66;
    color: #fff;
}

/* ── Фильтр-бар выбора предметов ───────────────────────────────────────── */
.paperdoll-filter-bar {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin-bottom: .35rem;
}
.filter-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .28rem;
    align-items: center;
}
.filter-clear-btn {
    appearance: none;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-family: sans-serif;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.filter-clear-btn:hover {
    border-color: var(--gold-dim);
    color: var(--gold-light);
}
.filter-result-count {
    font-family: 'Philosopher', serif;
    font-size: .62rem;
    color: var(--text-muted);
    letter-spacing: .04em;
}
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .22rem;
}
.filter-pill {
    appearance: none;
    padding: .1rem .38rem;
    font-family: 'Philosopher', serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.5;
}
.filter-pill:hover {
    border-color: var(--gold-dim);
    color: var(--gold-light);
}
.filter-pill.active {
    background: rgba(200,164,66,.15);
    border-color: var(--gold);
    color: var(--gold);
}
.filter-search {
    width: 100%;
    box-sizing: border-box;
    padding: .22rem .38rem;
    font-family: 'EB Garamond', serif;
    font-size: .72rem;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
.filter-search:focus {
    border-color: var(--gold-dim);
}
.filter-search::placeholder {
    color: var(--text-muted);
    opacity: .65;
}

/* ── Контролы выбранного слота ─────────────────────────────────────────── */

.equip-slot-controls {
    border-top: 1px solid var(--border);
    background: #1a1510;
    padding: .34rem .44rem .44rem;
}

.equip-slot-controls .form-group {
    gap: .16rem;
    min-width: 0;
}

.equip-slot-controls .form-group label {
    font-size: .58rem;
    line-height: 1;
}

.equip-slot-controls .slot-select,
.equip-slot-controls .sa-select {
    width: 100%;
    max-width: none;
    min-height: 26px;
    padding: .18rem .34rem;
    font-size: .72rem;
}

.equip-slot-controls .enchant-input {
    width: 44px;
    height: 26px;
    padding: .12rem .2rem;
}

.slot-ctrl-header {
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .4rem;
}

.slot-ctrl-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.slot-ctrl-row .slot-select { flex: 1; min-width: 0; }

.paperdoll-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
    margin-bottom: .36rem;
}

.paperdoll-detail-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.paperdoll-detail-copy strong {
    font-family: 'Philosopher', serif;
    font-size: .76rem;
    letter-spacing: .08em;
    color: var(--gold-light);
    text-transform: uppercase;
}

.paperdoll-detail-copy span {
    font-size: .78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.paperdoll-tag {
    flex-shrink: 0;
    padding: .13rem .38rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-family: 'Philosopher', serif;
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.paperdoll-tag.is-active {
    color: var(--win);
    border-color: rgba(76,175,122,.45);
    background: rgba(26,61,42,.65);
}

.paperdoll-tag.is-empty {
    color: var(--text-secondary);
    background: rgba(20,16,12,.35);
}

.paperdoll-tag.is-locked {
    color: #e3c7a0;
    border-color: rgba(180, 129, 72, .45);
    background: rgba(56, 34, 15, .66);
}

.paperdoll-tag.is-legacy {
    color: #a8b7ff;
    border-color: rgba(106,125,216,.45);
    background: rgba(36,41,58,.7);
}

.paperdoll-tag.is-penalty {
    color: #f4c6c6;
    border-color: rgba(197,92,92,.45);
    background: rgba(60,25,25,.62);
}

.paperdoll-tag.is-soon {
    color: var(--gold);
    border-color: rgba(200,164,66,.35);
    background: rgba(58,46,24,.55);
}

.paperdoll-inline-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
    align-items: end;
    margin-top: .34rem;
}

.paperdoll-inline-fields .form-group {
    margin: 0;
}

.paperdoll-inline-fields .form-group:only-child {
    grid-column: 1 / -1;
}

.paperdoll-help {
    margin-top: .34rem;
    padding: .34rem .45rem;
    border: 1px solid rgba(200,164,66,.18);
    border-radius: 4px;
    background: rgba(20,16,12,.42);
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 1.3;
}

.paperdoll-warning {
    border-color: rgba(197, 92, 92, .38);
    background: rgba(60, 25, 25, .46);
    color: #f4c6c6;
}

.paperdoll-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .22rem;
    margin: .32rem 0 0;
}

/* ── Character Status — правая панель (игровой стиль L2 HF) ───────────── */

.cs-window {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #1a1612 0%, #15110e 100%);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(200,164,66,.04);
    overflow: visible;
    position: sticky;
    top: 1rem;
    z-index: 30;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .cs-window { position: static; }
}
@media (max-height: 860px) {
    .cs-window { position: static; }
}
@media (max-width: 900px) {
    .paperdoll-inline-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 380px) {
    .paperdoll-inline-fields {
        grid-template-columns: 1fr;
    }
}

.cs-titlebar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    background: linear-gradient(180deg, #2a2218 0%, #1a1510 100%);
    border-bottom: 1px solid #3d3530;
    position: relative;
}
.cs-titlebar::before,
.cs-titlebar::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,164,66,.35), transparent);
}
.cs-titlebar::before { left: 6%; }
.cs-titlebar::after  { right: 6%; }
.cs-titlebar-text {
    font-family: 'Cinzel', 'Philosopher', serif;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.cs-head {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .55rem;
    align-items: center;
    padding: .5rem .6rem .55rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,.18);
}
.cs-head-portrait {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 25%, #3a2e18 0%, #1a1510 70%);
    border: 1px solid var(--gold-dim);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-light);
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    letter-spacing: 0;
}
.cs-head-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}
.cs-head-name {
    font-family: 'Cinzel', serif;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-head-sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    color: var(--text-secondary);
    letter-spacing: .04em;
}
.cs-head-field {
    display: inline-flex;
    gap: .3rem;
    align-items: baseline;
    min-width: 0;
}
.cs-head-field-key {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .62rem;
}
.cs-head-field-val {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-head-sep {
    width: 1px;
    height: 12px;
    background: var(--border);
    flex: 0 0 auto;
}

/* ── Секционный заголовок внутри окна ──────────────────────────────────── */

.cs-section-title {
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    padding: .55rem .7rem .25rem;
    border-top: 1px solid rgba(61,53,48,.55);
    background: linear-gradient(90deg, rgba(200,164,66,.05), transparent 60%);
}
.cs-window .cs-bars + .cs-section-title,
.cs-window .cs-head + .cs-bars { border-top: 0; }

/* ── HP / MP / CP бары ─────────────────────────────────────────────────── */

.cs-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: .55rem .7rem .55rem;
}

.cs-bar-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 8px;
}
.cs-bar-label {
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.cs-bar-track {
    position: relative;
    height: 14px;
    background: #0b0906;
    border: 1px solid #2a2420;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
    /* Игровая "сегментация" бара — вертикальные делители каждые 10% */
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent calc(10% - 1px),
            rgba(0,0,0,.45) calc(10% - 1px),
            rgba(0,0,0,.45) 10%);
}
.cs-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 1px 0 0 1px;
    transition: width .4s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.4);
}
.cs-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Philosopher', serif;
    font-size: .68rem;
    font-weight: 700;
    color: #f3e9d2;
    letter-spacing: .02em;
    text-shadow:
        0 0 2px rgba(0,0,0,.9),
        0 1px 2px rgba(0,0,0,.9),
        -1px 0 1px rgba(0,0,0,.7),
        1px 0 1px rgba(0,0,0,.7);
    pointer-events: none;
}

/* ── Combat stats — 2 колонки, плоский игровой стиль ────────────────────── */

.cs-combat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: .15rem .7rem .45rem;
    column-gap: 1.2rem;
    row-gap: 0;
}

.cs-stat-entry {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(61,53,48,.55);
}

.cs-stat-label {
    font-size: .76rem;
    color: var(--text-secondary);
    letter-spacing: .02em;
}
.cs-stat-val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Philosopher', serif;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* ── Base stats — 3 колонки, инлайн "NAME  VAL(+d)" ────────────────────── */

.cs-base-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px 10px;
    padding: .35rem .7rem .6rem;
}

.cs-base-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(61,53,48,.5);
}
.cs-base-name {
    font-family: 'Cinzel', serif;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.cs-base-line {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.cs-base-val {
    font-family: 'Philosopher', serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cs-dye-pos  { font-size: .7rem; font-weight: 700; color: #5ed08a; }
.cs-dye-neg  { font-size: .7rem; font-weight: 700; color: #e87070; }
.cs-dye-zero { display: none; }

/* Quick set fill row */
.set-fill-row {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin: .6rem 0 .4rem;
}
.set-fill-btn {
    padding: .35rem .8rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
}

/* Set bonus badge */
.set-bonus-badge {
    margin-top: .6rem;
    padding: .35rem .6rem;
    background: linear-gradient(135deg, rgba(196,164,65,.15), rgba(196,164,65,.06));
    border: 1px solid rgba(196,164,65,.4);
    border-radius: 4px;
    font-size: .78rem;
    color: var(--gold);
    text-align: center;
    letter-spacing: .03em;
}

/* ── Char config row — поверх l2-window ─────────────────────────────────── */

.l2-window .char-config-row {
    padding: .5rem .6rem .25rem;
}
.l2-window .dye-grid-build {
    padding: .1rem .6rem .6rem;
}

/* ── Scout ────────────────────────────────────────────────────── */

.scout-block {
    margin-bottom: 1.25rem;
    min-width: 0;
}

/* .scout-block-header replaced by .section-header h2 */

.scout-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(212,175,55,.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: scoutSpin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes scoutSpin {
    to { transform: rotate(360deg); }
}

.scout-block-input { margin-bottom: 0; }

/* ── Scout card (2-row layout) ─────────────────────────── */
.scout-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .55rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    min-width: 0;
}

/* Hero: glowing gold border */
.scout-card-hero {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(212,175,55,.35), inset 0 0 12px rgba(212,175,55,.06);
    animation: heroGlow 2.5s ease-in-out infinite;
}
.scout-card-candidate {
    border-left: 3px solid #c8a442;
    background: linear-gradient(135deg, rgba(200,164,66,.08) 0%, transparent 60%);
}
.scout-hero-badge {
    font-size: .72rem;
    background: rgba(200,164,66,.18);
    color: var(--gold);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    padding: .1rem .4rem;
    margin-left: auto;
    white-space: nowrap;
}
.scout-candidate-badge {
    font-size: .72rem;
    background: rgba(200,164,66,.10);
    color: var(--gold-light);
    border: 1px solid rgba(200,164,66,.25);
    border-radius: 3px;
    padding: .1rem .4rem;
    margin-left: auto;
    white-space: nowrap;
}

.icon-btn.cand-active { color: var(--gold); }

@keyframes heroGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(212,175,55,.35), inset 0 0 12px rgba(212,175,55,.06); }
    50%       { box-shadow: 0 0 16px rgba(212,175,55,.65), inset 0 0 16px rgba(212,175,55,.10); }
}

/* Row 1: nick left, class right */
.scout-card-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
}

.scout-card-name {
    font-weight: 700;
    color: var(--gold);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.scout-card-class {
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Row 2: badge left, stats right */
.scout-card-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.scout-card-stats {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    flex-shrink: 0;
}
.scout-stats-skeleton {
    gap: .35rem;
}

.scout-empty {
    margin-top: .6rem;
    font-size: .83rem;
    color: var(--text-muted);
}

/* Difficulty bar */
.diff-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: default;
}
.diff-seg {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255,255,255,.1);
    transition: background .2s;
}
.diff-seg-1.diff-seg-filled { background: #66bb6a; }
.diff-seg-2.diff-seg-filled { background: #ffca28; }
.diff-seg-3.diff-seg-filled { background: #ffa726; }
.diff-seg-4.diff-seg-filled { background: #ef5350; }

.diff-label {
    font-size: .75rem;
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}
.diff-easy   .diff-label { color: #66bb6a; }
.diff-medium .diff-label { color: #ffca28; }
.diff-hard   .diff-label { color: #ffa726; }
.diff-deadly .diff-label { color: #ef5350; }

.scout-player-badge {
    display: inline-block;
    font-size: .6rem; font-weight: 700; letter-spacing: .06em;
    color: var(--gold); border: 1px solid var(--gold);
    border-radius: 3px; padding: .1rem .35rem;
    flex-shrink: 0;
}
.scout-opp-badge {
    display: inline-block;
    font-size: .6rem; font-weight: 700; letter-spacing: .06em;
    color: var(--text-muted); border: 1px solid var(--border);
    border-radius: 3px; padding: .1rem .35rem;
    flex-shrink: 0;
}

/* ── Snapshot ─────────────────────────────────────────────────── */

/* Compact one-liner hint */
.snapshot-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    background: rgba(107,90,32,.12);
    border: 1px dashed rgba(107,90,32,.4);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    font-size: .82rem;
    color: var(--text-secondary);
}
.snapshot-hint-icon { font-size: 1rem; }
.snapshot-hint-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    border-radius: 4px;
    padding: .15rem .6rem;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s;
}
.snapshot-hint-btn:hover { background: rgba(196,164,65,.12); }

/* Form card */
.snapshot-form-card {
    background: linear-gradient(135deg, #1c1810, #252012);
    border: 1px solid #5a4d1a;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: .75rem;
}
.snapshot-form-title {
    font-family: 'Philosopher', serif;
    font-size: .85rem;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}
.snapshot-form-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .9rem;
    padding: 0 .2rem;
    line-height: 1;
}
.snapshot-form-close:hover { color: var(--text-primary); }
.snapshot-form-sub {
    font-size: .78rem;
    color: var(--text-secondary);
    margin-bottom: .6rem;
}
.snapshot-inputs {
    display: flex;
    gap: .5rem;
    margin-bottom: .65rem;
}
.snapshot-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.snapshot-field label {
    font-size: .72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.snap-inp {
    padding: .35rem .5rem !important;
    font-size: .85rem !important;
    text-align: center;
}
.snapshot-form-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.snap-save-btn {
    padding: .35rem 1rem !important;
    font-size: .82rem !important;
}
.cancel-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: .35rem .8rem;
    font-size: .82rem;
    cursor: pointer;
}
.cancel-btn:hover { border-color: var(--gold-dim); color: var(--text-primary); }

/* Uniform snapshot action buttons (same size) */
.snap-action-btn {
    border: none;
    border-radius: 4px;
    padding: .35rem .9rem;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.snap-action-save {
    background: var(--gold);
    color: #1a1510;
    font-weight: 600;
}
.snap-action-save:hover { background: var(--gold-bright); }
.snap-action-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.snap-action-cancel:hover { border-color: var(--gold-dim); color: var(--text-primary); }

/* Saved snapshot info strip */
.snapshot-info {
    font-size: .82rem;
    color: var(--text-secondary);
    padding: .4rem .75rem;
    background: rgba(107,90,32,.1);
    border: 1px solid rgba(107,90,32,.3);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.snapshot-info-icon { opacity: .8; }

/* ── Pagination ───────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
    padding: .4rem 0;
}

.page-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: var(--gold-dim); }
.page-btn:disabled { opacity: .3; cursor: default; }
.page-edge-btn { color: var(--gold-light); }

.page-info { font-size: .82rem; color: var(--text-muted); min-width: 4rem; text-align: center; }

/* ── Toast ─────────────────────────────────────────────────────── */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    z-index: 9000;
    pointer-events: none;
}

.toast {
    width: 240px;
    padding: .7rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    animation: toastIn .3s ease forwards, toastOut .4s ease 5.5s forwards;
}

.toast-win   { border-left: 3px solid #66bb6a; }
.toast-loss  { border-left: 3px solid #ef5350; }

.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.toast-char  { font-weight: 700; font-size: .85rem; color: var(--gold); }

.toast-body  { font-size: .82rem; color: var(--text-secondary); }
.toast-class { color: var(--text-muted); margin-left: .3rem; font-size: .78rem; }

.toast-points {
    font-size: .88rem;
    font-weight: 700;
    margin-top: .25rem;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateX(30px); }
}

/* ═══════════════════════════════════════════
   Nav Progress Bar
   ═══════════════════════════════════════════ */
.nav-progress-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), #fff8dc, var(--gold), transparent);
    background-size: 300% 100%;
    animation: navProgressSlide 0.9s ease-out forwards;
    z-index: 9999;
    pointer-events: none;
}

@keyframes navProgressSlide {
    0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
    70%  { opacity: 1; clip-path: inset(0 0% 0 0); }
    100% { opacity: 0; clip-path: inset(0 0% 0 0); }
}

/* ═══════════════════════════════════════════
   Skeleton Loading
   ═══════════════════════════════════════════ */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-bar {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.10) 50%,
        rgba(255,255,255,.04) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

/* Skeleton stat cards (6 cards on Home) */
.skeleton-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}
.skeleton-stat-card .skeleton-bar:nth-child(1) { width: 28px; height: 28px; border-radius: 50%; }
.skeleton-stat-card .skeleton-bar:nth-child(2) { width: 60px; height: 1.6rem; }
.skeleton-stat-card .skeleton-bar:nth-child(3) { width: 80px; height: .75rem; }

/* Skeleton table rows */
.skeleton-row td {
    padding: .6rem .75rem;
    vertical-align: middle;
}
.skeleton-row .skeleton-bar {
    height: .85rem;
    display: block;
}

/* Username link — truncate if too long */
.nav-user-link {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 1;
}

/* ── Feedback ─────────────────────────────────────────────────────────────── */
.feedback-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
    transition: transform .15s, box-shadow .15s;
}
.feedback-fab:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0,0,0,.5); }

.feedback-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.feedback-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.feedback-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.feedback-modal-title { font-family: 'Philosopher', serif; font-size: .95rem; color: var(--gold); }
.feedback-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 1rem; cursor: pointer; padding: 0 4px;
}
.feedback-close:hover { color: var(--text-primary); }

.feedback-type-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
.feedback-type-btn {
    flex: 1; padding: .5rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; font-size: .85rem;
    transition: all .15s;
}
.feedback-type-active-bug  { border-color: #e57373; background: rgba(229,115,115,.12); color: #e57373; font-weight: 600; }
.feedback-type-active-sug  { border-color: var(--gold); background: rgba(200,169,110,.12); color: var(--gold); font-weight: 600; }

.feedback-textarea {
    width: 100%; box-sizing: border-box;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-primary);
    padding: .6rem .75rem; font-size: .875rem; resize: vertical;
    margin-bottom: 1rem; font-family: inherit;
}
.feedback-textarea:focus { outline: none; border-color: var(--gold-dim); }

.feedback-thanks {
    text-align: center; padding: 2rem 1rem;
    color: var(--win); font-size: .95rem;
}
.feedback-thanks-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* Admin feedback tab */
.feedback-type-pill { padding: .2rem .55rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.pill-bug { background: rgba(229,115,115,.15); color: #e57373; }
.pill-sug { background: rgba(200,169,110,.12); color: var(--gold); }
.feedback-resolved td { opacity: .5; }

/* ── StatsCharts ───────────────────────────────────────────────────────── */
.charts-section { margin-top: 2.5rem; }

.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
}
.chart-card-title {
    font-family: 'Philosopher', serif;
    font-size: .78rem;
    color: var(--gold-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.recent-form-row {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.form-sq {
    width: 18px; height: 18px;
    border-radius: 3px;
    cursor: default;
    transition: transform .1s;
}
.form-sq:hover { transform: scale(1.25); }
.form-sq-win  { background: var(--win);  box-shadow: 0 0 4px var(--win-glow); }
.form-sq-loss { background: var(--loss); box-shadow: 0 0 4px var(--loss-glow); }
.form-sq-empty { background: var(--border); }

.charts-empty {
    color: var(--text-muted); font-size: .85rem;
    text-align: center; padding: 2rem 0;
}

/* ── ConfirmDialog ─────────────────────────────────────────────────────── */
.confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    animation: confirmFadeIn .12s ease;
}
.confirm-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    min-width: 300px; max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,.7);
    animation: confirmSlideUp .15s ease;
}
.confirm-title {
    font-family: 'Philosopher', serif;
    font-size: .95rem; color: var(--gold);
    margin-bottom: .75rem;
}
.confirm-body {
    font-size: .88rem; color: var(--text-muted);
    line-height: 1.5; margin-bottom: 1.25rem;
}
.confirm-body strong { color: var(--text); }
.confirm-actions {
    display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap;
}
.confirm-btn {
    padding: .4rem .9rem; border-radius: 5px;
    font-size: .82rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: opacity .15s;
}
.confirm-btn:hover { opacity: .85; }
.confirm-btn-secondary {
    background: var(--bg-input); border-color: var(--border);
    color: var(--text-muted);
}
.confirm-btn-danger {
    background: rgba(229,115,115,.15); border-color: #e57373;
    color: #e57373;
}
.confirm-btn-primary {
    background: rgba(200,169,110,.15); border-color: var(--gold-dim);
    color: var(--gold);
}
@keyframes confirmFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ═══════════════════════════ NOTIFICATION BELL ══════════════════════════ */
.notif-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.notif-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    padding: .25rem .35rem;
    color: var(--text-secondary);
    position: relative;
    transition: color .15s;
    line-height: 1;
}
.notif-btn:hover { color: var(--gold-light); }
.notif-badge {
    position: absolute;
    top: -2px; right: -4px;
    background: var(--gold);
    color: #1a1510;
    font-size: .6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: var(--font-body);
    line-height: 1;
}
.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
}
.notif-panel {
    position: fixed;
    top: 72px;   /* ниже sticky header (~72px высота) */
    right: 1.5rem;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    z-index: 200;
    overflow: hidden;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.notif-panel-title {
    font-family: var(--font-heading);
    font-size: .85rem;
    color: var(--gold-light);
    letter-spacing: .05em;
}
.notif-mark-all {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    color: var(--text-secondary);
    padding: .1rem .4rem;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.notif-mark-all:hover { color: var(--gold); background: rgba(200,169,110,.1); }
.notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
}
.notif-list {
    max-height: 360px;
    overflow-y: auto;
}
.notif-item {
    padding: .65rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
    transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,.06); }
.notif-unread { background: rgba(200,169,110,.15); }
.notif-unread:hover { background: rgba(200,169,110,.22); }
.notif-item-body {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .3rem;
}
.notif-icon { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
.notif-text  { font-size: .82rem; color: var(--text-primary); line-height: 1.4; }
.notif-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.45rem;
}
.notif-date { font-size: .72rem; color: var(--text-muted); }
.notif-read-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: .7rem;
    padding: 1px 6px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.notif-read-btn:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Buff/Toggle slot wrapper for level/enchant settings */
.buff-slot-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.skill-settings-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(0,0,0,0.6);
    color: var(--gold-light);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}
.buff-slot-wrap:hover .skill-settings-btn,
.buff-slot-wrap.is-selected:hover .skill-settings-btn {
    opacity: 1;
}

.skill-level-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 8px;
    color: var(--gold-light);
    background: rgba(0,0,0,0.65);
    padding: 0 2px;
    border-radius: 2px;
    pointer-events: none;
}

.skill-enchant-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 14px;
    font-size: 8px;
    color: #bde6ff;
    background: rgba(4, 18, 28, 0.78);
    border: 1px solid rgba(91, 177, 226, 0.5);
    padding: 0 2px;
    border-radius: 2px;
    line-height: 11px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

.skill-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
}

.skill-settings-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    background:
        linear-gradient(180deg, #19130e 0%, #0f0a07 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 150px;
    max-width: 230px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.72);
}

.skill-settings-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.skill-settings-section + .skill-settings-section {
    padding-top: 5px;
    border-top: 1px solid rgba(197,160,90,0.22);
}

.skill-settings-label {
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

.skill-settings-options {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.skill-lv-btn {
    padding: 3px 6px;
    font-size: 10px;
    border-radius: 3px;
    border: 1px solid var(--gold-dim);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.skill-lv-btn:hover { background: rgba(197,160,90,0.15); color: var(--gold-light); }
.skill-lv-btn.active { background: rgba(197,160,90,0.3); color: var(--gold-light); border-color: var(--gold); }

.skill-lv-btn:disabled {
    opacity: .35;
    cursor: default;
}

.skill-enchant-stepper {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.skill-enchant-stepper span {
    color: var(--gold-light);
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.skill-enchant-range {
    width: 100%;
    accent-color: var(--gold);
}

.skill-settings-note {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.25;
}

/* Stat breakdown tooltip */
.cs-stat-has-tooltip { position: relative; cursor: help; }
.cs-stat-has-tooltip:hover .cs-stat-tooltip { opacity: 1; pointer-events: auto; transform: translateY(0); }

.cs-stat-tooltip {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    min-width: 240px;
    max-width: 320px;
    background: var(--panel-bg, #1a1410);
    border: 1px solid var(--gold-dim, #6a5a3a);
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    font-size: 0.78rem;
    color: var(--text-secondary, #c4b89a);
}

.cs-stat-tooltip-title {
    font-family: 'Philosopher', serif;
    font-size: 0.82rem;
    color: var(--gold-light, #d4b878);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(106, 90, 58, 0.5);
}

.cs-stat-tooltip-section {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(106, 90, 58, 0.3);
}
.cs-stat-tooltip-section:last-of-type { border-bottom: none; }

.cs-stat-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.4;
}
.cs-stat-tooltip-key { color: #c4b89a; }
.cs-stat-tooltip-val { color: var(--text-primary, #e6d8b8); font-variant-numeric: tabular-nums; }

.cs-stat-tooltip-subtotal {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px dotted rgba(106, 90, 58, 0.4);
    font-style: italic;
}

.cs-stat-tooltip-total {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--gold-dim, #6a5a3a);
    font-weight: bold;
}
.cs-stat-tooltip-total .cs-stat-tooltip-val { color: var(--gold-light, #d4b878); }