/* ==========================================================
 * detail.css —— 商品详情页专用样式（/product/:id）
 *
 * 两条设计原则：
 *   1. 配色 / 字体 / 圆角 / 间距全部复用 style.css 的变量与卡片
 *      「蓝 → 青」科技感语言（--tech-*），保证与列表页视觉一致；
 *   2. 布局与列表页相反 —— 列表页通栏铺满，详情页是居中窄栏，
 *      左右各留出空白，把注意力收在内容上。
 * ========================================================== */

/* ---------- 居中窄栏：左右留白 ---------- */
.detail-body{background:var(--bg);}
.page{
  max-width:1080px;margin:0 auto;min-height:100vh;background:#fff;
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;
}
.page > .dwrap{flex:1;}          /* 内容不足一屏时把页脚压到底部 */

/* Logo 改成回首页的链接后，去掉继承来的下划线语义 */
.topbar .logo{text-decoration:none;}

/* ---------- 面包屑（<nav><ol> 语义结构 + 真实链接） ---------- */
.dwrap{padding:16px 28px 36px;}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;}
.crumb li{display:flex;align-items:center;font-size:12px;color:var(--ink-3);}
.crumb li + li::before{content:"/";margin:0 8px;color:var(--line);}
.crumb a{color:var(--ink-3);}
.crumb a:hover{color:var(--accent);}
.crumb li[aria-current]{
  color:var(--ink);font-weight:600;max-width:560px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- 详情卡：沿用卡片头的渐变 + 网格纹理 + 左侧渐变条 ---------- */
.detail{border:1px solid var(--tech-border);border-radius:8px;background:#fff;overflow:hidden;}

.detail .dhead{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--tech-bg-1) 0%,var(--tech-bg-2) 100%);
  border-bottom:1px solid var(--tech-line);
  display:flex;align-items:flex-start;gap:16px;padding:20px 22px 20px 26px;
}
.detail .dhead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(47,126,240,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,126,240,.065) 1px,transparent 1px);
  background-size:15px 15px;
}
.detail .dhead::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--tech-flag-a),var(--tech-flag-b));
}
/* 全页唯一的 <h1> 就是商品标题（契约 §15 要求 5） */
.detail .dtitle{
  position:relative;z-index:1;flex:1;min-width:0;margin:0;
  font-size:20px;font-weight:700;line-height:1.4;color:#16293f;letter-spacing:.2px;
}
.detail .flags{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;flex:0 0 auto;
}
.detail .tflag{
  background:linear-gradient(135deg,var(--tech-flag-a),var(--tech-flag-b));
  color:#fff;font-size:11px;padding:3px 10px;border-radius:3px;white-space:nowrap;
  letter-spacing:.2px;box-shadow:0 1px 4px rgba(47,126,240,.25);
}
.detail .exflag{
  background:rgba(255,255,255,.95);border:1px solid #c3dcf8;color:var(--tech-ink);
  font-size:11px;padding:2px 9px;border-radius:3px;white-space:nowrap;
}

.detail .dbd{padding:18px 22px 20px;}

/* 元信息：交易所 / 分类 / 来源 */
.detail .dmeta{
  display:flex;flex-wrap:wrap;gap:10px 32px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px dashed var(--tech-border);
}
.detail .dmeta .mi{display:flex;gap:8px;font-size:12.5px;color:var(--ink-2);}
.detail .dmeta .mi b{color:var(--ink-3);font-weight:400;}

.detail .ddesc{margin:0 0 14px;font-size:13px;line-height:1.8;color:var(--ink);}

/* 指标胶囊：与列表卡片同一套样式 */
.detail .kpi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.detail .kpi i{
  font-style:normal;font-size:11.5px;color:var(--tech-ink);
  background:var(--tech-fill);border-radius:3px;padding:3px 9px;
}

