/* ═══════════════════════════════════════════════════════════════
   交互增强层 v7 · 样式
   依赖 portal.css 的设计令牌；浅色主题，深墨色块用 --on-* 反色。
   ═══════════════════════════════════════════════════════════════ */
:root{ --ix-line:rgba(38,34,27,.14); --ix-soft:rgba(38,34,27,.055) }

/* ── 通用工具条 / 按钮 ───────────────────────────────── */
.ix-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 clamp(14px,2vw,22px);padding:10px 14px;
  background:var(--paper);border:1px solid var(--ix-line);border-radius:12px}
.ix-bar__btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 15px;
  border:1px solid var(--ix-line);border-radius:100px;background:var(--ink);
  font-size:12.5px;font-weight:600;color:var(--cream);white-space:nowrap;
  transition:background .28s var(--e-out),color .28s,border-color .28s,transform .3s var(--e-spring)}
.ix-bar__btn svg{width:15px;height:15px}
.ix-bar__btn:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.ix-bar__btn.is-on,.ix-bar__btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.ix-bar__btn.is-on svg,.ix-bar__btn[aria-pressed="true"] svg{stroke:#fff}
.ix-bar__hint{font-size:11.5px;color:var(--faint);line-height:1.6}
.ix-bar__count{margin-left:auto;font:11px/1 var(--mono);letter-spacing:.1em;color:var(--faint);white-space:nowrap}
.ix-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;
  border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:transform .3s var(--e-spring),background .25s,color .25s}
