/* ============================================
   日志专用字体
   ★ 上传字体后：
     1. 把字体文件放到 fonts/ 目录
     2. 修改下面的 font-family 名称和 src 路径
   ============================================ */
 @font-face {
  font-family: 'PatchFont';
  src: url('../fonts/Minecraft AE.woff2') format('woff2'),
       url('../fonts/Minecraft AE.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} 

/* ============================================
   TOKENS
   ============================================ */
:root {
  --bg:        #0a0a0b;
  --surface:   #131316;
  --surface2:  #1a1a1f;
  --surface3:  #232328;
  --text:      #e8e8ed;
  --text-dim:  #717179;
  --text-faint:#3a3a42;
  --orange:    #f97316;
  --orange-glow: rgba(249, 115, 22, 0.15);
  --blue:      #38bdf8;
  --blue-glow: rgba(56, 189, 248, 0.12);
  --border:    #1e1e24;
  --hover:     rgba(255,255,255,0.03);
  --active-bg: rgba(249,115,22,0.08);
  --radius:    10px;
  --font: 'Segoe UI', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg:        #f6f6f8;
  --surface:   #eeeef1;
  --surface2:  #e4e4e8;
  --surface3:  #d9d9de;
  --text:      #111118;
  --text-dim:  #65656e;
  --text-faint:#b5b5be;
  --border:    #d2d2d8;
  --hover:     rgba(0,0,0,0.03);
  --active-bg: rgba(249,115,22,0.07);
  --orange-glow: rgba(249, 115, 22, 0.08);
  --blue-glow: rgba(56, 189, 248, 0.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Smooth fade-in for dynamically rendered content */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subtlePulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

/* ============================================
   LAYOUT — 5 equal columns
   ============================================ */
.layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border);
  transition: background var(--transition);
}

.col:last-child { border-right: none; }

/* scrollbar */
.col::-webkit-scrollbar { width: 5px; }
.col::-webkit-scrollbar-track { background: transparent; }
.col::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 5px; transition: background 0.2s; }
.col::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ============================================
   COL 1 — BRAND
   ============================================ */
.col-brand {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1.2rem;
  user-select: none;
  position: relative;
}

/* Subtle top gradient accent */
.col-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0.4;
}

.brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* ---- Title banner ---- */
.brand-banner {
  width: 100%;
  cursor: pointer;
  border: 1.5px solid var(--orange);
  border-radius: 2px;
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: all var(--transition);
  position: relative;
}

.brand-banner:hover {
  background: var(--orange-glow);
  box-shadow: 0 0 20px var(--orange-glow);
}

.brand-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}

/* ---- Logo circle ---- */
.brand-logo-circle {
  align-self: center;
  margin-bottom: 4rem;
  width: min(13vw, 180px);
  height: min(13vw, 180px);
  border-radius: 50%;
  border: 2px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface2);
  flex-shrink: 0;
  box-shadow: 0 0 24px var(--blue-glow), 0 0 48px rgba(56, 189, 248, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-logo-circle:hover {
  box-shadow: 0 0 32px var(--blue-glow), 0 0 64px rgba(56, 189, 248, 0.1);
  transform: scale(1.03);
}

.brand-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.brand-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Language toggle */
.lang-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lang-sep { color: var(--text-faint); font-size: 0.8rem; }

.lang-btn {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 0.15rem 0;
  transition: color var(--transition);
  line-height: 1;
  position: relative;
}

.lang-btn:hover { color: var(--text); }

.lang-btn.active {
  color: var(--orange);
  font-weight: 700;
}

.lang-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--orange);
  opacity: 0.5;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  width: fit-content;
  transition: all var(--transition);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
}

.theme-icon {
  display: flex;
  align-items: center;
}

/* ============================================
   COL 2 — NAV
   ============================================ */
