:root {
  color-scheme: light;
  --ink: #253229; --muted: #70776e; --paper: #f5f3ed; --line: #deded5;
  --gold: #94743e; --green: #4a7651; --red: #a24f44; --purple: #766292; --sidebar: #faf8f2;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 80% 0, #2f24221f, transparent 60%), #f5f3ed; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { opacity: .4; cursor: default; }
button, a, input, select { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--gold); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sidebar { width: 248px; position: fixed; inset: 0 auto 0 0; background: linear-gradient(160deg, #fffdf8, #f3efe4 55%); border-right: 1px solid #d9d6ce; padding: 32px 24px; display: flex; flex-direction: column; z-index: 3; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand img { width: 46px; height: 46px; border-radius: 4px; border: 1px solid #d9c8a5; }
.brand span { font-size: 19px; font-weight: 650; letter-spacing: 1px; white-space: nowrap; }
.brand small { display: block; color: #856849; font-size: 10px; letter-spacing: 1.7px; margin-top: 7px; }
.server-label { border-top: 1px solid #dedbd2; border-bottom: 1px solid #dedbd2; margin: 30px 0 27px; padding: 18px 0; font-size: 13px; color: #677368; display: flex; gap: 8px; align-items: center; }
.live-dot { width: 6px; height: 6px; background: #4a7651; border-radius: 50%; box-shadow: 0 0 8px #9fbb8866; }
.server-sub { font-size: 11px; margin-left: auto; color: #7d8177; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar nav a { position: relative; padding: 15px 12px; display: flex; align-items: center; gap: 14px; color: #697369; font-size: 15px; border: 1px solid transparent; }
.sidebar nav a span { font-size: 20px; width: 22px; color: #8a9083; }
.sidebar nav a small { margin-left: auto; font-size: 12px; opacity: .4; }
.sidebar nav a:hover { background: #a48c5810; color: #253229; }
.sidebar nav a.active { background: linear-gradient(90deg, #7c492b26, #eee5d3); border: 1px solid #bc9b6b66; color: #7b562c; }
.sidebar nav a.active::before { position: absolute; content: ''; left: -1px; top: 8px; bottom: 8px; width: 2px; background: #a57c40; }
.sidebar nav a.active span { color: #94743e; }
.sidebar-note { margin-top: auto; padding: 40px 3px 35px; position: relative; }
.sidebar-note>span { font-family: serif; font-size: 16px; color: #756348; letter-spacing: 1px; }
.sidebar-note p { font-size: 13px; line-height: 1.9; color: #748071; }
.seal { position: absolute; right: 6px; bottom: 41px; border: 1px solid #b06b51; color: #a35941; font-family: serif; padding: 4px 5px; font-size: 16px; line-height: 1.15; transform: rotate(-7deg); }
.identity { border-top: 1px solid #dedbd2; padding-top: 19px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.identity small { display: block; font-size: 12px; color: #7a8275; margin-top: 5px; }
.identity button { margin-left: auto; font-size: 13px; color: #7d705b; }
.avatar { display: inline-grid; place-items: center; background: #edf0e6; color: #5e7453; border: 1px solid #d3dacb; border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0; font-size: 14px; font-weight: 650; }
.workspace { margin-left: 248px; }
.topbar { height: 72px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #deddd4; font-size: 13px; color: #7b8076; background: #fffdf8e0; }
.topbar b { padding: 0 14px; font-weight: 400; color: #b3b6a9; }
.topbar>div { display: flex; align-items: center; gap: 18px; }
.mode { border: 1px solid #dbcfb8; background: #bca36b12; padding: 5px 9px; font-size: 12px; color: #887044; }
.quiet { font-size: 13px; color: #687668; padding: 8px; }
.quiet:hover { color: var(--gold); }
.workspace main { max-width: 1550px; margin: auto; padding: 34px 42px 30px; min-height: calc(100vh - 129px); }
.eyebrow { font-size: 11px; letter-spacing: 2.7px; color: #937849; text-transform: uppercase; font-weight: 650; }
.page-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 25px; gap: 18px; }
h1 { font-weight: 600; font-size: 28px; letter-spacing: 1px; margin: 9px 0 10px; }
h1 span { color: #998c73; font-size: .72em; }
p { line-height: 1.7; }
.page-head p { font-size: 13px; color: var(--muted); margin: 0; }
.filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.filters input, .filters select { background: #fffdf8; border: 1px solid #d7dacd; color: #5f6b5c; padding: 8px 9px; max-width: 150px; height: 34px; border-radius: 2px; }
.filters .apply, .primary { border: 1px solid #9d7b42; border-radius: 2px; background: linear-gradient(#af8f52, #8d6d38); color: #fffaf0; font-size: 13px; padding: 9px 15px; }
.party-banner { position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 20px; align-items: center; min-height: 260px; padding: 28px 34px; margin: 0 0 22px; border: 1px solid #63513d88; background: radial-gradient(ellipse at 20% 90%, #5c764026, transparent 60%), radial-gradient(ellipse at 95% 10%, #aa452d21, transparent 65%), repeating-linear-gradient(135deg, transparent, transparent 44px, #bda17006 45px, transparent 46px), #f6f3eb; overflow: hidden; }
.party-banner::before, .party-banner::after { content: ''; position: absolute; pointer-events: none; width: 150px; height: 150px; border: 1px solid #a7864833; transform: rotate(45deg); }
.party-banner::before { left: -100px; top: -110px; }
.party-banner::after { right: -100px; bottom: -110px; }
.banner-copy { z-index: 1; }
.banner-copy .eyebrow { font-size: 10px; letter-spacing: 2px; }
.banner-copy h2 { margin: 13px 0 11px; font-size: 32px; letter-spacing: 3px; font-weight: 600; line-height: 1.35; color: #433c2d; }
.banner-copy p { font-size: 13px; color: #74806e; margin: 0 0 16px; }
.banner-tag { color: #83734e; font-size: 10px; letter-spacing: 1px; }
.banner-tag b { padding: 0 6px; color: #b9a889; }
.ancient-emblem { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ancient-mark { width: 100px; height: 100px; color: #b44b37; filter: drop-shadow(0 0 22px #ac4c322b); transform: rotate(-4deg); }
.ancient-emblem>span { font-size: 15px; letter-spacing: 6px; color: #8f7749; margin: 18px 0 9px; }
.ancient-emblem>small { font-size: 9px; color: #938b7b; letter-spacing: 1.7px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 28px; }
.metric { position: relative; padding: 19px 20px; border: 1px solid #deded3; background: linear-gradient(125deg, #ffffff, #faf9f3); min-width: 0; }
.metric>span { font-size: 13px; color: #747c70; }
.metric>strong { display: block; margin-top: 13px; font-size: 27px; font-family: Georgia, serif; font-weight: 400; color: #4d4937; }
.metric strong small { margin-left: 7px; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; color: #8b927f; }
.metric em { position: absolute; right: 17px; top: 16px; font-size: 21px; color: #88977744; font-style: normal; }
.section-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; color: #7b8475; font-size: 12px; }
.section-line h2 { margin: 0; color: #5e5c44; font-size: 16px; font-weight: 550; letter-spacing: 2px; }
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.board { --accent: #4a7651; border: 1px solid #d7ddcd; background: #ffffff; overflow: hidden; position: relative; }
.board::before { content: ''; height: 2px; position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(90deg, var(--accent), transparent); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 21px 24px; min-height: 112px; background: linear-gradient(100deg, #fffdf7, #f4efe5); border-bottom: 1px solid #e1e2d7; }
.board-kicker { font-size: 10px; letter-spacing: 2.5px; color: var(--accent); margin-bottom: 6px; opacity: .8; }
.board-head h2 { font-size: 24px; margin: 0 0 5px; font-weight: 600; letter-spacing: 3px; color: var(--accent); }
.board-head p { font-size: 12px; margin: 0; color: #7b8475; }
.board-columns { display: flex; justify-content: space-between; padding: 12px 24px; font-size: 11px; color: #8a9381; background: #f8f9f2; }
.rank-row { display: flex; align-items: center; gap: 13px; padding: 13px 24px; width: 100%; text-align: left; border-top: 1px solid #eceee4; }
.rank-row:hover { background: #a48c5810; }
.rank-number { width: 24px; font-family: Georgia, serif; font-size: 17px; color: #8a927f; flex-shrink: 0; }
.rank-number.top { color: var(--accent); }
.rank-name { min-width: 0; }
.rank-name strong { display: block; font-size: 14px; font-weight: 500; color: #40513e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { display: block; font-size: 11px; color: #829078; margin-top: 5px; }
.rank-score { margin-left: auto; color: var(--accent); font-family: Georgia, serif; font-size: 22px; flex-shrink: 0; }
.rank-score small { font: 11px "Microsoft YaHei", sans-serif; color: #89947d; margin-left: 5px; }
.board-foot { border-top: 1px solid #e7eadc; padding: 11px 24px; font-size: 11px; color: #8a947f; }
.pager { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 23px 0; font-size: 13px; color: #7c8474; }
.pager button { padding: 8px 13px; border: 1px solid #d7dccd; background: #f4efe5; }
.legend { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.8; color: #77826e; background: #f0f2e8; border-left: 2px solid #c2ad76; padding: 14px 17px; margin: 18px 0; }
.legend>span { color: #9d8350; }
.matrix-wrap { overflow: auto; border: 1px solid #d7ddcd; max-height: 75vh; background: #fffefa; }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.matrix th, .matrix td { padding: 18px 15px; min-width: 150px; text-align: center; border-right: 1px solid #e3e7d9; border-bottom: 1px solid #e3e7d9; }
.matrix th { background: #f3f5eb; font-size: 13px; color: #536448; font-weight: 500; }
.matrix thead th { position: sticky; top: 0; z-index: 2; }
.matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; }
.matrix thead th:first-child { z-index: 3; }
.matrix small { display: block; color: #7d8b72; font-size: 11px; margin-top: 8px; }
.matrix td strong { font-weight: 500; color: #577748; }
.matrix td strong.negative { color: #a24f44; }
.matrix .self { background: #f2ecdb; color: #8a794e; }
.matrix .self strong { display: block; margin-top: 8px; font-size: 16px; color: #987c3d; }
.matrix td[data-pair] { cursor: pointer; }
.matrix td[data-pair]:hover { background: #edf2e3; }
.split-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 17px; }
.split-head .section-line { margin: 0; }
.record-list { border: 1px solid #dce2d2; background: #ffffff; }
.record { display: grid; grid-template-columns: 1.1fr 1.8fr .65fr .8fr 20px; gap: 20px; padding: 21px 24px; width: 100%; align-items: center; text-align: left; border-bottom: 1px solid #e4e9db; font-size: 13px; }
.record:last-child { border-bottom-width: 1px; }
.record:hover { background: #8199670b; }
.record-id { color: #806633; font-size: 15px; }
.record-id small { display: block; color: #8a9680; font-size: 11px; margin-top: 7px; }
.record-people { line-height: 1.9; color: #5c7051; }
.record-people small { color: #8b967f; font-size: 12px; }
.badge { display: inline-block; padding: 4px 8px; font-size: 11px; background: #eef1e9; color: #77896a; border: 1px solid #a5b39355; white-space: nowrap; }
.badge.POSTED, .badge.WIN { background: #53703822; color: #52753f; border-color: #77935344; }
.badge.PENDING { background: #907f3022; color: #97762f; border-color: #97834544; }
.badge.REJECTED, .badge.LOSS, .badge.VOIDED { background: #98534222; color: #a25843; border-color: #ad645444; }
.chevron { color: #a39062; }
.empty { padding: 40px; text-align: center; color: #8a947e; font-size: 14px; }
.loading { padding: 80px 0; color: #968252; text-align: center; font-size: 15px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #86947c; }
.back { font-size: 14px; color: #887343; margin-bottom: 22px; padding: 0; }
.detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; margin-bottom: 26px; }
.panel { background: #ffffff; border: 1px solid #dbe2d2; padding: 23px 25px; }
.panel h2 { font-size: 16px; margin: 0 0 18px; font-weight: 550; color: #6c643e; }
.panel dt { font-size: 12px; color: #8b9a7f; margin: 15px 0 8px; }
.panel dd { font-size: 14px; margin: 0; line-height: 1.9; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 9px; background: #f0f4e9; border: 1px solid #d1ddc7; font-size: 13px; }
.review { border-left: 2px solid #a4b486; margin: 13px 0; padding: 0 0 0 12px; font-size: 13px; line-height: 1.9; }
.review small { display: block; color: #91a17f; }
.battle { background: #ffffff; border: 1px solid #d6e0cd; overflow: hidden; margin-bottom: 18px; }
.battle-head { padding: 20px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #dce6d5; font-size: 16px; font-weight: 600; background: linear-gradient(90deg, #4e694d25, transparent); color: #66864c; }
.battle.dire .battle-head { background: linear-gradient(90deg, #95453625, transparent); color: #a2654c; }
.battle-head small { font-size: 12px; color: #8a9e7d; font-weight: 400; }
.battle-scroll { overflow: auto; }
.battle table { border-collapse: collapse; width: 100%; min-width: 770px; font-size: 13px; }
.battle th { font-weight: 400; color: #7e9670; text-align: right; padding: 12px 20px; background: #f5f8f0; font-size: 12px; }
.battle th:first-child { text-align: left; }
.battle td { text-align: right; padding: 13px 20px; border-top: 1px solid #e1e9d8; font-variant-numeric: tabular-nums; }
.battle td:first-child { text-align: left; }
.hero-player { display: flex; gap: 11px; align-items: center; min-width: 180px; }
.hero-player img { width: 72px; height: 41px; object-fit: cover; border: 1px solid #c6d4b9; }
.hero-player small { display: block; font-size: 11px; color: #8a9c79; margin-top: 5px; }
.profile-hero { display: flex; align-items: center; gap: 18px; }
.profile-hero .avatar { width: 60px; height: 60px; font-size: 20px; }
.profile-hero h1 { margin: 0 0 7px; }
.profile-hero p { font-size: 14px; color: #8a9e78; margin: 0; }
.login { max-width: 660px; margin: 65px auto; background: radial-gradient(ellipse at top, #694c2925, transparent 80%), #ffffff; padding: 50px; border: 1px solid #d2bd8b; text-align: center; }
.login img { width: 100px; border: 1px solid #c8ad71; margin-bottom: 20px; }
.login p { color: #79876c; font-size: 15px; }
.login .primary { display: inline-block; margin: 20px 0; }
.local-hint { font-size: 13px; background: #f3f0df; padding: 12px; color: #8c7b4e; }
.error { padding: 22px; border: 1px solid #d7a596; color: #a16149; background: #fff1eb; font-size: 15px; }
footer { padding: 20px 42px; color: #87997a; font-size: 12px; border-top: 1px solid #e0e6d6; display: flex; flex-wrap: wrap; gap: 12px; }
#toast { position: fixed; bottom: 25px; right: 25px; background: #f1f5e9; color: #657851; padding: 14px 22px; z-index: 9; font-size: 14px; border: 1px solid #bba374; }
@media (min-width: 1600px) { .workspace main { padding-top: 42px; } .rank-row { padding-top: 15px; padding-bottom: 15px; } }
@media (max-width: 1200px) {
  .sidebar { width: 215px; padding: 28px 18px; } .brand span { font-size: 16px; } .workspace { margin-left: 215px; }
  .workspace main { padding: 28px; } .topbar { padding: 0 28px; } .page-head { align-items: start; flex-direction: column; }
  .party-banner { grid-template-columns: 1fr .7fr; padding: 25px; }
  .detail-grid { grid-template-columns: 1fr; } .record { grid-template-columns: 1fr 1.3fr .8fr 20px; } .record>.result-tag { display: none; }
}
@media (max-width: 760px) {
  .sidebar { position: relative; width: 100%; padding: 16px 20px; display: block; border-right: 0; border-bottom: 1px solid #e0e7d6; }
  .brand img { width: 36px; height: 36px; } .brand span { font-size: 18px; } .brand small { font-size: 10px; }
  .server-label, .sidebar-note, .identity { display: none; } .sidebar nav { display: flex; margin-top: 17px; gap: 3px; }
  .sidebar nav a { flex: 1; justify-content: center; font-size: 13px; padding: 10px 5px; gap: 6px; white-space: nowrap; }
  .sidebar nav a small { display: none; } .sidebar nav a span { font-size: 16px; width: auto; }
  .workspace { margin-left: 0; } .topbar { height: 56px; padding: 0 20px; } .topbar>div { gap: 4px; }
  .workspace main { padding: 25px 20px; } h1 { font-size: 25px; } .page-head p { line-height: 1.8; }
  .party-banner { grid-template-columns: 1fr; gap: 23px; padding: 23px; }
  .banner-copy h2 { font-size: 29px; }
  .ancient-emblem { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; } .metric { padding: 16px; } .metric>strong { font-size: 25px; }
  .boards { grid-template-columns: 1fr; gap: 17px; } .board-head { padding: 20px; } .rank-row { padding: 13px 20px; } .board-columns { padding: 12px 20px; }
  .record { grid-template-columns: 1fr .7fr 20px; gap: 12px; padding: 17px; } .record-people { display: none; }
  .detail-grid { gap: 12px; } .battle td, .battle th { padding: 12px; }
  .filters { gap: 5px; } .filters input { max-width: 132px; } .filters .search { width: 180px !important; max-width: 180px !important; }
  .split-head { flex-direction: column; align-items: start; } .section-line { flex-wrap: wrap; }
  .legend { align-items: start; } footer { padding: 20px; gap: 7px; } .login { padding: 35px 20px; margin: 30px auto; } .mode { font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) { .rank-row, .record, .sidebar nav a { transition: background .15s ease, color .15s ease; } }

.avatar-image { object-fit: cover; background: #edf0e6; }
.board-leaders { flex-shrink: 0; text-align: right; }
.board-leaders>div { display: flex; justify-content: flex-end; align-items: center; }
.board-leaders .avatar { display: block; width: 40px; height: 40px; flex: 0 0 40px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; overflow: hidden; margin-left: -9px; border: 2px solid #fffdf7; }
.board-leaders .avatar:first-child { margin-left: 0; }
.board-leaders .avatar:only-child { width: 48px; height: 48px; flex-basis: 48px; }
.board-leaders small { display: block; margin-top: 7px; color: #879779; font-size: 11px; }
.leader-more { margin-left: 5px; font-size: 12px; color: #9a8655; }
.hero-placeholder { font-family: serif; font-size: 31px; color: var(--accent); opacity: .6; }

/* Match archive: overview, ten cached hero portraits, and the original note. */
.record { grid-template-columns: minmax(165px,1fr) minmax(260px,1.35fr) minmax(140px,.8fr) 16px; gap: 23px; padding: 22px 24px; }
.record-overview { display: grid; gap: 9px; min-width: 0; }
.record-time { color: #87917d; font-size: 11px; }
.record-tags { display: flex; gap: 5px; }
.record-people { display: block; font-size: 12px; line-height: 1.8; }
.record-people small { display: block; font-size: 11px; }
.record-lineup { display: grid; gap: 10px; min-width: 0; }
.lineup-team { display: grid; grid-template-columns: 53px minmax(0,1fr); gap: 8px; align-items: center; }
.lineup-label { font-size: 11px; color: #698954; }
.lineup-team.dire .lineup-label { color: #905846; }
.lineup-heroes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; max-width: 290px; }
.lineup-heroes img { display: block; width: 100%; aspect-ratio: 1.7; object-fit: cover; border: 1px solid #ced9c4; border-radius: 3px; }
.lineup-team.dire img { border-color: #dfcabc; }
.record-note { min-width: 0; display: grid; gap: 8px; align-content: start; }
.record-note>small { font-size: 11px; letter-spacing: 1px; color: #929781; }
.record-note>span { font-size: 13px; color: #697461; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.missing-lineup { color: #909a84; font-size: 12px; }
@media(max-width:1200px) { .record { grid-template-columns: minmax(150px,1fr) minmax(240px,1.35fr) 14px; gap: 16px; } .record-note { grid-column: 1/3; padding-top: 10px; border-top: 1px dashed #e1e5d7; } .record .chevron { grid-column: 3; grid-row: 1; } }
@media(max-width:760px) { .record { grid-template-columns: minmax(0,1fr) 16px; gap: 15px; padding: 20px; } .record-overview { grid-column: 1; } .record-lineup { grid-column: 1/-1; grid-row: 2; } .record .chevron { grid-column: 2; grid-row: 1; } .record-note { grid-column: 1/-1; grid-row: 3; } .record-people { display: block; } .lineup-heroes { max-width: none; } .lineup-team { grid-template-columns: 50px minmax(0,1fr); } }

.metrics.personal { grid-template-columns: repeat(5,minmax(0,1fr)); }
@media(max-width:760px) { .metrics.personal { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* The entire row communicates the party's result, independently of audit status. */
.record.result-win { background: #edf6e7; }
.record.result-loss { background: #fceeea; }
.record.result-win:hover, .record.result-win:focus-visible { background: #e3efda; }
.record.result-loss:hover, .record.result-loss:focus-visible { background: #f7e2dc; }
.record-result { font-size: 12px; font-weight: 600; padding: 4px 0; margin-right: 5px; }
.result-win .record-result { color: #4c7739; }
.result-loss .record-result { color: #9b5044; }

/* Comfortable reading: wider type, separated matches and a full-width note. */
:root { font-size: 14px; }
.workspace main { padding-top: 40px; }
.page-head { margin-bottom: 30px; }
.page-head p { font-size: 14px; line-height: 1.9; color: #697363; }
h1 { font-size: 32px; }
.sidebar nav a { padding-top: 17px; padding-bottom: 17px; font-size: 15px; }
.topbar { font-size: 13px; }
.filters { gap: 9px; font-size: 13px; }
.filters input, .filters select { height: 40px; padding: 9px 12px; max-width: 165px; }
.filters .apply, .primary { padding: 11px 17px; font-size: 13px; }
.split-head { margin-bottom: 22px; }
.section-line { font-size: 12px; }
.rank-row { padding: 17px 24px; gap: 16px; }
.rank-name strong { font-size: 15px; }
.rank-name small { font-size: 12px; color: #6e7b62; }
.rank-score { font-size: 26px; }
.board-head p { font-size: 13px; }
.legend { font-size: 13px; line-height: 1.9; padding: 17px 20px; }
.record-list { display: grid; gap: 16px; border: 0; background: transparent; }
.record { grid-template-columns: minmax(250px,1fr) minmax(360px,1.15fr) 16px; gap: 24px; padding: 26px 28px; border: 1px solid #dce3d2; border-radius: 7px; align-items: center; }
.record-overview { gap: 12px; }
.record-id { font-size: 17px; font-weight: 550; }
.record-time { font-size: 12px; color: #667151; line-height: 1.7; }
.record-tags { gap: 9px; align-items: center; }
.record-result { font-size: 13px; }
.badge { font-size: 11px; padding: 5px 9px; }
.record-people { font-size: 13px; line-height: 1.9; color: #526744; }
.record-people small { font-size: 12px; color: #60704f; }
.record-lineup { gap: 16px; }
.lineup-team { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
.lineup-label { font-size: 12px; color: #517139; }
.lineup-heroes { max-width: 360px; gap: 6px; }
.lineup-heroes img { border-radius: 4px; }
.record-note { grid-column: 1/3; grid-template-columns: 40px minmax(0,1fr); align-items: baseline; gap: 12px; padding-top: 17px; border-top: 1px solid #ccd8c16e; }
.record-note>small { font-size: 12px; color: #667552; }
.record-note>span { font-size: 14px; line-height: 1.9; color: #52634a; }
.record .chevron { grid-column: 3; grid-row: 1; font-size: 17px; }
@media(max-width:1200px) {
  .record { grid-template-columns: minmax(180px,1fr) minmax(260px,1.15fr) 14px; padding: 24px; gap: 18px; }
  .lineup-team { grid-template-columns: 60px minmax(0,1fr); gap: 9px; }
  .lineup-label { font-size: 11px; }
  .record-note { grid-column: 1/3; }
  .rank-row { padding: 16px 20px; }
}
@media(max-width:760px) {
  .sidebar nav a { font-size: 12px; padding: 11px 4px; gap: 4px; }
  .sidebar nav a span { font-size: 14px; width: 16px; }
  .topbar { font-size: 11px; }
  .workspace main { padding: 26px 18px; }
  .page-head { margin-bottom: 25px; }
  .page-head p { font-size: 13px; }
  h1 { font-size: 27px; }
  .filters { gap: 6px; }
  .filters input { max-width: 132px; padding: 8px 7px; font-size: 12px; }
  .filters .apply { padding: 10px 12px; }
  .record { grid-template-columns: minmax(0,1fr) 16px; padding: 22px 20px; gap: 20px; }
  .record-overview { grid-column: 1; }
  .record-lineup { grid-column: 1/-1; grid-row: 2; gap: 15px; }
  .lineup-team { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .lineup-label { font-size: 12px; color: #517139; }
  .lineup-heroes { max-width: none; gap: 5px; }
  .record-note { grid-column: 1/-1; grid-row: 3; grid-template-columns: minmax(0,1fr); gap: 6px; padding-top: 15px; }
  .record .chevron { grid-column: 2; grid-row: 1; }
  .record-note>span { font-size: 14px; }
}

@media(min-width:761px) and (max-width:1000px) {
  .record { grid-template-columns: minmax(0,1fr) 16px; }
  .record-overview { grid-column: 1; }
  .record-lineup { grid-column: 1/-1; grid-row: 2; }
  .record-note { grid-column: 1/-1; grid-row: 3; }
  .record .chevron { grid-column: 2; grid-row: 1; }
}