/* ============================================================
   app — 页面骨架布局(顶栏 + 侧栏 + 主区) + 响应式
   ============================================================ */
#app { display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "brand top" "nav main"; height: 100vh; }

/* 顶栏 */
.brand { grid-area: brand; display:flex; align-items:center; gap:9px; padding: 0 var(--sp-4); border-bottom:1px solid var(--bd); border-right:1px solid var(--bd); background: var(--bg-1); font-weight:700; font-size: var(--fs-lg); }
.brand .logo { font-size: 20px; }
.topbar { grid-area: top; display:flex; align-items:center; gap:var(--sp-3); padding: 0 var(--sp-4); border-bottom:1px solid var(--bd); background: var(--bg-1); }
.topbar .day { display:flex; align-items:center; gap:6px; padding:3px 8px 3px 10px; border:1px solid var(--bd); border-radius:var(--r-2); background:var(--bg-1); }
.topbar .day input[type=date]{ width: 128px; border:0; background:transparent; padding:2px 0; }
.topbar .day input[type=date]:focus-visible{ box-shadow:none; }
/* 顶栏图标按钮: 无边框, hover 才显底, 更干净 */
.topbar .btn.icon { border-color: transparent; color: var(--fg-1); }
.topbar .btn.icon:hover { background: var(--bg-2); color: var(--fg); }

/* 侧栏导航 */
.nav { grid-area: nav; background: var(--bg-1); border-right:1px solid var(--bd); padding: var(--sp-3) var(--sp-2); display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding: 9px 11px; border-radius: var(--r-2); color: var(--fg-1); cursor:pointer; font-size: var(--fs-md); font-weight:500; border:1px solid transparent; transition: background var(--t-fast), color var(--t-fast); text-decoration:none; }
.nav-item:hover { background: var(--bg-2); color: var(--fg); text-decoration:none; }
.nav-item.on { background: var(--accent-weak); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.nav-item .ic { width:18px; height:18px; }
.nav-item .kbd-hint { margin-left:auto; font-size:var(--fs-xs); color:var(--fg-3); }
.nav-item.on .kbd-hint { color: color-mix(in srgb, var(--accent) 70%, transparent); }
.nav-sep { height:1px; background: var(--bd); margin: var(--sp-2) var(--sp-2); }
.nav-foot { margin-top:auto; padding: var(--sp-2); font-size: var(--fs-xs); color: var(--fg-2); }

/* 主内容 */
.main { grid-area: main; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.view { max-width: 1280px; margin: 0 auto; animation: view-in var(--t-med) var(--ease); }
@keyframes view-in { from{ opacity:0; transform: translateY(6px);} }
.view-head { display:flex; align-items:center; gap:var(--sp-3); margin-bottom: var(--sp-4); flex-wrap:wrap; }
.view-head h1 { font-size: var(--fs-xl); font-weight:650; }
.toolbar { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-3); }

/* 网格 */
.grid { display:grid; gap: var(--sp-3); }
.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .cols-2 { grid-template-columns: 1fr; } }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }

/* 主题切换按钮内两图标 */
.theme-btn .sun{display:none} .theme-btn .moon{display:block}
:root[data-theme=light] .theme-btn .sun{display:block} :root[data-theme=light] .theme-btn .moon{display:none}

/* —— 响应式 —— */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: var(--topbar-h) 1fr auto; grid-template-areas: "top" "main" "nav"; }
  .brand { display:none; }
  .topbar::before { content:"🐼"; font-size:18px; }
  .nav { flex-direction: row; border-right:0; border-top:1px solid var(--bd); padding: 6px; gap:4px; overflow-x:auto; }
  .nav-item { flex-direction:column; gap:3px; padding:7px 10px; font-size:var(--fs-xs); flex:1; justify-content:center; }
  .nav-item .kbd-hint, .nav-sep, .nav-foot { display:none; }
  .main { padding: var(--sp-4) var(--sp-3); }
  .topbar .day input[type=date]{ width:120px; }
}
@media (max-width: 560px) {
  .topbar .hide-xs { display:none; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); }
}