.col-nav {
  background: var(--surface);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: block;
  width: 100%;
  padding: 0.85rem 1.4rem;
  text-align: left;
  border-left: 3px solid transparent;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all var(--transition);
  position: relative;
  letter-spacing: 0.01em;
}

.nav-item:hover {
  color: var(--text);
  background: var(--hover);
  padding-left: 1.6rem;
}

.nav-item.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: var(--active-bg);
  font-weight: 600;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--orange-glow), transparent);
  pointer-events: none;
}

/* ============================================
   COL 3 — PRIMARY PANEL
   ============================================ */
.col-primary {
  background: var(--bg);
  padding: 1.75rem 1.4rem;
}

/* ============================================
   COL 4 — SECONDARY PANEL
   ============================================ */
.col-secondary {
  background: var(--bg);
  padding: 1.75rem 1.4rem;
  border-left: 1px solid var(--border);
}

/* ============================================
   COL 5 — DECORATIVE
   ============================================ */
.col-fifth {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Subtle vertical gradient line */
.col-fifth::before {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border), var(--text-faint), var(--border), transparent);
  opacity: 0.5;
}

.deco-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deco-dots {
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, var(--text-faint) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  animation: subtlePulse 6s ease-in-out infinite;
}

/* ============================================
   PANEL COMPONENTS
   ============================================ */

/* Placeholder */
.panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
  color: var(--text-faint);
  text-align: center;
}

.placeholder-icon { opacity: 0.4; }

.placeholder-text {
  font-size: 0.82rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

/* Panel header label */
.panel-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  animation: fadeIn 0.3s ease;
}

/* ---- About items ---- */
.about-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.about-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  animation: fadeInUp 0.3s ease both;
}

.about-row:nth-child(1) { animation-delay: 0.02s; }
.about-row:nth-child(2) { animation-delay: 0.06s; }
.about-row:nth-child(3) { animation-delay: 0.10s; }

.about-row:last-child { border-bottom: none; }

.about-key {
  color: var(--text-dim);
  font-size: 0.72rem;
  min-width: 56px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.about-val {
  color: var(--text);
  word-break: break-all;
}

.about-val a {
  color: var(--blue);
  transition: all var(--transition);
  position: relative;
}

.about-val a:hover {
  opacity: 0.85;
  text-shadow: 0 0 8px var(--blue-glow);
}

/* ---- Panel list items (projects / tools / downloads) ---- */
.panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  width: 100%;
  text-align: left;
  animation: fadeInUp 0.3s ease both;
}

.panel-item:nth-child(1) { animation-delay: 0.02s; }
.panel-item:nth-child(2) { animation-delay: 0.06s; }
.panel-item:nth-child(3) { animation-delay: 0.10s; }
.panel-item:nth-child(4) { animation-delay: 0.14s; }
.panel-item:nth-child(5) { animation-delay: 0.18s; }
.panel-item:nth-child(6) { animation-delay: 0.22s; }

