:root {
  color-scheme: dark;
  --gold: #c8aa6e;
  --gold-bright: #f0d69a;
  --text: #e8e8e5;
  --muted: #9ba9a4;
  --cyan: #78d9df;
  --green: #71d6a1;
  --error: #ff9c75;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--text); background: #05080d; font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; }
button { font: inherit; }

.arena-update-page { min-height: 100vh; background: radial-gradient(ellipse at 50% 20%, #152c31 0, #0a151c 35%, #05080d 76%); }
.arena-update-toolbar { display: flex; align-items: center; gap: 18px; min-height: 52px; padding: 0 22px; border-bottom: 1px solid rgba(200,170,110,.25); background: rgba(5,8,13,.96); }
.arena-update-toolbar a, .arena-update-back { color: var(--gold-bright); text-decoration: none; font-size: 13px; }
.arena-update-back { padding: 0; border: 0; background: transparent; cursor: pointer; }
.arena-update-toolbar h1 { margin: 0; color: #c9cbc8; font-size: 15px; font-weight: 600; }
.arena-update-toolbar > span { margin-left: auto; color: var(--gold); font-size: 12px; }
.arena-update-card { width: min(720px, calc(100vw - 32px)); margin: 12vh auto 0; padding: 28px 30px 30px; border: 1px solid rgba(200,170,110,.48); outline: 1px solid rgba(0,0,0,.8); background: linear-gradient(145deg, rgba(15,22,30,.96), rgba(5,10,16,.98)); box-shadow: 0 0 0 1px rgba(239,210,141,.08) inset, 0 18px 50px #000; }
.arena-recommendation-card { margin-top: 22px; border-color: rgba(120,217,223,.35); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 11px; letter-spacing: .12em; }
.arena-update-card h2 { margin: 0; color: #f3e9c5; font-size: 27px; }
.description { margin: 14px 0 22px; color: var(--muted); line-height: 1.8; font-size: 14px; }
.arena-update-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.arena-update-actions button { padding: 9px 16px; border: 1px solid rgba(200,170,110,.6); background: #101b22; color: #e8dfc6; cursor: pointer; font-size: 13px; }
.arena-update-actions button:hover:not(:disabled) { border-color: var(--gold-bright); color: #fff4d0; box-shadow: 0 0 12px rgba(240,214,154,.18); }
.arena-update-actions button:disabled { cursor: wait; opacity: .55; }
.arena-update-status { min-height: 22px; margin-top: 16px; color: var(--cyan); overflow-wrap: anywhere; }
.arena-update-status.is-error { color: var(--error); }
.arena-update-status.is-success { color: var(--green); }
.arena-update-summary { margin-top: 9px; padding-top: 10px; border-top: 1px solid rgba(200,170,110,.18); color: #c1c9c5; line-height: 1.7; overflow-wrap: anywhere; }
.arena-update-log { max-height: 220px; margin: 14px 0 0; padding: 12px; overflow: auto; border: 1px solid rgba(120,217,223,.16); background: rgba(0,0,0,.28); color: #9ba9a4; white-space: pre-wrap; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.arena-update-note { width: min(720px, calc(100vw - 32px)); margin: 14px auto; color: #78837f; font-size: 12px; line-height: 1.7; }
.arena-exclusive-status-note { margin: 12px 18px 0; padding: 10px 12px; border: 1px solid rgba(214,166,91,.45); background: rgba(72,45,14,.22); color: #dfc386; font-size: 13px; line-height: 1.6; }
.arena-version-history { width: min(900px, calc(100vw - 32px)); margin: 28px auto 0; padding: 22px 24px 24px; border: 1px solid rgba(120,217,223,.16); background: rgba(8,15,22,.82); box-shadow: 0 12px 36px rgba(0,0,0,.24); }
.arena-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.arena-history-heading h2 { margin: 0; color: #f3e9c5; font-size: 22px; }
.arena-history-status { color: var(--cyan); font-size: 12px; text-align: right; }
.arena-version-history-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.arena-version-card { min-width: 0; padding: 15px; border: 1px solid rgba(200,170,110,.22); background: linear-gradient(145deg, rgba(19,29,37,.9), rgba(8,14,20,.94)); }
.arena-version-card-heading { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.arena-version-card-heading strong { color: var(--gold-bright); font-size: 16px; }
.arena-version-card-heading span { margin-left: 8px; color: #8d9d98; font-size: 11px; }
.arena-version-card-heading em { flex: 0 0 auto; color: #b4c6c2; font-size: 11px; font-style: normal; }
.arena-version-card p { min-height: 3.4em; margin: 12px 0; color: #aebbb7; font-size: 12px; line-height: 1.7; }
.arena-version-card-footer { padding-top: 10px; border-top: 1px solid rgba(200,170,110,.13); font-size: 12px; }
.arena-version-card-footer a { color: var(--gold-bright); text-decoration: none; }
.arena-version-card-footer a:hover { text-decoration: underline; }
.arena-version-card-footer .is-muted, .arena-history-empty { color: #78837f; }
.arena-history-empty { grid-column: 1 / -1; margin: 0; line-height: 1.7; }

@media (min-width: 769px) {
  .sidebar .nav-list.arena-has-update-nav {
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-color: rgba(120, 217, 223, .45) transparent;
  }
}

/* 嵌入攻略站主框架时，只替换主内容区，左侧导航保持可见。 */
.main-panel.arena-update-host-active > :not([data-arena-embedded-update]) { display: none !important; }
.arena-embedded-update-view { width: 100%; min-height: 100%; overflow: auto; }
.arena-embedded-update-view .arena-update-toolbar { position: sticky; top: 0; z-index: 2; }
.arena-embedded-update-view .arena-update-card { margin: 28px auto 0; }
.arena-embedded-update-view .arena-recommendation-card { margin-top: 16px; }
.arena-embedded-update-view .arena-version-history { margin: 28px auto 0; }
.arena-embedded-update-view .arena-update-note { margin-bottom: 28px; }

@media (max-width: 600px) {
  .arena-update-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 7px 12px; padding: 12px 16px; }
  .arena-update-toolbar > span { width: 100%; margin-left: 0; }
  .arena-update-card { margin-top: 8vh; padding: 22px 18px; }
  .arena-update-card h2 { font-size: 23px; }
  .arena-version-history { width: calc(100vw - 32px); padding: 18px 15px; }
  .arena-history-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .arena-history-status { text-align: left; }
  .arena-version-card-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .arena-version-card p { min-height: 0; }
  .arena-embedded-update-view .arena-update-card,
  .arena-embedded-update-view .arena-version-history,
  .arena-embedded-update-view .arena-update-note { width: calc(100% - 16px); }
}