.ix-btn:hover{transform:translateY(-2px)}
.ix-btn--red{background:var(--red);color:#fff;border:1px solid var(--red)}
.ix-btn--red:hover{background:var(--red-deep);color:#fff}
.ix-btn--ghost{border:1px solid var(--ix-line);background:transparent;color:var(--cream)}
.ix-btn--ghost:hover{border-color:var(--red);color:var(--red)}
.ix-search{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;
  border:1px solid var(--ix-line);border-radius:100px;background:var(--ink);min-width:min(240px,100%)}
.ix-search svg{width:14px;height:14px;flex:none;color:var(--faint)}
.ix-search input{border:0;outline:0;background:none;font-size:12.5px;min-width:0;width:100%;color:var(--cream)}
.ix-search:focus-within{border-color:var(--red)}
.ix-chips{display:flex;gap:6px;flex-wrap:wrap}
.ix-chip{min-height:34px;padding:6px 14px;border:1px solid var(--ix-line);border-radius:100px;
  font-size:12px;background:var(--ink);color:var(--dim);transition:.25s}
.ix-chip:hover{border-color:var(--red);color:var(--red)}
.ix-chip.is-on{background:var(--red);border-color:var(--red);color:#fff}

:where(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── 1. 卡片：收藏 / 展开 / 放大 ─────────────────────── */
.ix-card{position:relative}
.ix-fav{position:absolute;top:clamp(14px,1.8vw,22px);right:clamp(14px,1.8vw,22px);z-index:4;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);border:1px solid var(--ix-line);color:var(--faint);
  transition:transform .35s var(--e-spring),color .25s,background .25s,border-color .25s}
.ix-fav svg{width:17px;height:17px}
.ix-fav:hover{transform:scale(1.12);border-color:var(--red);color:var(--red)}
.ix-fav.is-on{background:var(--red);border-color:var(--red);color:#fff}
.ix-fav.is-on svg{fill:#fff;stroke:#fff}
.ix-more-wrap{margin-top:18px;border-top:1px solid var(--ix-line);padding-top:12px}
.ix-more-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:38px;font-size:12px;font-weight:600;color:var(--dim);text-align:left;
  transition:color .25s}
.ix-more-btn:hover{color:var(--red)}
.ix-more-btn i{font-style:normal;font:16px/1 var(--mono);color:var(--red)}
.ix-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s var(--e-out),opacity .32s}
.ix-more > *{overflow:hidden}
.ix-more-wrap.is-open .ix-more{grid-template-rows:1fr;opacity:1}
.ix-more__dl{display:grid;gap:8px;padding:14px 0 4px;min-height:0}
.ix-more__dl > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start}
.ix-more__dl dt{font-size:10.5px;letter-spacing:.08em;color:var(--faint);padding-top:3px}
.ix-more__dl dd{font-size:12px;line-height:1.8;color:var(--dim)}
.ix-more__none{font-size:12px;color:var(--faint);padding:12px 0}
.ix-more__foot{margin-top:10px;padding-top:10px;border-top:1px dashed var(--ix-line);
  font-size:11px;line-height:1.9;color:var(--faint)}
.ix-more__links{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:6px}
.ix-more__link{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.ix-zoom{position:absolute;top:12px;right:12px;z-index:4;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;background:rgba(247,244,237,.92);border:1px solid rgba(38,34,27,.12);color:var(--cream);
  box-shadow:0 4px 16px rgba(20,17,13,.18);transition:transform .3s var(--e-spring),color .25s}
.ix-zoom svg{width:17px;height:17px}
.ix-zoom:hover{transform:scale(1.12);color:var(--red)}

/* 卡片组：收藏 / 大图模式（让链接型卡片也能参与） */
.cards.ix-fav-on .card,.cards.ix-zoom-on .card{cursor:pointer;outline:2px dashed rgba(181,52,42,.55);
  outline-offset:3px;transition:outline-color .25s,transform .3s var(--e-spring)}
.cards.ix-fav-on .card:hover,.cards.ix-zoom-on .card:hover{transform:translateY(-4px);outline-color:var(--red)}
.cards.ix-fav-on .card::after,.cards.ix-zoom-on .card::after{content:"☆ 点此收藏";
  position:absolute;top:12px;left:12px;z-index:5;padding:5px 10px;border-radius:100px;
  background:var(--red);color:#fff;font-size:10.5px;letter-spacing:.06em;pointer-events:none}
.cards.ix-zoom-on .card::after{content:"⌕ 点此放大"}
.ix-bar--cards .ix-bar__btn{padding:7px 13px}

/* 大图浏览模式 */
.fav.ix-gal-on .fav__item{cursor:zoom-in;outline:2px solid transparent;outline-offset:2px;transition:outline-color .25s}
.fav.ix-gal-on .fav__item:hover,.fav.ix-gal-on .fav__item:focus-visible{outline-color:var(--red)}
.fav.ix-gal-on .fav__item::before{content:"点击放大";position:absolute;z-index:3;top:12px;left:12px;
  padding:5px 10px;border-radius:100px;background:rgba(181,52,42,.92);color:#fff;font-size:10.5px;letter-spacing:.06em}

/* ── 2. 收藏夹浮标 / 抽屉 ──────────────────────────── */
.ix-dock__btn{position:fixed;z-index:7850;
  right:clamp(16px,2.4vw,34px);bottom:calc(clamp(18px,2.6vw,34px) + 64px);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--ix-line);color:var(--faint);
  box-shadow:0 10px 28px rgba(34,30,24,.18);
  transition:transform .35s var(--e-spring),color .25s,background .25s,border-color .25s}
.ix-dock__btn svg{width:19px;height:19px}
.ix-dock__btn:hover{transform:scale(1.1);border-color:var(--red);color:var(--red)}
.ix-dock__btn.has-items{background:var(--red);border-color:var(--red);color:#fff}
.ix-dock__btn.has-items svg{fill:#fff;stroke:#fff}
.ix-dock__n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 4px;
  display:grid;place-items:center;border-radius:100px;background:var(--band);color:#fff;
  font:10px/1 var(--mono);border:2px solid var(--ink)}
.ix-dock__btn.has-items .ix-dock__n{background:var(--red-deep)}
.ix-drawer__scrim,.ix-lb__scrim{position:fixed;inset:0;background:rgba(20,17,13,.58);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;backdrop-filter:blur(3px)}
.ix-drawer__scrim{z-index:8580}
body.ix-drawer-open .ix-drawer__scrim{opacity:1;visibility:visible}
.ix-drawer{position:fixed;z-index:8600;top:0;right:0;bottom:0;width:min(390px,92vw);
  display:flex;flex-direction:column;background:var(--ink);border-left:1px solid var(--ix-line);
  transform:translateX(102%);visibility:hidden;transition:transform .48s var(--e-out),visibility .48s;
  box-shadow:-18px 0 60px rgba(20,17,13,.24)}
body.ix-drawer-open .ix-drawer{transform:none;visibility:visible}
.ix-drawer__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:24px 24px 18px;border-bottom:1px solid var(--ix-line)}
.ix-drawer__hd b{display:block;font-family:var(--serif);font-size:20px;letter-spacing:.06em}
.ix-drawer__hd span{display:block;margin-top:4px;font-size:11px;color:var(--faint)}
.ix-x{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--ix-line);font:22px/1 var(--sans);color:var(--dim);transition:.25s}
.ix-x:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)}
.ix-drawer__list{flex:1;overflow:auto;padding:18px 20px}
.ix-drawer__empty{padding:70px 18px;text-align:center;color:var(--faint)}
.ix-drawer__empty svg{width:38px;height:38px;margin:0 auto 14px;color:var(--brass)}
.ix-drawer__empty p{font-family:var(--serif);font-size:16px;color:var(--cream);margin-bottom:8px}
.ix-drawer__empty span{font-size:11.5px;line-height:1.9}
.ix-drawer__item{background:var(--paper);border:1px solid var(--ix-line);border-radius:10px;
  padding:14px 15px;margin-bottom:10px}
.ix-drawer__item-hd{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ix-drawer__item-hd b{font-family:var(--serif);font-size:14.5px}
.ix-drawer__del{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--ix-line);
  color:var(--faint);font-size:16px;line-height:1}
.ix-drawer__del:hover{border-color:var(--red);color:var(--red)}
.ix-drawer__item p{margin:8px 0 10px;font-size:11.5px;line-height:1.8;color:var(--dim)}
.ix-drawer__item-ft{display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed var(--ix-line);padding-top:9px;font-size:11px;color:var(--faint)}
.ix-drawer__item-ft a{color:var(--red);font-weight:600}
.ix-drawer__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--ix-line)}
.ix-drawer__ft span{font-size:10.5px;color:var(--faint)}