.panel-item:hover {
  border-color: var(--orange);
  background: var(--active-bg);
  color: var(--text);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.panel-item.active {
  border-color: var(--orange);
  background: var(--active-bg);
  color: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
}

.panel-item-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.item-badge {
  font-size: 0.62rem;
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ---- Download items ---- */
.dl-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.88rem;
  text-decoration: none;
  transition: all var(--transition);
  margin-bottom: 0.5rem;
  animation: fadeInUp 0.3s ease both;
}

.dl-item:nth-child(2) { animation-delay: 0.04s; }
.dl-item:nth-child(3) { animation-delay: 0.08s; }
.dl-item:nth-child(4) { animation-delay: 0.12s; }

.dl-item:hover {
  border-color: var(--blue);
  transform: translateX(3px);
  box-shadow: 0 0 12px var(--blue-glow);
}

.dl-icon { font-size: 1.2rem; flex-shrink: 0; }

.dl-info { flex: 1; min-width: 0; }

.dl-name { font-size: 0.88rem; font-weight: 500; }

.dl-meta {
  font-size: 0.73rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

.dl-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Sub-project label */
.sub-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sub-label::before {
  content: '';
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--orange);
}

/* ============================================
   PATCH LOG — calendar (col 3)
   ============================================ */
.cal-month {
  margin-bottom: 1.75rem;
  animation: fadeInUp 0.35s ease both;
}

.cal-month:nth-child(2) { animation-delay: 0.05s; }
.cal-month:nth-child(3) { animation-delay: 0.10s; }
.cal-month:nth-child(4) { animation-delay: 0.15s; }

.cal-month-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-head {
  font-size: 0.65rem;
  color: var(--text-faint);
  text-align: center;
  padding: 0.25rem 0;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border-radius: 5px;
  color: var(--text-dim);
  transition: all var(--transition);
  position: relative;
}

.cal-blank { background: transparent; }

.cal-day-future { color: var(--text-faint); opacity: 0.4; }

/* day with a log entry — sky blue, clickable */
.cal-day-entry {
  background: rgba(56, 189, 248, 0.14);
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.08);
}

.cal-day-entry:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: var(--blue);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

/* selected log entry */
.cal-day-active {
  background: var(--blue) !important;
  color: #0a0a0a !important;
  border-color: var(--blue) !important;
  transform: scale(1.15);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
}

/* today marker */
.cal-day-today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--orange);
}

.cal-day-today:not(.cal-day-entry) {
  color: var(--orange);
  font-weight: 700;
}

/* ============================================
   PATCH LOG — merged viewer (col 4+5)
   ============================================ */
.layout.patchlog-expanded .col-fifth     { display: none; }
.layout.patchlog-expanded .col-secondary { flex: 2; }

.patchlog-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── 背景图层（深色/亮色双图渐变切换）─────────────────── */
.patchlog-bg {
  position: absolute;
  inset: 0;
  background-color: var(--surface2);
}

.patchlog-bg::before,
.patchlog-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
}

.patchlog-bg::before {
  background-image: url('../images/patchlog-bg-night.jpg');
  opacity: 1;
}

.patchlog-bg::after {
  background-image: url('../images/patchlog-bg-light.jpg');
  opacity: 0;
}

[data-theme="light"] .patchlog-bg::before { opacity: 0; }
[data-theme="light"] .patchlog-bg::after  { opacity: 1; }

/* ── 日志内容覆盖层（点击日期后出现）────────────────────── */
.patchlog-overlay {
  position: absolute;
  inset: 1.8rem;
  border-radius: 16px;
  padding: 2rem 2.2rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

[data-theme="light"] .patchlog-overlay {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.patchlog-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.plog-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  cursor: pointer;
  line-height: 1;
  transition: all var(--transition);
}

.plog-close:hover { color: #fff; border-color: var(--blue); }

[data-theme="light"] .plog-close {
  border-color: var(--border);
  color: var(--text-dim);
}
[data-theme="light"] .plog-close:hover { color: var(--text); border-color: var(--blue); }

.plog-date {
  font-family: 'PatchFont', var(--font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.plog-body {
  font-family: 'PatchFont', var(--font);
  font-size: 0.95rem;
  line-height: 2;
  color: rgba(220,220,220,0.9);
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="light"] .plog-body { color: var(--text-dim); }

.patchlog-overlay::-webkit-scrollbar {
  width: 4px;
}
.patchlog-overlay::-webkit-scrollbar-track {
  background: transparent;
}
.patchlog-overlay::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.patchlog-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}
[data-theme="light"] .patchlog-overlay::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
}
[data-theme="light"] .patchlog-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

/* ============================================
   GALLERY — thumbnail grid (col 3)
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.gallery-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--surface2);
  transition: all var(--transition);
  position: relative;
  animation: fadeIn 0.35s ease both;
}

.gallery-thumb:nth-child(3n+1) { animation-delay: 0.02s; }
.gallery-thumb:nth-child(3n+2) { animation-delay: 0.06s; }
.gallery-thumb:nth-child(3n)   { animation-delay: 0.10s; }

.gallery-thumb:hover {
  border-color: var(--blue);
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15);
}

.gallery-thumb.active {
  border-color: var(--blue);
  box-shadow: 0 0 12px var(--blue-glow);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-thumb:hover img {
  transform: scale(1.06);
}

/* placeholder box when no image */
.gallery-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-dim);
  background: var(--surface2);
}

