:root {
  --bg: #0c0d0f;
  --panel: #141518;
  --panel-2: #1b1c20;
  --line: #2a2c31;
  --muted: #898d96;
  --text: #f3f4f6;
  --red: #e23b3f;
  --red-dark: #9f2025;
  --green: #4ec28c;
  --yellow: #f0b84d;
  --sidebar: 230px;
  font-family: Inter, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 20; display: flex; flex-direction: column; padding: 24px 16px 16px; background: #101114; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 25px; color: var(--text); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--red); transform: skew(-8deg); font: 800 18px/1 "Barlow Condensed"; }
.brand b, .brand small { display: block; font-family: "Barlow Condensed"; letter-spacing: 0; }
.brand b { font-size: 19px; line-height: 18px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.main-nav { display: grid; gap: 4px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 12px; color: #a8abb2; text-decoration: none; border-left: 2px solid transparent; font-size: 13px; font-weight: 600; }
.nav-link > span:first-child { width: 20px; font-size: 18px; text-align: center; }
.nav-link:hover { color: #fff; background: #17181c; }
.nav-link.active { color: #fff; background: #1d1e22; border-color: var(--red); }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: #303238; font-size: 10px; }
.sidebar-section { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.section-label { margin: 0 0 10px; color: #71757e; font: 700 10px/1 "Barlow Condensed"; letter-spacing: .12em; }
.sidebar-section .section-label { padding-left: 12px; }
.recent-fighter { width: 100%; height: 50px; display: flex; align-items: center; gap: 10px; padding: 5px 9px; color: #d5d7dc; background: transparent; border: 0; text-align: left; cursor: pointer; }
.recent-fighter:hover { background: #1a1b1f; }
.recent-fighter > span:last-child { font-size: 12px; font-weight: 600; }
.recent-fighter small { display: block; margin-top: 3px; color: #666a73; font-size: 9px; text-transform: uppercase; }
.avatar { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; border: 1px solid #3d4048; font: 700 16px "Barlow Condensed"; background: #292b31; }
.avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.avatar-jin { background: #4c2024; }.avatar-reina { background: #303047; }.avatar-king { background: #4b4020; }
.sidebar-footer { margin-top: auto; height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 10px 6px 0 12px; border-top: 1px solid var(--line); }
.sidebar-footer span, .sidebar-footer strong { display: block; font-size: 9px; }.sidebar-footer span { color: #62666f; }.sidebar-footer strong { margin-top: 4px; color: #b8bbc2; }
.icon-button, .menu-button { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); cursor: pointer; }
.icon-button:hover { border-color: #5a5d66; background: #202126; }

.main-content { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 12; height: 67px; display: flex; align-items: center; gap: 18px; padding: 0 30px; background: rgba(12,13,15,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.menu-button { display: none; }
.global-search { width: min(390px, 45vw); height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #15161a; border: 1px solid #282a2f; }
.global-search input, .filter-search input { width: 100%; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 12px; }
.global-search input::placeholder, .filter-search input::placeholder { color: #686c74; }
.global-search > span, .filter-search > span { color: #858991; font-size: 19px; }
kbd { min-width: 21px; padding: 3px 7px; color: #696d75; background: #202126; border: 1px solid #303239; font: 10px Inter; text-align: center; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.patch-status { display: flex; align-items: center; gap: 7px; color: #838790; font-size: 10px; text-transform: uppercase; }.patch-status i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green); }

.workspace { width: min(1340px, 100%); margin: 0 auto; padding: 0 30px 40px; }
.fighter-header { min-height: 280px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.fighter-header::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, #000, transparent 65%); pointer-events: none; }
.fighter-copy { align-self: center; z-index: 1; padding: 32px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #7f838b; font: 700 10px "Barlow Condensed"; letter-spacing: .1em; }.eyebrow i { width: 3px; height: 3px; background: var(--red); }
.fighter-title-row { display: flex; align-items: center; gap: 28px; margin-top: 7px; }
h1 { margin: 0; font: 800 clamp(46px, 6vw, 76px)/.9 "Barlow Condensed"; letter-spacing: 0; }
.fighter-title-row p { margin: 10px 0 0; color: #8f939b; font: 600 12px "Barlow Condensed"; letter-spacing: .12em; }
.select-button { align-self: flex-end; margin-bottom: 5px; padding: 8px 10px 8px 12px; color: #a9adb5; background: #17181c; border: 1px solid #303238; font-size: 10px; cursor: pointer; }.select-button:hover { color: white; border-color: #656872; }.select-button span { margin-left: 10px; }
.fighter-stats { display: flex; gap: 40px; margin-top: 28px; }
.fighter-stats > div { min-width: 68px; border-left: 1px solid #303238; padding-left: 11px; }
.fighter-stats span, .fighter-stats strong { display: block; }.fighter-stats span { color: #646870; font-size: 9px; text-transform: uppercase; }.fighter-stats strong { margin-top: 5px; font: 600 15px "Barlow Condensed"; }
.difficulty { display: flex !important; gap: 3px; }.difficulty i { width: 14px; height: 3px; margin-top: 5px; background: #35373d; }.difficulty i:nth-child(-n+3) { background: var(--red); }
.fighter-data-art { position: relative; min-height: 280px; align-self: stretch; display: grid; align-content: center; justify-items: end; padding-right: 26px; overflow: hidden; }
.fighter-data-art::before { content: ""; position: absolute; width: 230px; height: 230px; right: 20px; border: 1px solid #ffffff12; transform: rotate(45deg); }
.fighter-data-art > img { position: absolute; z-index: 1; inset: 0 10px 0 auto; width: 92%; height: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(-20px 10px 25px #0009); }
.data-kicker { position: relative; z-index: 1; margin-right: 6px; color: var(--red); font: 700 10px "Barlow Condensed"; letter-spacing: .12em; }
.data-bars { position: relative; z-index: 2; display: flex; gap: 5px; margin-top: 210px; }.data-bars i { width: 32px; height: 3px; background: #33353b; }.data-bars i:nth-child(-n+3) { background: var(--red); }
.fighter-index { position: absolute; z-index: 2; right: 10px; bottom: 5px; color: #ffffff0c; font: 800 110px/1 "Barlow Condensed"; }

.content-panel { padding-top: 27px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-end; }
h2 { margin: 0; font: 700 28px/1 "Barlow Condensed"; text-transform: uppercase; }
.view-switch { display: flex; }.view-switch button { width: 35px; height: 32px; color: #70747c; background: #17181c; border: 1px solid #292b30; cursor: pointer; }.view-switch button + button { border-left: 0; }.view-switch button.active { color: #fff; background: #292b31; }
.filters { display: grid; grid-template-columns: minmax(180px, 1fr) 165px 165px auto; gap: 8px; margin-top: 20px; }
.filter-search, select, .clear-button { height: 38px; background: #15161a; border: 1px solid #282a2f; }
.filter-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; }
select { padding: 0 10px; color: #afb2b9; outline: 0; font-size: 11px; }
.clear-button { padding: 0 14px; color: #858991; cursor: pointer; font-size: 10px; }.clear-button:hover { color: #fff; }
.table-wrap { margin-top: 15px; min-height: 390px; border-top: 1px solid #31333a; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { height: 36px; color: #696d75; font: 600 9px Inter; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--line); }
th:nth-child(1) { width: 38px; } th:nth-child(2) { width: 25%; } th:nth-child(3) { width: 22%; } th:nth-child(4) { width: 10%; } th:nth-child(5) { width: 10%; } th:nth-child(6) { width: 10%; } th:nth-child(7) { width: 11%; } th:nth-child(8) { width: 34px; }
td { height: 53px; color: #a7aab1; border-bottom: 1px solid #22242a; font-size: 11px; }
tbody tr { cursor: pointer; transition: background .15s; } tbody tr:hover { background: #17181c; }
.move-name { color: #eceef1; font-weight: 600; }.move-name small { display: block; margin-top: 4px; color: #60646c; font-size: 8px; font-weight: 500; text-transform: uppercase; }
code { display: inline-block; padding: 4px 7px; color: #f1f2f4; background: #222329; border: 1px solid #33353c; font: 600 10px Inter; }
.hit-badge { display: inline-flex; min-width: 38px; justify-content: center; padding: 4px 7px; color: #dadddf; background: #282a30; font: 600 9px Inter; text-transform: uppercase; }.hit-badge.Low { color: #e7b65a; background: #332b20; }.hit-badge.High { color: #74c8ee; background: #1f2d34; }.hit-badge.Throw { color: #d79adf; background: #312536; }
.frame-positive { color: var(--green); font-weight: 700; }.frame-negative { color: #e47478; font-weight: 700; }.frame-neutral { color: #aaadb4; }
.star-button, .row-arrow { width: 30px; height: 30px; color: #5e626b; background: transparent; border: 0; cursor: pointer; font-size: 17px; }.star-button.active { color: var(--yellow); }.row-arrow { font-size: 15px; }
.results-footer { display: flex; justify-content: space-between; padding-top: 12px; color: #60646c; font-size: 9px; text-transform: uppercase; }
.empty-state { padding: 90px 20px; text-align: center; }.empty-state > span { color: #4e5159; font-size: 36px; }.empty-state h3 { margin: 12px 0 5px; font: 700 20px "Barlow Condensed"; }.empty-state p { color: var(--muted); font-size: 11px; }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }.move-card { min-height: 145px; padding: 15px; background: #17181c; border: 1px solid #292b31; cursor: pointer; }.move-card:hover { border-color: #4a4d55; }.move-card-top { display: flex; justify-content: space-between; }.move-card h3 { margin: 15px 0 5px; font: 600 18px "Barlow Condensed"; }.move-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }.move-card-stats span { color: #666a72; font-size: 8px; text-transform: uppercase; }.move-card-stats strong { display: block; margin-top: 4px; font-size: 11px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: #0008; opacity: 0; pointer-events: none; transition: opacity .2s; }.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.detail-drawer { position: fixed; z-index: 45; top: 0; right: 0; width: min(410px, 100%); height: 100vh; padding: 32px; background: #15161a; border-left: 1px solid #34363d; transform: translateX(102%); transition: transform .25s ease; overflow-y: auto; }.detail-drawer.open { transform: none; }
.drawer-close { position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; color: #9a9da5; background: transparent; border: 1px solid var(--line); font-size: 23px; cursor: pointer; }
.drawer-title { display: flex; justify-content: space-between; gap: 15px; margin-top: 30px; }.drawer-title h2 { margin-bottom: 12px; line-height: 1.05; }.favorite-large { width: 42px; height: 42px; flex: 0 0 auto; color: #747881; background: #1d1e22; border: 1px solid #32343b; font-size: 22px; cursor: pointer; }.favorite-large.active { color: var(--yellow); }
.frame-hero { height: 145px; display: grid; align-content: center; justify-items: center; margin-top: 26px; background: #1d1e22; border-left: 3px solid var(--red); }.frame-hero span { color: #6f737c; font-size: 9px; text-transform: uppercase; }.frame-hero strong { margin: 3px 0; font: 800 60px/.9 "Barlow Condensed"; }.frame-hero small { color: #74c8ee; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border: 1px solid var(--line); }.detail-grid div { padding: 15px; }.detail-grid div:nth-child(odd) { border-right: 1px solid var(--line); }.detail-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.detail-grid span { color: #6e727a; font-size: 9px; text-transform: uppercase; }.detail-grid strong { display: block; margin-top: 5px; font: 600 18px "Barlow Condensed"; }
.property-section { margin-top: 26px; }.tags { display: flex; flex-wrap: wrap; gap: 6px; }.tag { padding: 6px 8px; color: #afb2b9; background: #222329; border: 1px solid #303239; font-size: 9px; text-transform: uppercase; }
.tip { display: flex; gap: 11px; margin-top: 25px; padding: 15px; background: #221d19; border-left: 2px solid var(--yellow); }.tip > span { width: 20px; height: 20px; display: grid; flex: 0 0 auto; place-items: center; color: #171411; background: var(--yellow); font-size: 11px; font-weight: 800; }.tip p { margin: 0; color: #c0b8aa; font-size: 10px; line-height: 1.55; }.tip strong { color: #f0e9dd; text-transform: uppercase; }
dialog { width: min(760px, calc(100% - 30px)); color: var(--text); background: #17181c; border: 1px solid #3a3c43; padding: 0; }dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }dialog form { padding: 25px; }.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }.dialog-heading button { width: 34px; height: 34px; color: #aaa; background: transparent; border: 1px solid var(--line); font-size: 22px; cursor: pointer; }.character-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }.character-option { min-height: 188px; padding: 0; overflow: hidden; text-align: left; background: #202126; border: 1px solid #303238; cursor: pointer; }.character-option:hover { border-color: var(--red); }.character-option-portrait { width: 100%; height: 125px; display: block; object-fit: contain; object-position: center bottom; background: linear-gradient(145deg, #303238, #17181c); }.character-option-copy { display: block; padding: 11px; }.character-option strong, .character-option small { display: block; }.character-option strong { font: 600 16px "Barlow Condensed"; }.character-option small { margin-top: 4px; color: #72767f; font-size: 9px; text-transform: uppercase; }.dialog-copy { color: #a9acb3; line-height: 1.7; font-size: 13px; }.disclaimer { margin-top: 20px; padding: 14px; color: #8f939b; background: #202126; border-left: 2px solid var(--red); font-size: 11px; line-height: 1.55; }

body.light { --bg: #eeeef0; --panel: #fff; --panel-2: #f6f6f7; --line: #d2d3d7; --muted: #686b73; --text: #18191d; color-scheme: light; }.light .sidebar { background: #f7f7f8; }.light .topbar { background: #eeeef0ee; }.light .global-search, .light .filter-search, .light select, .light .clear-button { background: #fff; }.light code, .light .hit-badge { color: #222; }.light .detail-drawer, .light dialog { background: #f7f7f8; }

@media (max-width: 900px) {
  .app-shell { display: block; }.sidebar { transform: translateX(-102%); transition: transform .25s; box-shadow: 18px 0 40px #0008; }.sidebar.open { transform: none; }.main-content { width: 100%; }.menu-button { display: grid; }.workspace { padding-inline: 20px; }.fighter-header { grid-template-columns: minmax(0, 1fr) 290px; }.topbar { padding-inline: 20px; }
}
@media (max-width: 680px) {
  .topbar { height: 59px; gap: 10px; padding-inline: 12px; }.global-search { width: auto; flex: 1; }.global-search kbd, .patch-status { display: none; }.topbar-actions { margin-left: 0; }.workspace { padding: 0 12px 30px; }.fighter-header { min-height: 245px; grid-template-columns: 1fr 120px; }.fighter-copy { padding: 25px 0; }.fighter-title-row { display: block; }.fighter-title-row h1 { font-size: 44px; max-width: 220px; }.select-button { margin-top: 15px; }.fighter-data-art { min-height: 245px; padding-right: 4px; }.fighter-data-art > img { inset: auto 0 0 auto; width: 150px; height: 210px; }.fighter-data-art::before { width: 120px; height: 120px; right: 0; }.data-kicker, .data-bars { display: none; }.fighter-index { font-size: 70px; }.fighter-stats { gap: 15px; }.fighter-stats > div { min-width: 55px; }.filters { grid-template-columns: 1fr 1fr; }.filter-search { grid-column: 1 / -1; }.clear-button { grid-column: 1 / -1; }.table-wrap { overflow-x: auto; }table { min-width: 690px; }.results-footer span:last-child { display: none; }.card-grid { grid-template-columns: 1fr; }.detail-drawer { padding: 25px 20px; }.character-grid { grid-template-columns: 1fr 1fr; }
}

.character-grid { max-height: min(62vh, 620px); overflow-y: auto; padding-right: 4px; }
.disclaimer a { color: #c6c9cf; }