/* ============================================================
   青屿科技 · 案例详情页
   依赖 studio.css 的变量、导航与基础样式
   ============================================================ */
:root { --acc: #145cbd; --acc2: #3d86e8; }

.dc-crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 32px 7vw 0; font-size: 12.5px; color: #93a5bb;
}
.dc-crumb a { color: #5b7a9c; transition: color .25s; }
.dc-crumb a:hover { color: var(--acc); }
.dc-crumb b { font-weight: 700; color: var(--acc); }

.dc-hero { padding: 26px 7vw 46px; border-bottom: 1px solid #e8eef5; }
.dc-hero h1 {
  font-size: clamp(38px, 5vw, 72px); line-height: 1.14; letter-spacing: -.02em;
  color: var(--navy); margin: 0;
}
.dc-lead { max-width: 760px; font-size: 16px; line-height: 1.9; color: #4a607a; margin: 22px 0 26px; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.dc-tags li {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--acc) 24%, #fff);
}
.dc-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px;
  border-top: 1px solid #e8eef5; padding-top: 24px; margin: 0;
}
.dc-meta li { font-size: 13.5px; color: #42566e; }
.dc-meta span { display: block; font-size: 11px; letter-spacing: .1em; color: #93a5bb; margin-bottom: 6px; }
.dc-meta b { font-weight: 600; }

/* ---------- 界面示意 ---------- */
.dc-screen-wrap { padding: 56px 7vw; background: linear-gradient(180deg, #f6f9fd, #edf4fb); }
.dc-screen {
  max-width: 1080px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: #0c1e39; border: 1px solid color-mix(in srgb, var(--acc) 30%, #0c1e39);
  box-shadow: 0 30px 70px rgba(12, 30, 57, .26);
}
.dc-screen-bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(120, 170, 230, .18);
}
.dc-screen-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e0537a; }
.dc-screen-bar i:nth-child(2) { background: #f0ad3c; }
.dc-screen-bar i:nth-child(3) { background: #2bb3a0; }
.dc-screen-bar span { margin-left: 10px; font-size: 12px; color: #8fb3d9; letter-spacing: .06em; }
.dc-screen-body { display: grid; gap: 14px; padding: 18px; }
.dc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dc-tile {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(74, 155, 240, .08); border: 1px solid rgba(74, 155, 240, .18);
}
.dc-tile span { font-size: 11px; color: #7f9dbd; }
.dc-tile b { display: block; font-size: clamp(18px, 2vw, 24px); color: #eaf4ff; margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.dc-tile i { font-style: normal; font-size: 11px; color: #2bb3a0; }
.dc-chartline {
  position: relative; height: clamp(110px, 14vw, 160px); border-radius: 10px;
  background: rgba(74, 155, 240, .05); border: 1px solid rgba(74, 155, 240, .16); overflow: hidden;
}
.dc-chartline svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-spark { fill: none; stroke: var(--acc2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc2) 60%, transparent)); stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dcDraw 2.2s ease-out .2s forwards; }
.dc-spark-area { fill: color-mix(in srgb, var(--acc) 34%, transparent); }
.dc-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dc-rows i { display: block; height: 9px; border-radius: 5px; width: var(--w); background: rgba(74, 155, 240, .22); }
.dc-rows i:nth-child(2) { background: rgba(43, 179, 160, .26); }
.dc-rows i:nth-child(3) { background: rgba(154, 114, 234, .26); }
.dc-rows i:nth-child(4) { background: rgba(240, 173, 60, .26); }
.dc-screen-note { display: block; text-align: center; font-size: 12px; color: #93a5bb; margin-top: 16px; }

/* ---------- 正文 ---------- */
.dc-grid {
  padding: 82px 7vw 70px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px 6vw; align-items: start;
}
.dc-block h2 {
  position: relative; padding-left: 16px; margin-bottom: 24px;
  font-size: clamp(23px, 2.3vw, 31px); letter-spacing: -.02em; color: var(--navy);
}
.dc-block h2::before {
  content: ""; position: absolute; left: 0; top: .26em; bottom: .26em;
  width: 4px; border-radius: 2px; background: var(--acc);
}
.dc-block > p { font-size: 15px; line-height: 1.95; color: #4a607a; margin: 0 0 22px; }
.dc-pains { display: grid; gap: 14px; }
.dc-pains li { padding: 18px 20px; border: 1px solid #e2eaf4; border-radius: 12px; background: #fbfdff; }
.dc-pains b { display: block; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.dc-pains span { font-size: 13px; line-height: 1.72; color: #68778a; }

.dc-steps { display: grid; gap: 14px; }
.dc-steps article {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 20px; border-radius: 14px; background: #f6f9fd; border: 1px solid #e6eef7;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.dc-steps article:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 30%, #e6eef7); box-shadow: 0 16px 34px rgba(16, 44, 84, .08); }
.dc-steps i {
  font-style: normal; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--acc2), var(--acc));
}
.dc-steps b { display: block; font-size: 15px; color: var(--navy); margin-bottom: 6px; }
.dc-steps span { font-size: 13.5px; line-height: 1.75; color: #5b7290; }

.dc-block-wide { grid-column: 1 / -1; }
.dc-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  border-top: 1px solid #e2eaf4; padding-top: 30px; margin: 0;
}
.dc-metrics b {
  display: block; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.03em;
  color: var(--acc); font-variant-numeric: tabular-nums;
}
.dc-metrics span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: #68778a; }

.dc-stack { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.dc-stack li { padding: 7px 14px; border-radius: 20px; background: #eef4fb; color: #2f6fbe; font-size: 12.5px; font-weight: 700; }
.dc-stack-note { font-size: 13px !important; line-height: 1.8 !important; color: #7a8ca1 !important; margin: 0 !important; }

.dc-quote { margin: 0; padding: 24px 26px; border-left: 3px solid var(--acc); background: #f8fbff; border-radius: 0 14px 14px 0; }
.dc-quote p { margin: 0; font-size: 15px; line-height: 1.9; color: #3f5875; }
.dc-quote span { display: block; margin-top: 14px; font-size: 12px; color: #93a5bb; }

/* ---------- 下一个案例 ---------- */
.dc-next {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 7vw 80px; padding: 30px 34px; border-radius: 18px;
  background: linear-gradient(122deg, #0c1e39, #12294b 60%, #17264a);
  color: #fff; transition: transform .3s, box-shadow .3s;
}
.dc-next:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(12, 30, 57, .26); }
.dc-next span { font-size: 12px; letter-spacing: .12em; color: #9cc6f5; }
.dc-next b { margin-left: auto; font-size: clamp(18px, 2vw, 26px); letter-spacing: -.01em; }
.dc-next i { font-style: normal; font-size: 22px; color: #6ea8f5; }

/* ---------- 页脚 ---------- */
.dc-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between;
  padding: 54px 7vw 40px; background: #f6f8fb; border-top: 1px solid #e5e9ee;
}
.dc-foot p { margin: 0; font-size: 13.5px; color: #68778a; }
.dc-foot a { font-size: 13px; font-weight: 700; color: var(--blue); transition: color .25s; }
.dc-foot a:hover { color: var(--navy); }
.dc-foot small { width: 100%; font-size: 11px; color: #93a5bb; }

@keyframes dcDraw { to { stroke-dashoffset: 0; } }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .dc-grid { grid-template-columns: 1fr; gap: 48px; }
  .dc-metrics { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}

@media (max-width: 720px) {
  .dc-crumb { padding: 24px 25px 0; }
  .dc-hero { padding: 20px 25px 34px; }
  .dc-hero h1 { font-size: clamp(34px, 11vw, 48px); }
  .dc-lead { font-size: 14px; }
  .dc-meta { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .dc-screen-wrap { padding: 38px 25px; }
  .dc-screen-body { padding: 12px; gap: 10px; }
  .dc-tiles { grid-template-columns: 1fr; gap: 10px; }
  .dc-tile b { font-size: 19px; }
  .dc-chartline { height: 120px; }
  .dc-rows { grid-template-columns: 1fr 1fr; }
  .dc-grid { padding: 58px 25px 50px; gap: 40px; }
  .dc-block h2 { font-size: clamp(22px, 7.4vw, 28px); }
  .dc-metrics { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .dc-next { margin: 0 25px 60px; padding: 22px 24px; }
  .dc-next b { margin-left: 0; width: 100%; order: 2; }
  .dc-next i { margin-left: auto; }
  .dc-foot { padding: 40px 25px 96px; }
}

/* ---------- 深色模式 ---------- */
html[data-theme="dark"] .dc-crumb { color: #6a8099; }
html[data-theme="dark"] .dc-crumb a { color: #8fa6bf; }
html[data-theme="dark"] .dc-crumb a:hover { color: #6ea8f5; }
html[data-theme="dark"] .dc-crumb b { color: #6ea8f5; }
html[data-theme="dark"] .dc-hero { border-bottom-color: #1f3550; }
html[data-theme="dark"] .dc-hero h1 { color: #eaf2ff; }
html[data-theme="dark"] .dc-lead { color: #9fb3c9; }
html[data-theme="dark"] .dc-tags li {
  background: color-mix(in srgb, var(--acc) 20%, #0d1a2c);
  border-color: color-mix(in srgb, var(--acc) 45%, #0d1a2c);
  color: #bcd9fb;
}
html[data-theme="dark"] .dc-meta { border-top-color: #1f3550; }
html[data-theme="dark"] .dc-meta li { color: #a8bcd2; }
html[data-theme="dark"] .dc-meta span { color: #6a8099; }
html[data-theme="dark"] .dc-screen-wrap { background: linear-gradient(180deg, #0c1728, #0a1421); }
html[data-theme="dark"] .dc-screen { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .dc-screen-note { color: #6a8099; }
html[data-theme="dark"] .dc-block h2 { color: #eaf2ff; }
html[data-theme="dark"] .dc-block > p { color: #9fb3c9; }
html[data-theme="dark"] .dc-pains li { background: #101d31; border-color: #1f3550; }
html[data-theme="dark"] .dc-pains b { color: #e7f1fd; }
html[data-theme="dark"] .dc-pains span { color: #93a7bd; }
html[data-theme="dark"] .dc-steps article { background: #101d31; border-color: #1f3550; }
html[data-theme="dark"] .dc-steps article:hover { border-color: color-mix(in srgb, var(--acc) 55%, #1f3550); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .dc-steps b { color: #eaf2ff; }
html[data-theme="dark"] .dc-steps span { color: #93a7bd; }
html[data-theme="dark"] .dc-metrics { border-top-color: #1f3550; }
html[data-theme="dark"] .dc-metrics b { color: var(--acc2); }
html[data-theme="dark"] .dc-metrics span { color: #93a7bd; }
html[data-theme="dark"] .dc-stack li { background: #16283f; color: #8fc2f7; }
html[data-theme="dark"] .dc-stack-note { color: #7f95ad !important; }
html[data-theme="dark"] .dc-quote { background: #101d31; }
html[data-theme="dark"] .dc-quote p { color: #c3d5e8; }
html[data-theme="dark"] .dc-quote span { color: #6a8099; }
html[data-theme="dark"] .dc-foot { background: #0b1729; border-top-color: #1f3550; }
html[data-theme="dark"] .dc-foot p { color: #93a7bd; }
html[data-theme="dark"] .dc-foot a { color: #6ea8f5; }
html[data-theme="dark"] .dc-foot a:hover { color: #dbe9f8; }
html[data-theme="dark"] .dc-foot small { color: #6a8099; }

@media (prefers-reduced-motion: reduce) {
  .dc-spark { stroke-dashoffset: 0; }
}