/* AumFlow —— 虚构的工业泵品牌。整站样式一份，没有构建步骤。
   配色和头部沿用同系列的第一个原型（AumPower），两个演示看起来是同一家公司做的。 */
:root {
  --blue: #003e7e;
  --orange: #ed6500;
  --ink: #1a1a1a;
  --muted: #777;
  --line: #e1e1e1;
  --paper: #faf8f6;
}
* { box-sizing: border-box; }
/* 🔴 这一条不能省。页面上大半的「按身份显示/隐藏」靠的是 `hidden` 属性，
   而浏览器给的 `[hidden] { display: none }` 只是 UA 样式 ——
   我们自己写的任何一条 `display: flex` 都会盖过它，元素照样显示。
   第一版就是这么让头部同时出现了「登录」按钮和已登录的身份卡。 */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 14px/1.45 Manrope, Arial, sans-serif;
}
h1, h2, h3 { margin: 0; }

/* ── 站点头 ───────────────────────────────────────────── */
.site-header {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 54px;
  padding: 0 max(34px, calc((100vw - 1400px) / 2 + 34px));
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.wordmark { display: flex; align-items: center; gap: 9px; color: #111; text-decoration: none; letter-spacing: 1.1px; font-size: 12px; }
.wordmark-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font: italic 15px Georgia, serif; }
.wordmark strong span { font-weight: 500; color: #777; }
.main-nav { display: flex; align-self: stretch; align-items: center; gap: 29px; flex: 1; }
.main-nav a { height: 100%; display: flex; align-items: center; position: relative; color: #676467; text-decoration: none; font-size: 11px; }
.main-nav a.active { color: #151515; font-weight: 700; }
.main-nav a.active:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); }
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-actions > button[aria-label='Search'] { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; background: none; color: #252525; }
.header-actions > button[aria-label='Search'] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.login-button { display: flex; gap: 9px; align-items: center; padding: 10px 13px; border: 0; border-radius: 4px; background: #171717; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .2px; cursor: pointer; }
.login-button svg { width: 14px; height: 14px; fill: none; stroke: #ff984d; stroke-width: 1.8; }

/* 登录后头部出现的身份小卡 */
.account-chip { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 30px; animation: chip-in .4s ease both; }
.account-chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #22201e; color: #fff; font: 700 10px/1 Manrope, sans-serif; font-style: normal; letter-spacing: .4px; }
.account-chip b { font-size: 11px; }
.account-chip em { font: 500 9px/1 monospace; font-style: normal; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.account-chip.is-vip i { background: var(--orange); }
.account-chip.is-vip em { color: var(--orange); }
@keyframes chip-in { from { opacity: 0; transform: translateY(-6px); } }

/* ── 产品页 ───────────────────────────────────────────── */
.product-shell { max-width: 1400px; margin: 0 auto; padding: 34px 34px 96px; }
.crumb-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.breadcrumbs a { color: var(--blue); text-decoration: none; }
.breadcrumbs span { color: #999; }
.crumb-row > p { margin: 0; color: #888; font-size: 10px; }

.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 40px 0 56px; }

/* ⚠️ `overflow: hidden` + `max-height` 两条都要。SVG 有固定 viewBox，
   只给宽度的话高度按比例算出来 —— 功能视图把框压到 130px 时，
   图会整个溢出去盖住底下的标题和价格块（第一版就是这么坏的）。 */
.visual-frame { display: grid; place-items: center; height: 400px; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, #f5f2ef, #e9e5e0); }
.pump { width: 84%; max-width: 420px; max-height: 86%; }
.thumb-row { display: flex; gap: 10px; margin-top: 14px; }
.thumb { width: 62px; height: 54px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(160deg, #f5f2ef, #e9e5e0); cursor: pointer; }
.thumb.active { border-color: #b3aca5; }

.eyebrow { font: 600 10px/1 monospace; letter-spacing: 1.1px; color: var(--muted); text-transform: uppercase; }
.product-info h1 { margin: 12px 0 0; font-size: 42px; letter-spacing: -1px; }
.subtitle { margin: 8px 0 0; color: #5f5b58; font-size: 15px; }

.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 28px 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec-grid dt { font: 500 10px/1 monospace; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
.spec-grid dd { margin: 7px 0 0; font-size: 17px; font-weight: 700; }

/* ── 价格区：权限层改写的第一处 ───────────────────────── */
.price-block { margin-top: 26px; padding: 20px 22px; border-radius: 10px; background: var(--paper); border: 1px solid #efebe7; transition: border-color .4s, background .4s; }
.price-label { font: 500 10px/1 monospace; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.price-amount { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.price-amount b { font-size: 34px; color: var(--ink); letter-spacing: -.5px; }
.price-amount em { font-style: normal; font-size: 13px; }
.price-block.is-partner .price-amount b { color: var(--orange); }

.price-locked { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ddd7d1; color: #6f6a66; font-size: 12px; }
.price-locked svg { width: 15px; height: 15px; fill: none; stroke: #9b9690; stroke-width: 1.5; }

.price-partner { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #ddd7d1; }
.save-note { display: inline-block; padding: 4px 9px; border-radius: 4px; background: #e7f3ea; color: #256b3c; font-size: 11px; font-weight: 700; }
.stock { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 12px; color: #4f4b48; }
.stock i { width: 7px; height: 7px; border-radius: 50%; background: #3f9c5d; }
.stock-vip i { background: var(--orange); }

.actions { display: flex; gap: 12px; margin-top: 24px; }
.btn-primary { padding: 14px 22px; border: 0; border-radius: 5px; background: #171717; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer; transition: background .3s; }
.btn-primary.is-partner { background: var(--orange); }
.btn-ghost { padding: 14px 22px; border: 1px solid #cfc9c3; border-radius: 5px; background: none; font-size: 12px; font-weight: 700; cursor: pointer; }

/* ── 资料区：权限层改写的第二处 ───────────────────────── */
.resources { padding-top: 40px; border-top: 1px solid var(--line); }
.resources-head { display: flex; align-items: baseline; gap: 14px; }
.resources h2 { font-size: 22px; letter-spacing: -.4px; }
.resources-head p { margin: 0; color: var(--muted); font-size: 12px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 22px; }
.res-card { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 10px; transition: border-color .45s, box-shadow .45s, background .45s; }
.res-kind { font: 500 9px/1 monospace; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
.res-card h3 { margin: 10px 0 7px; font-size: 15px; }
.res-card p { margin: 0; color: #6d6864; font-size: 12px; line-height: 1.5; }
.res-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 11px; font-weight: 700; color: #8a847e; }
.res-state svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.res-card.locked { background: #fbfaf9; }
.res-card.unlocked { background: #fff; border-color: #d8d2cb; box-shadow: 0 6px 20px #0000000a; }
.res-card.unlocked .res-state { color: var(--orange); }
.res-card.unlocked .res-state svg { stroke: var(--orange); }
.res-card.tier-locked .res-state { color: #9b8f7f; }
.res-card.just-unlocked { animation: unlock-pop .7s ease; }
@keyframes unlock-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 #ed650055; }
  35% { transform: scale(1.022); box-shadow: 0 0 0 7px #ed650000; }
  100% { transform: scale(1); }
}

/* ── 浮动入口 + 门户面板 ──────────────────────────────── */
.portal-trigger {
  position: fixed; z-index: 6; right: 26px; bottom: 26px;
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; border: 0; border-radius: 30px;
  background: #171717; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 30px #0000002e;
}
.portal-trigger svg { width: 17px; height: 17px; fill: none; stroke: #ff984d; stroke-width: 1.7; }

.portal-panel {
  position: fixed; z-index: 7; right: 26px; bottom: 26px;
  display: flex; flex-direction: column;
  width: 460px; max-height: calc(100dvh - 52px);
  border-radius: 14px; background: #fff;
  box-shadow: 0 26px 70px #00000029;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .28s, transform .28s, visibility .28s;
}
.portal-panel.open { opacity: 1; visibility: visible; transform: none; }
.portal-panel header { display: flex; justify-content: space-between; gap: 14px; padding: 18px 22px 15px; border-bottom: 1px solid #f0ece8; }
.portal-panel header span { font: 600 9px/1 monospace; letter-spacing: 1px; color: var(--orange); text-transform: uppercase; }
.portal-panel header h2 { margin-top: 8px; font-size: 17px; letter-spacing: -.3px; }
.portal-panel header > button { align-self: start; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #8b8580; cursor: pointer; }
.portal-panel header > button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.portal-content { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }

.portal-intro { margin: 0 0 16px; color: #5f5b58; font-size: 12px; line-height: 1.65; }
.account-list { display: grid; gap: 9px; }
.account-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.account-option:hover { border-color: #b9b2ab; background: #fdfcfb; }
.account-option i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #22201e; color: #fff; font: 700 11px/1 Manrope, sans-serif; font-style: normal; }
.account-option[data-role='vip'] i { background: var(--orange); }
.account-option span { flex: 1; display: grid; gap: 3px; }
.account-option b { font-size: 13px; }
.account-option em { font-style: normal; font-size: 11px; color: var(--muted); }
.account-option svg { width: 15px; height: 15px; fill: none; stroke: #b0aaa4; stroke-width: 1.8; }
.portal-note { margin: 14px 0 0; font-size: 10px; color: #9b9590; }

/* 登录后 */
.tier-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: var(--paper); }
.tier-card i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #22201e; color: #fff; font: 700 12px/1 Manrope, sans-serif; font-style: normal; transition: background .4s; }
.tier-card.is-vip i { background: var(--orange); }
.tier-card b { display: block; font-size: 14px; }
.tier-badge { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 3px; background: #e6e2de; font: 600 9px/1.5 monospace; letter-spacing: .5px; color: #55504c; text-transform: uppercase; }
.tier-card.is-vip .tier-badge { background: var(--orange); color: #fff; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; }
.stat-row div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; }
.stat-row dt { font: 500 9px/1 monospace; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; }
.stat-row dd { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.stat-row dd b { font-size: 15px; color: var(--ink); }

.unlock-list { margin-top: 18px; }
.unlock-head, .role-switch-head { display: block; font: 600 9px/1 monospace; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
.unlock-list ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.unlock-list li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #45413e; }
.unlock-list li em { width: 15px; height: 15px; border-radius: 50%; background: #e6e2de; flex: none; position: relative; transition: background .4s; }
.unlock-list li em:after { content: ''; position: absolute; inset: 0; background: no-repeat center / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 3 3 5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 0; transition: opacity .4s; }
.unlock-list li.on em { background: #3f9c5d; }
.unlock-list li.on em:after { opacity: 1; }
.unlock-list li.off { color: #9b9590; }

.manager-card { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 13px; border: 1px solid #f0dcc8; border-radius: 9px; background: #fff8f1; animation: chip-in .45s ease both; }
.manager-card i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font: 700 11px/1 Manrope, sans-serif; font-style: normal; }
.manager-card div { flex: 1; }
.manager-card b { display: block; font-size: 12px; }
.manager-card em { font-style: normal; font-size: 10px; color: #8a7f74; }
.manager-card button { padding: 8px 12px; border: 1px solid #e3c9ab; border-radius: 5px; background: #fff; font-size: 11px; font-weight: 700; color: #a55a10; cursor: pointer; }

.role-switch { margin-top: 20px; padding: 14px; border: 1px dashed #d5cfc9; border-radius: 9px; background: #fbfaf9; }
.role-switch > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.role-option { padding: 10px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 700; color: #55504c; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.role-option.active { border-color: var(--orange); background: #fff4ea; color: #a55a10; }

.btn-signout { width: 100%; margin-top: 16px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; }

/* ── Toast ───────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 20; left: 50%; bottom: 34px;
  padding: 12px 20px; border-radius: 8px; background: #1c1a18; color: #fff;
  font-size: 12px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 窄屏 ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .site-header { gap: 20px; padding: 0 18px; }
  .main-nav { display: none; }
  .product-shell { padding: 22px 18px 80px; }
  .product-hero { grid-template-columns: 1fr; gap: 30px; padding: 26px 0 36px; }
  .visual-frame { height: 260px; }
  .product-info h1 { font-size: 32px; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .portal-panel { right: 12px; left: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); }
  .portal-trigger { right: 12px; bottom: 12px; }
  .account-chip b { display: none; }
}