/* ============================================================================
   交互组件专属样式
   ========================================================================== */

/* --- 认知四象限 --- */
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quad-cell {
  position: relative; padding: 18px 16px; min-height: 118px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper-card);
  transition: .2s; display: flex; flex-direction: column; justify-content: space-between;
}
.quad-cell:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quad-cell.sel { border-color: var(--coral); background: linear-gradient(160deg,#fff6ec,var(--paper-card)); box-shadow: var(--shadow-md); }
.quad-cell[data-q="uu"] { background: linear-gradient(160deg,#2c2822,#211d18); border-color:#3a352c; color:#efe6d5; }
.quad-cell[data-q="uu"].sel { border-color: var(--coral); }
.quad-cell[data-q="uu"] .qc-en { color:#b9a }
.quad-cell .qc-en { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.quad-cell .qc-t { font-weight: 700; font-size: 1.12rem; margin-top: .2em; }
.quad-cell .qc-hint { font-size: .8rem; color: var(--ink-3); }
.quad-cell[data-q="uu"] .qc-hint { color:#b8ab93; }
.quad-detail { margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: var(--paper-2); border: 1px dashed var(--line-2); min-height: 130px; }
.quad-detail.empty { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: .9rem; }
.quad-detail.empty::before { content: "← 点任意一格，看它在 AI 时代该怎么用"; }
.quad-detail .qd-head { display: flex; align-items: baseline; gap: .7em; }
.quad-detail .qd-en { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); font-weight: 700; }
.quad-detail h4 { margin: 0; }
.quad-detail .qd-desc { margin: .4em 0 .8em; color: var(--ink-2); }
.quad-detail .qd-up { display: flex; gap: .8em; padding: .8em 1em; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.quad-detail .qd-uptag { flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--coral-deep); background: var(--coral-soft); padding: .2em .6em; border-radius: 99px; height: fit-content; }
.quad-detail .qd-up p { margin: 0; font-size: .92rem; }

/* --- 下一个词预测 --- */
.nt-sentence { font-size: 1.15rem; font-weight: 600; line-height: 1.7; padding: 16px 18px; background: var(--paper-2); border-radius: 12px; border: 1px solid var(--line); min-height: 2em; }
.nt-sentence::after { content: "▊"; color: var(--coral); animation: ntblink 1s steps(2) infinite; }
@keyframes ntblink { 50% { opacity: 0; } }
.nt-bars { display: grid; gap: 8px; margin: 14px 0; }
.nt-bar { display: grid; grid-template-columns: 9em 1fr 3em; align-items: center; gap: 10px; background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; transition: .16s; }
.nt-bar:hover { border-color: var(--coral); transform: translateX(2px); }
.nt-bar.top { border-color: var(--coral); background: #fff8ef; }
.nt-bar .ntw { font-weight: 600; }
.nt-bar .ntbar { height: 8px; background: var(--paper-sink); border-radius: 99px; overflow: hidden; }
.nt-bar .ntbar > span { display: block; height: 100%; background: linear-gradient(90deg,var(--coral),var(--gold)); border-radius: 99px; }
.nt-bar .ntp { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-3); text-align: right; }
.nt-done { padding: 14px; background: #fff8ef; border: 1px dashed var(--coral); border-radius: 10px; font-size: .92rem; color: var(--ink-2); }

/* --- 扩散去噪 --- */
.df-stage { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.df-canvas-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-md); background: #2a2620; line-height: 0; }
.df-canvas-wrap canvas { width: min(420px, 70vw); height: auto; display: block; }
.df-controls { flex: 1; min-width: 220px; }
.df-label { font-weight: 700; color: var(--coral-deep); margin-bottom: .6em; }
.df-slider { margin: 10px 0; }

/* --- 调用≠满血 --- */
.hn-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: center; }
@media (max-width: 760px){ .hn-wrap { grid-template-columns: 1fr; } }
.hn-toggles { display: grid; gap: 10px; }
.hn-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card); cursor: pointer; transition: .18s; }
.hn-toggle:hover { border-color: var(--coral); }
.hn-toggle .hnl { font-weight: 600; font-size: .95rem; }
.hn-toggle .hnl small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8rem; }
.hn-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.hn-toggle .tk { flex-shrink: 0; width: 44px; height: 25px; border-radius: 99px; background: var(--paper-sink); border: 1px solid var(--line-2); position: relative; transition: .2s; }
.hn-toggle .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .2s; }
.hn-toggle input:checked ~ .tk { background: var(--coral); border-color: var(--coral); }
.hn-toggle input:checked ~ .tk::after { transform: translateX(19px); }
.hn-gauge { text-align: center; }
.hn-score { font-family: var(--serif); font-size: clamp(3rem,9vw,5rem); font-weight: 700; color: var(--coral-deep); line-height: 1; }
.hn-score::after { content: "/100"; font-size: .28em; color: var(--ink-faint); vertical-align: super; }
.hn-meter { height: 14px; margin: 14px 0; }
.hn-verdict { font-size: .95rem; color: var(--ink-2); min-height: 3em; max-width: 34ch; margin-inline: auto; }

/* --- Agent 循环 --- */
.al-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px){ .al-wrap { grid-template-columns: 1fr; } }
.al-ring { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.al-ring .al-center { position: absolute; inset: 34%; border-radius: 50%; background: linear-gradient(160deg,#2c2822,#211d18); color: #f0e8d8; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; text-align: center; box-shadow: var(--shadow-md); }
.al-stage { position: absolute; width: 96px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-card); text-align: center; font-weight: 700; font-size: .86rem; transition: .25s; }
.al-stage small { display: block; font-weight: 400; font-size: .68rem; color: var(--ink-3); }
.al-stage[data-s="sense"]   { top: -6px; left: 50%; transform: translateX(-50%); }
.al-stage[data-s="plan"]    { top: 50%; right: -14px; transform: translateY(-50%); }
.al-stage[data-s="act"]     { bottom: -6px; left: 50%; transform: translateX(-50%); }
.al-stage[data-s="observe"] { top: 50%; left: -14px; transform: translateY(-50%); }
.al-stage.on { border-color: var(--coral); background: var(--coral); color: #fff; box-shadow: 0 6px 20px var(--coral-glow); transform: scale(1.08) translateX(-50%); }
.al-stage[data-s="plan"].on, .al-stage[data-s="observe"].on { transform: scale(1.08) translateY(-50%); }
.al-log { height: 230px; overflow-y: auto; background: #211d18; border-radius: 12px; padding: 14px; font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: #d8cdb8; }
.al-line { opacity: 0; animation: alin .3s forwards; margin-bottom: .3em; }
@keyframes alin { to { opacity: 1; } }
.al-line .al-tag { display: inline-block; min-width: 3.4em; font-weight: 700; }
.al-line.sense .al-tag { color: #8fb0d6; } .al-line.plan .al-tag { color: #d9b96a; }
.al-line.act .al-tag { color: #e5896b; } .al-line.observe .al-tag { color: #93c08a; }

/* --- 成本路由 --- */
.cr-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
@media (max-width:620px){ .cr-controls{ grid-template-columns:1fr; } }
.cr-ctrl label { font-size: .88rem; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 8px; }
.cr-ctrl label b { color: var(--coral-deep); font-variant-numeric: tabular-nums; }
.cr-bars { display: grid; gap: 12px; }
.cr-row { display: grid; grid-template-columns: 12em 1fr 6.5em; gap: 14px; align-items: center; }
@media (max-width:620px){ .cr-row{ grid-template-columns: 1fr; gap:4px; } }
.cr-row.routed .cr-k { color: var(--ink); font-weight: 700; }
.cr-k { font-size: .9rem; font-weight: 600; }
.cr-k .cr-q { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-3); }
.cr-track { height: 22px; background: var(--paper-sink); border-radius: 8px; overflow: hidden; }
.cr-track > span { display: block; height: 100%; border-radius: 8px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.cr-row.routed .cr-track { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 10px; }
.cr-cost { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-cost span { display: block; font-size: .68rem; font-weight: 400; color: var(--ink-faint); }
.cr-note { margin-top: 20px; padding: 14px 16px; background: #fff8ef; border: 1px solid var(--line); border-radius: 12px; font-size: .95rem; }

/* --- Token 计费 --- */
.bill-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width:720px){ .bill-wrap{ grid-template-columns:1fr; } }
.bill-meter-card { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-card); }
.bill-meter-card h5 { margin: 0 0 4px; font-size: .95rem; }
.bill-meter-card .bm-sub { font-size: .78rem; color: var(--ink-3); margin-bottom: 14px; }
.bill-big { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--coral-deep); line-height: 1; }
.bill-sub { height: 16px; margin-top: 12px; }
.bill-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.bill-log { height: 150px; overflow-y: auto; font-size: .84rem; display: grid; gap: 6px; align-content: start; }
.bl-line { padding: 8px 10px; border-radius: 8px; background: var(--paper-2); border-left: 3px solid var(--line-2); }
.bl-line.img { border-color: var(--coral); } .bl-line.api { border-color: var(--dusty); }
.bl-line.warn { border-color: var(--gold); background: #fbf3df; font-weight: 600; }

/* --- 模块 hero 横幅（竖图裁成宽幅） --- */
.mod-hero { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); margin: 0 0 clamp(28px,4vw,44px); max-height: 300px; position: relative; }
.mod-hero img { width: 100%; height: 300px; object-fit: cover; object-position: center 26%; display: block; }
.mod-hero .mh-cap { position: absolute; left: 18px; bottom: 14px; color: #fff; font-size: .9rem; font-weight: 600; text-shadow: 0 2px 12px #2a2620aa; background: linear-gradient(0deg,#2a262055,transparent); padding: 8px 12px; border-radius: 10px; }

/* --- 概念相册 --- */
.concept-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 860px){ .concept-gallery { grid-template-columns: repeat(2,1fr); } }
.concept-gallery figure { margin: 0; }
.concept-gallery .cg-img { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); aspect-ratio: 1/1; background: var(--paper-2); }
.concept-gallery .cg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.concept-gallery figure:hover .cg-img img { transform: scale(1.05); }
.concept-gallery figcaption { border: none; padding: 0; margin-top: .5em; text-align: center; font-size: .82rem; }
.concept-gallery figcaption b { display: block; color: var(--ink); font-size: .9rem; }

/* --- 模型全景 taxonomy --- */
.tx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tx-chip { font: inherit; font-size: .84rem; font-weight: 600; padding: .5em 1em; border-radius: 99px; border: 1px solid var(--line-2); background: var(--paper-card); cursor: pointer; transition: .16s; }
.tx-chip:hover { border-color: var(--coral); }
.tx-chip.on { background: var(--coral); color: #fff; border-color: var(--coral); }
.tx-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:860px){ .tx-cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .tx-cards{ grid-template-columns: 1fr;} }
.tx-card { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-card); transition: .25s; }
.tx-card.dim { opacity: .32; filter: grayscale(.4); }
.tx-card.hit { border-color: var(--coral); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tx-card .txi { font-size: 1.6rem; }
.tx-card h5 { margin: .3em 0 .1em; font-size: 1rem; }
.tx-card .txe { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.tx-card p { margin: .5em 0 0; font-size: .84rem; color: var(--ink-2); }
.tx-card .txm { margin-top: .6em; font-size: .78rem; color: var(--coral-deep); font-weight: 600; }