/* ═══════════════════════════════════════════
   VELA NOVA — layout.css
   三栏布局 · Topbar · Sidebar · Main · Right Panel
   手机版响应式（底部Tab）
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   桌面三栏布局
   ══════════════════════════════════════════ */
.shell {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-columns: var(--sidebar) 1fr var(--rp);
  min-height: 100vh;
}

/* ── Topbar ── */
.topbar {
  grid-column: 1 / -1;
  background: var(--forest);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
}
.logo-v {
  font-family: var(--fd);
  font-size: 21px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.03em;
}
.logo-n {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--white4);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 2px 2px;
}

.top-nav {
  display: flex;
  gap: 2px;
  margin-left: 32px;
}
.tnav {
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--fb);
  color: var(--white3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}
.tnav:hover  { background: var(--glass2); color: var(--white); }
.tnav.active { color: var(--white); background: var(--glass2); }

.topbar-r {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tbtn {
  background: none;
  border: 1px solid var(--glass-border2);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: var(--fb);
  color: var(--white2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.tbtn:hover { background: var(--glass2); border-color: var(--mist); }
.tbtn.g {
  background: var(--gold);
  color: var(--night);
  border-color: var(--gold);
  font-weight: 500;
}
.tbtn.g:hover { background: var(--gold-dim); border-color: var(--gold-dim); }

/* ── Sidebar ── */
.sidebar {
  background: var(--forest);
  border-right: 1px solid var(--glass-border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

/* ── Sidebar：5板块子菜单 ── */
.sb-section { display: none; flex-direction: column; padding: 8px 10px; flex: 1; }
.sb-section.active { display: flex; }

.sb-section-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white4);
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--white3);
  font-size: 13px;
  font-weight: 400;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: all var(--dur-fast) var(--ease);
  font-family: var(--fb);
}
.nav:hover        { background: var(--glass2); color: var(--white); }
.nav.active       { background: var(--glass2); color: var(--white); }
.nav.active .nav-dot { background: var(--gold); }
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white4);
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}
.nav:hover .nav-dot { background: var(--mist); }

/* 未完成功能标记 */
.nav-wip {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--white4);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: auto;
  flex-shrink: 0;
}

.sb-foot {
  margin-top: auto;
  padding: 14px 12px;
  border-top: 1px solid var(--glass-border);
}
.sb-tag {
  font-family: var(--fd);
  font-size: 13px;
  font-style: italic;
  color: var(--white4);
  text-align: center;
}

/* ── Topbar板块Tab（桌面App模式）── */
.section-nav {
  display: flex;
  gap: 2px;
  margin-left: 28px;
}
.snav {
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--fb);
  color: var(--white3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
  display: flex;
  align-items: center;
  gap: 5px;
}
.snav:hover  { background: var(--glass2); color: var(--white); }
.snav.active { color: var(--white); background: var(--glass2); }
.snav.active { border-bottom: 2px solid var(--gold); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* ── Main（中栏，可滚动）── */
.main {
  overflow-y: auto;
  overflow-x: hidden; /* 防止panel内容横向溢出 */
  height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
}

/* Panel显示控制 */
.panel { display: none; }
.panel.active {
  display: block;
  animation: velaFadeIn var(--dur-slow) var(--ease);
}

/* 特殊：Landing panel默认显示 */
#panel-landing { display: block; padding: 0; }
#panel-landing.hid { display: none; }

/* ── Page内边距（升级：增加呼吸感）── */
.page {
  padding: var(--space-lg) 56px 72px;
  max-width: none;
}

/* ── Right Panel（今日快览）── */
.rp {
  background: var(--forest);
  border-left: 1px solid var(--glass-border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  width: var(--rp);
}

/* ── 底部Tab：桌面端默认隐藏 ── */
.tab-bar {
  display: none;
}

.rp-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.rp-card.gold-card {
  background: var(--gold-pale);
  border-color: var(--gold-border);
}
.rp-lbl {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white4);
  margin-bottom: 10px;
  display: block;
}

/* ══════════════════════════════════════════
   手机版布局（< 768px）
   底部Tab导航 + 全屏单栏
   ══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 重置三栏为单栏 */
  .shell {
    grid-template-rows: var(--topbar-h) 1fr auto;
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  /* Topbar手机版简化 */
  .topbar {
    padding: 0 16px;
  }
  .top-nav { display: none; } /* 手机版顶部导航隐藏，用底部Tab代替 */
  .section-nav { display: none; } /* 手机版App板块导航也隐藏，用底部Tab代替 */
  .topbar-r .tbtn:not(.g) { display: none; } /* 只保留主CTA按钮 */

  /* Sidebar隐藏 */
  .sidebar { display: none; }

  /* Right Panel手机隐藏 */
  .rp { display: none !important; }

  /* Main全屏 */
  .main {
    height: calc(100dvh - var(--topbar-h) - 64px); /* dvh：键盘弹出后自适应 */
    position: static;
    padding-bottom: 0; /* fixed tab-bar不占文档流，main高度已减去64px */
  }

  /* Page内边距手机版 */
  .page {
    padding: 24px 20px 80px;
  }

  /* ── 底部Tab导航 ── */
  .tab-bar {
    grid-column: 1;
    background: var(--forest);
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom); /* iPhone底部安全区 */
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--white4);
    font-family: var(--fb);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast) var(--ease);
    min-width: 56px;
    text-align: center;
  }
  .tab-item:hover  { color: var(--white3); }
  .tab-item.active { color: var(--gold); }

  .tab-icon {
    font-size: 18px;
    line-height: 1;
  }

  .tab-item.active .tab-icon {
    filter: drop-shadow(0 0 6px rgba(196,163,90,0.6));
  }
}

/* ══════════════════════════════════════════
   分割线
   ══════════════════════════════════════════ */
.div {
  height: 1px;
  background: var(--glass-border);
  margin: var(--space-md) 0;
}

/* ══════════════════════════════════════════
   Landing模式：main占全宽（sidebar/rp隐藏）
   ══════════════════════════════════════════ */
body.landing-mode .shell {
  grid-template-columns: 1fr;
}
body.landing-mode .main {
  height: calc(100vh - 60px);
  overflow-y: auto;
}

/* ══ Landing模式：彻底去掉sidebar列 ══ */
body.landing-mode .shell {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
}
body.landing-mode .sidebar {
  display: none !important;
}
body.landing-mode .rp {
  display: none !important;
}
body.landing-mode .main {
  grid-column: 1 / -1 !important;
  height: calc(100vh - 60px);
  overflow-y: auto;
  position: sticky;
  top: 60px;
}
body.landing-mode .topbar {
  grid-column: 1 / -1 !important;
}


/* ════════════════════════════════════════
   App模式：main正常scroll容器
   ════════════════════════════════════════ */
body:not(.landing-mode) .main {
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
  position: sticky;
  top: var(--topbar-h);
}

/* ── Pro sidebar badge ── */
.nav-pro-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(196,163,90,0.12);
  border: 1px solid rgba(196,163,90,0.3);
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-pro-item {
  position: relative;
}

/* ── Pro tab style ── */
.ptab-pro {
  color: var(--gold) !important;
  border-color: rgba(196,163,90,0.3) !important;
}
.ptab-pro.on {
  background: rgba(196,163,90,0.15) !important;
  border-color: rgba(196,163,90,0.5) !important;
}