/* portal/base.css：用户端头部导航 / 公告条 / 页脚 / 右侧悬浮栏（仿参考站信息架构，只用 app.css 令牌，不写死颜色；
   主题文件 static/css/themes/<key>.css 在其后加载可覆盖）。
   结构：
     .announce            公告条（settings.announce_text；可关闭，关闭状态记 localStorage）
     .navbar              品牌 | .nav-links 标签 | .nav-search 搜索 | 城市下拉 | .nav-right 账号区（.nav-user 下拉）
     .site-footer         深色页脚：品牌+slogan+ICP | 三列链接 | 手机端二维码
     .float-bar           右侧悬浮：我的 / 订单 / 回到顶部 */
:root {
  --footer-bg: var(--sidebar-bg);
  --footer-fg: var(--sidebar-fg);
  --footer-muted: var(--sidebar-muted);
  --footer-heading: var(--sidebar-brand-fg);
  --footer-border: color-mix(in srgb, var(--sidebar-fg) 14%, transparent);
  --announce-bg: var(--primary);
  --announce-fg: var(--primary-contrast);
}

/* ---------- 页面骨架：页脚贴底 ---------- */
body.portal { display: flex; flex-direction: column; min-height: 100vh; }
body.portal > main.container { flex: 1 0 auto; width: 100%; }

/* ---------- 公告条 ---------- */
.announce { background: var(--announce-bg); color: var(--announce-fg); font-size: 13px; }
.announce-inner { max-width: 1200px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; gap: 10px; }
.announce-tag { flex-shrink: 0; border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 18px; opacity: .9; }
.announce-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-link { flex-shrink: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.announce-link:hover { color: inherit; opacity: .85; }
.announce-close {
  flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; opacity: .8; display: inline-flex; align-items: center; justify-content: center;
}
.announce-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- 头部导航（沿用 app.css 的 .navbar 骨架，这里补搜索框 / 图标链接 / 用户下拉） ---------- */
/* 导航内容与主体容器（.container，max-width=--page-max）同宽居中对齐：
   宽屏时两侧留白 = (100%-页宽)/2 + 内边距，使品牌与「全部分类」和主体左对齐。 */
.navbar { gap: 10px; padding: 0 max(var(--page-pad), calc((100% - var(--page-max)) / 2 + var(--page-pad))); }
/* 品牌占据「侧栏列」宽度，使「首页」正好对齐下方大图（主内容列）左缘 */
.navbar .logo { flex-shrink: 0; white-space: nowrap; width: calc(clamp(192px, 12.5vw, 232px) - 9px); }
.navbar .nav-links { gap: 2px; margin-left: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.navbar a.nav { padding: 9px 11px; white-space: nowrap; }
/* 导航标题类更大更粗（主导航为一级，明显大于左侧分类）；提高权重压过主题设定，含选中态 */
.navbar .nav-links a.nav,
.navbar .nav-links a.nav.active { font-size: 19px; font-weight: 700; line-height: 1; }
.navbar .nav-right a.nav { font-size: 16px; }
.navbar .nav-right { flex-shrink: 0; }
.navbar .nav-right .btn, .navbar .nav-right a.nav { white-space: nowrap; }
.navbar .nav-search {
  display: flex; align-items: center; flex: 0 1 300px; min-width: 150px; max-width: 320px; height: 42px; margin-left: 14px; margin-right: 6px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); padding: 0 4px 0 16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.navbar .nav-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--card); }
.navbar .nav-search input[type=search] {
  flex: 1; min-width: 0; width: auto; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--fg); font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.navbar .nav-search input[type=search]:focus { outline: none; box-shadow: none; }
.navbar .nav-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.navbar .nav-search button {
  flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.navbar .nav-search button:hover { color: var(--primary-contrast); background: var(--primary); }
.navbar .nav-right { gap: 4px; }
.navbar a.nav-ic { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; position: relative; font-weight: 500; }
.navbar a.nav-ic .badge { position: absolute; top: 0; right: -2px; padding: 0 5px; font-size: 11px; line-height: 16px; min-width: 16px; text-align: center; }
.navbar .nav-user { position: relative; margin-left: 4px; }
.navbar .nav-user-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--fg); font-weight: 600; cursor: pointer; line-height: 1.2; max-width: 200px;
}
.navbar .nav-user-btn:hover, .navbar .nav-user.open .nav-user-btn { background: var(--primary-soft); border-color: var(--border); color: var(--primary-ink); }
.navbar .nav-user-btn .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.navbar .nav-user-btn .caret { font-size: 11px; color: var(--muted); }
.navbar .avatar, .hu-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--primary-contrast); font-weight: 700; font-size: 14px;
}
.navbar .nav-user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 120;
}
.navbar .nav-user.open .nav-user-menu { display: block; animation: hw-pop .18s var(--ease); }
@media (hover: hover) { .navbar .nav-user:hover .nav-user-menu { display: block; } }
.navbar .nav-user-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--fg); font-size: 13px; white-space: nowrap; }
.navbar .nav-user-menu a:hover, .navbar .nav-user-menu a.on { background: var(--primary-soft); color: var(--primary-ink); }
.navbar .nav-user-menu a.danger { color: var(--danger); }
.navbar .nav-user-menu a.danger:hover { background: var(--alert-error-bg); color: var(--alert-error-fg); }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); margin-top: 18px; padding: 40px 0 30px; font-size: 13px; }
.site-footer .f-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.site-footer .f-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--footer-heading); }
.site-footer .f-logo .brand-mark { background: var(--footer-heading); color: var(--footer-bg); box-shadow: none; }
.site-footer a { text-decoration: none; }
.site-footer .f-slogan { margin-top: 10px; color: var(--footer-fg); }
.site-footer .f-icp { margin-top: 14px; color: var(--footer-muted); font-size: 12px; }
.site-footer .f-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site-footer .f-title { color: var(--footer-heading); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.site-footer .f-col a { display: block; color: var(--footer-muted); padding: 3px 0; transition: color var(--dur) var(--ease); }
.site-footer .f-col a:hover { color: var(--footer-heading); text-decoration: none; }
.site-footer .f-qr { display: flex; align-items: center; gap: 12px; }
.site-footer .f-qr-text { color: var(--footer-fg); max-width: 120px; text-align: right; line-height: 1.5; }
.site-footer .f-qr img { width: 96px; height: 96px; border-radius: 8px; background: var(--qr-quiet); padding: 4px; object-fit: contain; flex-shrink: 0; }

/* ---------- 右侧悬浮栏：宽屏（≥1320px）贴右侧中部带文字；窄一些的桌面/平板收成右下角圆钮，不压住内容 ---------- */
.float-bar { position: fixed; right: 12px; bottom: 80px; z-index: 95; display: flex; flex-direction: column; gap: 8px; }
.float-bar .fb-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 44px;
  color: var(--muted); font-size: 0; line-height: 1; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow-md); cursor: pointer; font-family: inherit; padding: 0; transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.float-bar .fb-item:hover { color: var(--primary-ink); background: var(--primary-soft); }