/* ── 3. 图片灯箱 ────────────────────────────────────── */
.ix-lb{position:fixed;inset:0;z-index:9300;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s}
body.ix-lb-open .ix-lb{opacity:1;visibility:visible}
.ix-lb__scrim{z-index:0;background:rgba(16,14,11,.92)}
body.ix-lb-open .ix-lb__scrim{opacity:1;visibility:visible}
.ix-lb__in{position:relative;z-index:1;width:min(1180px,94vw);display:flex;align-items:center;gap:12px}
.ix-lb__x{position:absolute;top:-52px;right:0;background:rgba(244,240,231,.12);
  border-color:rgba(244,240,231,.28);color:var(--on-dark);z-index:3}
.ix-lb__x:hover{color:#fff;border-color:#fff}
.ix-lb__fig{margin:0;min-width:0;flex:1;display:flex;flex-direction:column;align-items:center}
.ix-lb__fig img{max-width:100%;max-height:min(72vh,720px);width:auto;height:auto;
  object-fit:contain;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.ix-lb__fig figcaption{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:16px 4px 0;color:var(--on-dark)}
.ix-lb__cap b{display:block;font-family:var(--serif);font-size:18px;letter-spacing:.08em}
.ix-lb__cap span{display:block;margin-top:6px;font-size:12px;line-height:1.8;color:var(--on-dim);max-width:80ch}
.ix-lb__num{font:11px/1 var(--mono);letter-spacing:.14em;color:var(--brass-hi);white-space:nowrap}
.ix-lb__nav{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,240,231,.1);border:1px solid rgba(244,240,231,.25);color:var(--on-dark);
  font:30px/1 var(--sans);transition:.28s var(--e-spring)}
.ix-lb__nav:hover{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.1)}