.detail .dfoot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line-soft);
}
.detail .dpricewrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.detail .dprice{color:#d93636;font-weight:700;font-size:22px;}
.detail .dprice small{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:3px;}
.detail .dprice.ask{color:var(--ink-2);font-size:16px;font-weight:600;}
.detail .trialtag{
  font-size:11px;color:var(--ok);background:#e8f6f0;border:1px solid #b7e3d0;
  border-radius:3px;padding:2px 8px;
}
.detail .dacts{display:flex;gap:10px;flex-wrap:wrap;}
.detail .dbtn{
  display:inline-flex;align-items:center;height:34px;padding:0 18px;border-radius:5px;
  border:1px solid var(--accent);color:var(--accent);background:#fff;font-size:13px;cursor:pointer;
}
.detail .dbtn:hover{background:var(--accent-soft);}
.detail .dbtn.solid{background:var(--accent);color:#fff;}
.detail .dbtn.solid:hover{filter:brightness(1.06);}

/* 来源链接未采集时的禁用态。
   保留按钮外形但在视觉上明确「不可点」——虚线边框 + 灰字 + 去饱和底色，
   与可点状态一眼可分，避免用户点了没反应却找不到原因。 */
.detail .dbtn.is-disabled{
  border-style:dashed;border-color:#cbd7e4;color:#a3b1c2;background:#f6f9fc;
  cursor:not-allowed;
}
/* 必须显式覆盖 .solid:hover 的 filter —— 同权重靠后即为赢 */
.detail .dbtn.is-disabled:hover{filter:none;background:#f6f9fc;}
/* 说明文字紧贴按钮，读作「这个按钮的附属说明」而不是另一个操作项 */
.detail .dnote{
  font-size:11.5px;color:var(--ink-3);white-space:nowrap;margin-left:-5px;
}

/* ---------- 订阅提示条 ----------
   直接复用 index 顶栏那套 .topacts / .tip / .ghost（样式定义在 style.css），
   这里只加 .subbar 修饰类调整排布 —— 不复制样式，
   以后改 index 上那个按钮的样子，这一处跟着变。 */
.topacts.subbar{
  margin-top:16px;padding:14px 20px;
  border:1px solid var(--tech-border);border-radius:8px;
  background:linear-gradient(135deg,var(--tech-bg-1) 0%,var(--tech-bg-2) 100%);
  justify-content:space-between;gap:16px;
}
/* 顶栏里 tip 限宽 250px 是因为横向空间紧；这里独占一行，放开让它铺满 */
.topacts.subbar .tip{max-width:none;flex:1;min-width:0;}
.topacts.subbar .subacts{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
/* 小字紧贴按钮，读作「这个按钮的附属说明」而不是另一个操作项 */
.topacts.subbar .subnote{
  font-size:11.5px;color:var(--ink-3);white-space:nowrap;margin-left:-5px;
}

/* ---------- 404 页 ---------- */
.state.nf{padding:64px 20px;}
.state.nf h1{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--ink);}
.state.nf p{margin:0 0 18px;font-size:13px;color:var(--ink-3);}

/* ---------- 窄屏：收起左右留白，改为单列 ---------- */
@media (max-width:720px){
  .page{border-left:0;border-right:0;}
  .dwrap{padding:14px 16px 28px;}
  .detail .dhead{flex-direction:column;gap:10px;padding:16px 16px 16px 20px;}
  .detail .flags{flex-direction:row;align-items:center;}
  .detail .dbd{padding:14px 16px 16px;}
  .crumb li[aria-current]{max-width:180px;}
  /* 订阅条：窄屏改纵向，否则提示语被挤成窄条。
     subacts 保持靠左排列 —— 用 space-between 会把「下阶段开放」那行小字
     推到最右边，和按钮脱开，读起来就不再是它的附属说明了。 */
  .topacts.subbar{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:14px 16px;}
  .topacts.subbar .tip{flex:none;}
  .topacts.subbar .subacts{justify-content:flex-start;}
}