:root {
    --bg-dark: #100b0d;
    --bg-surface: #171113;
    --bg-panel: #1b1417;
    --bg-card: #21191c;
    --bg-hover: #2d2226;
    --bg-selected: #3b181d;
    --border: #39292e;
    --border-light: #50363d;
    --text-primary: #f0f3f5;
    --text-secondary: #a0a8b1;
    --text-muted: #67717c;
    --accent: #db2b39;
    --accent-hover: #f0525f;
    --accent-dark: #a91f2b;
    --success: #61d59a;
    --error: #e87878;
    --btn-primary: #db2b39;
    --btn-primary-h: #ed3d4b;
    --btn-danger: #6e3035;
    --btn-danger-h: #8e3e45;
    --tree-row-alt: #191214;
    --statusbar: #110c0e;
    --font-sans: 'Manrope', system-ui, sans-serif;
    --font-heading: 'Manrope', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
input,select,textarea,button { accent-color:var(--accent); }

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

body {
    font-family: var(--font-sans);
    background:
        radial-gradient(circle at 22% -15%, rgba(219,43,57,.14), transparent 34%),
        linear-gradient(180deg, #120d0f, var(--bg-dark));
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.header {
    background: rgba(13,17,22,.96);
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0,0,0,.28);
    z-index: 10;
}

.title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-area .icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent-dark);
    border-radius: 4px;
    background: rgba(219,43,57,.09);
    font-size: 1.1rem;
    color: var(--accent);
}

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 7px rgba(219, 43, 57, .28));
}

.title-area h1 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
}

