/* 2026-09-07 本地待确认：单层顶栏、时间日期、Bing 搜索与三层卡片。 */
:root { --header-h: 64px; --nav-page-width: 1200px; --nav-page-gutter: 24px; }
body { min-width: 0; }
#header, body.admin-mode #header { padding-left: var(--nav-page-gutter); padding-right: var(--nav-page-gutter); }
#header > .header-inner { max-width: calc(var(--nav-page-width) - 2 * var(--nav-page-gutter)); gap: 22px; min-width: 0; }
.logo { font-size: 17px; gap: 9px; margin-right: 0; }
.logo-icon { flex: 0 0 32px; }
.header-btns { gap: 6px; flex-shrink: 0; margin-left: 0; }
#header #tabBar {
  position: static; flex: 1; min-width: 0; height: 42px;
  background: #131e33; border: 1px solid #25324a; border-radius: 24px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  scrollbar-width: none;
}
#header #tabBar > .tab-inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); width: 100%; min-width: max-content; max-width: none; margin: 0; padding: 4px; gap: 3px; }
#header .tab-item {
  flex: 1 0 0; min-width: max-content; justify-content: center;
  height: 32px; padding: 0 8px; gap: 5px; border-radius: 18px;
  border: 1px solid transparent; background: transparent; color: #b9c9de;
  font-weight: 500; text-shadow: none; box-shadow: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#header .tab-item > span:first-child { display: none; }
#header .tab-item:hover { background: #1e2d44; color: #f0f6ff; }
#header .tab-item.active { background: #293e5c; border-color: #3d5476; color: #f0f6ff; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
#header .tab-count { font-size: 11px; font-weight: 500; min-width: 16px; padding: 1px 2px; border-radius: 10px; background: transparent; color: #aebfd6; font-variant-numeric: tabular-nums; }
#header .tab-item.active .tab-count { background: #354f73; color: #e0ecff; }
[data-theme="light"] #header #tabBar { background: #f2f5fa; border-color: #e6ecf4; box-shadow: inset 0 1px 2px rgba(40,60,90,.025); }
[data-theme="light"] #header .tab-item { color: #52627a; }
[data-theme="light"] #header .tab-item:hover { background: #e6edf8; color: #244d96; }
[data-theme="light"] #header .tab-item.active { background: #fff; border-color: #dce5f3; color: #2454b5; box-shadow: 0 2px 5px rgba(44,73,123,.10); }
[data-theme="light"] #header .tab-count { color: #52627a; }
[data-theme="light"] #header .tab-item.active .tab-count { background: #e8efff; color: #254ca5; }
#header .tab-item.drag-over { border-color: var(--accent); background: var(--accent-light); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
#header .tab-item:focus-visible { outline-offset: -2px; }
.nav-home-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; margin-right: 0; padding: 6px 8px; border-radius: 12px; }
.nav-home-icon { display: block; flex-shrink: 0; }
.nav-start { margin-top: var(--header-h); padding: 44px 20px 32px; text-align: center; }
.start-overview { display: flex; justify-content: center; align-items: center; gap: 28px; }
.start-clock {
  display: block; font-size: clamp(58px, 6vw, 80px); line-height: 1.15;
  font-weight: 300; letter-spacing: -3px; font-variant-numeric: tabular-nums;
  color: var(--text); flex-shrink: 0;
}
.start-calendar { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 28px; border-left: 1px solid var(--border); color: var(--text-sub); font-size: 13px; letter-spacing: .02em; text-align: left; }
.start-date { color: var(--text); font-size: 16px; font-weight: 600; }
.start-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.start-greeting { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.5; }
.calendar-dot { opacity: .5; }
.web-search {
  display: flex; align-items: center; gap: 14px;
  width: min(620px, 100%); min-height: 56px; margin: 28px auto 0;
  padding: 0 10px 0 20px; border: 1px solid var(--border); border-radius: 18px;
  background: rgba(22, 32, 54, .88); box-shadow: 0 10px 32px rgba(0,0,0,.12);
  transition: border-color .2s, box-shadow .2s;
}
.web-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.web-search-brand { flex-shrink: 0; padding-right: 16px; border-right: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 17px; }
.web-search input {
  flex: 1; min-width: 0; height: 54px; border: 0; outline: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 15px;
}
.web-search input::placeholder { color: var(--text-muted); }
.web-search button { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; background: transparent; color: var(--text-sub); cursor: pointer; }
.web-search button:hover { background: var(--accent-light); color: var(--accent); }
.web-search button:focus-visible, .nav-item:focus-visible, .tab-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-theme="light"] .web-search { background: #fff; border-color: #e1e6ee; box-shadow: 0 8px 30px rgba(28,48,80,.055); }
[data-theme="light"] .web-search:focus-within { border-color: #7c9cde; box-shadow: 0 0 0 3px #eaf0ff; }
#content { max-width: var(--nav-page-width); margin-top: 0; min-height: 50vh; padding-top: 16px; padding-left: var(--nav-page-gutter); padding-right: var(--nav-page-gutter); }
.nav-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 16px; }
.nav-item { padding: 22px 12px 18px; min-height: 146px; gap: 13px; }
.nav-item .nav-icon { width: 50px; height: 50px; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid rgba(148,163,184,.2); box-shadow: none; }
.nav-icon img { border-radius: 8px; }
.nav-info { gap: 6px; }
.nav-name { font-size: 13px; font-weight: 600; }
.nav-company { width: 100%; color: var(--text-muted); font-size: 11px; line-height: 1.4; min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="light"] .nav-company { color: #5b687c; }
.publisher-help { margin: 7px 0 0; color: var(--text-sub); font-size: 12px; line-height: 1.5; }
#bmModal .modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
body.admin-mode .nav-company { text-align: left; align-self: center; }
body.admin-mode .nav-start { display: none; }
body.admin-mode #content { margin-top: var(--header-h); padding-top: 24px; }
body.admin-mode .logo { max-width: 36px; overflow: hidden; white-space: nowrap; }
body.admin-mode .nav-item .nav-icon { width: 42px; height: 42px; padding: 4px; }
@media (max-width: 1050px) {
  #header > .header-inner { gap: 12px; }
  .logo { width: 32px; max-width: 32px; overflow: hidden; white-space: nowrap; flex-shrink: 0; gap: 0; }
}
@media (max-width: 640px) {
  :root { --header-h: 60px; --nav-page-gutter: 12px; }
  #header > .header-inner { gap: 8px; }
  .header-btns { gap: 3px; }
  .nav-home-btn { display: none; }
  .hbtn-icon { width: 30px; height: 32px; }
  #header .tab-item { padding: 0 11px; font-size: 12px; }
  #header .tab-count { display: none; }
  .nav-start { padding: 32px 18px 24px; }
  .start-overview { gap: 16px; }
  .start-clock { font-size: clamp(44px, 13vw, 58px); letter-spacing: -2px; }
  .start-calendar { padding-left: 16px; font-size: 11px; gap: 6px; }
  .start-date { font-size: 14px; }
  .start-day { gap: 5px; }
  .start-greeting { font-size: 12px; }
  .web-search { min-height: 52px; margin-top: 23px; gap: 10px; padding-left: 16px; border-radius: 16px; }
  .web-search-brand { font-size: 15px; padding-right: 12px; }
  .web-search input { height: 50px; font-size: 14px; }
  .nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nav-item { padding: 17px 8px 13px; min-height: 132px; gap: 11px; }
  .nav-item .nav-icon { width: 44px; height: 44px; padding: 4px; border-radius: 12px; }
  .nav-name { font-size: 12px; }
  .nav-company { font-size: 10px; }
}