/* 案例封面：用形状画的界面示意，内容虚构。只用 styles.css 的颜色变量，文字只用 --t3。 */
.cover{position:relative;display:grid;place-items:center;aspect-ratio:16/10;padding:7% 8%;border-radius:var(--r-sm);overflow:hidden;color:var(--ink-2);font-size:var(--t3);line-height:1.5}
.cover-blue{background:var(--tint)}
.cover-green{background:var(--tint-2)}
.cover-sand{background:var(--sand)}
.cover-dark{background:var(--dark);color:var(--dark-ink)}
.cover b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover em{font-style:normal}
.cv-line{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:8px}
.cv-line.short{width:58%}
.cv-line.mid{width:76%}
.cv-chip{display:inline-block;margin-top:10px;padding:1px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink)}

/* 通用窗口 */
.cv-win{width:100%;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 14px 28px -22px var(--cover-shadow)}
.cv-pad{padding:6% 7%;display:flex;flex-direction:column;justify-content:center}
.cv-split{display:grid;grid-template-columns:14% 1fr}
.cv-rail{display:flex;flex-direction:column;gap:10px;padding:16px 0;align-items:center;border-right:1px solid var(--line)}
.cv-rail i{width:44%;aspect-ratio:1;border-radius:4px;background:var(--line)}
.cv-rail i.on{background:var(--accent)}
.cv-main{display:flex;flex-direction:column;gap:10px;padding:7% 8%;min-width:0}
.cv-head{display:block;height:8px;width:40%;border-radius:4px;background:var(--line-strong)}
.cv-tile{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;min-width:0}
.cv-tile.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cv-tile.on .cv-line{background:var(--accent-soft)}
.cv-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cv-pair .cv-line:first-child{margin-top:0}

/* 预约日历 */
.cv-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.cv-week i{aspect-ratio:1;border-radius:6px;background:var(--tint-2)}
.cv-week i.on{background:var(--accent)}
.cv-slot{display:block;padding:10px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}

/* 文件对照 */
.cv-docs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:100%;height:100%}
.cv-page{display:block;height:100%;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 24px -20px var(--cover-shadow)}
.cv-page .cv-line:first-child{margin-top:4px}
.cv-page.on{border-color:var(--accent)}
.cv-arrow{color:var(--accent)}
.cv-field{display:grid;grid-template-columns:34% 1fr;gap:6px;margin-top:10px}
.cv-field i{height:6px;border-radius:3px;background:var(--line)}
.cv-field i+i{background:var(--accent-soft)}

/* 证据墙 */
.cv-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;height:100%}
.cv-note{display:block;padding:10px;border-radius:8px;background:var(--card);border:1px solid var(--line);transform:rotate(-1.2deg)}
.cv-note:nth-child(even){transform:rotate(1.4deg)}
.cv-note.on{grid-column:span 2;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);transform:none}
.cv-note .cv-line:first-child{margin-top:2px}

/* 手机内容流 */
.cv-phone{display:flex;flex-direction:column;gap:8px;height:112%;aspect-ratio:9/16;padding:12px 10px;margin-top:16%;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 28px -20px var(--cover-shadow)}
.cv-phone b{text-align:center}
.cv-feed{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cv-feed i{border-radius:6px;background:var(--tint)}
.cover-blue .cv-feed i{background:var(--sand)}
.cv-feed i.t0{height:46px}.cv-feed i.t1{height:34px}.cv-feed i.t2{height:40px;background:var(--accent-soft)}

/* 判断卡 */
.cv-stack{position:relative;width:78%;height:86%}
.cv-card{position:absolute;inset:0;display:block;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cv-card.back2{transform:translate(14px,-14px) rotate(3deg);opacity:.6}
.cv-card.back1{transform:translate(7px,-7px) rotate(1.5deg);opacity:.85}
.cv-card.front{box-shadow:0 16px 30px -22px var(--cover-shadow)}

/* 老板首页 */
.cv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cv-kpis i{height:26px;border-radius:6px;background:var(--tint-2)}
.cv-kpis i:first-child{background:var(--accent-soft)}
.cv-bars{display:flex;align-items:flex-end;gap:6px;height:38%;margin:12px 0}
.cv-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--line-strong)}
.cv-bars i.h0{height:40%}.cv-bars i.h1{height:70%}.cv-bars i.h2{height:55%}.cv-bars i.h3{height:90%;background:var(--accent)}
.cv-todo{display:block;padding:8px 12px;border-left:3px solid var(--accent);background:var(--paper);border-radius:0 6px 6px 0}

/* 审片时间轴 */
.cv-film{display:flex;flex-direction:column;gap:12px;width:100%;height:100%}
.cv-frame{position:relative;flex:1;border-radius:8px;background:linear-gradient(135deg,var(--glass),var(--glass-faint));border:1px solid var(--dark-line)}
.cv-mark{position:absolute;left:18%;right:34%;bottom:14%;height:22%;border:2px solid var(--focus);border-radius:6px}
.cv-track{position:relative;height:6px;border-radius:3px;background:var(--glass-line)}
.cv-track i{position:absolute;top:-5px;width:4px;height:16px;border-radius:2px;background:var(--focus)}
.cv-track i:nth-child(1){left:22%}.cv-track i:nth-child(2){left:48%}.cv-track i:nth-child(3){left:76%}
.cover-dark .cv-comment{align-self:flex-start;padding:4px 12px;border-radius:var(--r-pill);background:var(--card);color:var(--ink)}

/* 对话与草稿 */
.cv-chat{display:flex;flex-direction:column;gap:10px;width:100%}
.cv-bubble{display:block;max-width:84%;padding:10px 14px;border-radius:14px}
.cv-bubble.in{align-self:flex-start;min-width:56%;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.cv-bubble.out{align-self:flex-end;width:62%;background:var(--accent-soft);border-bottom-right-radius:4px}
.cv-bubble.out .cv-line{background:var(--glass-strong)}
.cv-bubble .cv-line:first-child{margin-top:2px}
.cv-chat .cv-chip{align-self:flex-end;margin-top:0}
.cv-draft{display:block;padding:10px 14px;border:1px dashed var(--accent);border-radius:10px;background:var(--card)}
.cv-task{display:flex;align-items:center;gap:10px}
.cv-task .cv-line{flex:1;margin-top:0}
.cv-check{width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--accent)}