body.has-quote-sticky .float-bar, body.has-order-bar .float-bar { bottom: 132px; }
@media (min-width: 1320px) {
  .float-bar {
    right: 0; bottom: auto; top: 50%; transform: translateY(-50%); gap: 0;
    background: var(--card); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow-md); overflow: hidden;
  }
  .float-bar .fb-item { width: 54px; height: 56px; font-size: 11px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
  .float-bar .fb-item:last-child { border-bottom: 0; }
  body.has-quote-sticky .float-bar, body.has-order-bar .float-bar { bottom: auto; }
}
/* 品牌副标在窄桌面隐藏，给登录态的 5 个标签 + 搜索 + 账号区腾位置 */
@media (max-width: 1399px) {
  .navbar .logo .sub { display: none; }
}

/* ---------- 平板：搜索框收窄 ---------- */
@media (max-width: 1023px) {
  .navbar .nav-links { flex-wrap: wrap; }
  .navbar .nav-search { flex-basis: 200px; min-width: 120px; }
  .navbar .nav-links { margin-left: 2px; }
  .navbar a.nav { padding: 8px 10px; }
}

/* ---------- 手机（≤768px）：搜索/账号区进折叠菜单；页脚三列折两列；悬浮栏只留回到顶部（不遮内容） ---------- */
@media (max-width: 768px) {
  .navbar { padding: 8px 12px; gap: 8px; }
  .navbar .nav-links { margin-left: 0; }
  .navbar .nav-search { display: none; order: 9; flex: 1 1 100%; width: 100%; margin: 4px 0 0; min-height: 40px; }
  .navbar.open .nav-search { display: flex; }
  .navbar .nav-right { align-items: center; }
  .navbar a.nav-ic { min-height: 40px; }
  .navbar a.nav-ic:not(.nav-bell) { display: none; }   /* 手机：订单入口已在标签里，账号区只留通知（带角标） */
  .navbar .nav-user { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; margin: 0; }
  .navbar .nav-user-btn .caret { display: none; }
  .navbar .nav-user-menu { display: flex; flex-wrap: wrap; gap: 4px; position: static; box-shadow: none; border: 0; background: transparent; padding: 0; min-width: 0; animation: none; }
  .navbar .nav-user-menu a { min-height: 40px; display: inline-flex; align-items: center; }
  .announce-inner { padding: 6px 12px; gap: 8px; }
  .announce-text { white-space: normal; }
  .site-footer { margin-top: 24px; padding: 28px 0 24px; }
  .site-footer .f-inner { grid-template-columns: 1fr; gap: 22px; }
  .site-footer .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .f-col a { padding: 6px 0; }
  .site-footer .f-qr { justify-content: flex-start; }
  .site-footer .f-qr-text { text-align: left; max-width: none; }
  .float-bar { bottom: 76px; }
  body.has-order-bar .float-bar { bottom: 168px; }
  .float-bar .fb-item:not(.fb-top) { display: none; }   /* 手机：我的 / 订单 已在菜单里，只留回到顶部 */
}
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-user.open .nav-user-menu { animation: none; }
}

/* ===== 产品报价悬浮窗（templates/_quote_panel.html + static/js/quote-panel.js）===== */
.qp-overlay { position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, var(--heading) 55%, transparent); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.qp-overlay[hidden] { display: none; }
.qp-win { width: min(1180px, 100%); height: min(92vh, 980px); background: var(--bg); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: hw-pop .25s var(--ease); }
.qp-head { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px; min-height: 48px; background: var(--card); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.qp-title { font-weight: 700; color: var(--heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-newtab { white-space: nowrap; }
.qp-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--card); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; }
.qp-close:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); }
.qp-body { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.qp-body iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.qp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; pointer-events: none; }
.qp-loading[hidden] { display: none; }
body.qp-open { overflow: hidden; width: 100%; }   /* width:100% 必须有：手机 Chrome 上单独 overflow:hidden 会把布局视口撑到内容宽度 */
@media (max-width: 768px) {
  .qp-overlay { padding: 0; align-items: stretch; }
  .qp-win { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .qp-hint, .qp-newtab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qp-win { animation: none; } }