/* ============================================
   GALLERY — large view (merged col 4+5)
   ============================================ */

/* when gallery image is selected, hide col-fifth and expand col-secondary */
.layout.gallery-expanded .col-fifth {
  display: none;
}

.layout.gallery-expanded .col-secondary {
  flex: 2;
}

.gallery-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  position: relative;
}

.gallery-viewer-img {
  max-width: 100%;
  max-height: calc(100% - 3rem);
  border-radius: 12px;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  display: block;
  animation: fadeInUp 0.35s ease;
}

.gallery-viewer-placeholder {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  background: var(--surface2);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.gallery-viewer-placeholder span { font-size: 2rem; }

.gallery-viewer-caption {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
}

.gallery-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}

.gallery-close:hover {
  color: var(--text);
  border-color: var(--blue);
}

/* ============================================
   COL 3 — blue accent overrides (alternating)
   ============================================ */
.col-primary .panel-item:hover {
  border-color: var(--blue);
  background: rgba(56, 189, 248, 0.06);
  box-shadow: 0 0 12px var(--blue-glow);
}

.col-primary .panel-item.active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(56, 189, 248, 0.06);
  box-shadow: 0 0 12px var(--blue-glow);
}

.col-primary .panel-label {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

/* ============================================
   MOBILE — ≤768px
   ============================================ */
@media (max-width: 768px) {

  html, body { overflow: hidden; }

  .layout {
    flex-direction: column;
    height: 100dvh;
    width: 100vw;
  }

  /* 隐藏装饰列 */
  .col-fifth { display: none; }

  /* ── COL 1: 顶部 header ── */
  .col-brand {
    flex: none;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .brand-logo-circle { display: none; }
  .brand-top { flex-direction: row; gap: 0; align-items: center; }
  .brand-banner { padding: 0.4rem 0.7rem; }
  .brand-title { font-size: 0.88rem; }
  .brand-bottom { flex-direction: row; align-items: center; gap: 0.75rem; }

  /* ── COL 2: 底部导航栏 ── */
  .col-nav {
    order: 99;
    flex: none;
    height: auto;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .nav-list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.2rem;
    font-size: 0.7rem;
    border-left: none;
    border-top: 2px solid transparent;
    white-space: nowrap;
    min-width: fit-content;
  }
  .nav-item:hover { padding-left: 0.2rem; }
  .nav-item.active {
    border-left-color: transparent;
    border-top-color: var(--orange);
  }
  .nav-item.active::after { display: none; }

  /* ── COL 3: 主内容 ── */
  .col-primary {
    flex: 1;
    min-height: 0;
    border-right: none;
    overflow-y: auto;
  }

  /* ── COL 4: 全屏滑入面板 ── */
  .col-secondary {
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    border-left: none;
    overflow-y: auto;
  }
  .col-secondary.mobile-open {
    transform: translateX(0);
  }

  /* 返回按钮 */
  .mobile-back {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
    transition: color var(--transition);
  }
  .mobile-back:hover { color: var(--orange); }

  /* patchlog 覆盖层在手机上填满 secondary */
  .patchlog-overlay {
    inset: 0.75rem;
  }

  /* gallery-expanded / patchlog-expanded 在手机上不影响列宽 */
  .layout.gallery-expanded .col-secondary,
  .layout.patchlog-expanded .col-secondary {
    flex: unset;
  }
}