/* ── 4. 数据条 ──────────────────────────────────────── */
.statbar__item[data-ix-stat]{position:relative;overflow:hidden;cursor:pointer}
.statbar__item[data-ix-stat]:hover{background:#332C23}
.ix-stat-note{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:center;gap:8px;padding:clamp(14px,2vw,22px);
  background:#332C23;border-top:2px solid var(--red);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .32s var(--e-out),transform .38s var(--e-out)}
.statbar__item.is-open .ix-stat-note{opacity:1;transform:none;pointer-events:auto}
.ix-stat-note b{font-family:var(--serif);font-size:14px;color:var(--on-dark);letter-spacing:.06em}
.ix-stat-note p{font-size:11.5px;line-height:1.85;color:var(--on-dim)}
.ix-stat-note code{font:10.5px/1 var(--mono);color:var(--brass-hi)}

/* ── 5. 时间轴 ──────────────────────────────────────── */
.ix-tl-panel{margin:0 0 clamp(24px,3vw,38px);padding:clamp(20px,2.6vw,30px);
  background:var(--band);border-radius:14px;color:var(--on-dark);position:relative;overflow:hidden}
.ix-tl-panel__top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ix-tl-panel__tag{font:10px/1 var(--mono);letter-spacing:.16em;color:var(--brass-hi)}
.ix-tl-panel__idx{font:11px/1 var(--mono);color:var(--on-faint)}
.ix-tl-panel__y{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,62px);
  line-height:1.1;margin:14px 0 8px;letter-spacing:.02em}
.ix-tl-panel__txt{font-size:13px;line-height:1.9;color:var(--on-dim);max-width:62em;min-height:2.8em}
.ix-tl-panel__bar{height:3px;margin-top:20px;background:var(--line-d);border-radius:3px;overflow:hidden}
.ix-tl-panel__bar i{display:block;height:100%;background:var(--red);border-radius:3px;
  transition:width .5s var(--e-out)}
.tl__item[data-ix-tl-item]{cursor:pointer;padding-left:12px;margin-left:-12px;border-radius:8px;
  transition:background .28s,padding-left .28s var(--e-out)}
.tl__item[data-ix-tl-item]:hover{background:var(--ix-soft);padding-left:18px}
.tl__item.is-active{background:var(--ix-soft);padding-left:18px}
.tl__item.is-active .tl__y{color:var(--red)}
.tl__item.is-active::before{box-shadow:0 0 0 5px var(--ink),0 0 0 7px var(--red)}

/* ── 6. FAQ / 7. 复制 ───────────────────────────────── */
.ix-bar--faq .ix-search{flex:1;max-width:340px}
.ix-kv-row{position:relative;padding-right:44px}
.ix-copy{position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--ix-line);background:var(--ink);color:var(--faint);transition:.25s}
.ix-copy svg{width:15px;height:15px}
.ix-copy:hover{border-color:var(--red);color:var(--red);transform:translateY(-50%) scale(1.08)}

/* ── 7. 来源页 ──────────────────────────────────────── */
.ix-bar--cr{margin-top:0;margin-bottom:clamp(22px,3vw,34px)}
.ix-bar--cr .ix-search{flex:1;max-width:320px}

/* ── 8. 专业兴趣测评 ────────────────────────────────── */
.ix-quiz{background:var(--paper);border:1px solid var(--ix-line);border-radius:16px;
  padding:clamp(22px,3.2vw,44px);box-shadow:0 18px 50px rgba(34,30,24,.06)}
.ix-quiz__bar{height:4px;background:var(--ix-soft);border-radius:4px;overflow:hidden}
.ix-quiz__bar i{display:block;height:100%;background:var(--red);border-radius:4px;
  transition:width .5s var(--e-out)}
.ix-quiz__meta{display:flex;justify-content:space-between;gap:12px;margin:12px 0 clamp(22px,3vw,36px);
  font:10.5px/1 var(--mono);letter-spacing:.12em;color:var(--faint)}
.ix-quiz__q{font-family:var(--serif);font-size:clamp(19px,2.3vw,28px);font-weight:700;
  line-height:1.6;letter-spacing:.02em;margin-bottom:clamp(20px,2.6vw,30px)}
.ix-quiz__opts{display:grid;gap:10px}
.ix-quiz__opt{width:100%;min-height:60px;display:flex;align-items:center;gap:16px;
  padding:14px 18px;text-align:left;border:1px solid var(--ix-line);border-radius:10px;
  background:var(--ink);font-size:13.5px;line-height:1.7;color:var(--cream);
  transition:border-color .28s,background .28s,transform .3s var(--e-spring)}
