:root {
  --ink: #172728;
  --ink-soft: #2f4443;
  --paper: #f4f2ec;
  --paper-warm: #ebe7dc;
  --white: #fffefa;
  --jade: #2b7269;
  --jade-light: #dceae5;
  --gold: #b28a47;
  --gold-light: #efe5cc;
  --cinnabar: #a64034;
  --line: #d7d2c7;
  --muted: #6f7774;
  --shadow: 0 18px 45px rgba(25, 39, 38, .1);
  --display: "STKaiti", "KaiTi", "FangSong", serif;
  --body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --body-bold: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --utility: "DIN Alternate", "Segoe UI", sans-serif;
  --font-min: 12px;
  --font-control: 14px;
}

* { box-sizing: border-box; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-synthesis: none; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(43,114,105,.16); }
h1, h2, h3, h4 { scroll-margin-top: 24px; text-wrap: balance; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -60px; padding: 10px 16px; background: var(--ink); color: white; transition: top .2s; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid rgba(178, 138, 71, .75); outline-offset: 3px; }

.site-header { position: relative; z-index: 20; background: rgba(249, 248, 244, .98); border-bottom: 1px solid #cfcac0; box-shadow: 0 4px 18px rgba(18, 35, 35, .07); }
.header-ink { position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(var(--cinnabar), #78342e); }
.header-inner { max-width: 1500px; margin: auto; padding: 0 30px; }
.header-main { min-height: 68px; display: flex; align-items: center; gap: 26px; }
.brand { min-width: 0; display: flex; align-items: center; text-decoration: none; }
.official-logo { flex: 0 0 auto; width: 132px; height: 44px; object-fit: contain; filter: saturate(.9); }
.brand-divider { flex: 0 0 auto; width: 1px; height: 34px; margin: 0 14px; background: var(--line); }
.brand-name { position: relative; flex: 0 0 auto; min-width: 116px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 1px 0 0; color: var(--ink); white-space: nowrap; isolation: isolate; }
.brand-name::before { content: none; }
.brand-name::after { content: ""; position: absolute; right: 2px; bottom: 6px; width: 4px; height: 4px; background: var(--cinnabar); box-shadow: 0 0 0 1px rgba(166,64,52,.18); transform: rotate(45deg); }
.brand-name-zh { display: flex; align-items: center; gap: 2px; font-family: "STKaiti","KaiTi","FangSong",serif; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.brand-name-zh b { position: relative; display: block; font: inherit; line-height: inherit; transform: none; }
.brand-name-zh .brand-name-sword { z-index: 1; margin: 0; color: #102526; font-size: inherit; }
.brand-name-sword::after { content: ""; position: absolute; z-index: -1; left: 51%; top: 1px; width: 1px; height: 27px; background: linear-gradient(180deg,transparent 0,#ad884a 19%,#ad884a 76%,transparent 100%); transform: rotate(27deg); transform-origin: center; opacity: .58; }
.brand-name-en { margin: 0; padding-left: .27em; color: #876c3f; font: 700 7px/1 var(--utility); letter-spacing: .27em; }
.brand:hover .brand-name-sword::after { animation: brand-sword-glint .7s ease-out both; }
.brand-tagline { margin-left: 13px; padding-left: 13px; border-left: 1px solid var(--line); color: var(--muted); font-family: var(--utility); font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.header-actions { min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.header-tools { display: flex; align-items: center; gap: 6px; }
.header-tool-link { min-height: 44px; display: grid; grid-template-columns: 28px auto 10px; align-items: center; gap: 8px; padding: 5px 9px 5px 7px; border: 1px solid transparent; color: var(--ink-soft); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.header-tool-link:hover { border-color: #d6d0c4; background: white; transform: translateY(-1px); }
.header-tool-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ad9270; border-radius: 50%; color: #876538; font: 800 12px var(--utility); }
.header-tool-copy { display: grid; gap: 1px; white-space: nowrap; }
.header-tool-copy strong { font-size: 12px; }
.header-profile-link { min-height: 44px; display: grid; grid-template-columns: 28px auto; align-items: center; gap: 8px; padding: 5px 10px 5px 7px; border: 1px solid rgba(178,138,71,.46); background: #fffaf0; color: var(--ink); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.header-profile-link > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--gold); border-radius: 50%; color: #8a642c; font: 800 13px var(--display); }
.header-profile-link > span:last-child { min-width: 0; display: grid; gap: 1px; white-space: nowrap; }
.header-profile-link strong { font-size: 12px; }
.header-profile-link small { color: #8a6d3d; font-size: 12px; }
.header-profile-link:hover { border-color: var(--gold); background: white; box-shadow: 0 6px 16px rgba(112,82,33,.1); transform: translateY(-1px); }
.header-tool-copy small { color: var(--muted); font-size: 12px; }
.header-tool-link > b { color: var(--gold); font: 700 12px var(--utility); }
.primary-nav { width: min(1440px,calc(100% - 60px)); min-height: 48px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 auto; border-top: 1px solid #dfdbd2; border-bottom: 1px solid #dfdbd2; background: rgba(249,248,244,.98); }
.nav-item { position: relative; min-width: 0; padding: 11px 18px 10px; border: 0; border-right: 1px solid rgba(215,210,199,.66); background: transparent; cursor: pointer; }
.nav-item:first-child { border-left: 1px solid rgba(215,210,199,.66); }
.nav-item span, .nav-item small { display: inline; }
.nav-item span { font-size: 15px; font-weight: 700; }
.nav-item small { margin-left: 9px; color: #858e8a; font-size: 12px; letter-spacing: .05em; }
.nav-item::after { content: ""; position: absolute; height: 3px; left: 22%; right: 22%; bottom: 0; background: var(--cinnabar); transform: scaleX(0); transition: transform .22s ease; }
.nav-item:hover, .nav-item.is-active { background: rgba(43, 114, 105, .06); }
.nav-item.is-active::after { transform: scaleX(1); }
.publish-button { min-height: 44px; align-self: center; border: 1px solid var(--ink); background: var(--ink); color: white; padding: 10px 19px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; white-space: nowrap; }
.publish-button:hover { background: var(--cinnabar); border-color: var(--cinnabar); transform: translateY(-1px); }
.qq-account-button { position: relative; min-width: 218px; min-height: 44px; display: grid; grid-template-columns: 34px minmax(0,1fr) 12px; align-items: center; gap: 9px; border: 1px solid #c8d1ce; background: rgba(255,255,255,.94); color: var(--ink); padding: 5px 10px 5px 7px; white-space: nowrap; cursor: pointer; text-align: left; box-shadow: 0 4px 13px rgba(21,39,39,.04); }
.qq-account-button::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 3px; background: #a8afac; }
.qq-account-button:hover { border-color: var(--jade); box-shadow: 0 6px 16px rgba(45,116,106,.12); }
.qq-account-button:disabled { opacity: .58; cursor: help; }
.qq-account-avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d8d4ca; border-radius: 50%; background: #f4f2ed; }
.qq-account-avatar i { position: absolute; right: -1px; bottom: 0; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #a4aaa7; }
.qq-account-button[data-auth-state="authenticated"] { border-color: rgba(45,116,106,.48); background: linear-gradient(100deg,rgba(45,116,106,.09),white 46%); }
.qq-account-button[data-auth-state="authenticated"]::before { background: var(--jade); }
.qq-account-button[data-auth-state="authenticated"] .qq-account-avatar { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(45,116,106,.11); }
.qq-account-button[data-auth-state="authenticated"] .qq-account-avatar i { background: var(--jade); }
.qq-account-button[data-auth-state="banned"] { border-color: rgba(161,63,53,.5); }
.qq-account-button[data-auth-state="banned"]::before,.qq-account-button[data-auth-state="error"]::before { background: var(--cinnabar); }
.qq-account-button[data-auth-state="banned"] .qq-account-avatar i,.qq-account-button[data-auth-state="error"] .qq-account-avatar i { background: var(--cinnabar); }
.qq-account-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #12b7f5; color: white; font: 800 10px var(--utility); }
.qq-account-button img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.qq-account-copy { min-width: 0; display: grid; gap: 2px; }
.qq-account-name-row { min-width: 0; display: flex; align-items: center; gap: 6px; }
.qq-account-copy strong,.qq-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-account-copy strong { min-width: 0; max-width: 105px; font-size: 13px; line-height: 1.25; }
.qq-account-copy small { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.qq-account-badge { flex: 0 0 auto; padding: 1px 5px; border: 1px solid rgba(45,114,105,.4); color: var(--jade); font: normal 12px/1.25 var(--utility); }
.qq-account-button[data-auth-state="authenticated"] .qq-account-copy small { color: var(--jade); }
.qq-account-button[data-auth-state="banned"] .qq-account-copy small,.qq-account-button[data-auth-state="error"] .qq-account-copy small,.qq-account-button[data-auth-state="banned"] .qq-account-badge { color: var(--cinnabar); }
.qq-account-button[data-auth-state="banned"] .qq-account-badge { border-color: rgba(166,64,52,.42); }
.qq-account-caret { color: #8e9794; font-size: 15px; transform: translateY(-2px); }

.hero { --hero-image: url("images/official-arena-bg.webp"); position: relative; min-height: 505px; overflow: hidden; color: white; background: #173132; isolation: isolate; }
.hero-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-art { --hero-slide-image: var(--hero-image); position: absolute; inset: -2px; opacity: 0; transform: scale(1.018); transition: opacity .85s ease, transform 6s ease; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; inset: 0; background-image: var(--hero-slide-image); background-position: center; background-repeat: no-repeat; }
.hero-art::before { inset: -5%; background-size: cover; filter: blur(22px) saturate(.8); opacity: .7; transform: scale(1.08); }
.hero-art::after { background-size: contain; filter: drop-shadow(0 0 20px rgba(5,18,18,.2)); }
.hero-art.is-active { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 30, 31, .94) 0%, rgba(13, 38, 39, .79) 38%, rgba(19, 37, 36, .18) 72%, rgba(19, 37, 36, .35) 100%); }
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(5, 16, 16, .78)), repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.045) 120px); pointer-events: none; }
.hero-content { position: absolute; z-index: 3; left: 50%; bottom: 78px; width: 100%; max-width: 1500px; padding: 0 30px 20px; transform: translateX(-50%); }
.eyebrow, .section-kicker, .aside-kicker { margin: 0; font: 700 11px/1.2 var(--utility); letter-spacing: .24em; text-transform: uppercase; }
.eyebrow { color: #dec693; }
.hero h1 { margin: 14px 0 14px; max-width: calc(100% - 260px); white-space: nowrap; font-family: var(--display); font-size: clamp(38px, 3.5vw, 56px); font-weight: 800; line-height: 1; letter-spacing: .035em; text-shadow: 0 5px 25px rgba(0,0,0,.25); }
.hero h1[data-title-size="medium"] { font-size: clamp(35px, 3.15vw, 50px); }
.hero h1[data-title-size="long"] { font-size: clamp(31px, 2.7vw, 43px); letter-spacing: .025em; }
.hero h1.is-changing, .hero-copy.is-changing { animation: hero-copy-in .5s ease both; }
.hero-copy { max-width: 620px; margin: 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.hero-actions button { min-height: 46px; padding: 0 23px; cursor: pointer; }
.hero-primary { border: 1px solid #d9bf8d; background: #d6bb87; color: #162727; font-weight: 800; }
.hero-secondary { border: 1px solid rgba(255,255,255,.48); background: rgba(12, 28, 28, .35); color: white; backdrop-filter: blur(6px); }
.hero-primary:hover, .hero-secondary:hover { transform: translateY(-2px); }
.arena-emblem { position: absolute; z-index: 3; right: 10%; top: 50%; width: clamp(142px, 12vw, 205px); height: auto; transform: translateY(-54%) rotate(3deg); opacity: .92; }
.hero-controls { position: absolute; z-index: 5; right: max(30px, calc((100% - 1440px) / 2)); bottom: 24px; display: flex; align-items: center; gap: 7px; }
.hero-controls button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.34); background: rgba(8,25,26,.52); color: white; cursor: pointer; backdrop-filter: blur(8px); }
.hero-controls button:hover { border-color: #e0c38c; color: #f4dba8; }
.hero-controls .hero-dot { width: 25px; height: 4px; border: 0; background: rgba(255,255,255,.35); }
.hero-controls .hero-dot.is-active { background: #dfc38b; }
.hero-controls .hero-arrow { font-family: var(--utility); font-size: 15px; }
@keyframes hero-copy-in { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brand-sword-glint { 0% { opacity: .45; filter: brightness(1); } 45% { opacity: 1; filter: brightness(1.65); } 100% { opacity: .58; filter: brightness(1); } }
.hero-stats { position: absolute; z-index: 3; left: max(30px, calc((100% - 1440px) / 2)); bottom: 0; display: flex; border-left: 1px solid rgba(255,255,255,.2); }
.hero-stats div { min-width: 150px; padding: 16px 24px 19px; border-right: 1px solid rgba(255,255,255,.2); background: rgba(10, 26, 26, .7); backdrop-filter: blur(10px); }
.hero-stats strong, .hero-stats span { display: block; }
.hero-stats strong { font: 700 23px/1.1 var(--utility); color: #f4dfb6; }
.hero-stats span { margin-top: 5px; color: rgba(255,255,255,.68); font-size: 11px; }

.notice-bar { min-height: 52px; display: flex; align-items: center; gap: 18px; max-width: 1500px; margin: 0 auto; padding: 0 30px; border-bottom: 1px solid var(--line); }
.notice-label { flex: 0 0 auto; padding: 4px 9px; border: 1px solid var(--cinnabar); color: var(--cinnabar); font-family: var(--display); font-weight: 800; }
.notice-viewport { min-width: 0; flex: 1; overflow: hidden; }
.notice-bar p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.notice-bar p.is-changing { animation: notice-in .34s ease-out; }
.notice-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.notice-controls[hidden] { display: none; }
.notice-counter { margin-right: 7px; color: #9b8a6b; font: 700 10px/1 var(--utility); letter-spacing: .08em; }
.notice-controls button { width: 27px; height: 27px; border: 1px solid #d9d3c7; background: transparent; color: var(--ink); font: 700 13px/1 var(--utility); cursor: pointer; }
.notice-controls button:hover, .notice-controls button:focus-visible { border-color: var(--cinnabar); color: var(--cinnabar); outline: 0; }
@keyframes notice-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.school-stats-card { overflow: hidden; padding: 20px 16px 15px; scroll-margin-top: 20px; }
.school-stats-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.school-stats-card .school-stats-heading h3 { margin: 5px 0 0; font: 800 25px/1.15 var(--display); letter-spacing: .045em; }
.school-stats-total { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; align-items: end; min-width: 72px; padding: 7px 9px 6px; border-left: 3px solid var(--cinnabar); background: var(--ink); color: white; }
.school-stats-total span { grid-column: 1 / -1; color: #d8c18f; font: 700 9px var(--utility); letter-spacing: .14em; }
.school-stats-total strong { margin-top: 2px; color: #f3dca9; font: 800 25px/1 var(--utility); }
.school-stats-total small { padding: 0 0 2px 4px; color: rgba(255,255,255,.68); font-size: 9px; }
.school-stats-intro { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.school-stats-note { margin: 5px 0 0; color: #8a8f8c; font-size: 9px; line-height: 1.5; }
.school-stats-chart { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 12px; padding: 1px; border: 1px solid var(--line); background: var(--line); }
.school-stat-row { min-width: 0; background: var(--white); }
.school-stat-row button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 120px minmax(30px,1fr) 34px; align-items: center; gap: 7px; padding: 6px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.school-stat-row button:hover { background: #f4f0e6; }.school-stat-row button:hover .school-stat-track i { filter: saturate(1.15); }
.school-stat-row.is-filter-active button { background: #e7f1ed; box-shadow: inset 4px 0 0 var(--jade); }
.school-stat-row.is-filter-active .school-stat-name b { color: var(--jade); }
.school-stat-row.is-filter-active .school-stat-track { background: #d0ddd8; }
.school-stat-row.is-filter-active strong { color: var(--cinnabar); }
.school-stat-row button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--cinnabar); outline-offset: -2px; }
.school-stat-name { min-width: 0; display: flex; align-items: center; gap: 8px; }.school-stat-name img { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 5px; object-fit: contain; }.school-stat-name b { overflow: hidden; color: var(--ink); font-family: var(--body-bold); font-size: 14px; font-weight: 700; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.school-stat-track { position: relative; height: 6px; overflow: hidden; background: #e8e4da; box-shadow: inset 0 1px 2px rgba(23,39,40,.1); }.school-stat-track::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(23,39,40,.12) calc(25% - 1px) 25%); }.school-stat-track i { position: relative; display: block; width: var(--school-bar); height: 100%; background: linear-gradient(90deg,var(--jade),#418b7c 78%,var(--cinnabar) 78%); transition: width .42s ease; }
.school-stat-row strong { justify-self: end; color: var(--ink); font: 800 15px/1 var(--utility); }.school-stat-row strong small { margin-left: 1px; color: var(--muted); font: 400 8px var(--body); }
.legacy-stat-heading { display: grid; gap: 3px; padding: 10px 8px 8px; background: #eee8dc; color: var(--ink); }.legacy-stat-heading b { font: 800 12px var(--display); }.legacy-stat-heading span { color: var(--muted); font-size: 9px; }.school-stat-row.legacy button { background: #faf7f0; }.school-stat-row.legacy .school-stat-track i { background: linear-gradient(90deg,#989c96,#b9a77c); }
.board-shell { max-width: 1500px; margin: auto; padding: 54px 30px 80px; }
.board-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.section-kicker { color: var(--jade); }
.board-heading h2 { margin: 8px 0 7px; font-family: var(--display); font-size: 42px; letter-spacing: .04em; }
.board-heading p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.arena-tools { display: flex; align-items: stretch; gap: 26px; margin-top: 20px; }
.board-team-draw { width: min(345px,calc(100% - 506px)); min-height: 46px; display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid #bcb19b; background: #fffdf7; color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 #ddd5c5; text-align: left; }
.board-team-draw > span { display: grid; place-items: center; width: 28px; height: 28px; background: var(--cinnabar); color: white; font: 800 12px var(--display); }.board-team-draw b { font: 800 14px var(--display); letter-spacing: .06em; white-space: nowrap; }.board-team-draw small { padding-left: 9px; border-left: 1px solid var(--line); color: #666d69; font-size: 12px; white-space: nowrap; }.board-team-draw i { color: var(--cinnabar); font: 800 11px var(--utility); letter-spacing: .04em; white-space: nowrap; }.board-team-draw:hover { border-color: var(--cinnabar); color: var(--cinnabar); transform: translateY(-1px); }
.ink-button { border: 0; border-bottom: 2px solid var(--cinnabar); background: var(--ink); color: white; padding: 12px 22px; cursor: pointer; }
.ink-button:hover { background: var(--cinnabar); }
.arena-mode-tabs { width: min(480px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--ink); background: var(--ink); box-shadow: 3px 3px 0 #d9d3c5; }
.arena-mode-tabs button { position: relative; min-height: 44px; display: flex; align-items: baseline; justify-content: center; gap: 6px; border: 0; background: #f8f5ed; color: var(--ink-soft); padding: 7px 11px; cursor: pointer; }
.arena-mode-tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: transparent; }
.arena-mode-tabs b { font: 900 16px var(--utility); letter-spacing: .03em; text-transform: uppercase; }
.arena-mode-tabs span { color: #666d69; font-size: 11px; }
.arena-mode-tabs button:hover { background: white; color: var(--cinnabar); }
.arena-mode-tabs button:focus-visible { z-index: 1; outline: 3px solid rgba(176,59,48,.28); outline-offset: -3px; }
.arena-mode-tabs button.is-active { background: var(--ink); color: #fff8e7; }
.arena-mode-tabs button.is-active::after { background: var(--cinnabar); }
.arena-mode-tabs button.is-active span { color: #e2c78e; }
.arena-mode-tabs button[data-arena-mode="3v3"].is-active::before { content: '主'; display: grid; place-items: center; width: 16px; height: 16px; background: var(--cinnabar); color: white; font: 800 8px var(--display); }
.filter-rail { margin-top: 9px; display: grid; grid-template-columns: 185px 210px 220px minmax(260px, 1fr) auto; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.filter-rail label { position: relative; background: var(--white); padding: 9px 14px 8px; }
.filter-rail label span { display: block; margin-bottom: 3px; color: #8c918e; font-size: 10px; }
.filter-rail input, .filter-rail select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.filter-clear { border: 0; background: var(--paper-warm); padding: 0 22px; cursor: pointer; color: var(--muted); }
.filter-clear:hover { color: var(--cinnabar); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 314px; gap: 28px; margin-top: 28px; }
.board-list { display: grid; gap: 15px; align-content: start; }
.post-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); padding: 20px 23px 18px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.post-card:hover { transform: translateY(-2px); border-color: #b9c3bf; box-shadow: var(--shadow); }
.post-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--jade); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.post-card:hover::before, .post-card.is-pinned::before { transform: scaleY(1); }
.heart-method-icon-stack { display: flex; align-items: center; justify-content: center; }.school-glyph .heart-method-icon-stack img { width: 31px; height: 31px; border: 2px solid var(--white); border-radius: 7px; background: var(--white); object-fit: contain; }.school-glyph .heart-method-icon-stack img + img { margin-left: -12px; }
.post-topline { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 11px; }
.post-topline > div { display: flex; align-items: center; gap: 8px; }
.post-top-actions { flex: 0 0 auto; }
.post-report-button { min-height: 24px; border: 1px solid #b94b40; background: #fff5f2; color: var(--cinnabar); padding: 2px 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.post-report-button:hover { background: var(--cinnabar); color: white; }
.client-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 9px 3px 4px; border: 1px solid; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.client-badge i { display: grid; place-items: center; width: 20px; height: 20px; color: white; font: 800 12px var(--display); font-style: normal; }
.client-badge.flagship { border-color: #9c7540; background: #f5ead4; color: #765427; }.client-badge.flagship i { background: #9b7139; }
.client-badge.wujie { border-color: #347c72; background: #e2efeb; color: #23665d; }.client-badge.wujie i { background: #2b7269; }
.client-badge.unknown { border-color: #aaa8a1; background: #efeee9; color: #777b78; }.client-badge.unknown i { background: #858985; }
.arena-mode-badge { display: inline-grid; place-items: center; min-height: 28px; padding: 3px 8px; border: 1px solid; font: 900 11px var(--utility); letter-spacing: .04em; text-transform: uppercase; }
.arena-mode-badge.mode-2 { border-color: #397b70; background: #e6f0ec; color: #245e56; }
.arena-mode-badge.mode-3 { border-color: #9c7540; background: #f5ead4; color: #765427; }
.arena-mode-badge.mode-5 { border-color: #b04a3c; background: #fff0dc; color: #87372d; }
.server-name { font-weight: 700; color: #56635f; }
.pin, .demo { padding: 2px 6px; font-weight: 700; }
.pin { background: var(--cinnabar); color: white; }
.demo { border: 1px solid var(--gold); color: #86652e; }
.recruitment-mode-banner { display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin: 14px 0 -1px; padding: 6px 16px 6px 6px; border: 1px solid; box-shadow: 3px 3px 0 rgba(21,45,43,.08); }
.recruitment-mode-banner b { display: grid; place-items: center; min-width: 55px; min-height: 31px; padding: 3px 8px; color: white; font: 900 17px var(--utility); letter-spacing: .04em; }
.recruitment-mode-banner span { font-family: var(--body-bold); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.recruitment-mode-banner.mode-2 { border-color: #397b70; background: #e6f0ec; color: #245e56; }.recruitment-mode-banner.mode-2 b { background: var(--jade); }
.recruitment-mode-banner.mode-3 { border-color: #9c7540; background: #f5ead4; color: #765427; }.recruitment-mode-banner.mode-3 b { background: #9b7139; }
.recruitment-mode-banner.mode-5 { border-color: #b04a3c; background: linear-gradient(90deg,#fff0dc,#f8e2c3); color: #87372d; }.recruitment-mode-banner.mode-5 b { background: var(--cinnabar); color: #fff4cf; }
.post-identity { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.school-glyph { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border: 1px solid #a7bdb6; background: linear-gradient(145deg, #eef5f2, #d7e4df); }
.school-glyph img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(22,45,43,.16)); }
.post-identity.has-publisher { align-items: flex-start; }
.post-identity.has-publisher .school-glyph { flex-basis: 82px; width: 82px; height: 82px; }
.post-identity.has-publisher .school-glyph > img { width: 70px; height: 70px; }
.post-identity.has-publisher .school-glyph .heart-method-icon-stack img { width: 48px; height: 48px; border-radius: 9px; }
.post-identity.has-publisher .school-glyph .heart-method-icon-stack img + img { margin-left: -16px; }
.post-identity h3 { margin: 0; font-family: var(--body-bold); font-size: 24px; font-weight: 700; line-height: 1.25; }
.post-identity p { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); font-size: 12px; }
.post-identity p strong { color: var(--ink-soft); }
.post-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 17px; border: 1px solid #e3dfd5; background: #f9f7f2; }
.post-facts-four { grid-template-columns: repeat(4, 1fr); }
.post-facts-five { grid-template-columns: repeat(5, 1fr); }
.post-facts-six { grid-template-columns: repeat(3, 1fr); }
.post-facts-six > div:nth-child(-n+3) { background-color: rgba(182,138,67,.045); }
.gear-fact { background: linear-gradient(135deg,rgba(182,138,67,.09),rgba(255,255,255,.15)); }
.current-score-fact { background: linear-gradient(135deg,rgba(43,114,105,.08),rgba(255,255,255,.12)); }
.tag.current-score { border-color: rgba(43,114,105,.3); background: rgba(43,114,105,.06); color: var(--jade); }
.post-facts > div { min-height: 60px; padding: 10px 13px; border-right: 1px solid #e3dfd5; }
.post-facts > div:last-child { border: 0; }
.post-facts small, .post-facts strong, .post-facts span { display: block; }
.post-facts small, .event-target small { color: #8d928f; font-size: 10px; }
.post-facts strong { margin-top: 3px; color: var(--cinnabar); font: 700 20px var(--utility); }
.post-facts strong em { margin-left: 2px; font: 400 11px var(--body); }
.post-facts span { margin-top: 5px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.post-copy { margin-top: 13px; }
.post-copy-row { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 10px; align-items: start; padding-bottom: 10px; }
.post-copy-row + .post-copy-row { padding-top: 10px; border-top: 1px dashed #d7d2c8; }
.post-copy-row:last-child { padding-bottom: 0; }
.post-copy-row b { color: var(--jade); font-size: 12px; line-height: 1.75; }
.post-copy-row p { min-width: 0; margin: 0; color: #525f5c; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.versus-line { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; margin-top: 17px; border: 1px solid #ded8ca; }
.versus-line > div { padding: 10px 14px; background: #f8f6f0; text-align: center; }
.versus-line small, .versus-line strong { display: block; }
.versus-line small { color: var(--muted); font-size: 10px; }
.versus-line strong { margin-top: 4px; font-family: var(--display); font-size: 17px; }
.versus-line i { display: grid; place-items: center; background: var(--ink); color: #e6cf9e; font: 700 12px var(--utility); }
.event-target { margin-top: 16px; padding: 11px 14px; border-left: 3px solid var(--gold); background: var(--gold-light); }
.event-target small, .event-target strong { display: block; }
.event-target strong { margin-top: 4px; font-family: var(--display); font-size: 18px; }
.post-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d7d2c8; }
.post-bottom-actions { display: flex; align-items: stretch; gap: 7px; }
.post-like-button { min-width: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #c7b280; background: #fffaf0; color: #84652e; padding: 5px 9px; cursor: pointer; }
.post-like-button span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #e7d6ae; color: #6f5324; font: 800 11px var(--display); transition: transform .18s ease; }
.post-like-button strong { font: 800 12px var(--utility); }
.post-like-button:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.post-like-button:hover span { transform: translateY(-1px) rotate(-7deg); }
.post-like-button.is-liked { border-color: var(--cinnabar); background: #fff0e9; color: var(--cinnabar); }
.post-like-button.is-liked span { background: var(--cinnabar); color: white; }
.post-like-button:disabled { opacity: .55; cursor: wait; }
.tag { display: inline-block; margin-right: 7px; padding: 3px 8px; border: 1px solid #cbd9d5; color: var(--jade); background: #edf4f1; font-size: 10px; }
.tag.score { border-color: #e1ceb0; background: #f6eedf; color: #906d34; }
.tag.muted { border-color: #dcd9d1; background: #f1f0ec; color: var(--muted); }
.contact-reveal { min-width: 114px; border: 1px solid var(--jade); background: transparent; color: var(--jade); padding: 7px 12px; cursor: pointer; }
.contact-reveal:hover, .contact-reveal.is-open { background: var(--jade); color: white; }
.contact-reveal.is-copied::before { content: '✓ '; color: #f1d693; font-weight: 800; }
.post-screenshot { min-height: 86px; margin: 14px 0 0; border: 1px solid #c9b78f; background: linear-gradient(115deg,#f5edda,#fffdf7); }
.post-screenshot button { width: 100%; min-height: 84px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 2px 14px; padding: 12px 15px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.post-screenshot button:hover { background: rgba(178,138,71,.09); }
.post-screenshot button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 45px; height: 45px; background: var(--cinnabar); color: #fff5d7; font: 800 23px var(--display); box-shadow: 4px 4px 0 rgba(70,49,26,.12); }
.post-screenshot strong { align-self: end; font: 800 16px var(--display); letter-spacing: .04em; }
.post-screenshot small { align-self: start; color: var(--muted); font-size: 9px; line-height: 1.5; }
.post-screenshot > img { display: block; width: 100%; max-height: 720px; object-fit: contain; background: #172728; }
.load-more-row { display: flex; justify-content: center; padding: 11px 0 4px; }
.load-more-row button { display: grid; grid-template-columns: 40px auto; gap: 1px 12px; align-items: center; min-width: min(330px,100%); padding: 10px 17px; border: 1px solid var(--ink); background: var(--ink); color: white; text-align: left; cursor: pointer; box-shadow: 4px 4px 0 #d9d3c5; }
.load-more-row button:hover { border-color: var(--cinnabar); background: var(--cinnabar); }
.load-more-row button:disabled { opacity: .6; cursor: wait; }
.load-more-row span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.5); color: #e6cf9e; font: 800 18px var(--display); }
.load-more-row strong { align-self: end; font: 700 13px var(--body); }
.load-more-row small { align-self: start; color: rgba(255,255,255,.58); font-size: 8px; }

.board-aside { display: grid; gap: 16px; align-content: start; }
.aside-card { position: relative; border: 1px solid var(--line); background: var(--white); padding: 22px; }
.aside-card h3 { margin: 7px 0 12px; font-family: var(--display); font-size: 21px; line-height: 1.45; }
.aside-kicker { color: var(--gold); font-size: 9px; }
.etiquette-card { display: grid; grid-template-columns: 30px 1fr; gap: 13px; background: var(--ink); color: white; border-color: var(--ink); }
.vertical-title { writing-mode: vertical-rl; color: #e0c993; font-family: var(--display); font-size: 20px; letter-spacing: .15em; border-right: 1px solid rgba(255,255,255,.16); padding-right: 8px; }
.etiquette-card h3 { color: #fff; }
.etiquette-card ul { margin: 0; padding-left: 18px; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.9; }
.school-cloud { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.school-cloud button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid #d9d6cd; background: #f7f5ef; padding: 7px 3px 6px; color: #55615e; font-size: 10px; cursor: pointer; }
.school-cloud img { width: 27px; height: 27px; object-fit: contain; }
.school-cloud button:hover { border-color: var(--jade); color: var(--jade); }
.source-card p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

.tournament-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tournament-card { border: 1px solid var(--line); background: var(--white); overflow: hidden; transition: box-shadow .22s ease, transform .22s ease; }
.tournament-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.event-cover { position: relative; display: block; width: 100%; height: 210px; border: 0; padding: 0; background: var(--ink); overflow: hidden; cursor: pointer; }
.event-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tournament-card:hover .event-cover img { transform: scale(1.035); }
.event-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,25,25,.68)); }
.event-status, .event-demo { position: absolute; z-index: 1; top: 14px; padding: 5px 10px; color: white; font-size: 11px; font-weight: 700; }
.event-status { left: 14px; background: var(--jade); }
.event-status.live { background: var(--cinnabar); }
.event-status.ended { background: #68716f; }
.event-status.soon { background: #8d6a31; }
.event-demo { right: 14px; border: 1px solid rgba(255,255,255,.7); background: rgba(16,35,35,.5); }
.event-card-body { padding: 18px 20px 20px; }
.event-organizer { margin: 0 0 5px; color: var(--jade); font-size: 10px; letter-spacing: .08em; }
.event-card-body h3 { margin: 0; font-family: var(--display); font-size: 25px; line-height: 1.35; }
.event-card-body h3 button { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.event-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.event-format { margin: 12px 0; color: var(--ink-soft); font-size: 13px; }
.event-reward { padding: 10px 12px; border-left: 3px solid var(--gold); background: #f5eddd; }
.event-reward small, .event-reward strong { display: block; }
.event-reward small { color: #94733c; font-size: 9px; }
.event-reward strong { margin-top: 3px; font-size: 12px; }
.next-match { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.next-match span, .next-match strong { display: block; }
.next-match span { color: var(--muted); font-size: 9px; }
.next-match strong { margin-top: 5px; font: 700 13px var(--utility); }
.next-match i { color: var(--cinnabar); font-style: normal; margin: 0 6px; }
.event-more { width: 100%; margin-top: 14px; padding: 9px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; color: var(--jade); font-size: 12px; cursor: pointer; }
.event-more span { float: right; }

.empty-state { min-height: 330px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #bcb9b1; background: rgba(255,255,255,.45); padding: 30px; }
.empty-state > span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); color: var(--muted); font-family: var(--display); font-size: 25px; }
.empty-state h3 { margin: 16px 0 6px; font-family: var(--display); font-size: 23px; }
.empty-state p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.empty-state button { border: 0; background: var(--ink); color: white; padding: 9px 17px; cursor: pointer; }
.skeleton { min-height: 190px; }
.skeleton span { display: block; height: 14px; margin-bottom: 15px; background: linear-gradient(90deg, #eae7df, #f7f5ef, #eae7df); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
.skeleton span:nth-child(1) { width: 34%; }.skeleton span:nth-child(2) { width: 70%; height: 28px; }.skeleton span:nth-child(3) { width: 90%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.site-footer { min-height: 140px; padding: 26px max(30px, calc((100% - 1440px) / 2)) 18px; display: grid; gap: 20px; background: #162626; color: rgba(255,255,255,.56); }
.footer-summary { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-brand { display: flex; align-items: baseline; gap: 12px; }
.site-footer strong { color: white; font-family: var(--display); font-size: 25px; }
.site-footer span, .site-footer p, .footer-links { font-size: 11px; }
.footer-links { display: flex; gap: 16px; }
.footer-links a:hover, .filing-link:hover, .footer-legal button:hover { color: white; }
.footer-legal { width: 100%; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; }
.footer-legal > * + * { position: relative; }
.footer-legal > * + *::before { content: ""; position: absolute; left: -10px; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.32); }
.filing-link { color: rgba(255,255,255,.76); text-decoration: underline; text-decoration-color: rgba(214,189,139,.42); text-underline-offset: 3px; }
.footer-legal button { border: 0; padding: 0; background: transparent; color: rgba(255,255,255,.64); font: inherit; cursor: pointer; }

.utility-dock { position: fixed; z-index: 18; right: 18px; bottom: 22px; display: grid; gap: 7px; filter: drop-shadow(0 10px 22px rgba(17,38,37,.2)); }
.utility-dock button { display: grid; grid-template-columns: 30px 1fr; align-items: center; min-width: 128px; border: 1px solid rgba(255,255,255,.24); background: rgba(22,39,40,.94); color: white; padding: 6px 12px 6px 7px; cursor: pointer; backdrop-filter: blur(10px); }
.utility-dock button:hover { background: var(--cinnabar); }
.utility-dock span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d7bd88; color: #e2c993; font: 700 15px var(--display); }
.utility-dock strong { font-size: 11px; letter-spacing: .04em; }

dialog { color: var(--ink); overscroll-behavior: contain; }
.publish-dialog, .event-dialog, .utility-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 30px); border: 0; padding: 0; background: var(--paper); box-shadow: 0 30px 100px rgba(5,16,16,.45); }
dialog::backdrop { background: rgba(7,22,22,.72); backdrop-filter: blur(4px); }
.dialog-close-form { position: sticky; z-index: 4; top: 0; height: 0; margin: 0; text-align: right; }
.dialog-close-form button { width: 42px; height: 42px; border: 0; background: var(--ink); color: white; font-size: 24px; cursor: pointer; }
.dialog-head { padding: 30px 40px 23px; background: var(--ink); color: white; }
.dialog-head .section-kicker { color: #d6bd8b; }
.dialog-head h2 { margin: 7px 0 5px; font-family: var(--display); font-size: 34px; }
.dialog-head p:last-child { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; }
.publish-form { padding: 28px 40px 40px; }
.submission-error-summary { position: sticky; z-index: 3; top: 12px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid #b84a3b; border-left: 4px solid var(--cinnabar); background: #fff4e5; color: #542a22; box-shadow: 0 8px 22px rgba(91,40,29,.16); }
.submission-error-summary[hidden] { display: none; }
.submission-error-summary > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cinnabar); color: white; font: 800 18px var(--display); }
.submission-error-summary strong { display: block; margin: 1px 0 6px; color: #792e25; font: 800 15px var(--display); }
.submission-error-summary ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.submission-error-summary li { color: #69453c; font-size: 11px; line-height: 1.55; }
.submission-error-summary li::before { content: "·"; margin-right: 5px; color: var(--cinnabar); font-weight: 900; }
.submission-error-summary button { padding: 0; border: 0; border-bottom: 1px dashed #b66d5e; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.submission-error-summary button:hover, .submission-error-summary button:focus-visible { color: #9d3026; border-bottom-style: solid; outline: 0; }
.publish-form fieldset { margin: 0 0 24px; padding: 0; border: 0; }
.publish-form legend { width: 100%; margin-bottom: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--jade); font-family: var(--display); font-size: 20px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 14px; }
.form-grid label, .settings-label { display: grid; align-content: start; grid-auto-rows: max-content; gap: 6px; color: #52605d; font-size: 12px; }
.form-grid .span-2 { grid-column: span 2; }
.client-choice { display: grid; gap: 9px; padding: 14px; border: 1px solid #cdbd9d; background: linear-gradient(90deg,#f7eedc,#faf8f2); }
.client-choice > span { color: #664a27; font: 700 15px var(--display); }.client-choice > span b { margin-left: 5px; padding: 2px 5px; background: var(--cinnabar); color: white; font: 700 9px var(--body); }
.client-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.client-choice label { position: relative; display: grid; grid-template-columns: 1fr; gap: 3px; padding: 11px 13px 11px 48px; border: 1px solid #d4cec0; background: var(--white); cursor: pointer; }
.client-choice input { position: absolute; left: 14px; top: 50%; width: 18px !important; height: 18px; margin: -9px 0 0; accent-color: var(--cinnabar); }
.client-choice strong { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; }.client-choice strong i { display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: white; font: 700 12px var(--display); font-style: normal; }
.client-choice small { color: var(--muted); font-size: 9px; }
.client-choice label:has(input:checked) { border-color: var(--cinnabar); box-shadow: inset 0 0 0 1px var(--cinnabar); background: #fffaf1; }.client-choice label:has(input:checked) strong i { background: var(--cinnabar); }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 44px; border: 1px solid #cbc7bc; background: var(--white); padding: 10px 11px; color: var(--ink); border-radius: 0; font-size: var(--font-control); }
.form-grid textarea { resize: vertical; line-height: 1.65; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--jade); outline: 2px solid rgba(43,114,105,.12); }
.form-grid input[aria-invalid="true"], .form-grid select[aria-invalid="true"], .form-grid textarea[aria-invalid="true"], .has-field-error.check-card { border-color: var(--cinnabar); outline: 2px solid rgba(176,59,48,.12); background: #fffaf5; }
.client-choice.has-field-error { border-color: var(--cinnabar); box-shadow: inset 0 0 0 1px rgba(176,59,48,.24); }
.client-choice.has-field-error > span { color: var(--cinnabar); }
.recruitment-mode-choice { border-width: 2px; border-color: #b89a68; background: linear-gradient(105deg,#fff7e8,#f3ead9); }
.recruitment-mode-choice > span { font-size: 17px; }
.recruitment-mode-choice label:first-child strong i { background: var(--jade); }
.recruitment-mode-choice label:last-child strong i { background: var(--cinnabar); }
.recruitment-mode-choice label:has(input:checked) { border-color: var(--cinnabar); background: white; box-shadow: inset 0 0 0 2px var(--cinnabar), 0 5px 15px rgba(123,69,37,.09); }
.arena-mode-choice > div { grid-template-columns: repeat(3,1fr); }
.arena-mode-choice label { padding-left: 45px; }
.arena-mode-choice label:nth-child(1) strong i { background: var(--jade); }
.arena-mode-choice label:nth-child(2) strong i { background: #9b7139; }
.arena-mode-choice label:nth-child(3) strong i { background: var(--cinnabar); }
.check-card { grid-template-columns: auto 1fr !important; align-items: center; border: 1px solid #cbc7bc; background: var(--white); padding: 10px 12px; }
.check-card input { width: auto; }
.check-card span, .check-card strong, .check-card small { display: block; }
.check-card small { margin-top: 2px; color: #8b918f; }
.consent { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; }
.consent.has-field-error { margin-inline: -8px; padding: 8px; border-left: 3px solid var(--cinnabar); background: #fff4e5; color: #7b3027; }
.form-submit { width: 100%; margin-top: 18px; border: 0; background: var(--cinnabar); color: white; padding: 13px; cursor: pointer; font-weight: 700; }
.form-submit:disabled { opacity: .55; cursor: wait; }
.form-footnote { margin: 9px 0 0; text-align: center; color: var(--muted); font-size: 10px; }
.network-privacy-note { margin: 10px 0 0; padding: 9px 11px; border-left: 2px solid #b8955d; background: #f4efe4; color: #716653; font-size: 9px; line-height: 1.65; }
.field-help { display: block; margin-top: 0; color: var(--jade); font-size: var(--font-min); font-weight: 400; line-height: 1.55; }
.screenshot-fieldset legend { display: flex; align-items: baseline; justify-content: space-between; }.screenshot-fieldset legend small { color: var(--muted); font: 400 10px var(--body); }
.screenshot-uploader { border: 1px solid #c9b78f; background: linear-gradient(115deg,#f5edda,#fffdf7); padding: 13px; }
.screenshot-pick { position: relative; min-height: 90px; display: grid !important; grid-template-columns: 58px 1fr; align-items: center; gap: 3px 14px !important; padding: 13px; border: 1px dashed #a99161; background: rgba(255,255,255,.64); cursor: pointer; }
.screenshot-pick input { position: absolute; inline-size: 1px !important; block-size: 1px; opacity: 0; }
.screenshot-pick > span { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; background: var(--cinnabar); color: #fff5d7; font: 800 26px var(--display); box-shadow: 4px 4px 0 rgba(70,49,26,.12); }
.screenshot-pick strong { align-self: end; color: var(--ink); font: 800 17px var(--display); }.screenshot-pick small { align-self: start; color: var(--muted); font-size: 10px; line-height: 1.55; }
.screenshot-pick:has(input:focus-visible) { outline: 3px solid rgba(178,138,71,.75); outline-offset: 3px; }
.screenshot-preview { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; }.screenshot-preview img { width: 190px; height: 112px; object-fit: contain; background: var(--ink); }.screenshot-preview strong,.screenshot-preview small { display: block; }.screenshot-preview strong { color: var(--ink); font: 800 16px var(--display); }.screenshot-preview small { margin-top: 4px; color: var(--muted); font-size: 9px; }.screenshot-preview button { margin-top: 10px; border: 1px solid var(--cinnabar); background: transparent; color: var(--cinnabar); padding: 6px 10px; font-size: 10px; cursor: pointer; }
.screenshot-note { margin: 9px 0 0; color: #75684d; font-size: 9px; line-height: 1.6; }
.utility-dialog { width: min(680px,calc(100vw - 32px)); }
.report-dialog { width: min(560px,calc(100vw - 32px)); }
.report-dialog-head { border-bottom-color: #c1473b; background: linear-gradient(105deg,#3c2423,var(--ink) 72%); }
.report-submit { background: var(--cinnabar); }
.utility-dialog-head { padding: 30px 38px 23px; border-bottom: 3px solid var(--cinnabar); background: var(--ink); color: white; }
.utility-dialog-head p { margin: 0; color: #d8bd87; font: 700 9px var(--utility); letter-spacing: .22em; }
.utility-dialog-head h2 { margin: 7px 0 4px; font: 800 33px var(--display); }
.utility-dialog-head span { color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.7; }
.team-draw-dialog { width: min(940px,calc(100vw - 32px)); max-height: calc(100vh - 30px); border: 0; padding: 0; background: #f4f0e6; box-shadow: 0 30px 100px rgba(5,16,16,.45); }
.team-draw-dialog::backdrop { background: rgba(12,25,25,.7); backdrop-filter: blur(4px); }
.team-draw-head { min-height: 132px; display: flex; align-items: center; gap: 20px; padding: 26px 62px 24px 38px; border-bottom: 3px solid var(--cinnabar); color: white; background: var(--ink); background-image: repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 18px 19px); }
.team-draw-seal { flex: 0 0 auto; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #e2c890; color: #f4d797; font: 800 20px var(--display); letter-spacing: .08em; transform: rotate(-3deg); box-shadow: inset 0 0 0 5px var(--ink),inset 0 0 0 6px #9a7442; }
.team-draw-head p { margin: 0; color: #d8bd87; font: 700 9px var(--utility); letter-spacing: .22em; }.team-draw-head h2 { margin: 6px 0 4px; font: 800 35px var(--display); letter-spacing: .06em; }.team-draw-head div > span { color: rgba(255,255,255,.64); font-size: 11px; }
.team-draw-body { padding: 24px 30px 30px; }.team-draw-source { display: grid; grid-template-columns: minmax(170px,.8fr) minmax(300px,1.4fr) auto; align-items: end; gap: 13px; padding: 16px; border: 1px solid #cec6b5; background: #fffdfa; }
.team-draw-source small { color: var(--cinnabar); font: 700 9px var(--utility); letter-spacing: .1em; }.team-draw-source h3 { margin: 4px 0 0; font: 800 17px var(--display); }.team-draw-source select { width: 100%; height: 42px; border: 1px solid var(--line); background: white; padding: 0 11px; color: var(--ink); }.team-draw-source button { height: 42px; border: 0; background: var(--cinnabar); color: white; padding: 0 20px; font-weight: 800; cursor: pointer; }.team-draw-source button:hover { background: #832f28; }.team-draw-source button:disabled { opacity: .55; cursor: wait; }
.team-draw-status { min-height: 22px; margin: 12px 2px 0; color: var(--muted); font-size: 11px; }.team-draw-status.is-error { color: var(--cinnabar); }
.team-draw-results { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 4px; }
.team-draw-card { position: relative; min-width: 0; min-height: 230px; display: flex; flex-direction: column; padding: 13px 11px 11px; border: 1px solid #cfc7b6; background: #fffefb; box-shadow: 2px 2px 0 #ded6c6; }
.team-draw-card::before { content: attr(data-order); position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 25px; height: 25px; background: var(--ink); color: #e9cf97; font: 800 10px var(--utility); }.team-draw-card-head { display: flex; align-items: center; gap: 8px; padding-right: 20px; }.team-draw-card-head > span { flex: 0 0 auto; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--line); background: #f2eee4; }.team-draw-card-head img { width: 32px; height: 32px; object-fit: contain; }.team-draw-card h3 { overflow: hidden; margin: 0; color: var(--ink); font-family: var(--body-bold); font-size: 16px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }.team-draw-card h3 + small { color: var(--muted); font-size: 9px; }
.team-draw-card dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 7px; margin: 12px 0 0; font-size: 10px; }.team-draw-card dt { color: #8d8a82; }.team-draw-card dd { overflow: hidden; margin: 0; font-weight: 700; text-align: right; white-space: nowrap; text-overflow: ellipsis; }.team-draw-card-reason { flex: 1; margin: 11px 0; padding-top: 9px; border-top: 1px dashed #d6cebd; color: #53625f; font-size: 10px; line-height: 1.55; }
.team-draw-card button { width: 100%; min-height: 34px; border: 1px solid var(--jade); background: transparent; color: var(--jade); font-size: 10px; cursor: pointer; overflow-wrap: anywhere; }.team-draw-card button:hover,.team-draw-card button.is-open { background: var(--jade); color: white; }
.team-draw-empty { grid-column: 1 / -1; padding: 35px 20px; border: 1px dashed #c8bc9f; background: rgba(255,255,255,.5); text-align: center; }.team-draw-empty strong { display: block; font: 800 20px var(--display); }.team-draw-empty p { margin: 8px 0 15px; color: var(--muted); font-size: 11px; }.team-draw-empty button { border: 0; background: var(--ink); color: white; padding: 9px 16px; cursor: pointer; }
.team-draw-method { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid #cec6b5; }.team-draw-method > span { display: grid; place-items: center; width: 26px; height: 26px; background: #d8cfba; color: var(--ink); font: 800 11px var(--display); }.team-draw-method p { margin: 0; color: #747873; font-size: 10px; line-height: 1.75; }.team-draw-method strong { color: var(--ink); }.team-draw-method a { color: var(--jade); font-weight: 700; }
.utility-form { display: grid; gap: 15px; padding: 25px 38px 34px; }
.utility-form label, .manage-lookup-form label { display: grid; gap: 6px; color: #52605d; font-size: 11px; }
.utility-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.account-dialog-body { padding: 27px 38px 34px; }.account-dialog-body > section { display: grid; grid-template-columns: 70px 1fr; gap: 18px; align-items: start; }.account-dialog-body h3 { margin: 0 0 7px; font: 700 23px var(--display); }.account-dialog-body p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }.account-auth-message { margin: 0 0 18px; padding: 11px 13px; border-left: 3px solid var(--cinnabar); background: #fff1ec; color: #84382f; font-size: 11px; line-height: 1.65; }.qq-login-mark { width: 24px; height: 24px; margin: 12px auto 0; }.qq-login-action { display: inline-block; margin-top: 17px; line-height: 0; }.qq-login-action img { display: block; width: 76px; height: 24px; }.qq-login-action.is-disabled { opacity: .45; pointer-events: none; }.account-dialog-body small { display: block; margin-top: 10px; color: var(--muted); line-height: 1.6; }.account-dialog-body #accountLoggedIn { display: block; }.account-profile { display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid rgba(45,116,106,.25); background: linear-gradient(100deg,rgba(45,116,106,.09),rgba(255,255,255,.7)); }.account-profile-avatar { position: relative; flex: 0 0 auto; display: block; width: 64px; height: 64px; }.account-profile-avatar img { width: 64px; height: 64px; border: 2px solid var(--jade); border-radius: 50%; object-fit: cover; background: #e8e5dd; box-shadow: 0 0 0 3px rgba(45,116,106,.12); }.account-profile-avatar i { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border: 3px solid white; border-radius: 50%; background: var(--jade); }.account-verified-badge { display: inline-block; margin-bottom: 5px; padding: 2px 7px; background: var(--jade); color: white; font-size: 8px; letter-spacing: .08em; }.account-profile h3 { margin-bottom: 2px; }.account-profile #accountIdentityMeta { color: var(--jade); font-size: 9px; letter-spacing: .05em; }.account-profile-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 20px; }.account-profile-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }.account-profile-form input { border: 1px solid var(--line); background: white; padding: 10px 11px; }.account-profile-form button,.account-dialog-actions button,.account-dialog-actions a { border: 1px solid var(--ink); background: var(--ink); color: white; padding: 10px 14px; }.account-dialog-actions { display: flex; justify-content: space-between; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.account-dialog-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }.account-dialog-actions button:last-child { background: white; color: var(--ink); }
.account-verified-badge { font-size: 12px; }
.account-profile #accountIdentityMeta { font-size: 12px; letter-spacing: .03em; }
.utility-form input, .utility-form select, .utility-form textarea, .manage-lookup-form input, .manage-lookup-form select { width: 100%; border: 1px solid #c9c5bb; background: var(--white); color: var(--ink); padding: 10px 11px; }
.utility-form textarea { resize: vertical; line-height: 1.7; }
.utility-submit, .manage-lookup-form button { border: 0; background: var(--cinnabar); color: white; padding: 12px 17px; font-weight: 700; cursor: pointer; }
.utility-form > p, .manage-note { margin: -5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.saved-posts, .manage-lookup-form { padding: 23px 38px 0; }
.saved-posts h3, .manage-lookup-form h3 { margin: 0 0 11px; font: 700 20px var(--display); }
.managed-post-list { display: grid; gap: 9px; }
.managed-post-card, .managed-post-result { border: 1px solid var(--line); border-left: 3px solid var(--jade); background: var(--white); padding: 13px 14px; }
.managed-post-card > div, .managed-post-result > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.managed-post-card strong, .managed-post-result strong { display: block; font: 700 17px var(--display); }
.managed-post-card small, .managed-post-result small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.managed-post-card code { color: var(--cinnabar); font: 700 11px var(--utility); }
.managed-post-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.managed-post-actions button { border: 1px solid var(--line); background: white; padding: 6px 9px; font-size: 10px; cursor: pointer; }
.managed-post-actions .edit { border-color: rgba(43,114,105,.48); color: var(--jade); font-weight: 700; }
.managed-post-actions .danger { color: var(--cinnabar); border-color: rgba(166,64,52,.38); }
.manage-empty { margin: 0; padding: 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: 11px; }
.manage-lookup-form { margin-top: 21px; padding-top: 19px; border-top: 1px solid var(--line); }
.manage-lookup-form > div { display: grid; grid-template-columns: 160px 130px 1fr auto; align-items: end; gap: 8px; }
.manage-lookup-form > .manage-lookup-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 13px; }
.manage-lookup-heading p { margin: 0 0 4px; color: var(--cinnabar); font: 700 12px var(--utility); letter-spacing: .15em; }
.manage-lookup-heading h3 { margin: 0; }
.manage-lookup-heading > span { max-width: 480px; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: right; }
.manage-lookup-form > .legacy-claim-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.legacy-claim-list button { min-width: 0; border: 1px solid #d2c7b3; border-left: 3px solid var(--gold); background: #f8f5ed; color: var(--ink); padding: 10px 12px; text-align: left; }
.legacy-claim-list strong,.legacy-claim-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-claim-list strong { font: 700 14px var(--body-bold); }.legacy-claim-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }
#manageLookupResult { padding: 12px 38px 0; }
.manage-claim-success { margin: 0; border-left: 3px solid var(--jade); background: #edf6f2; color: #225e56; padding: 11px 13px; font-size: 10px; line-height: 1.65; }
.manage-note { padding: 18px 38px 30px; }
.edit-submission-dialog .dialog-head { border-bottom-color: var(--jade); }
.publisher-match-manager { margin: 0 40px 42px; border-top: 3px solid var(--ink); }
.publisher-match-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 0 15px; border-bottom: 1px solid var(--line); }
.publisher-match-heading p { margin: 0; color: var(--gold); font: 700 9px var(--utility); letter-spacing: .2em; }.publisher-match-heading h3 { margin: 5px 0 3px; font: 800 25px var(--display); }.publisher-match-heading span { color: var(--muted); font-size: 10px; }.publisher-match-heading > b { flex: 0 0 auto; padding: 5px 9px; background: var(--ink); color: #e5cd9b; font: 700 10px var(--utility); }
.publisher-match-list { display: grid; gap: 8px; padding: 16px 0; }
.publisher-match-card { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(260px,1.5fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--white); padding: 11px 12px; }
.publisher-match-card.live { border-left-color: var(--cinnabar); }.publisher-match-card.finished { border-left-color: var(--jade); }
.publisher-match-card small, .publisher-match-card time { display: block; color: var(--muted); font-size: 9px; }.publisher-match-card small { color: var(--jade); font-weight: 700; }.publisher-match-card time { margin-top: 4px; }
.publisher-match-card-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; text-align: center; font-size: 12px; }.publisher-match-card-main b { color: var(--cinnabar); font: 700 14px var(--utility); }.publisher-match-card-main i { color: var(--muted); font-style: normal; }
.publisher-match-card-actions { display: flex; gap: 5px; }.publisher-match-card-actions button, .publisher-match-form-head button { border: 1px solid var(--line); background: white; padding: 6px 9px; color: var(--jade); font-size: 9px; cursor: pointer; }.publisher-match-card-actions .danger { color: var(--cinnabar); }
.publisher-match-form { margin-top: 6px; padding: 19px; border: 1px solid var(--line); background: var(--paper-warm); }.publisher-match-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.publisher-match-form-head h4 { margin: 0; font: 700 20px var(--display); }.publisher-match-form-head button { color: var(--muted); }
.publisher-match-error { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--cinnabar); background: #fff4e5; color: #792e25; font-size: 10px; line-height: 1.6; }.publisher-match-error[hidden] { display: none; }
.publisher-match-save { width: 100%; margin-top: 14px; border: 0; background: var(--jade); color: white; padding: 12px; font-weight: 700; cursor: pointer; }.publisher-match-save:disabled { opacity: .55; cursor: wait; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 30px); max-width: calc(100vw - 30px); padding: 11px 18px; background: var(--ink); color: white; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
.toast[data-kind="error"] { background: var(--cinnabar); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.event-dialog { width: min(1320px, calc(100vw - 32px)); }
.event-detail-cover { position: relative; height: 300px; background: var(--ink); overflow: hidden; }
.event-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.event-detail-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,25,25,.72)); }
.event-detail-head { padding: 25px 38px 18px; }
.event-detail-head > p { margin: 0; color: var(--jade); font-size: 11px; }
.event-detail-head h2 { margin: 5px 0 12px; font-family: var(--display); font-size: 36px; }
.event-keyfacts { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; margin: 0 38px; border: 1px solid var(--line); background: var(--white); }
.event-keyfacts div { padding: 13px 15px; border-right: 1px solid var(--line); }
.event-keyfacts div:last-child { border: 0; }
.event-keyfacts small, .event-keyfacts strong { display: block; }
.event-keyfacts small { color: var(--muted); font-size: 9px; }
.event-keyfacts strong { margin-top: 5px; font-size: 12px; line-height: 1.5; }
.event-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 28px 38px; }
.event-detail-grid h3, .matches-section h3 { margin: 0 0 7px; font-family: var(--display); font-size: 21px; }
.event-detail-grid p { margin: 0; color: #586460; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.matches-section { margin: 0 38px 38px; padding-top: 24px; border-top: 2px solid var(--ink); }
.match-row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 15px; min-height: 67px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.5); }
.match-row > div:first-child small, .match-row > div:first-child time { display: block; }
.match-row > div:first-child small { color: var(--jade); font-weight: 700; }
.match-row time { margin-top: 4px; color: var(--muted); font-size: 9px; }
.match-teams { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; text-align: center; }
.match-teams strong { display: flex; justify-content: center; gap: 6px; color: var(--cinnabar); font-family: var(--utility); }
.match-teams i { font-style: normal; color: var(--muted); }
.match-row > em { justify-self: end; font-style: normal; color: var(--muted); font-size: 10px; }
.match-row.live > em { color: var(--cinnabar); font-weight: 700; }
.no-matches { color: var(--muted); }

.event-showcase-section { margin: 0 38px 34px; }
.event-section-heading { position: relative; margin-bottom: 16px; padding-left: 18px; border-left: 3px solid var(--cinnabar); }
.event-section-heading p { margin: 0; color: var(--gold); font: 700 9px var(--utility); letter-spacing: .22em; }
.event-section-heading h3 { margin: 5px 0 0; font: 800 29px/1.1 var(--display); }
.event-section-heading > span { position: absolute; right: 0; bottom: 2px; color: rgba(255,255,255,.54); font-size: 9px; }
.reward-table { overflow: hidden; border: 1px solid #d7c69f; background: #fff6d9; color: #805516; }
.reward-row { display: grid; grid-template-columns: minmax(135px,22%) 1fr; min-height: 52px; border-bottom: 1px solid #eadfbd; }
.reward-row:last-child { border-bottom: 0; }.reward-row > * { display: flex; align-items: center; padding: 13px 20px; }.reward-row > :first-child { justify-content: center; border-right: 1px solid #eadfbd; }
.reward-row b { font-weight: 500; }.reward-head { min-height: 48px; background: #482926; color: #fff9e8; }.reward-head strong { justify-content: center; font-size: 14px; }
.event-rules-showcase { padding-top: 4px; }
.event-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-flow-grid article { padding: 22px 24px; border: 1px solid #d6cec0; background: var(--white); }
.event-flow-grid article > span { display: block; margin-bottom: 13px; color: var(--cinnabar); font: 700 18px var(--display); }
.event-flow-grid ul { margin: 0; padding-left: 18px; color: #4e5b58; font-size: 12px; line-height: 1.9; }
.event-flow-grid li::marker { color: var(--gold); }
.event-rules-showcase details { margin-top: 12px; border: 1px solid #d6cec0; background: rgba(255,255,255,.55); }
.event-rules-showcase summary { padding: 13px 17px; color: var(--jade); font-size: 12px; font-weight: 700; cursor: pointer; }.event-rules-showcase details p { margin: 0; padding: 0 17px 17px; color: #586460; font-size: 12px; line-height: 1.85; white-space: pre-line; }
.bracket-showcase, .stream-showcase { margin-inline: 0; padding: 34px 38px 38px; background: #4a2724; color: #fff6dc; }
.bracket-showcase { background-image: radial-gradient(circle at 50% -20%,rgba(188,129,74,.32),transparent 45%),linear-gradient(115deg,#4a2724,#321d1c); }
.event-section-heading.light { border-left-color: #e4bc69; }.event-section-heading.light p { color: #e4bc69; }.event-section-heading.light h3 { color: #fff2d0; }
.bracket-scroll { overflow-x: auto; padding: 2px 2px 15px; scrollbar-color: #a9783d #2a1716; }
.bracket-board { min-width: max(100%, calc(var(--stage-count, 4) * 250px)); display: flex; gap: 30px; align-items: stretch; }
.bracket-stage { flex: 1 0 220px; min-width: 220px; }
.bracket-stage h4 { margin: 0 0 18px; text-align: center; color: #f5dfad; font: 700 20px var(--display); }
.bracket-stage > div { min-height: 100%; display: flex; flex-direction: column; justify-content: space-around; gap: 15px; }
.bracket-match { position: relative; border-left: 3px solid #806345; background: rgba(38,19,18,.68); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.bracket-match::after { content: ""; position: absolute; top: 50%; left: 100%; width: 33px; border-top: 1px solid rgba(255,237,201,.55); }
.bracket-stage:last-child .bracket-match::after { display: none; }
.bracket-match.live { border-left-color: #d64b38; }.bracket-match.finished { border-left-color: #d9a94d; }
.bracket-match-meta { display: flex; justify-content: space-between; gap: 7px; padding: 5px 7px; color: rgba(255,255,255,.58); font-size: 8px; }.bracket-match.live .bracket-match-meta span { color: #ffbe9f; }
.bracket-team { display: grid; grid-template-columns: 1fr 28px; align-items: center; min-height: 35px; padding-left: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.bracket-team strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.bracket-team b { display: grid; place-items: center; align-self: stretch; color: #e8cc8e; font-family: var(--utility); }
.bracket-team.is-winner { background: linear-gradient(90deg,rgba(216,160,69,.12),rgba(216,160,69,.68)); color: white; }.bracket-team.is-winner b { color: #522506; }
.stream-showcase { margin-top: -34px; padding-top: 26px; background: #5a322d; background-image: radial-gradient(circle at 50% 30%,rgba(207,139,97,.2),transparent 42%); }
.stream-frame { position: relative; width: 100%; aspect-ratio: 16 / 8.2; overflow: hidden; border: 1px solid rgba(255,224,193,.45); background: #0b0b0b; box-shadow: inset 0 0 0 12px rgba(121,64,57,.32); }
.stream-frame::before, .stream-frame::after { content: ""; position: absolute; z-index: 2; width: 52px; height: 52px; border-color: rgba(239,193,146,.55); pointer-events: none; }.stream-frame::before { top: 12px; left: 12px; border-top: 2px solid; border-left: 2px solid; }.stream-frame::after { right: 12px; bottom: 12px; border-right: 2px solid; border-bottom: 2px solid; }
.stream-frame iframe { width: 100%; height: 100%; border: 0; }
.stream-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.stream-signal { position: relative; width: 68px; height: 68px; margin-bottom: 14px; border: 1px solid #b98b5c; border-radius: 50%; }.stream-signal::before { content: ""; position: absolute; top: 22px; left: 27px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #e1b472; }
.stream-placeholder p { margin: 0; color: #c69169; font-size: 10px; letter-spacing: .16em; }.stream-placeholder h4 { margin: 6px 0; font: 700 28px var(--display); }.stream-placeholder small { color: rgba(255,255,255,.46); }.stream-placeholder a, .stream-external { margin-top: 18px; padding: 9px 18px; border: 1px solid #d7a96d; color: #f1d7af; text-decoration: none; font-size: 11px; }
.stream-pending { margin-top: 18px; padding: 7px 16px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.45); font-size: 10px; }
.stream-external { display: table; margin-left: auto; }

@media (max-width: 1180px) {
  .header-inner { padding: 0 20px; }
  .header-main { gap: 16px; }
  .official-logo { width: 122px; }.brand-tagline { display: none; }
  .header-tool-link { grid-template-columns: 28px auto; }.header-tool-link > b,.header-tool-copy small { display: none; }
  .header-profile-link small { display: none; }
  .qq-account-button { min-width: 195px; }
  .primary-nav { width: calc(100% - 40px); }
  .nav-item { padding-inline: 12px; }
  .arena-emblem { right: 3%; opacity: .72; }
  .content-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  .filter-rail { grid-template-columns: repeat(3,1fr); }
  .search-wide { grid-column: span 2; }
  .tournament-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .header-main { min-height: 62px; gap: 8px; }
  .brand { flex: 1; }.official-logo { width: 108px; }.brand-name { min-width: 105px; }.brand-name-zh { font-size: 27px; }
  .header-tools { display: none; }
  .header-profile-link { padding-right: 9px; }
  .publish-button { padding: 9px 13px; }
  .qq-account-button { min-width: 44px; grid-template-columns: 34px; padding: 5px; }.qq-account-copy,.qq-account-caret { display: none; }
  .primary-nav { min-height: 46px; }
  .nav-item { padding: 9px 8px; }
  .nav-item small { display: none; }
  .hero { min-height: 465px; }.hero-content { bottom: 62px; padding: 0 20px 18px; }.arena-emblem { display: none; }.hero-controls { right: 20px; bottom: 72px; }
  .hero-stats { left: 20px; right: 20px; }.hero-stats div { min-width: 0; flex: 1; padding-inline: 12px; }
  .content-layout { grid-template-columns: 1fr; }.board-aside { grid-template-columns: 1fr 1fr; }.school-stats-card, .source-card { grid-column: 1 / -1; }
  .filter-rail { grid-template-columns: 1fr 1fr; }.search-wide { grid-column: span 1; }
  .filter-clear { grid-column: 1 / -1; }
  .arena-mode-tabs { width: 100%; }
  .arena-tools { flex-wrap: wrap; gap: 10px; }.board-team-draw { width: 100%; }
  .team-draw-results { grid-template-columns: repeat(2,minmax(0,1fr)); }.team-draw-card:last-child { grid-column: span 2; }.team-draw-source { grid-template-columns: 1fr 1.4fr; }.team-draw-source button { grid-column: 1 / -1; }
  .filter-clear { min-height: 54px; }
  .school-stats-card .school-stats-chart { grid-template-columns: repeat(2,minmax(0,1fr)); }.school-stats-card .school-stat-row button { grid-template-columns: 100px minmax(50px,1fr) 40px; }
  .footer-summary { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .header-inner { padding: 0 12px; }.header-ink { width: 4px; }.official-logo { width: 102px; }.brand-divider { height: 29px; margin: 0 7px; }.brand-name { min-width: 88px; height: 47px; }.brand-name-zh { font-size: 23px; }.brand-name-en { font-size: 6px; letter-spacing: .2em; }.header-actions { gap: 6px; }.publish-button { min-height: 42px; padding-inline: 11px; font-size: 12px; }.qq-account-button { min-width: 42px; min-height: 42px; padding: 4px; }.header-profile-link { width: 42px; min-height: 42px; grid-template-columns: 28px; padding: 5px 6px; }.header-profile-link > span:last-child { display: none; }
  .primary-nav { width: calc(100% - 24px); margin-inline: 12px; padding-left: 0; }.nav-item { font-size: 12px; }.nav-item::after { left: 8px; right: 8px; }
  .hero { min-height: 500px; }.hero-content { bottom: 62px; padding: 0 18px 20px; }.hero h1 { max-width: none; font-size: clamp(27px,8vw,34px); }.hero h1[data-title-size="medium"] { font-size: clamp(22px,6.5vw,28px); }.hero h1[data-title-size="long"] { font-size: clamp(14px,3.9vw,17px); letter-spacing: 0; }.hero-copy { max-width: 335px; font-size: 14px; }.hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-stats { left: 0; right: 0; overflow-x: auto; }.hero-stats div { flex: 0 0 25%; padding: 12px 9px 14px; }.hero-stats strong { font-size: 19px; }.hero-stats span { font-size: 9px; }
  .notice-bar { min-height: 58px; padding: 8px 12px; gap: 9px; }.notice-label { font-size: 11px; }.notice-bar p { font-size: 11px; line-height: 1.5; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.notice-counter { display: none; }.notice-controls { gap: 1px; }.notice-controls button { width: 24px; height: 26px; font-size: 12px; }
  .school-stats-card { grid-column: auto; }.school-stats-card .school-stats-chart { grid-template-columns: 1fr; }.school-stats-card .school-stat-row button { grid-template-columns: 112px minmax(50px,1fr) 40px; }.school-stats-card .school-stat-name b { font-size: 13px; }
  .board-shell { padding: 38px 16px 60px; }.board-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.board-heading h2 { font-size: 34px; }
  .arena-tools { margin-top: 17px; }.board-team-draw { grid-template-columns: 26px auto 1fr; }.board-team-draw small { white-space: normal; }.board-team-draw i { display: none; }
  .arena-mode-tabs { width: 100%; }.arena-mode-tabs button { min-height: 48px; flex-direction: column; align-items: center; gap: 1px; padding: 6px 3px; }.arena-mode-tabs b { font-size: 15px; }.arena-mode-tabs span { font-size: 10px; }.arena-mode-tabs button[data-arena-mode="3v3"].is-active::before { position: absolute; top: 3px; left: 4px; width: 14px; height: 14px; font-size: 7px; }
  .filter-rail { grid-template-columns: 1fr; }.search-wide, .filter-clear { grid-column: auto; }.filter-clear { min-height: 42px; }
  .post-card { padding: 17px 15px; }.post-topline > div { flex-wrap: wrap; }.post-topline time { display: none; }.recruitment-mode-banner { width: 100%; }.recruitment-mode-banner b { min-width: 62px; }.recruitment-mode-banner span { font-size: 14px; }.post-identity h3 { font-size: 21px; }.post-identity:not(.has-publisher) .school-glyph { flex-basis: 45px; width: 45px; height: 45px; }.post-identity:not(.has-publisher) .school-glyph > img { width: 38px; height: 38px; }
  .post-facts { grid-template-columns: 1fr; }.post-facts > div { min-height: 0; border-right: 0; border-bottom: 1px solid #e3dfd5; }.post-copy-row { grid-template-columns: 64px minmax(0,1fr); gap: 8px; }
  .versus-line { grid-template-columns: 1fr 34px 1fr; }.versus-line strong { font-size: 14px; }
  .post-bottom { align-items: flex-start; flex-direction: column; }.post-bottom-actions { width: 100%; }.post-like-button { flex: 0 0 auto; }.contact-reveal { flex: 1; min-width: 0; max-width: none; overflow-wrap: anywhere; }
  .post-screenshot button { grid-template-columns: 43px 1fr; padding-inline: 12px; }.post-screenshot button > span { width: 40px; height: 40px; }.post-screenshot small { font-size: 8px; }
  .board-aside { grid-template-columns: 1fr; }.source-card { grid-column: auto; }
  .site-footer { padding: 24px 18px 90px; gap: 17px; }
  .footer-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-legal { justify-content: flex-start; gap: 9px 17px; line-height: 1.7; }
  .toast { bottom: 86px; }
  .utility-dock { left: 12px; right: 12px; bottom: 10px; grid-template-columns: 1fr 1fr; gap: 5px; }.utility-dock button { min-width: 0; grid-template-columns: 26px 1fr; }
  .publish-dialog, .event-dialog, .utility-dialog, .team-draw-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; margin: 0; }.dialog-head { padding: 26px 20px 20px; }.publish-form { padding: 22px 20px 35px; }.submission-error-summary { top: 6px; margin-inline: -8px; padding: 12px; grid-template-columns: 30px 1fr; }.submission-error-summary > span { width: 27px; height: 27px; }.form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }
  .team-draw-head { min-height: 108px; gap: 12px; padding: 20px 52px 18px 18px; }.team-draw-seal { width: 50px; height: 50px; font-size: 15px; }.team-draw-head h2 { font-size: 28px; }.team-draw-head div > span { display: block; line-height: 1.5; }.team-draw-body { padding: 16px 14px 25px; }.team-draw-source { grid-template-columns: 1fr; padding: 13px; }.team-draw-source button { grid-column: auto; }.team-draw-results { grid-template-columns: 1fr; gap: 9px; }.team-draw-card,.team-draw-card:last-child { grid-column: auto; min-height: 0; }.team-draw-card-reason { min-height: 32px; }.team-draw-method { margin-bottom: 20px; }
  .publisher-match-manager { margin: 0 20px 35px; }.publisher-match-heading { align-items: flex-start; }.publisher-match-heading > b { margin-top: 4px; }.publisher-match-card { grid-template-columns: 1fr; gap: 9px; }.publisher-match-card-actions { width: 100%; }.publisher-match-card-actions button { flex: 1; }.publisher-match-form { padding: 15px; }
  .client-choice > div, .arena-mode-choice > div { grid-template-columns: 1fr; }.utility-dialog-head { padding: 27px 20px 20px; }.utility-form, .saved-posts { padding-left: 20px; padding-right: 20px; }.utility-form-row { grid-template-columns: 1fr; }.manage-lookup-form { padding-left: 20px; padding-right: 20px; }.manage-lookup-form > div { grid-template-columns: 1fr; }.manage-lookup-form > .manage-lookup-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.manage-lookup-heading > span { text-align: left; }.manage-lookup-form > .legacy-claim-list { grid-template-columns: 1fr; }.managed-post-card > div, .managed-post-result > div { align-items: flex-start; flex-direction: column; }.managed-post-actions { width: 100%; flex-wrap: wrap; }.managed-post-actions button { flex: 1; }.manage-note, #manageLookupResult { padding-left: 20px; padding-right: 20px; }
  .screenshot-preview { grid-template-columns: 1fr; }.screenshot-preview img { width: 100%; height: 180px; }
  .account-dialog-body { padding: 24px 20px 34px; }.account-dialog-body > section { grid-template-columns: 36px 1fr; }.qq-login-mark { width: 24px; height: 24px; }.account-profile-form { grid-template-columns: 1fr; }.account-dialog-actions { align-items: stretch; flex-direction: column; }
  .event-cover { height: 175px; }.event-detail-cover { height: 220px; }.event-detail-head, .event-detail-grid { padding-left: 20px; padding-right: 20px; }.event-detail-head h2 { font-size: 28px; }.event-keyfacts { margin-inline: 20px; grid-template-columns: 1fr; }.event-keyfacts div { border-right: 0; border-bottom: 1px solid var(--line); }.event-detail-grid { grid-template-columns: 1fr; }.matches-section { margin-inline: 20px; }.match-row { grid-template-columns: 1fr; gap: 8px; }.match-row > em { justify-self: start; }.match-teams { grid-template-columns: 1fr 54px 1fr; font-size: 12px; }
  .event-showcase-section { margin-inline: 20px; }.event-flow-grid { grid-template-columns: 1fr; }.reward-row { grid-template-columns: 105px 1fr; }.reward-row > * { padding: 11px 10px; font-size: 11px; }.bracket-showcase, .stream-showcase { margin-inline: 0; padding: 28px 20px; }.stream-showcase { margin-top: -34px; }.event-section-heading > span { position: static; display: block; margin-top: 6px; }.stream-frame { aspect-ratio: 4 / 5; }.stream-placeholder h4 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Readability floor: every visible information label is at least 12px.
   Controls use 14px, and weight comes from the native Microsoft YaHei bold face. */
small { font-size: var(--font-min) !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: var(--font-control); }
.brand-tagline,
.nav-item small,
.eyebrow,
.section-kicker,
.aside-kicker,
.hero-stats span,
.notice-label,
.notice-bar p,
.notice-counter,
.school-stats-total span,
.school-stats-intro,
.school-stats-note,
.legacy-stat-heading span,
.board-team-draw i,
.arena-mode-tabs span,
.arena-mode-tabs button[data-arena-mode="3v3"].is-active::before,
.filter-rail label span,
.post-topline,
.post-report-button,
.client-badge,
.arena-mode-badge,
.post-facts small,
.event-target small,
.post-facts strong em,
.versus-line small,
.tag,
.post-like-button span,
.post-screenshot small,
.load-more-row small,
.school-cloud button,
.source-card p:last-child,
.event-status,
.event-demo,
.event-organizer,
.event-meta,
.event-reward small,
.next-match span,
.site-footer span,
.site-footer p,
.footer-links,
.footer-legal,
.utility-dock strong,
.submission-error-summary li,
.client-choice > span b,
.client-choice small,
.consent,
.form-footnote,
.network-privacy-note,
.screenshot-fieldset legend small,
.screenshot-pick small,
.screenshot-preview small,
.screenshot-preview button,
.screenshot-note,
.utility-dialog-head p,
.utility-dialog-head span,
.team-draw-head p,
.team-draw-head div > span,
.team-draw-source small,
.team-draw-status,
.team-draw-card::before,
.team-draw-card h3 + small,
.team-draw-card dl,
.team-draw-card-reason,
.team-draw-card button,
.team-draw-empty p,
.team-draw-method > span,
.team-draw-method p,
.utility-form label,
.manage-lookup-form label,
.account-dialog-body p,
.account-dialog-body small,
.account-profile-form label,
.utility-form > p,
.manage-note,
.managed-post-card small,
.managed-post-result small,
.managed-post-card code,
.managed-post-actions button,
.manage-empty,
.publisher-match-heading p,
.publisher-match-heading span,
.publisher-match-heading > b,
.publisher-match-card small,
.publisher-match-card time,
.publisher-match-card-actions button,
.publisher-match-form-head button,
.publisher-match-error,
.event-detail-head > p,
.event-keyfacts small,
.event-section-heading p,
.match-row time,
.match-row > em,
.event-section-heading > span,
.bracket-match-meta,
.bracket-team,
.stream-placeholder p,
.stream-placeholder small,
.stream-placeholder a,
.stream-external,
.stream-pending {
  font-size: var(--font-min);
}

/* Account profile and private-message station */
.utility-dock button { position: relative; }
.utility-dock .message-unread-badge { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #f4f0e6; border-radius: 12px; background: var(--cinnabar); color: #fff; font: 800 9px var(--utility); }
.utility-dock .message-unread-badge[hidden] { display: none; }
.account-dialog { width: min(900px,calc(100vw - 32px)); }
.account-dialog-head { position: relative; overflow: hidden; }
.account-dialog-head::after { content: "身份 · 名片 · 名帖"; position: absolute; right: 32px; bottom: -12px; color: rgba(255,255,255,.04); font: 800 43px var(--display); letter-spacing: .12em; white-space: nowrap; pointer-events: none; }
.account-dialog-body { padding: 25px 38px 36px; }
.account-dialog-body > #accountLoggedOut,.account-dialog-body > #accountLoggedIn { display: block; }
.account-login-card { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 19px; padding: 21px; border: 1px solid rgba(45,116,106,.28); border-left: 4px solid var(--jade); background: linear-gradient(110deg,#edf6f1,#fffdf8 70%); }
.account-login-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(45,116,106,.34); border-radius: 50%; background: white; }
.account-login-mark img { width: 24px; height: 24px; }
.account-card-kicker { color: var(--jade) !important; font: 800 10px var(--utility) !important; letter-spacing: .18em; }
.account-login-card h3 { margin: 5px 0 8px; }
.qq-login-action { min-height: 42px; display: inline-flex; align-items: center; gap: 10px; margin-top: 17px; border: 1px solid #138bd3; background: white; color: #0877b8; padding: 8px 13px; line-height: 1; text-decoration: none; font-size: 12px; font-weight: 800; }
.qq-login-action img { width: 76px; height: 24px; }
.qq-login-action:hover { border-color: #0877b8; background: #f1faff; }
.qq-login-action.is-disabled { opacity: .45; pointer-events: none; }
.account-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 19px 0 0; padding: 0; border: 1px solid var(--line); background: #fffdf8; list-style: none; }
.account-journey li { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; min-height: 70px; padding: 12px 16px; border-right: 1px solid var(--line); color: #817b70; }
.account-journey li:last-child { border-right: 0; }
.account-journey li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.account-journey li.is-current::after { background: var(--cinnabar); }
.account-journey li.is-complete::after { background: var(--jade); }
.account-journey li b { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #aaa397; border-radius: 50%; font: 800 12px var(--utility); }
.account-journey li.is-current b { border-color: var(--cinnabar); background: var(--cinnabar); color: white; }
.account-journey li.is-complete b { border-color: var(--jade); background: var(--jade); color: white; }
.account-journey strong,.account-journey small { display: block; margin: 0; }
.account-journey strong { color: var(--ink); font: 800 14px var(--display); }
.account-journey small { margin-top: 3px; font-size: 11px; }
.account-privacy-note { margin-top: 14px !important; padding-left: 15px; border-left: 3px solid var(--gold); }
.account-profile { position: relative; padding-right: 110px; }
.account-logout { position: absolute; right: 15px; top: 15px; min-height: 36px; border: 1px solid #bdb6aa; background: rgba(255,255,255,.72); color: var(--muted); padding: 0 12px; font-size: 12px; cursor: pointer; }
.account-logout:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.account-quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.account-quick-actions a,.account-quick-actions button { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--jade); background: #fffdf8; color: var(--ink); padding: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.account-quick-actions a:hover,.account-quick-actions button:hover { border-color: rgba(45,116,106,.55); background: #eef7f3; }
.account-quick-actions span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(45,116,106,.32); border-radius: 50%; color: var(--jade); font: 800 14px var(--display); }
.account-quick-actions strong { overflow: hidden; color: var(--ink); font: 800 14px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.account-quick-actions small { margin: 2px 0 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-activity-dialog { width: min(840px,calc(100vw - 32px)); }
.activity-dialog-head::after { content: "赞 · 隐 · 笺"; position: absolute; right: 34px; bottom: -14px; color: rgba(255,255,255,.05); font: 800 48px var(--display); letter-spacing: .16em; pointer-events: none; }
.account-activity-body { padding: 24px 34px 34px; background: linear-gradient(180deg,#f8f5ed,#fffdf8 180px); }
.activity-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); background: #fff; }
.activity-summary article { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 11px; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line); }
.activity-summary article:last-child { border-right: 0; }
.activity-summary article > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(45,116,106,.35); color: var(--jade); font: 800 13px var(--display); }
.activity-summary strong { font: 800 19px var(--display); line-height: 1; }
.activity-summary small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.activity-summary b { position: absolute; right: 9px; top: 9px; padding: 3px 6px; background: var(--cinnabar); color: #fff; font: 800 9px var(--utility); }
.activity-summary b[hidden] { display: none; }
.activity-tabs { display: flex; margin-top: 18px; border-bottom: 1px solid var(--ink); }
.activity-tabs button { position: relative; min-width: 108px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); padding: 10px 17px; font: 700 12px var(--utility); cursor: pointer; }
.activity-tabs button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: transparent; transform: scaleX(.25); transition: transform .2s ease,background-color .2s ease; }
.activity-tabs button:hover,.activity-tabs button.is-active { color: var(--ink); background: rgba(255,255,255,.7); }
.activity-tabs button.is-active::after { background: var(--cinnabar); transform: scaleX(1); }
.activity-tabs button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; background: var(--cinnabar); color: white; font-size: 9px; vertical-align: middle; }
.activity-tabs button span[hidden] { display: none; }
.activity-panel { display: grid; gap: 9px; min-height: 210px; padding-top: 13px; }
.activity-panel[hidden] { display: none; }
.activity-record { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--jade); background: rgba(255,255,255,.86); animation: activity-record-in .24s ease-out both; }
.activity-record:nth-child(2),.activity-feedback-record:nth-child(2) { animation-delay: .035s; }
.activity-record:nth-child(3),.activity-feedback-record:nth-child(3) { animation-delay: .07s; }
.activity-record.is-unavailable { border-left-color: #a7aaa4; opacity: .72; }
.activity-record-mark,.activity-block-record > img { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(45,116,106,.32); background: #eef7f3; color: var(--jade); font: 800 14px var(--display); object-fit: cover; }
.activity-block-record > img { border-radius: 50%; }
.activity-record-main { min-width: 0; }
.activity-record-main small,.activity-record-main time { display: block; margin: 0; color: var(--muted); font-size: 10px; }
.activity-record-main strong { display: block; margin: 3px 0; overflow: hidden; font: 800 15px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.activity-record-main p { margin: 0 0 4px; overflow: hidden; color: #53605d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-record-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 86px; }
.activity-record-actions a,.activity-record-actions button,.activity-empty button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: white; color: var(--ink); padding: 7px 10px; font-size: 10px; text-decoration: none; cursor: pointer; }
.activity-record-actions button { color: var(--cinnabar); }
.activity-record-actions > span { color: var(--muted); font-size: 10px; text-align: center; }
.activity-feedback-record { padding: 15px 17px; border: 1px solid var(--line); border-left: 3px solid #a7aaa4; background: rgba(255,255,255,.86); animation: activity-record-in .24s ease-out both; }
.activity-feedback-record.has-new-reply { border-left-color: var(--cinnabar); box-shadow: 0 8px 22px rgba(108,43,36,.08); }
.activity-feedback-record > header { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.activity-feedback-record > header span { padding: 3px 7px; background: #ede8db; color: var(--ink); }
.activity-feedback-record > header b { color: var(--jade); }
.activity-feedback-record > header time { margin-left: auto; }
.activity-feedback-record > p { margin: 12px 0 10px; color: #3e4b48; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.activity-feedback-record > small { margin: 0; color: var(--muted); font-size: 10px; }
.activity-feedback-record blockquote { position: relative; margin: 14px 0 0; padding: 14px 15px 12px 18px; border: 0; border-left: 3px solid var(--gold); background: #f5ecd8; }
.activity-feedback-record blockquote::before { content: "回"; position: absolute; right: 12px; top: 10px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(157,55,44,.55); color: rgba(157,55,44,.78); font: 800 11px var(--display); transform: rotate(-4deg); }
.activity-feedback-record blockquote > span { color: #8a672d; font: 800 10px var(--utility); letter-spacing: .08em; }
.activity-feedback-record blockquote p { margin: 7px 42px 7px 0; color: var(--ink); font-size: 12px; line-height: 1.75; white-space: pre-line; }
.activity-feedback-record blockquote time { color: #8a8171; font-size: 9px; }
.activity-empty { display: grid; justify-items: center; align-content: center; min-height: 210px; padding: 28px; border: 1px dashed #c9c1ae; background: rgba(255,255,255,.46); text-align: center; }
.activity-empty > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border: 1px solid rgba(45,116,106,.32); color: var(--jade); font: 800 14px var(--display); }
.activity-empty strong { font: 800 16px var(--display); }
.activity-empty p { max-width: 420px; margin: 7px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.activity-empty button { border-color: var(--jade); background: var(--jade); color: white; }
@keyframes activity-record-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.account-onboarding-note { display: flex; gap: 13px; align-items: center; margin-top: 18px; padding: 13px 15px; border: 1px solid #d9c28d; background: linear-gradient(105deg,#fff8df,#fffdf7); }
.account-onboarding-note[hidden] { display: none; }
.account-onboarding-note > span { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--cinnabar); color: white; font: 700 13px var(--display); }
.account-onboarding-note strong { color: var(--ink); font: 700 16px var(--display); }
.account-defaults-panel { margin-top: 18px; border: 1px solid var(--line); background: #f8f5ed; }
.account-defaults-panel > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; color: var(--ink); cursor: pointer; list-style: none; }
.account-defaults-panel > summary::-webkit-details-marker { display: none; }
.account-defaults-panel > summary span,.account-defaults-panel > summary b,.account-defaults-panel > summary small { display: block; }
.account-defaults-panel > summary b { font: 800 17px var(--display); }
.account-defaults-panel > summary small { margin: 3px 0 0; }
.account-defaults-panel > summary i { flex: 0 0 auto; color: var(--jade); font-size: 12px; font-style: normal; }
.account-defaults-panel[open] > summary { border-bottom: 1px solid var(--line); background: white; }
.account-defaults-panel[open] > summary i::before { content: "收起"; font-size: 0; }
.account-profile-form { display: block; margin: 0; padding: 21px 20px 20px; }
.account-profile-form fieldset { min-width: 0; margin: 0 0 19px; padding: 0; border: 0; }
.account-profile-form fieldset:last-of-type { margin-bottom: 0; }
.account-profile-form legend { margin-bottom: 11px; color: var(--jade); font: 800 12px var(--utility); letter-spacing: .1em; }
.account-profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.account-profile-grid-identity { grid-template-columns: repeat(2,minmax(0,1fr)); }
.account-profile-form label { min-width: 0; align-content: start; }
.account-profile-form input,.account-profile-form select { width: 100%; min-width: 0; height: 42px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); padding: 10px 11px; }
.account-profile-form label small { margin: 0; color: var(--jade); font-size: 9px; }
.account-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.account-form-footer p { color: var(--jade); }
.account-form-footer p.is-dirty { color: #8a6428; }
.account-form-footer p.is-error { color: var(--cinnabar); }
.account-form-footer button { min-height: 42px; flex: 0 0 auto; border: 1px solid var(--ink); background: var(--ink); color: white; padding: 0 18px; font-weight: 800; cursor: pointer; }
.account-form-footer button:hover { border-color: var(--cinnabar); background: var(--cinnabar); }
.account-form-footer button:disabled { opacity: .55; cursor: wait; }
.post-publisher { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 7px 3px 3px; border: 1px solid rgba(45,116,106,.25); background: rgba(45,116,106,.06); color: var(--jade); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.post-publisher:hover { border-color: var(--jade); background: rgba(45,116,106,.12); transform: translateY(-1px); }
.post-publisher img { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; }
.post-publisher b { font: 700 12px var(--utility); }
.post-publisher em { color: var(--jade); font: normal 12px var(--utility); }
.post-message-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--jade); background: #f2faf6; color: var(--jade); padding: 5px 9px; cursor: pointer; font: 700 10px var(--utility); }
.post-message-button span { display: grid; place-items: center; width: 20px; height: 20px; background: var(--jade); color: white; font: 700 10px var(--display); }
.post-message-button:hover { background: var(--jade); color: white; }
.post-message-button:hover span { background: white; color: var(--jade); }
.message-dialog { --im-blue:#238fd5; --im-blue-deep:#0f68ad; --im-sky:#cceeff; --im-line:#74bce9; width:min(840px,calc(100vw - 30px)); height:min(720px,calc(100dvh - 28px)); max-width:none; max-height:none; padding:0; overflow:hidden; border:1px solid #0864aa; border-radius:5px; background:#dff3ff; color:#163c5d; box-shadow:0 24px 70px rgba(6,44,77,.46),inset 0 0 0 1px #b9e9ff; font-family:Tahoma,"Microsoft YaHei",sans-serif; }
.message-dialog::backdrop { background:rgba(9,34,55,.72); backdrop-filter:blur(3px); }
.message-dialog > .dialog-close-form { position:sticky; z-index:30; top:0; }
.message-dialog > .dialog-close-form button { width:25px; height:21px; margin:4px 5px 0 0; border:1px solid rgba(255,255,255,.76); border-radius:2px; background:linear-gradient(#ff9b8e,#d84537); box-shadow:inset 0 0 0 1px rgba(126,18,7,.35); color:#fff; font:700 16px/17px Tahoma,sans-serif; text-shadow:0 1px #8b271e; }
.message-dialog-head { display:flex; align-items:center; justify-content:space-between; height:31px; padding:3px 39px 3px 6px; background:linear-gradient(#5fc3f5 0,#188ad2 48%,#0870bb 51%,#299bdd 100%); color:#fff; text-shadow:0 1px #075b99; }
.message-window-title { display:flex; align-items:center; gap:7px; min-width:0; }
.message-window-title > span { display:grid; place-items:center; width:20px; height:20px; border:1px solid #fff28b; border-radius:3px; background:linear-gradient(135deg,#ffec4c,#f5a922); color:#276ca4; font:900 12px SimSun,serif; text-shadow:none; }
.message-window-title h2 { overflow:hidden; margin:0; color:white; font:700 13px Tahoma,"Microsoft YaHei",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.message-window-title h2 b { font-weight:700; }
.message-dialog-head > b { flex:0 0 auto; color:#e9f8ff; font-size:12px; font-weight:400; }
.message-classic-menu { display:flex; align-items:center; height:27px; padding:0 7px; border-bottom:1px solid #79bce5; background:linear-gradient(#fbfeff,#d9f1ff); color:#194b70; }
.message-classic-menu span { align-self:stretch; display:grid; place-items:center; min-width:53px; padding:0 10px; border-right:1px solid transparent; border-left:1px solid transparent; font-size:12px; }
.message-classic-menu span.is-active { border-color:#93c8e7; background:linear-gradient(#fff,#bfe8ff); color:#075d9d; font-weight:700; }
.message-classic-tools { display:flex; align-items:center; gap:3px; min-height:50px; padding:4px 8px; border-bottom:1px solid #6db4e2; background:linear-gradient(#e7f8ff,#bce7ff); }
.message-classic-tools button { display:grid; grid-template-columns:28px auto; align-items:center; gap:4px; min-height:39px; padding:3px 7px; border:1px solid transparent; background:transparent; color:#17486c; cursor:pointer; font-size:12px; }
.message-classic-tools button:hover:not(:disabled),.message-classic-tools button:focus-visible { border-color:#65a9d5; background:linear-gradient(#fff,#caecff); }
.message-classic-tools button:disabled { opacity:.5; cursor:not-allowed; }
.message-classic-tools button > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #60a8d7; border-radius:5px; background:linear-gradient(135deg,#fff,#89d4fa); color:#0872b8; font-size:18px; font-weight:800; }
.message-classic-tools small { margin-left:auto; color:#497691; font-size:12px; }
.message-station { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 218px; height:calc(100% - 108px); min-height:0; border-top:1px solid #eafaff; background:#fff; }
.message-conversation-drawer { position:absolute; z-index:12; inset:0 auto 0 0; display:grid; grid-template-rows:auto minmax(0,1fr); width:286px; border-right:1px solid #438fbd; background:#eaf7ff; box-shadow:8px 0 18px rgba(8,73,114,.22); transform:translateX(-102%); transition:transform .2s ease-out; }
.message-conversation-drawer.is-open { transform:none; }
.message-conversation-drawer > header { display:flex; align-items:center; justify-content:space-between; min-height:47px; padding:7px 8px 7px 12px; border-bottom:1px solid #7fc0e6; background:linear-gradient(#fbfeff,#c5eaff); }
.message-conversation-drawer > header div { display:grid; gap:1px; }
.message-conversation-drawer > header small { color:#4780a3; font-size:12px; letter-spacing:.08em; }
.message-conversation-drawer > header strong { color:#124f78; font-size:14px; }
.message-conversation-drawer > header button { width:30px; height:30px; border:1px solid #67a9d2; border-radius:3px; background:linear-gradient(#fff,#b9e5fc); color:#126da9; cursor:pointer; font-size:22px; }
.message-conversation-list { min-height:0; overflow-y:auto; background:linear-gradient(90deg,#f9fdff,#e3f5ff); }
.message-conversation-entry { position:relative; border-bottom:1px solid #b6dcf1; }
.message-conversation-card { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:9px; width:100%; min-height:76px; padding:11px 45px 11px 10px; border:0; background:transparent; color:#163c5d; text-align:left; cursor:pointer; }
.message-conversation-card:hover,.message-conversation-card.is-active { background:linear-gradient(90deg,#fffbdc,#d7f1ff); }
.message-conversation-card.is-active::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#f3a51d; }
.message-conversation-card > img { width:42px; height:42px; border:1px solid #77b5d8; border-radius:4px; object-fit:cover; background:#fff; }
.message-conversation-card > span { min-width:0; display:grid; align-content:start; gap:2px; }
.message-conversation-card strong,.message-conversation-card small,.message-conversation-card em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-conversation-card strong { color:#075d9d; font-size:13px; }
.message-conversation-card small { color:#437493; font-size:12px; }
.message-conversation-card em { color:#6b8798; font:normal 12px SimSun,serif; }
.message-conversation-card time { color:#6390aa; font-size:12px; }
.message-conversation-card > b { position:absolute; right:46px; bottom:9px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#f18b20; color:white; font-size:12px; }
.message-conversation-delete { position:absolute; z-index:2; right:7px; bottom:8px; min-width:36px; height:22px; border:1px solid #a9c4d4; border-radius:2px; background:linear-gradient(#fff,#dcecf5); color:#7b4e4a; padding:0 5px; cursor:pointer; font-size:12px; }
.message-conversation-delete:hover,.message-conversation-delete:focus-visible { border-color:#c66c63; background:linear-gradient(#fff5f2,#f4cbc6); color:#9b3027; outline:0; }
.message-conversation-delete:disabled { opacity:.55; cursor:wait; }
.message-list-empty,.message-thread-empty { display:grid; place-items:center; align-content:center; gap:8px; height:100%; padding:28px; color:#537a91; text-align:center; }
.message-list-empty { min-height:240px; }
.message-list-empty > span,.message-thread-empty > span { display:grid; place-items:center; width:52px; height:52px; border:1px solid #6eb4de; border-radius:8px; background:linear-gradient(135deg,#fff,#bfe9ff); color:#1380c4; font:700 20px SimSun,serif; box-shadow:inset 0 0 0 3px #e8f8ff; }
.message-list-empty strong,.message-thread-empty h3 { margin:3px 0 0; color:#19577e; font-size:18px; }
.message-list-empty p,.message-thread-empty p { margin:0; max-width:340px; font-size:12px; line-height:1.7; }
.message-thread-panel { grid-column:1; min-width:0; min-height:0; border-right:1px solid #4f9dcc; background:#fff; }
.message-thread { display:grid; grid-template-rows:34px minmax(0,1fr) 198px; height:100%; min-height:0; }
.message-thread > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 8px; border-bottom:1px solid #8bc8e9; background:linear-gradient(#f8fdff,#c7ebff); }
.message-thread > header > div { display:flex; align-items:center; gap:7px; min-width:0; }
.message-thread > header img { width:25px; height:25px; border:1px solid #65a8d0; border-radius:3px; object-fit:cover; background:#fff; }
.message-thread > header span { min-width:0; display:flex; align-items:baseline; gap:7px; }
.message-thread > header strong { color:#105f94; font-size:13px; }
.message-thread > header small { overflow:hidden; color:#4e7e99; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.message-thread > header button { border:1px solid #7baecb; border-radius:2px; background:linear-gradient(#fff,#cceafb); color:#2a6588; padding:3px 8px; cursor:pointer; font-size:12px; }
.message-thread-actions { display:flex; flex:0 0 auto; align-items:center; gap:5px; }
.message-thread-actions #messageDeleteConversation { border-color:#c89a95; background:linear-gradient(#fff,#f6d8d4); color:#8e3b34; }
.message-thread-actions #messageDeleteConversation:hover,.message-thread-actions #messageDeleteConversation:focus-visible { border-color:#b55349; background:linear-gradient(#fff7f5,#efc0ba); color:#992d24; }
.message-thread-list { min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:12px 14px 18px; background:#fff; font-family:SimSun,"Microsoft YaHei",sans-serif; }
.message-thread-start { align-self:center; max-width:390px; padding:24px; color:#5f8094; text-align:center; }
.message-thread-start > span { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 8px; border:1px solid #75b9df; border-radius:5px; background:#e5f7ff; color:#1179b8; font:700 16px SimSun,serif; }
.message-thread-start strong { color:#19577e; font-size:15px; }
.message-thread-start p { margin:6px 0 0; font-size:12px; line-height:1.7; }
.message-bubble { width:100%; max-width:none; }
.message-bubble > header { display:flex; align-items:baseline; gap:8px; color:#34749a; font:12px Tahoma,"Microsoft YaHei",sans-serif; }
.message-bubble > header strong { color:#096db0; font-weight:400; }
.message-bubble.is-own > header strong { color:#16904d; }
.message-bubble > header time { color:#6d8ea1; }
.message-bubble p { margin:3px 0 0; padding:0 0 0 12px; border:0; background:transparent; color:#111; font-size:14px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
.message-inline-emotion { display:inline-block; width:auto; height:20px; max-width:20px; margin:0 1px; object-fit:contain; vertical-align:-5px; image-rendering:auto; }
.message-bubble footer { min-height:16px; margin:2px 0 0 12px; color:#7892a1; font-size:12px; }
.message-bubble footer button { border:0; background:none; color:#a34c45; padding:0; cursor:pointer; font-size:12px; }
.message-bubble.is-own,.message-bubble.is-own footer { align-self:auto; text-align:left; }
.message-compose-form { position:relative; display:grid; grid-template-rows:31px minmax(0,1fr) 38px; min-height:0; border-top:2px solid #72bce8; background:#fff; }
.message-compose-toolbar { position:relative; display:flex; align-items:center; gap:2px; padding:2px 7px; border-bottom:1px solid #bee2f4; background:linear-gradient(#f7fdff,#d9f2ff); }
.message-compose-toolbar > button { display:flex; align-items:center; gap:4px; min-height:25px; padding:2px 6px; border:1px solid transparent; background:transparent; color:#245e80; cursor:pointer; font-size:12px; }
.message-compose-toolbar > button:hover,.message-compose-toolbar > button[aria-expanded="true"] { border-color:#76b4d7; background:linear-gradient(#fff,#c9ecff); }
.message-compose-toolbar > button span { display:grid; place-items:center; min-width:20px; min-height:20px; color:#159345; font-size:18px; font-weight:800; }
.message-compose-toolbar > button span img { display:block; width:auto; height:20px; max-width:20px; object-fit:contain; }
.message-emoji-picker { position:absolute; z-index:8; left:6px; bottom:30px; display:grid; grid-template-rows:28px minmax(0,1fr); overflow:hidden; border:1px solid #579dcc; border-radius:3px; background:#f5fcff; box-shadow:0 5px 14px rgba(20,72,104,.25); }
.message-emoji-picker[hidden] { display:none; }
.message-emoji-picker > header { display:flex; align-items:center; justify-content:space-between; padding:0 8px; border-bottom:1px solid #8bc8e9; background:linear-gradient(#fafdff,#c9ecff); color:#185a82; font-size:12px; }
.message-emoji-picker > header strong { font-size:12px; }
.message-emoji-picker > header span { color:#4a7d99; }
.message-emoji-grid { display:grid; grid-template-columns:repeat(10,34px); align-content:start; gap:2px; max-height:180px; overflow-y:auto; padding:6px; scrollbar-gutter:stable; overscroll-behavior:contain; }
.message-emoji-grid button { display:grid; place-items:center; width:34px; height:32px; padding:0; border:1px solid #d8ebf6; background:#fff; cursor:pointer; }
.message-emoji-grid button img { display:block; width:auto; height:20px; max-width:20px; object-fit:contain; }
.message-emoji-grid button:hover,.message-emoji-grid button:focus-visible { border-color:#4d9fd0; background:#dcf3ff; outline:0; box-shadow:inset 0 0 0 1px #9ed6f4; }
.message-compose-form > label { min-height:0; }
.message-compose-form textarea { display:block; width:100%; height:100%; resize:none; border:0; outline:0; background:#fff; padding:8px 10px; color:#111; font:14px/1.6 SimSun,"Microsoft YaHei",sans-serif; }
.message-compose-form textarea:focus { box-shadow:inset 0 0 0 2px rgba(49,151,211,.22); }
.message-compose-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 7px; border-top:1px solid #b9dff2; background:linear-gradient(#effaff,#c9edff); }
.message-compose-actions small { color:#527c94; font-size:12px; }
.message-compose-actions > span { display:flex; gap:6px; }
.message-compose-actions button { min-width:70px; height:28px; border:1px solid #579bc7; border-radius:2px; background:linear-gradient(#fff,#c5eaff); color:#18587e; cursor:pointer; font-size:12px; }
.message-compose-actions button[type="submit"] { border-color:#3d8fc3; background:linear-gradient(#faffff,#9edcff); color:#064d7c; font-weight:700; }
.message-compose-form button:disabled,.message-compose-form textarea:disabled { opacity:.55; cursor:not-allowed; }
.message-showcase { grid-column:2; display:grid; grid-template-rows:1fr 1fr; gap:1px; min-width:0; min-height:0; background:#55a7d6; }
.message-showcase-card { position:relative; display:grid; grid-template-rows:26px minmax(0,1fr) 28px; min-height:0; overflow:hidden; background:#effaff; }
.message-showcase-card > header { position:relative; z-index:5; grid-row:1; display:flex; align-items:center; justify-content:space-between; padding:0 7px; border-bottom:1px solid #73b8df; background:linear-gradient(#f9feff,#c9edff); color:#205d7f; font-size:12px; }
.message-showcase-card > header b { color:#e69b18; font:800 12px Tahoma,sans-serif; text-shadow:0 1px #fff; }
.message-showcase-stage { position:relative; isolation:isolate; grid-row:2; display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; min-height:0; overflow:hidden; padding:4px 4px 0; background:radial-gradient(circle at 16% 16%,#fff 0 2px,transparent 3px),radial-gradient(circle at 82% 31%,#fff 0 2px,transparent 3px),linear-gradient(#bfeaff 0,#eefcff 62%,#9ed8f4 100%); }
.message-showcase-stage::after { display:none; }
.message-showcase-stage i { position:relative; z-index:1; display:grid; place-items:center; width:62px; height:62px; border:2px solid rgba(31,112,161,.66); border-radius:50%; background:rgba(244,252,255,.7); color:#2577a7; font:700 25px SimSun,serif; box-shadow:0 0 0 5px rgba(255,255,255,.42); }
.message-showcase-stage img { position:relative; z-index:1; grid-row:1; align-self:center; justify-self:center; display:block; width:auto; height:auto; max-width:100%; max-height:100%; border:0; border-radius:0; background:transparent; object-fit:contain; object-position:center; box-shadow:none; }
.message-showcase-stage small { position:static; z-index:4; grid-row:2; justify-self:stretch; overflow:hidden; margin:0 2px 3px; padding:2px 5px; border:1px solid rgba(65,144,193,.55); background:rgba(244,252,255,.88); color:#2d739d; font-size:12px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.message-showcase-stage.is-empty small { color:#517d96; }
.message-showcase-card > footer { position:static; z-index:5; grid-row:3; display:flex; align-items:center; justify-content:space-between; gap:6px; height:28px; padding:3px 7px; border-top:1px solid #8ec9e8; background:rgba(234,248,255,.94); box-shadow:0 -2px 7px rgba(18,96,143,.12); }
.message-showcase-card > footer strong { overflow:hidden; color:#115f90; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.message-showcase-card > footer a,.message-showcase-card > footer span { flex:0 0 auto; color:#2e769f; font-size:12px; }
.message-showcase-card > footer a:focus-visible { outline:2px solid #f2a51b; outline-offset:1px; }
.message-dialog.is-nudging { animation:message-window-nudge .48s linear both !important; }
.message-report-dialog { width: min(560px,calc(100vw - 28px)); }

@media (max-width: 850px) {
  .account-profile-grid { grid-template-columns: 1fr 1fr; }
  .account-quick-actions { grid-template-columns: 1fr 1fr; }
  .message-dialog { width:calc(100vw - 14px); }
  .message-station { grid-template-columns:minmax(0,1fr) 184px; }
  .message-classic-tools small { display:none; }
}

@media (max-width: 620px) {
  .utility-dock { grid-template-columns: repeat(3,1fr); }
  .utility-dock button { padding-right: 6px; }
  .account-profile-grid { grid-template-columns: 1fr; }
  .account-quick-actions { grid-template-columns: 1fr; }
  .account-activity-body { padding: 18px 14px 28px; }
  .activity-summary { grid-template-columns: 1fr; }
  .activity-summary article { border-right: 0; border-bottom: 1px solid var(--line); }
  .activity-summary article:last-child { border-bottom: 0; }
  .activity-tabs { overflow-x: auto; }
  .activity-tabs button { flex: 1 0 auto; min-width: 98px; padding-inline: 12px; }
  .activity-record { grid-template-columns: 42px minmax(0,1fr); align-items: start; }
  .activity-record-actions { grid-column: 1 / -1; flex-direction: row; }
  .activity-record-actions > * { flex: 1; }
  .activity-feedback-record > header { align-items: flex-start; flex-wrap: wrap; }
  .activity-feedback-record > header time { width: 100%; margin-left: 0; }
  .account-dialog-body { padding: 20px 16px 32px; }
  .account-login-card { grid-template-columns: 1fr; padding: 17px; }
  .account-login-mark { width: 46px; height: 46px; }
  .qq-login-action { width: 100%; justify-content: center; }
  .account-journey { grid-template-columns: 1fr; }
  .account-journey li { min-height: 60px; border-right: 0; border-bottom: 1px solid var(--line); }
  .account-journey li:last-child { border-bottom: 0; }
  .account-profile { align-items: flex-start; padding: 15px; }
  .account-profile .account-profile-avatar { width: 50px; height: 50px; }
  .account-profile .account-profile-avatar img { width: 50px; height: 50px; }
  .account-profile .account-logout { position: static; align-self: start; margin-left: auto; white-space: nowrap; }
  .account-profile > div { min-width: 0; }
  .account-profile #accountIdentityMeta { overflow-wrap: anywhere; }
  .account-defaults-panel > summary { align-items: flex-start; }
  .account-profile-form { padding: 18px 15px; }
  .account-form-footer { align-items: stretch; flex-direction: column; }
  .account-form-footer button { width: 100%; }
  .message-dialog { width:100vw; height:100dvh; max-height:none; margin:0; border-radius:0; }
  .message-dialog-head { padding-right:38px; }
  .message-dialog-head > b { display:none; }
  .message-classic-menu { height:25px; }
  .message-classic-menu span { min-width:48px; }
  .message-classic-tools { min-height:43px; padding:2px 5px; }
  .message-classic-tools button { grid-template-columns:24px auto; min-height:35px; padding:2px 5px; }
  .message-classic-tools button > span { width:24px; height:24px; font-size:15px; }
  .message-classic-tools button:disabled { display:none; }
  .message-emoji-grid { grid-template-columns:repeat(7,34px); max-height:180px; }
  .message-station { grid-template-columns:1fr; grid-template-rows:92px minmax(0,1fr); height:calc(100% - 99px); }
  .message-showcase { grid-column:1; grid-row:1; grid-template:1fr/repeat(2,minmax(0,1fr)); }
  .message-showcase-card { grid-template-columns:72px minmax(0,1fr); grid-template-rows:24px minmax(0,1fr); }
  .message-showcase-card > header { grid-column:1/3; grid-row:1; }
  .message-showcase-stage { grid-column:1; grid-row:2; }
  .message-showcase-stage { grid-template-rows:1fr; padding:3px; }
  .message-showcase-stage img { position:relative; inset:auto; width:44px; height:auto; max-width:44px; max-height:58px; border:0; object-fit:contain; }
  .message-showcase-stage i { width:42px; height:42px; border-width:1px; font-size:18px; box-shadow:none; }
  .message-showcase-stage small { display:none; }
  .message-showcase-card > footer { position:static; grid-column:2; grid-row:2; display:grid; align-content:center; justify-content:start; height:auto; border-top:0; box-shadow:none; }
  .message-thread-panel { grid-column:1; grid-row:2; border-right:0; }
  .message-thread { grid-template-rows:34px minmax(0,1fr) 180px; }
  .message-thread > header span { display:grid; gap:0; }
  .message-thread > header small { max-width:180px; }
  .message-thread-list { padding:10px 9px 14px; }
  .message-conversation-drawer { width:min(310px,84vw); }
  .message-compose-toolbar > button { padding-inline:4px; }
  .message-compose-actions small { overflow:hidden; max-width:130px; text-overflow:ellipsis; white-space:nowrap; }
  .message-compose-actions button { min-width:61px; }
}

.nav-item span,
.hero-actions button,
.notice-label,
.board-team-draw b,
.arena-mode-tabs b,
.post-report-button,
.client-badge,
.post-copy-row b,
.form-submit,
.utility-submit,
.manage-lookup-form button,
.managed-post-actions .edit,
.publisher-match-save {
  font-family: var(--body-bold);
}

/* Motion polish: the public board opens like an ink scroll, then lets live
   content arrive in short, readable beats. All motion stays on transform and
   opacity so the interface remains responsive under load. */
html { color-scheme: light; }
body { overflow-x: clip; }
.header-inner { padding-left: max(30px,env(safe-area-inset-left)); padding-right: max(30px,env(safe-area-inset-right)); }
.site-header { animation: board-header-in .38s ease-out both; }
.header-ink { transform-origin: top; animation: board-ink-drop .62s cubic-bezier(.2,.8,.2,1) both; }
.hero-content > .eyebrow { animation: board-rise-in .45s .08s ease-out both; }
.hero-content > h1 { animation: board-rise-in .52s .14s cubic-bezier(.2,.8,.2,1) both; }
.hero-content > .hero-copy { animation: board-rise-in .48s .2s ease-out both; }
.hero-actions { animation: board-rise-in .45s .26s ease-out both; }
.arena-emblem { animation: board-seal-in .65s .18s cubic-bezier(.2,.78,.2,1) both; }
.hero-stats { animation: board-rise-in .45s .31s ease-out both; }
.notice-bar,.primary-nav { animation: board-rise-in .4s .34s ease-out both; }
.post-card:not(.skeleton),.tournament-card,.empty-state,.load-more-row { animation: board-card-in .38s ease-out both; }
.post-card:nth-child(2),.tournament-card:nth-child(2) { animation-delay: .045s; }
.post-card:nth-child(3),.tournament-card:nth-child(3) { animation-delay: .09s; }
.post-card:nth-child(4),.tournament-card:nth-child(4) { animation-delay: .135s; }
.post-card:nth-child(5),.tournament-card:nth-child(5) { animation-delay: .18s; }
.school-stat-row { animation: board-card-in .3s ease-out both; }
.school-stat-row:nth-child(2) { animation-delay: .03s; }
.school-stat-row:nth-child(3) { animation-delay: .06s; }
.school-stat-row:nth-child(4) { animation-delay: .09s; }
.publish-dialog[open],.event-dialog[open],.utility-dialog[open],.team-draw-dialog[open],.message-dialog[open] { animation: paper-dialog-in .28s cubic-bezier(.2,.78,.2,1) both; }
dialog[open]::backdrop { animation: paper-backdrop-in .22s ease-out both; }
.filter-bar label:focus-within,.team-draw-source label:focus-within { color: var(--cinnabar); }
.filter-bar label:focus-within select,.filter-bar label:focus-within input,.team-draw-source label:focus-within select { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(178,138,71,.13); }
.hero-actions button:active,.nav-item:active,.board-team-draw:active,.utility-dock button:active,.post-bottom-actions button:active { transform: translateY(1px) scale(.985); }
.utility-dock { right: max(18px,env(safe-area-inset-right)); bottom: max(22px,env(safe-area-inset-bottom)); }

@keyframes board-header-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes board-ink-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes board-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes board-seal-in { from { opacity: 0; transform: translate3d(18px,-46%,0) rotate(9deg) scale(.88); } to { opacity: .96; transform: translate3d(0,-54%,0) rotate(3deg) scale(1); } }
@keyframes board-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes paper-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes paper-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes message-window-nudge { 0%,100% { transform:none; } 15% { transform:translate(-8px,2px); } 30% { transform:translate(7px,-2px); } 45% { transform:translate(-6px,1px); } 60% { transform:translate(5px,-1px); } 75% { transform:translate(-3px,0); } }
.hero h1.is-changing,.hero-copy.is-changing { animation: hero-copy-in .5s ease both; }

@media (max-width: 720px) {
  .header-inner { padding-left: max(14px,env(safe-area-inset-left)); padding-right: max(14px,env(safe-area-inset-right)); }
  .utility-dock { left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right)); bottom: max(10px,env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,.header-ink,.hero-content > *,.arena-emblem,.hero-stats,.notice-bar,.primary-nav,
  .post-card,.tournament-card,.empty-state,.load-more-row,.school-stat-row,
  .publish-dialog[open],.event-dialog[open],.utility-dialog[open],.team-draw-dialog[open],.message-dialog[open],.message-dialog.is-nudging,dialog[open]::backdrop,.activity-record,.activity-feedback-record {
    animation: none !important;
  }
}

/* Test-server recruitment section */
.primary-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.test-realm-nav span { color: #a14f32; }
.test-realm-notice { grid-column: 1 / -1; margin-bottom: 20px; padding: 18px 22px; border: 1px solid #dfcba5; border-left: 4px solid #ad7044; border-radius: 8px; background: #faf4e7; color: #5e4932; }
.test-realm-notice strong { font-size: 18px; }
.test-realm-notice p { margin: 8px 0; line-height: 1.8; }
.test-realm-notice small { color: #79694e; }
.test-realm-tag { background: #f8ead3; color: #965029; border: 1px solid #e3cba4; }
@media (max-width: 680px) {
  .primary-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .primary-nav .nav-item { padding-inline: 3px; }
  .primary-nav .nav-item span { font-size: 12px; }
  .test-realm-notice { padding: 14px; }
}