#bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    url('../assets/character/background.png') center / cover no-repeat,
    linear-gradient(135deg, #cfe0ff 0%, #e9dcff 50%, #ffe3ec 100%);
}
#app {
  position: fixed; inset: 0; z-index: 10; display: flex; gap: 0; padding: 12px 12px 92px;
  --left-w: clamp(280px, 55%, 520px);
  /* 中缝分隔条宽度：里面放收起 / 恢复箭头，触屏设备加宽到便于手指点按 */
  --split-w: 28px;
  /* 左栏实际宽度：至少 240px，并始终给日历留出分隔条 + 240px */
  --left-actual: min(max(240px, var(--left-w)), calc(100% - var(--split-w) - 240px));
}
@media (pointer: coarse) { #app { --split-w: 40px; } }
.panel { background: var(--panel); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(30, 40, 80, 0.15); min-height: 0; overflow: hidden; }
/* 并排时：左栏固定宽度，右栏取剩下的宽度，两栏都不伸缩。 */
#left { flex: 0 0 auto; width: var(--left-actual); display: flex; container-type: inline-size; }
#right { flex: 0 0 auto; width: calc(100% - var(--left-actual) - var(--split-w)); min-width: 0; container-type: inline-size; }
/* 收起一侧 = 另一侧占满：由 layout.js 在 #app 上设置 data-collapsed="left" | "right"，同一时间最多收起一侧，左右完全对称。
   分隔条始终在两栏之间，收起后自然贴到屏幕边缘。 */
#app[data-collapsed="left"] #left, #app[data-collapsed="right"] #right { display: none; }
#app[data-collapsed="left"] #right, #app[data-collapsed="right"] #left { width: calc(100% - var(--split-w)); }

/* 分隔条：上下两段把手线，中间是箭头按钮，整条都能拖动（按钮除外） */
#splitter { flex: 0 0 var(--split-w); position: relative; z-index: 20; cursor: col-resize; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#splitter::before, #splitter::after {
  content: ''; flex: 0 0 28px; width: 3px; border-radius: 2px; background: rgba(31, 36, 48, 0.14);
  transition: background 0.15s, width 0.15s;
}
#splitter:hover::before, #splitter:hover::after, body.resizing #splitter::before, body.resizing #splitter::after { background: var(--accent); width: 5px; }
body.resizing { cursor: col-resize; user-select: none; }

.split-ctl { display: flex; flex-direction: column; gap: 6px; }
.split-btn {
  width: calc(var(--split-w) - 4px); height: 36px; padding: 0; font-size: 14px; line-height: 1;
  border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(30, 40, 80, 0.12);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.split-btn:active { background: var(--accent-soft); }
@media (pointer: coarse) { .split-btn { height: 44px; font-size: 16px; } }