.ix-quiz__opt:hover{border-color:var(--red);transform:translateX(5px);background:#fff}
.ix-quiz__k{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--ix-line);font:11px/1 var(--mono);color:var(--red)}
.ix-quiz__opt i{margin-left:auto;font-style:normal;color:var(--red);opacity:0;transition:opacity .25s}
.ix-quiz__opt:hover i{opacity:1}
.ix-quiz__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.ix-quiz__tip{font-size:11px;color:var(--faint)}
.ix-quiz__res-tag{display:inline-block;padding:5px 12px;border-radius:100px;background:rgba(181,52,42,.1);
  color:var(--red);font:10px/1.2 var(--mono);letter-spacing:.12em}
.ix-quiz__res h3{font-family:var(--serif);font-size:clamp(24px,3.2vw,36px);margin:16px 0 10px;letter-spacing:.04em}
.ix-quiz__res > p{font-size:12.5px;line-height:1.9;color:var(--dim);max-width:62em}
.ix-quiz__picks{display:grid;gap:12px;margin:clamp(22px,3vw,32px) 0}
.ix-quiz__picks li{display:flex;align-items:center;gap:18px;padding:16px 18px;
  border:1px solid var(--ix-line);border-radius:10px;background:var(--ink)}
.ix-quiz__rank{font:16px/1 var(--mono);color:var(--red);letter-spacing:.08em}
.ix-quiz__pk{flex:1;min-width:0}
.ix-quiz__pk b{display:block;font-family:var(--serif);font-size:15.5px}
.ix-quiz__pk > span{display:block;font-size:11px;color:var(--faint);margin:3px 0 9px}
.ix-quiz__match{height:4px;background:var(--ix-soft);border-radius:4px;overflow:hidden;max-width:280px}
.ix-quiz__match i{display:block;height:100%;background:var(--red);border-radius:4px}
.ix-quiz__picks em{font:14px/1 var(--mono);color:var(--red);font-style:normal}
.ix-quiz__acts{display:flex;gap:10px;flex-wrap:wrap}

/* ── 响应式 ─────────────────────────────────────────── */
@media(max-width:900px){
  .ix-bar__hint{display:none}
  .ix-bar__count{margin-left:0}
  .ix-lb__nav{width:40px;height:40px}
}
@media(max-width:600px){
  .ix-bar{padding:10px 12px;gap:8px}
  .ix-bar__btn{min-height:44px;padding:8px 14px}
  .ix-search{min-height:44px;flex:1;min-width:100%;order:3}
  .ix-bar--faq .ix-search,.ix-bar--cr .ix-search{max-width:none}
  .ix-fav,.ix-zoom{width:40px;height:40px}
  .ix-more__dl > div{grid-template-columns:1fr;gap:2px}
  .ix-drawer{width:100%;border-left:0}
  .ix-dock__btn{bottom:calc(18px + 62px);width:44px;height:44px}
  .ix-lb__in{width:96vw;gap:4px}
  .ix-lb__nav{position:absolute;z-index:3;bottom:-58px;width:44px;height:44px}
  .ix-lb__nav--prev{left:calc(50% - 54px)}
  .ix-lb__nav--next{right:calc(50% - 54px)}
  .ix-lb__fig img{max-height:58vh}
  .ix-lb__fig figcaption{padding-bottom:54px;flex-direction:column;align-items:flex-start;gap:6px}
  .ix-lb__x{top:-46px}
  .ix-quiz__opt{min-height:64px;gap:12px;padding:12px 14px;font-size:13px}
  .ix-quiz__acts .ix-btn{flex:1 1 44%;min-width:0;font-size:12px;padding:10px 12px}
  .ix-quiz__picks li{gap:12px;padding:14px}
  .ix-quiz__pk b{font-size:14px}
  .ix-chips{width:100%}
  .ix-chip{min-height:40px}
}

/* ── 降级 ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .ix-bar__btn,.ix-btn,.ix-fav,.ix-zoom,.ix-quiz__opt,.ix-lb__nav,.ix-dock__btn,.ix-x{transition-duration:.12s}
  .ix-drawer,.ix-lb,.ix-more,.ix-stat-note,.ix-tl-panel__bar i,.ix-quiz__bar i{transition-duration:.16s}
}