/* Bio2Twin Blood Report V1 — 2026-10-25
   Shares the visual language of blood-upload-v2.css, scoped to #blood/report only.
   All records and navigation remain handled by their existing code. */
body.b2t-blood-report-ui{
 --report-ink:#f2f4f9;--report-muted:#abb9cb;
 --report-rose:#e94f77;--report-amber:#e0a049;
 --report-violet:#a077e9;--report-blue:#4999ed;
}
body.b2t-blood-report-ui .app-head{margin-bottom:20px;align-items:flex-end}
body.b2t-blood-report-ui .eyebrow{font-size:10px;letter-spacing:.17em;color:var(--report-rose)}
body.b2t-blood-report-ui .app-head h1{font-size:clamp(28px,3.1vw,40px);font-weight:400;color:var(--report-ink)}
body.b2t-blood-report-ui .app-subtitle{font-size:14px;line-height:1.65;color:var(--report-muted)}
body.b2t-blood-report-ui .metric-chip{
 box-sizing:border-box;min-width:93px;min-height:53px;
 padding:10px 13px;background:linear-gradient(135deg,#121826,#0d121b);
 border:1px solid #3f4b60;border-radius:13px;
}
body.b2t-blood-report-ui .metric-chip:nth-child(1){border-color:#814257}
body.b2t-blood-report-ui .metric-chip:nth-child(2){border-color:#815f3e}
body.b2t-blood-report-ui .metric-chip:nth-child(3){border-color:#745192}
body.b2t-blood-report-ui .metric-chip small{font-size:10px;color:#afbac9;letter-spacing:.04em}
body.b2t-blood-report-ui .metric-chip b{font-weight:400;font-size:13px;color:#eff2f8}
body.b2t-blood-report-ui .subnav{
 box-sizing:border-box;border:1px solid #3b485c;border-radius:17px;
 background:linear-gradient(120deg,#0c121a,#111b28);
 padding:5px;gap:7px;margin-bottom:17px;
}
body.b2t-blood-report-ui .subnav button{font-size:12px;font-weight:400;color:#aab6c8}
body.b2t-blood-report-ui .subnav button:hover{color:#fff;background:#152032}
body.b2t-blood-report-ui .subnav button.active{
 background:linear-gradient(115deg,#22304b,#192439);
 border:1px solid #6484b4;color:#f5f7fb;
 box-shadow:0 0 14px #3369a52b;
}
body.b2t-blood-report-ui #content{
 display:grid;grid-template-columns:minmax(0,1fr);
 width:100%;min-width:0;gap:16px;
}
body.b2t-blood-report-ui #content>.hero-card{
 box-sizing:border-box;width:100%;min-width:0;
 min-height:167px;padding:25px 28px;border-radius:21px;
 border:1px solid transparent;
 background:
  radial-gradient(ellipse at 68% 0%,#9e29582a,transparent 56%) padding-box,
  linear-gradient(118deg,#171922,#0d1826) padding-box,
  linear-gradient(115deg,#b63d64,#775083,#3379b2) border-box;
 box-shadow:0 8px 27px #00000026;
}
body.b2t-blood-report-ui #content>.hero-card:before{
 width:230px;height:230px;right:18%;top:-100px;
 background:radial-gradient(circle,#ed518123,transparent 70%);pointer-events:none;
}
body.b2t-blood-report-ui #content>.hero-card .hero-copy{max-width:calc(100% - 370px);min-width:0}
body.b2t-blood-report-ui #content>.hero-card .hero-copy small{
 color:#b8c5d9;font-size:11px;letter-spacing:.14em;
}
body.b2t-blood-report-ui #content>.hero-card .hero-copy h2{
 font-size:clamp(22px,2.35vw,29px);font-weight:400;
 line-height:1.34;color:#f4f6fa;margin:12px 0 9px;
}
body.b2t-blood-report-ui #content>.hero-card .hero-copy p{
 font-size:14px;line-height:1.7;color:#acb9ca;
}
body.b2t-blood-report-ui #content>.hero-card .hero-status{
 position:absolute;right:25px;top:50%;bottom:auto;
 transform:translateY(-50%);
 width:min(336px,37%);display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
body.b2t-blood-report-ui #content>.hero-card .hero-status div{
 box-sizing:border-box;min-height:59px;
 display:flex;flex-direction:column;justify-content:center;
 padding:11px 13px;background:#0d1421e0;border:1px solid #40516a;
 border-radius:12px;
}
body.b2t-blood-report-ui #content>.hero-card .hero-status div:nth-child(1){border-color:#834963}
body.b2t-blood-report-ui #content>.hero-card .hero-status div:nth-child(2){border-color:#7e613b}
body.b2t-blood-report-ui #content>.hero-card .hero-status div:nth-child(3){grid-column:1/-1;border-color:#35618e}
body.b2t-blood-report-ui #content>.hero-card .hero-status span{font-size:10px;color:#a8b5c8;letter-spacing:.04em}
body.b2t-blood-report-ui #content>.hero-card .hero-status b{font-size:13px;font-weight:400;color:#f0f3f8;margin-top:5px}
body.b2t-blood-report-ui #content>.card{
 box-sizing:border-box;width:100%;min-width:0;
 min-height:0;padding:24px 27px;border-radius:20px;
 border:1px solid transparent;
 background:
  radial-gradient(ellipse at 98% 0%,#7044a325,transparent 58%) padding-box,
  linear-gradient(130deg,#101723,#0c141e) padding-box,
  linear-gradient(115deg,#ad753d,#4f6283,#815bb0) border-box;
}
body.b2t-blood-report-ui #content>.card:before{
 content:"以下為處理流程示意，非個人驗血檢驗結果";
 display:block;margin:0 0 18px;padding:0 0 13px;
 border-bottom:1px solid #44536991;
 font-size:12px;line-height:1.6;font-weight:400;color:#bac7d8;
}
body.b2t-blood-report-ui #content>.card>small{
 color:#ddacc2;font-size:11px;letter-spacing:.14em;
}
body.b2t-blood-report-ui #content .timeline{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:11px;margin-top:14px;
}
body.b2t-blood-report-ui #content .timeline-row{
 box-sizing:border-box;display:grid;
 grid-template-columns:57px 12px minmax(0,1fr);
 gap:11px;align-items:center;
 min-width:0;min-height:90px;padding:15px;
 border:1px solid #384760;border-radius:13px;
 background:linear-gradient(145deg,#151d2a,#0e1623);
}
body.b2t-blood-report-ui #content .timeline-row:nth-child(1){border-color:#7d4660}
body.b2t-blood-report-ui #content .timeline-row:nth-child(2){border-color:#785b41}
body.b2t-blood-report-ui #content .timeline-row:nth-child(3){border-color:#675189}
body.b2t-blood-report-ui #content .timeline-row:nth-child(4){border-color:#40638f}
body.b2t-blood-report-ui #content .timeline-row time{
 color:#b6c4d6;font-size:11px;white-space:nowrap;padding:0;
}
body.b2t-blood-report-ui #content .timeline-dot{
 margin-top:0;width:9px;height:9px;background:var(--report-rose);
 box-shadow:0 0 12px #e34f7765;
}
body.b2t-blood-report-ui #content .timeline-row:nth-child(2) .timeline-dot{background:var(--report-amber);box-shadow:0 0 12px #e0a04965}
body.b2t-blood-report-ui #content .timeline-row:nth-child(3) .timeline-dot{background:var(--report-violet);box-shadow:0 0 12px #a077e965}
body.b2t-blood-report-ui #content .timeline-row:nth-child(4) .timeline-dot{background:var(--report-blue);box-shadow:0 0 12px #4999ed65}
body.b2t-blood-report-ui #content .timeline-row strong{display:block;font-weight:400;font-size:14px;color:#f1f3f8}
body.b2t-blood-report-ui #content .timeline-row p{margin:5px 0 0;font-size:12px;line-height:1.55;color:#acbacb;overflow-wrap:anywhere}
body.b2t-blood-report-ui #content .timeline-row .timeline-tag{display:none}
@media(max-width:950px){
 body.b2t-blood-report-ui #content>.hero-card .hero-copy{max-width:calc(100% - 308px)}
 body.b2t-blood-report-ui #content>.hero-card .hero-status{width:286px;right:18px}
}
@media(max-width:760px){
 body.b2t-blood-report-ui .app-head{align-items:flex-start;flex-direction:column;gap:14px}
 body.b2t-blood-report-ui .head-metrics{width:100%;justify-content:flex-start;flex-wrap:nowrap}
 body.b2t-blood-report-ui .metric-chip{flex:1;min-width:0;padding:8px 10px}
 body.b2t-blood-report-ui .metric-chip small{font-size:9px}
 body.b2t-blood-report-ui #content>.hero-card{padding:20px 17px;min-height:0;border-radius:17px}
 body.b2t-blood-report-ui #content>.hero-card .hero-copy{max-width:none}
 body.b2t-blood-report-ui #content>.hero-card .hero-copy h2{font-size:22px}
 body.b2t-blood-report-ui #content>.hero-card .hero-status{
  position:relative;right:auto;top:auto;bottom:auto;
  transform:none;width:100%;margin-top:19px;
 }
 body.b2t-blood-report-ui #content>.card{padding:19px 16px;border-radius:16px}
 body.b2t-blood-report-ui #content .timeline{grid-template-columns:minmax(0,1fr);gap:9px}
 body.b2t-blood-report-ui #content .timeline-row{min-height:76px;padding:13px}
}
@media(prefers-reduced-motion:reduce){
 body.b2t-blood-report-ui .subnav button{transition:none}
}