.title-area .subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.lang-selector select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* Toolbar */
.toolbar {
    background: linear-gradient(180deg, #1d1619, #171113);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

.btn {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover:not(:disabled) {
    background-color: var(--bg-hover);
}

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

.btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--border-light);
}

.btn-primary {
    background-color: var(--btn-primary);
    border-color: #e34855;
    color: #061014;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--btn-primary-h);
    box-shadow: 0 0 12px rgba(219,43,57,.34);
}

.btn-danger {
    background-color: var(--btn-danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--btn-danger-h);
}

.separator {
    width: 2px;
    height: 24px;
    background-color: var(--border-light);
}

/* Status Bar */
.status-bar {
    background-color: var(--statusbar);
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
}

.status-dot.success {
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.status-dot.error {
    background-color: var(--error);
    box-shadow: 0 0 8px var(--error);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.editor-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Tabs */
.tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    background: var(--bg-panel);
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 17px 20px;
    background: linear-gradient(110deg, #21191c, #181214);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border-right: 1px solid var(--border);
    border-radius: 0;
    transition: all 0.2s;
    user-select: none;
}

.tab:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.tab.active {
    position: relative;
    background: linear-gradient(110deg, #371a1f, #211418);
    color: var(--accent);
}
.tab.active::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--accent); }

/* Tab Toolbar */
.tab-toolbar {
    background-color: var(--bg-panel);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hint {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.search-input {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    font-family: var(--font-mono);
    transition: border-color 0.2s;
}

.search-input:focus {
    border-color: var(--accent);
}

.view-switcher { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.view-button { display:grid; place-items:center; width:30px; height:28px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--text-muted); cursor:pointer; font-size:1rem; line-height:1; }
.view-button:hover { color:var(--text-primary); background:var(--bg-hover); }
.view-button.active { color:var(--accent); background:rgba(219,43,57,.14); box-shadow:inset 0 0 0 1px rgba(219,43,57,.42); }

/* Table Area */
.table-container {
    flex: 1;
    overflow: auto;
    background-color: var(--bg-surface);
}

.record-grid { display: grid; grid-template-columns: repeat(5, minmax(250px, 1fr)); gap: 16px; padding: 20px; }
.list-table-wrap { min-width:100%; padding:14px 18px 20px; overflow:auto; }
.entry-list-table { width:100%; min-width:1050px; border-collapse:separate; border-spacing:0; color:var(--text-secondary); font-size:.76rem; }
.entry-list-table.player-list-table { min-width:1780px; }
.entry-list-table th { position:sticky; top:0; z-index:2; height:38px; padding:0 12px; border-block:1px solid var(--border); background:#191a1e; color:#9297a2; font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.09em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.entry-list-table td { height:55px; max-width:230px; padding:7px 12px; border-bottom:1px solid #292a2f; background:rgba(24,25,29,.88); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry-list-table tbody tr:nth-child(even) td { background:rgba(28,29,33,.9); }
.entry-list-table tbody tr { cursor:pointer; }
.entry-list-table tbody tr:hover td { background:#24252a; }
.entry-list-table tbody tr.selected td { background:rgba(219,43,57,.11); border-bottom-color:rgba(219,43,57,.5); }
.entry-list-table tbody tr.selected td:first-child { box-shadow:inset 3px 0 var(--accent); }
.list-player-cell { display:flex; align-items:center; gap:10px; min-width:120px; color:#40a4b9; }
.list-player-cell strong { overflow:hidden; text-overflow:ellipsis; }
.list-player-thumb { display:grid; place-items:center; flex:0 0 34px; width:34px; height:42px; overflow:hidden; border:1px solid var(--border); border-radius:3px; background:#24252a; }
.list-player-thumb img { width:100%; height:100%; object-fit:contain; }
.list-country-cell,.list-team-cell { display:flex; align-items:center; gap:7px; }
.list-country-cell img { width:22px; height:15px; object-fit:cover; border:1px solid rgba(255,255,255,.13); }
.list-team-cell .card-team-logo { position:static; display:grid; flex:0 0 28px; width:28px; height:28px; padding:0; border:0; background:transparent; transform:none; }
.list-team-cell .card-team-logo img { width:100%; height:100%; object-fit:contain; }
.list-stat { display:grid; grid-template-columns:55px 24px; align-items:center; gap:7px; }
.list-stat-track { display:block; height:4px; overflow:hidden; border-radius:3px; background:#303238; }
.list-stat-track i { display:block; height:100%; border-radius:inherit; background:#599a6d; }
.list-stat b { color:#8f96a1; font-family:var(--font-mono); font-size:.65rem; font-weight:500; }
.list-role-tag { display:inline-block; max-width:125px; margin-right:4px; padding:4px 8px; overflow:hidden; border:1px solid rgba(38,151,173,.38); border-radius:12px; color:#36a2b7; text-overflow:ellipsis; vertical-align:middle; }
.list-rating { display:inline-block; min-width:34px; padding:4px 6px; border-radius:3px; background:rgba(38,151,173,.13); color:#39a3b8; font-family:var(--font-mono); text-align:center; }
.list-money { color:#d0d3d7; font-family:var(--font-mono); font-weight:700; }
.list-edit-button { padding:6px 10px; border:1px solid var(--border-light); border-radius:3px; background:#24252a; color:var(--text-primary); cursor:pointer; font-size:.68rem; }
.list-edit-button:hover { border-color:var(--accent); color:var(--accent-hover); }
.record-card { position: relative; min-height: 190px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.record-card { border-radius: 3px; background: linear-gradient(145deg, #2a2023, #181214 70%); overflow: hidden; }
.record-card::before { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; top: -70px; border: 1px solid rgba(255,255,255,.04); border-radius: 50%; pointer-events: none; }
.record-card:hover { transform: translateY(-2px); border-color: var(--border-light); }
.record-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(219,43,57,.18); }
.card-header { display: flex; justify-content: space-between; gap: 10px; padding-right: 46px; }
.card-header h3 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-number { color: var(--text-muted); font-size: .75rem; }
.record-card dl { display: grid; gap: 9px; margin-top: 18px; }
.card-media { display: grid; place-items: center; height: 116px; margin: -18px -18px 16px; overflow: hidden; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text-muted); font-size: .75rem; }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.record-card dt { color: var(--text-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.record-card dd { margin-top: 2px; color: var(--text-secondary); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-edit { position: absolute; top: 12px; right: 12px; padding: 6px 9px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-hover); color: var(--accent); cursor: pointer; font-weight: 700; }
.card-edit:hover { background: var(--accent-dark); color: white; }

/* Player profile cards */
.player-card { min-height: 430px; padding: 0; border-color: rgba(205,214,226,.55); border-radius: 14px; background: #181714; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.player-card::before { display: none; }
.player-card > * { position: absolute; z-index: 2; }
.player-card-media { inset: 0 0 auto; z-index: 0; display: grid; place-items: center; height: 238px; overflow: hidden; background: radial-gradient(circle at 70% 25%, #777063, #282722 70%); color: rgba(255,255,255,.45); }
.player-card:not(.entity-card) .player-card-media,.entity-card.entity-staff .player-card-media,.entity-card.entity-staffs .player-card-media { background-image:linear-gradient(rgba(12,14,17,.26),rgba(12,14,17,.48)),url("../assets/images/card-background-blurred.png"); background-size:cover; background-position:center; }
.player-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: 72% top; filter: saturate(.9) contrast(1.05); }
.player-card-media img[src$="placeholder.png"] { object-fit:contain; object-position:center 8%; filter:saturate(.82) contrast(1.12); }
.player-card-shade { inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,15,14,.65), transparent 58%), linear-gradient(0deg, #151410 0, rgba(21,20,16,.8) 38%, transparent 68%); pointer-events: none; }
.player-rank { top: 13px; left: 13px; padding: 8px 14px; border-radius: 7px; background: linear-gradient(#d8dee7, #aab4c1); color: #15191f; font-size: .92rem; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.player-rating { top: 13px; right: 13px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 9px; background: rgba(45,47,50,.55); color: white; font-size: 1.1rem; font-weight: 700; backdrop-filter: blur(5px); }
.card-team-logo { top:58px; right:13px; z-index:3; display:grid; place-items:center; width:43px; height:43px; overflow:hidden; border:1px solid rgba(255,255,255,.38); border-radius:8px; background:rgba(18,18,18,.7); box-shadow:0 4px 12px rgba(0,0,0,.3); backdrop-filter:blur(5px); }
.card-team-logo.compact { top:13px; }
.card-team-logo img { width:82%; height:82%; object-fit:contain; }
.card-team-logo span { color:rgba(255,255,255,.6); font-size:.9rem; }
.player-rating::first-letter { color: #f6d75b; }
.player-identity { top: 116px; left: 22px; right: 18px; text-shadow: 0 2px 5px rgba(0,0,0,.8); }
.player-identity h3 { max-width: 72%; color: white; font-size: 1.55rem; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-identity p { margin-top: 6px; color: rgba(255,255,255,.68); font-size: .76rem; }
.player-identity .player-affiliation { display:flex; align-items:center; gap:6px; color:white; font-weight:650; }
.player-country-flag { width:20px; height:14px; flex:none; object-fit:contain; }
.player-open { top: 112px; right: 17px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 7px; background: rgba(18,18,18,.78); color: white; cursor: pointer; backdrop-filter: blur(5px); }
.player-open svg { width: 23px; height: 23px; fill: currentColor; }
.player-open:hover { background: var(--accent-dark); }
.player-stats-panel { top: 210px; left: 20px; right: 20px; display: grid; grid-template-columns: 1fr 74px; align-items: center; gap: 9px; min-height: 137px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(17,15,13,.83); box-shadow: 0 8px 22px rgba(0,0,0,.2); backdrop-filter: blur(6px); }
.player-stat-list { display: grid; gap: 7px; }
.player-stat { display: grid; grid-template-columns: 40px minmax(45px,1fr) 22px; align-items: center; gap: 7px; font-size: .67rem; }
.player-stat b { color: #d1d1d1; font-size: .61rem; }
.player-stat > span { height: 6px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.16); }
.player-stat i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f1b374, #e5e7e8); }
.player-stat strong { color: #e8e8e8; text-align: right; }
.player-radar { width: 74px; height: 74px; }
.radar-grid { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.38); stroke-width: 1; }
.radar-value { fill: rgba(84,196,151,.42); stroke: #8bd9b8; stroke-width: 1.5; }
.player-card-footer { left: 20px; right: 20px; bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.1); color: var(--text-secondary); font-size: .75rem; }
.player-card-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card-footer strong { flex: none; color: #ddd; }
.entity-card .player-stats-panel { grid-template-columns: 1fr; align-content: center; gap: 0; }
.entity-card-detail { display: grid; grid-template-columns: minmax(80px,.8fr) minmax(0,1.2fr); align-items: center; gap: 12px; min-height: 23px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .68rem; }
.entity-card-detail:last-child { border-bottom: 0; }
.entity-card-detail span { overflow: hidden; color: #8e949c; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-detail strong { overflow: hidden; color: #e0e3e7; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.entity-card-empty { color: #777f89; font-size: .72rem; text-align: center; }
.search-no-results { grid-column:1/-1; display:grid; place-items:center; min-height:220px; border:1px dashed #34383f; color:#7f8792; font-size:.86rem; }
.filter-modal-backdrop { z-index:140; padding:24px; }
.filter-modal { display:flex; flex-direction:column; width:min(1320px,calc(100vw - 40px)); max-height:calc(100vh - 48px); overflow:hidden; border:1px solid #353940; border-top:2px solid var(--accent); background:#15171a; box-shadow:0 20px 80px rgba(0,0,0,.75); }
.filter-modal .modal-header { flex:none; min-height:78px; padding:19px 28px; background:#15171a; }
.filter-modal .modal-header h2 { color:var(--accent-hover); font-size:1.2rem; letter-spacing:.1em; }
.filter-modal-content { flex:1; overflow:auto; padding:24px 28px 30px; }
.filter-group { padding:0 0 23px; border-bottom:1px solid #292d33; }
.filter-group + .filter-group { padding-top:22px; }
.filter-group h3 { margin-bottom:13px; color:var(--accent-hover); font:.7rem var(--font-mono); letter-spacing:.15em; text-transform:uppercase; }
.filter-grid { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:14px 16px; }
.filter-control { display:grid; gap:7px; min-width:0; }
.filter-control > span { overflow:hidden; color:#939ba7; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.filter-control select,.filter-control input { width:100%; height:38px; padding:0 11px; border:1px solid #30343b; border-radius:3px; outline:none; background:#22252a; color:#e7e9ed; font:.76rem var(--font-sans); }
.filter-control select:focus,.filter-control input:focus { border-color:var(--accent); }
.filter-segmented { height:38px; }
.filter-segmented button { font-size:.72rem; }
.filter-searchable-picker > input[type="search"] { height:38px; }
.filter-searchable-picker .searchable-picker-menu { z-index:50; }
.filter-range { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.filter-range input { min-width:0; padding-inline:8px; }
.attribute-filter-range { display:block; }
.dual-range-filter { display:grid; grid-template-columns:34px minmax(90px,1fr) 34px; align-items:center; gap:8px; min-height:32px; }
.dual-range-filter output { display:grid; place-items:center; height:28px; border:1px solid #30343b; border-radius:2px; background:#22252a; color:#8d96a2; font:.68rem var(--font-mono); }
.dual-range-filter.active output { color:var(--accent-hover); }
.dual-range-track { --range-min:0%; --range-max:100%; position:relative; height:18px; background:linear-gradient(to right,#59606a 0 var(--range-min),var(--accent) var(--range-min) var(--range-max),#59606a var(--range-max) 100%) center/100% 4px no-repeat; }
.dual-range-track input[type="range"] { position:absolute; inset:0; width:100%; height:18px; margin:0; padding:0; border:0; background:transparent; appearance:none; pointer-events:none; }
.dual-range-track input[type="range"]::-webkit-slider-runnable-track { height:4px; background:transparent; }
.dual-range-track input[type="range"]::-webkit-slider-thumb { width:17px; height:17px; margin-top:-6px; border:2px solid #15171a; border-radius:50%; background:var(--accent); appearance:none; pointer-events:auto; cursor:pointer; }
.dual-range-track input[type="range"]::-moz-range-track { height:4px; background:transparent; }
.dual-range-track input[type="range"]::-moz-range-thumb { width:15px; height:15px; border:2px solid #15171a; border-radius:50%; background:var(--accent); pointer-events:auto; cursor:pointer; }
.filter-modal-actions { flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 28px; border-top:1px solid #2c3036; background:#121417; }
.filter-modal-actions > div { display:flex; gap:10px; }
.filter-empty { display:grid; place-items:center; min-height:180px; color:#7f8792; }
#btn-filter.active { border-color:var(--accent); color:var(--accent-hover); }
#btn-compare[hidden] { display:none; }
@media(max-width:1050px){.filter-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}}
@media(max-width:650px){.filter-modal-backdrop{padding:8px}.filter-modal{width:100%;max-height:calc(100vh - 16px)}.filter-grid{grid-template-columns:1fr 1fr}.filter-modal-content{padding-inline:16px}.filter-modal-actions{padding-inline:16px}}
.compare-modal-backdrop { z-index:145; padding:20px; }
.compare-modal { display:flex; flex-direction:column; width:min(1120px,calc(100vw - 36px)); max-height:calc(100vh - 40px); overflow:hidden; border:1px solid #3a3e46; border-top:2px solid var(--accent); background:#111318; box-shadow:0 24px 90px rgba(0,0,0,.8); }
.compare-modal .modal-header { flex:none; min-height:78px; padding:18px 28px; background:#15171b; }
.compare-modal .modal-header h2 { color:var(--accent-hover); font-size:1.25rem; letter-spacing:.11em; }
.compare-selectors { flex:none; display:grid; grid-template-columns:1fr 52px 1fr; align-items:end; gap:18px; padding:18px 28px; border-bottom:1px solid #2c3037; background:#171a20; }
.compare-selectors label { display:grid; gap:7px; color:#8d96a2; font:.65rem var(--font-mono); letter-spacing:.12em; }
.compare-selectors select,.compare-selectors input { width:100%; height:43px; padding:0 12px; border:1px solid #363b45; border-radius:4px; outline:none; background:#222630; color:#f2f3f6; font:.86rem var(--font-sans); }
.compare-selectors input { height:35px; font-size:.75rem; }
.compare-selectors select:focus,.compare-selectors input:focus { border-color:var(--accent); }
.compare-versus { display:grid; place-items:center; height:43px; color:var(--accent-hover); font:800 .75rem var(--font-mono); }
.compare-content { flex:1; overflow:auto; padding:20px 28px 30px; }
.compare-profiles { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.compare-profile { display:grid; grid-template-columns:150px 1fr; gap:18px; min-height:190px; padding:14px; border:1px solid #333843; border-radius:7px; background:linear-gradient(145deg,#242833,#181b21); }
.compare-profile-right { direction:rtl; text-align:right; }
.compare-profile-right > * { direction:ltr; }
.compare-portrait { display:grid; place-items:center; width:150px; height:180px; overflow:hidden; border-radius:5px; background-image:linear-gradient(rgba(12,14,17,.25),rgba(12,14,17,.45)),url("../assets/images/card-background-blurred.png"); background-size:cover; background-position:center; color:#727a85; }
.compare-portrait img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.compare-profile h3 { margin:16px 0 5px; color:#fff; font-size:1.45rem; }
.compare-profile p { margin:6px 0; color:#9aa3ae; font-size:.75rem; }
.compare-profile p img { width:22px; height:15px; margin-right:7px; object-fit:contain; vertical-align:middle; }
.compare-roles { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.compare-profile-right .compare-roles { justify-content:flex-end; }
.compare-roles span { padding:4px 9px; border:1px solid rgba(219,43,57,.45); border-radius:15px; color:var(--accent-hover); font-size:.68rem; }
.compare-analysis { display:grid; grid-template-columns:minmax(390px,.9fr) minmax(420px,1.1fr); gap:24px; margin-top:20px; padding:20px; border:1px solid #30343d; border-radius:7px; background:#17191e; }
.compare-radar-wrap { position:relative; min-height:360px; }
.compare-radar { width:100%; height:340px; overflow:visible; }
.compare-radar-grid { fill:none; stroke:#444a56; stroke-width:1; }
.compare-radar-left { fill:rgba(219,43,57,.22); stroke:#f0525f; stroke-width:2; }
.compare-radar-right { fill:rgba(73,159,211,.18); stroke:#55aee0; stroke-width:2; }
.compare-radar-wrap > span { position:absolute; color:#aab2bd; font:.6rem var(--font-mono); text-transform:uppercase; transform:translate(-50%,-50%); }
.compare-attributes { align-self:center; display:grid; gap:7px; }
.compare-attribute-row { display:grid; grid-template-columns:54px 1fr 54px; align-items:center; min-height:32px; border-bottom:1px solid #272b32; }
.compare-attribute-row span { color:#88919d; font:.66rem var(--font-mono); letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.compare-attribute-row strong { display:grid; place-items:center; height:25px; border-radius:3px; background:#242830; color:#9aa2ac; font:.75rem var(--font-mono); }
.compare-attribute-row strong.winner { background:rgba(219,43,57,.18); color:var(--accent-hover); }
.compare-actions { flex:none; display:flex; justify-content:flex-end; padding:15px 28px; border-top:1px solid #2d3138; background:#14161a; }
@media(max-width:800px){.compare-profiles{grid-template-columns:1fr}.compare-analysis{grid-template-columns:1fr}.compare-profile{grid-template-columns:110px 1fr}.compare-portrait{width:110px;height:150px}.compare-content{padding-inline:14px}.compare-selectors{padding-inline:14px}}

.pagination { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--border); background: var(--bg-panel); }
.page-summary { color: var(--text-secondary); font-size: .85rem; }
.page-controls { display: flex; align-items: center; gap: 5px; }
.page-button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.page-button:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.page-button.active { border-color: var(--accent); background: var(--accent-dark); color: white; }
.page-button:disabled { opacity: .4; cursor: not-allowed; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; background: rgba(5,7,12,.78); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.edit-modal { width: min(1040px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border: 1px solid var(--border-light); border-top: 2px solid var(--accent-dark); border-radius: 12px; background: var(--bg-panel); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.edit-modal { border-radius: 3px; background: #1b1417; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.modal-header h2 { margin-top: 3px; font-family: var(--font-heading); }
.icon-button { border: 0; background: transparent; color: var(--text-secondary); font-size: 2rem; cursor: pointer; line-height: 1; }
.editor-nav { display: flex; gap: 6px; margin-top: 24px; border-bottom: 1px solid var(--border); }
.editor-nav[hidden] { display: none; }
.editor-nav-button { min-width: 110px; padding: 13px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; }
.editor-nav-button:hover { color: var(--text-primary); }
.editor-nav-button.active { border-bottom-color: var(--accent); color: var(--accent); }
.stats-nav { display: flex; gap: 8px; padding: 14px 0 0; }
.stats-nav[hidden] { display: none; }
.stats-nav-button { padding: 8px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); font: inherit; cursor: pointer; }
.stats-nav-button.active { border-color: var(--accent-dark); background: rgba(219,43,57,.14); color: var(--accent); }
.asset-editor { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 14px; border: 1px solid var(--border); background: rgba(0,0,0,.12); }
.asset-editor[hidden] { display: none; }
.asset-preview { display: grid; place-items: center; flex: 0 0 130px; height: 110px; overflow: hidden; border: 1px solid var(--border-light); background: var(--bg-dark); color: var(--text-muted); font-size: .75rem; }
.asset-preview img { width: 100%; height: 100%; object-fit: contain; }
.asset-editor-copy h3 { font-family: var(--font-heading); }
.asset-editor-copy p { margin: 5px 0 12px; color: var(--text-secondary); font-size: .8rem; }
.asset-actions { display: flex; gap: 8px; }
.editor-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 24px 0 18px; }
.editor-page-heading h3 { font-family: var(--font-heading); font-size: 1.05rem; }
.editor-page-heading p { margin-top: 5px; color: var(--text-secondary); font-size: .82rem; }
#editor-field-count { color: var(--text-muted); font-size: .78rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: grid; gap: 7px; color: var(--text-secondary); font-size: .78rem; font-weight: 600; }
.form-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 7px; outline: none; background: var(--bg-card); color: var(--text-primary); font-family: var(--font-sans); font-size: .9rem; }
.form-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(219,43,57,.11); }
.editor-page-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--border-light); border-radius: 9px; color: var(--text-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }

/* EMDB-inspired player editor */
.modal-backdrop.player-editor {
    align-items: stretch;
    justify-items: end;
    padding: 0;
    background: rgba(4, 3, 4, .82);
}
.player-editor .edit-modal {
    width: min(1080px, calc(100vw - 48px));
    max-height: 100vh;
    min-height: 100vh;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: #151315;
    box-shadow: -28px 0 80px rgba(0, 0, 0, .55);
}
.player-editor .modal-header {
    min-height: 82px;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border);
}
.player-editor .modal-header .eyebrow {
    display: none;
}
.player-editor .modal-header h2 {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .09em;
}
.player-editor .icon-button {
    width: 42px;
    height: 42px;
    color: #9da3aa;
    font-size: 2rem;
    font-weight: 200;
}
.player-editor #edit-form {
    display: flex;
    min-height: calc(100vh - 82px);
    flex-direction: column;
}
.player-editor .editor-nav {
    gap: 0;
    margin: 0 24px;
    padding-top: 22px;
}
.player-editor .editor-nav-button {
    min-width: 122px;
    padding: 15px 20px 14px;
    color: #aeb2b9;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.player-editor .editor-nav-button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.player-editor .stats-nav {
    gap: 0;
    margin: 0 30px;
    padding: 18px 0 0;
}
.player-editor .stats-nav-button {
    padding: 9px 18px;
    border-radius: 0;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.player-editor .editor-page-heading {
    align-items: center;
    margin: 24px 30px 15px;
}
.player-editor .editor-page-heading h3 {
    color: #d8dadd;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.player-editor .editor-page-heading p {
    color: #686e76;
    font-size: .72rem;
}
.player-editor #editor-field-count {
    color: #626870;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.player-editor .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px 20px;
    padding: 0 30px 30px;
}
.player-editor .form-field {
    gap: 8px;
    color: #aeb2b9;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.player-editor .form-field input {
    height: 46px;
    padding: 0 13px;
    border-color: #2f3035;
    border-radius: 2px;
    background: #232429;
    color: #f0f0f1;
    font-size: .92rem;
    letter-spacing: 0;
    text-transform: none;
}
.player-editor .form-field input:hover {
    border-color: #47484e;
}
.player-editor .form-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(219,43,57,.12);
}
.player-editor .editor-page-empty {
    border-radius: 2px;
    background: #191719;
}
.player-editor .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding: 18px 24px;
    background: #151315;
}
.player-editor .modal-actions .btn {
    min-width: 102px;
    justify-content: center;
    border-radius: 3px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .player-editor .edit-modal { width: 100vw; }
    .player-editor .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .player-editor .form-grid { grid-template-columns: 1fr; }
    .player-editor .editor-nav-button { min-width: 0; flex: 1; padding-inline: 8px; }
}

@media (max-width: 1200px) { .record-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); } }
@media (max-width: 760px) { .record-grid, .form-grid { grid-template-columns: 1fr; } .pagination { align-items: flex-start; flex-direction: column; } }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

th {
    background-color: var(--bg-panel);
    color: var(--accent);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    user-select: none;
}

td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: relative;
}

tr:nth-child(even) {
    background-color: var(--tree-row-alt);
}

tr.selected {
    background-color: var(--bg-selected) !important;
}

tr.selected td {
    color: var(--accent-hover);
}

tr:hover:not(.selected) {
    background-color: var(--bg-hover);
}

/* Editable Cell input */
.cell-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-card);
    color: var(--accent);
    border: 2px solid var(--accent);
    outline: none;
    padding: 0 14px;
    font-family: 'Consolas', monospace;
    font-size: 0.95rem;
    z-index: 2;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border: 2px solid var(--bg-surface);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* EMDB layout language, translated to NoScope red */
.header {
    min-height: 58px;
    padding: 8px 22px;
    background: #111214;
    border-top: 2px solid var(--accent);
    box-shadow: none;
}
.brand-logo { width: 38px; height: 38px; }
.title-area h1 { font-size: 1rem; font-weight: 800; letter-spacing: .12em; }
.title-area .subtitle { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.lang-selector { font-family: var(--font-mono); font-size: .68rem; }
.lang-selector select { border-radius: 3px; font-size: .7rem; }
.toolbar { min-height: 48px; padding: 8px 22px; gap: 9px; background: #1b1719; }
.toolbar .btn { min-height: 31px; padding: 6px 11px; font-size: .74rem; font-weight: 600; }
.toolbar .separator { margin: 0 4px; height: 20px; width: 1px; }
.status-bar { min-height: 26px; padding: 4px 22px; border-bottom: 1px solid var(--border); background: #121012; }

.tabs {
    display: flex;
    gap: 0;
    padding: 14px 22px 18px;
    overflow: hidden;
    background: #100d0f;
    border-bottom: 1px solid var(--border);
}
.tab {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 72px;
    margin-right: -25px;
    padding: 14px 38px 14px 17px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.09);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 26px 100%);
    background: #221a1d;
    color: #fff;
    text-transform: none;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.tab:first-child { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 0 100%); }
.tab:not(:first-child) { padding-left: 38px; }
.tab:nth-child(1) { z-index: 5; background: linear-gradient(135deg,#3a1c22,#1d191b); }
.tab:nth-child(2) { z-index: 4; background: linear-gradient(135deg,#302026,#17191c); }
.tab:nth-child(3) { z-index: 3; background: linear-gradient(135deg,#2c1d22,#1b1719); }
.tab:nth-child(4) { z-index: 2; background: linear-gradient(135deg,#352027,#181719); }
.tab:nth-child(5) { z-index: 1; margin-right: 0; background: linear-gradient(135deg,#291b20,#171719); }
.tab:hover { z-index: 8; transform: none; filter: brightness(1.18) saturate(1.12); background-color: transparent; color: #fff; }
.tab.active { z-index: 9; background: linear-gradient(135deg,#6b202b,#25171b); color: #fff; filter: brightness(1.08); }
.tab.active::after { content:""; position:absolute; left:0; right:27px; bottom:0; height:3px; background:linear-gradient(90deg,var(--accent),#8b1822); }
.tab:not(:first-child).active::after { left:26px; }
.tab-backdrop { position:absolute; inset:-20%; z-index:-1; opacity:.32; background:radial-gradient(circle at 25% 40%,rgba(255,255,255,.18),transparent 24%),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 18px 19px); }
.tab-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.1); font-size:1.2rem; backdrop-filter:blur(3px); transition:transform .25s; }
.tab:hover .tab-icon,.tab.active .tab-icon { transform:scale(1.07) rotate(-3deg); background:rgba(255,255,255,.17); }
.tab-body { display:flex; flex-direction:column; min-width:0; gap:3px; }
.tab-body strong { overflow:hidden; color:#fff; font-size:1rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.tab-body small { color:rgba(255,255,255,.7); font-family:var(--font-mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; }
.tab-arrow { margin-left:auto; color:rgba(255,255,255,.45); font-size:1.4rem; transition:transform .2s,color .2s; }
.tab:hover .tab-arrow,.tab.active .tab-arrow { color:#fff; transform:translateX(3px); }

.tab-toolbar { min-height: 52px; padding: 9px 22px; background: #1b1719; }
.tab-toolbar .btn { padding: 7px 11px; border-radius: 4px; font-size: .72rem; }
.search-input { width: 210px; height: 32px; padding: 0 11px; border-radius: 2px; background: #261f22; font-size: .72rem; }
.view-switcher { border-radius: 4px; }
.table-container { background: radial-gradient(ellipse 90% 65% at 50% -10%,rgba(219,43,57,.055),transparent 62%),#100d0f; }
.record-grid { gap: 12px; padding: 16px 22px 22px; }
.record-card:not(.player-card) { border-radius: 7px; border-color: var(--border-light); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.record-card:not(.player-card):hover { border-color: var(--accent); box-shadow:0 8px 24px rgba(219,43,57,.14); }
.pagination { min-height: 48px; padding: 7px 22px; background: #1b1719; }
.page-button { border-radius: 3px; font-family: var(--font-mono); font-size: .66rem; }
.page-summary { font-family: var(--font-mono); font-size: .66rem; }

.edit-modal { padding: 0; border-radius: 6px; border-top: 2px solid var(--accent); background: #151518; }
.modal-header { position:sticky; top:0; z-index:5; padding:20px 28px; border-bottom:1px solid var(--border); background:#151518; }
.modal-header h2 { color:var(--accent-hover); font-size:1.25rem; letter-spacing:.08em; text-transform:uppercase; }
.edit-modal form { padding:0 28px 24px; }
.editor-nav { margin-top:0; padding-top:14px; }
.editor-nav-button { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.form-field { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; }
.form-field input { min-height:41px; border-radius:2px; background:#222429; font-family:var(--font-sans); font-size:.82rem; text-transform:none; }
.modal-actions { position:sticky; bottom:-24px; margin:24px -28px -24px; padding:14px 28px; background:#151518; }

@media(max-width:1100px){.tabs{flex-wrap:wrap}.tab{flex:1 1 33%;min-width:170px}.record-grid{grid-template-columns:repeat(3,minmax(230px,1fr))}}
@media(max-width:720px){.tab{flex:1 1 50%;min-width:145px}.tab-toolbar{align-items:stretch;gap:8px}.toolbar-left,.toolbar-right{flex-wrap:wrap}.record-grid{grid-template-columns:1fr}.tabs{padding-inline:12px}.record-grid{padding-inline:12px}}

/* Player editor: direct EMDB window composition */
.modal-backdrop.player-editor { align-items:center; justify-items:center; padding:24px; background:rgba(0,0,0,.84); }
.player-editor .edit-modal {
    width:min(1076px,calc(100vw - 32px));
    min-height:0;
    max-height:calc(100vh - 48px);
    border:1px solid #353940;
    border-top:2px solid var(--accent);
    border-radius:0;
    background:#15171a;
    box-shadow:0 20px 80px rgba(0,0,0,.75);
}
.player-editor .modal-header {
    position:sticky;
    top:0;
    min-height:83px;
    padding:20px 30px;
    background:#15171a;
}
.player-editor .modal-header h2 { color:var(--accent-hover); font-size:1.34rem; font-weight:600; letter-spacing:.11em; }
.modal-header-actions { display:flex; align-items:center; gap:10px; }
.link-button { display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 13px; border:1px solid #3a3e45; border-radius:4px; background:transparent; color:#cbd0d7; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; cursor:pointer; }
.link-button[hidden] { display:none; }
.link-button:hover { border-color:var(--accent); color:#fff; }
.player-editor .icon-button { width:32px; height:40px; font-size:2rem; }
.player-editor #edit-form {
    display:grid;
    grid-template-columns:188px minmax(0,1fr) minmax(0,1fr);
    column-gap:20px;
    min-height:0;
    padding:0 30px;
}
.player-editor .editor-nav { grid-column:1/-1; margin:0; padding-top:22px; }
.player-editor .editor-nav-button { min-width:123px; padding:16px 22px 14px; }
.player-editor .stats-nav { grid-column:1/-1; margin:0; }
.player-editor .asset-editor {
    grid-column:1;
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:28px 0 0;
    padding:0;
    border:0;
    background:transparent;
}
.player-editor .asset-editor[hidden] { display:none; }
.player-editor .asset-editor::before { content:"PHOTO"; color:#b9bec7; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; }
.player-editor .asset-preview { width:188px; height:230px; flex:none; border-color:#30343a; background:#17191c; }
.player-editor .asset-preview img { object-position:center bottom; }
.player-editor .asset-editor-copy h3 { display:none; }
.player-editor .asset-editor-copy p { width:188px; margin:7px 0 11px; color:#727a85; font-size:.65rem; line-height:1.65; }
.player-editor .asset-actions { flex-wrap:wrap; gap:6px; }
.player-editor .asset-actions .btn { padding:6px 9px; font-size:.62rem; }
.player-editor .editor-page-heading { grid-column:2/-1; align-self:end; margin:28px 0 12px; }
.player-editor[data-page="general"] .editor-page-heading { display:none; }
.player-editor .form-grid {
    grid-column:2/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:21px 20px;
    padding:28px 0 30px;
}
.player-editor:not([data-page="general"]) .form-grid { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); }
.player-editor .form-field { gap:7px; color:#b8bdc6; font-size:.67rem; letter-spacing:.11em; }
.player-editor .form-field input,.player-editor .form-field select {
    width:100%;
    height:44px;
    padding:0 13px;
    border:1px solid #2d3036;
    border-radius:2px;
    outline:none;
    background:#22252a;
    color:#fff;
    font-family:var(--font-sans);
    font-size:.86rem;
    text-transform:none;
}
.player-editor .form-field input:focus,.player-editor .form-field select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(219,43,57,.1); }
.player-editor .field-role1 { grid-column:1; margin-top:20px; }
.player-editor .field-role2 { margin-top:20px; }
.player-status-toggles { grid-column:1/-1; margin:4px 0 0; padding:0; border:0; }
.player-status-toggles legend { margin-bottom:10px; color:#b8bdc6; font-size:.67rem; letter-spacing:.11em; text-transform:uppercase; }
.player-status-buttons { display:flex; flex-wrap:wrap; gap:18px; }
.player-status-button { display:flex; align-items:center; justify-content:center; gap:13px; min-width:160px; height:47px; padding:0 18px; border:1px solid #30343a; border-radius:3px; background:#1a1d21; color:#aeb7c7; font:600 .82rem var(--font-sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }
.player-status-button:hover { border-color:#606874; color:#e1e5eb; }
.player-status-button.active { border-color:#924018; background:#1d1d1d; color:#c7cfdd; }
.player-status-icon { color:#4d525a; font-size:1.35rem; font-weight:900; line-height:1; }
.player-status-button.active .player-status-icon { color:#6c7179; }
.gender-field { display:grid; gap:7px; }
.gender-segmented { display:grid; grid-template-columns:1fr 1fr; width:100%; height:44px; overflow:hidden; border:1px solid #2d3036; border-radius:2px; background:#22252a; }
.gender-segmented button { border:0; border-right:1px solid #383c43; background:transparent; color:#8c949f; font:700 .82rem var(--font-sans); letter-spacing:.12em; cursor:pointer; }
.gender-segmented button:last-child { border-right:0; }
.gender-segmented button:hover { color:#fff; background:#292c31; }
.gender-segmented button.active { background:var(--accent); color:#fff; }
.player-editor .color-picker-field input[type="color"] { width:100%; height:44px; padding:4px; border:1px solid #2d3036; border-radius:2px; background:#22252a; cursor:pointer; }
.player-editor .color-picker-field input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.player-editor .color-picker-field input[type="color"]::-webkit-color-swatch { border:0; border-radius:1px; }
.player-editor input[type="date"] { color-scheme:dark; }
.player-editor input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:1; filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(3330%) hue-rotate(340deg) brightness(96%) contrast(91%); }
.searchable-picker-field { position:relative; z-index:2; }
.searchable-picker-field:focus-within { z-index:20; }
.searchable-picker { position:relative; }
.searchable-picker > input[type="search"] { padding-left:13px; }
.searchable-picker > input[type="search"].has-icon { padding-left:48px; }
.searchable-picker-selected-icon { position:absolute; top:50%; left:13px; z-index:2; width:25px; height:24px; object-fit:contain; transform:translateY(-50%); pointer-events:none; }
.searchable-picker-selected-icon[hidden] { display:none; }
.searchable-picker > input[type="search"]::-webkit-search-cancel-button { opacity:1; cursor:pointer; filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(3330%) hue-rotate(340deg) brightness(96%) contrast(91%); }
.searchable-picker-menu { position:absolute; top:calc(100% - 1px); left:0; right:0; z-index:30; display:none; max-height:250px; overflow:auto; border:1px solid #3a3f47; background:#22252a; box-shadow:0 12px 26px rgba(0,0,0,.48); }
.searchable-picker.open .searchable-picker-menu { display:block; }
.searchable-picker-menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:39px; padding:7px 12px; border:0; background:transparent; color:#e6e9ed; font:.8rem var(--font-sans); text-align:left; cursor:pointer; }
.searchable-picker-menu button:hover { background:#2d3137; color:var(--accent-hover); }
.searchable-picker-menu img { width:24px; height:22px; flex:none; object-fit:contain; }
.player-editor .modal-actions {
    grid-column:1/-1;
    position:sticky;
    bottom:0;
    z-index:5;
    justify-content:flex-end;
    margin:0 -30px;
    padding:17px 30px;
    border-top:1px solid #2c3036;
    background:#15171a;
}
.player-editor .modal-actions .btn { min-width:99px; min-height:44px; }
.player-editor #btn-submit-edit { background:var(--accent); border-color:var(--accent-hover); color:#fff; }
@media(max-width:800px){.player-editor #edit-form{grid-template-columns:1fr}.player-editor .editor-nav,.player-editor .stats-nav,.player-editor .asset-editor,.player-editor .editor-page-heading,.player-editor .form-grid,.player-editor .modal-actions{grid-column:1}.player-editor .asset-editor{align-items:center}.player-editor .form-grid,.player-editor:not([data-page="general"]) .form-grid{grid-template-columns:1fr 1fr}}

/* Dedicated player Details page */
.player-editor .details-editor-content,.player-editor .skills-editor-content { grid-column:1/-1; padding:25px 0 30px; }
.player-editor[data-page="details"] .editor-page-heading,.player-editor[data-page="gameplay"] .editor-page-heading { display:none; }
.details-editor-content { display:grid; grid-template-columns:1fr; gap:18px; }
.details-editor-content .form-field { display:grid; gap:7px; }
.details-editor-content .form-field input,.details-editor-content .form-field textarea { width:100%; border:1px solid #2d3036; border-radius:2px; outline:none; background:#22252a; color:#fff; font-family:var(--font-sans); font-size:.84rem; }
.details-editor-content .form-field input { height:44px; padding:0 13px; }
.details-editor-content .form-field textarea { min-height:154px; padding:12px 13px; resize:vertical; line-height:1.45; }
.details-editor-content .form-field input:focus,.details-editor-content .form-field textarea:focus { border-color:var(--accent); }
.details-note { margin-top:-8px; color:#747c87; font-size:.7rem; line-height:1.55; }
.player-game-upload { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:-9px; }
.player-game-upload-link { padding:0; border:0; background:none; color:var(--accent-hover); font:600 .72rem var(--font-sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.player-game-upload-link:hover { color:#fff; }
.player-game-upload-status { color:#7f8894; font-size:.68rem; line-height:1.4; }
.player-editor .image-url-field,.player-editor .entry-url-download { grid-column:1/-1; }
.player-editor .entry-url-download { display:grid; align-self:end; justify-items:start; gap:8px; min-height:44px; margin:-9px 0 0; padding-bottom:5px; }
.player-editor .entry-url-download-note { margin:20px 0 0; }
.player-editor .staff-info-editor { grid-column:2/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:21px 20px; padding:28px 0 30px; }
.staff-info-editor .staff-info-liquipediaurl,.staff-info-editor .staff-info-hltvurl,.staff-info-editor .staff-info-photourl,.staff-info-editor .staff-info-imageurl,.staff-info-editor .entry-url-download { grid-column:1/-1; }
.staff-editor .staff-skills-editor { padding-top:38px; }
.staff-editor .staff-skills-editor .skill-controls-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.photo-guidelines { padding:14px; border:1px solid rgba(219,43,57,.18); border-radius:3px; background:#171d20; color:#aab2bc; font-size:.72rem; line-height:1.75; }
.photo-guidelines strong { display:block; margin-bottom:7px; color:#87909d; font-size:.67rem; letter-spacing:.08em; }
.photo-guidelines p::first-letter { color:var(--accent); }
.details-section-title { margin:4px 0 -8px; color:#c1c6ce; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.details-extra-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 18px; padding-top:4px; }

/* Dedicated player Skills dashboard */
.skills-editor-content { display:flex; flex-direction:column; gap:22px; }
.skill-randomizer { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.skill-randomizer > span { margin-right:4px; color:#6f7782; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; }
.skill-randomizer button { height:31px; padding:0 12px; border:1px solid #353a42; border-radius:2px; background:#1d2025; color:#d4d8de; font:600 .66rem var(--font-sans); cursor:pointer; }
.skill-randomizer button:hover { border-color:var(--accent); color:var(--accent-hover); }
.skills-hero { min-height:375px; display:grid; place-items:center; border:1px solid #2c3138; border-radius:4px; background:#15191d; }
.skills-radar-wrap { position:relative; width:390px; height:320px; display:grid; place-items:center; }
.skills-radar { width:300px; height:300px; overflow:visible; }
.skills-radar .radar-grid { fill:rgba(219,43,57,.07); stroke:rgba(219,43,57,.65); }
.skills-radar .radar-value { fill:rgba(219,43,57,.18); stroke:var(--accent-hover); }
.radar-label { position:absolute; color:#edf0f3; font:700 .68rem var(--font-mono); text-transform:uppercase; }
.radar-label-1 { top:0; left:50%; transform:translateX(-50%); }
.radar-label-2 { right:-4px; top:95px; }
.radar-label-3 { right:32px; bottom:5px; }
.radar-label-4 { left:32px; bottom:5px; }
.radar-label-5 { left:-4px; top:95px; }
.percentile-panel { overflow:hidden; border:1px solid #2b3036; border-radius:4px; background:#15191c; }
.percentile-panel h4 { padding:7px 13px; border-bottom:1px solid #2b3036; color:#78818e; font:600 .58rem var(--font-mono); letter-spacing:.18em; }
.percentile-row { display:grid; grid-template-columns:100px 1fr 46px; align-items:center; gap:12px; min-height:34px; padding:0 13px; border-bottom:1px solid #24292f; }
.percentile-row:last-child { border-bottom:0; }
.percentile-row b { color:#89919d; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; }
.percentile-row > span { height:4px; background:#24292e; }
.percentile-row i { display:block; height:100%; background:var(--accent); }
.percentile-row strong { color:var(--accent-hover); font:600 .68rem var(--font-mono); text-align:right; }
.skill-group h3 { padding-bottom:12px; border-bottom:1px solid #2b3036; color:#cbd0d7; font-size:.85rem; letter-spacing:.11em; text-transform:uppercase; }
.skill-group h3::first-letter { color:inherit; }
.skill-controls-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 24px; padding-top:17px; }
.skill-control { display:grid; grid-template-columns:1fr 46px; align-items:center; gap:8px; color:#7d8692; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }
.skill-control > span { grid-column:1/-1; }
.skill-control input[type="range"] { width:100%; height:4px; accent-color:var(--accent); cursor:pointer; }
.skill-control output { display:grid; place-items:center; height:30px; border:1px solid #30343a; border-radius:2px; background:#22252a; color:var(--accent-hover); font:600 .75rem var(--font-mono); }
@media(max-width:800px){.skill-controls-grid{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}.details-extra-grid{grid-template-columns:1fr 1fr}.skills-radar-wrap{width:300px}.skills-radar{width:245px;height:245px}}