/* 01 飞蚊症自查 · 视野窗：暖纸版面 + 深墨绿观察窗，黑影缓慢漂移；结果用三色信号带 */
.ef { --a:#0f766e; --a2:#0b4f4a; --asoft:#e2f0eb; }
.ef-hero-grid { display:grid; grid-template-columns:1.02fr .98fr; }
.ef-intro { padding-right:28px; }
.ef-art { width:100%; max-width:300px; margin:22px 0 0 auto; border-radius:14px; }
.ef-window { background:#0e2226; color:#ddf0ec; padding:24px; display:flex; flex-direction:column; gap:16px; }
:root[data-theme="dark"] .ef-window { background:#081417; border-left-color:#1e3a3e; }
.ef-window-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid #2b4e50; padding-bottom:10px; }
.ef-window-hd b { font-family:var(--fd); font-size:18px; color:#eaf7f3; }
.ef-window-hd span { font-family:var(--fm); font-size:11px; color:#7fc9bb; }
.ef-field { position:relative; height:148px; border-radius:50% / 42%; margin:2px auto 0; width:min(78%,300px);
    background:radial-gradient(circle at 50% 50%,#1d4547 0%,#123033 62%,#0c2225 100%); border:1px solid #356865; overflow:hidden; }
.ef-fix { position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#5cc7b4; box-shadow:0 0 0 6px rgba(92,199,180,.13); }
.ef-speck { position:absolute; display:block; width:9px; height:5px; border-radius:50%; background:#061315; opacity:.82; animation:efDrift 13s ease-in-out infinite alternate; }
.ef-s0{left:22%;top:30%;transform:rotate(-22deg)} .ef-s1{left:66%;top:24%;width:14px;animation-delay:-3s}
.ef-s2{left:38%;top:68%;width:6px;height:6px;animation-delay:-6s} .ef-s3{left:74%;top:63%;width:11px;animation-delay:-9s}
.ef-s4{left:15%;top:58%;width:5px;height:5px;animation-delay:-2s} .ef-s5{left:55%;top:42%;width:7px;animation-delay:-11s}
.ef-s6{left:82%;top:42%;width:5px;height:5px;animation-delay:-7s}
@keyframes efDrift { from{translate:0 0} to{translate:16px -12px} }
@media (prefers-reduced-motion:reduce){ .ef-speck{animation:none} }
.ef-window label { color:#a9c7c3; font-size:12px; }
.ef-window input[type=number],.ef-window select { background:#163437; border-color:#2e5959; color:#eaf7f3; }
.ef-window input:focus,.ef-window select:focus { box-shadow:0 0 0 3px rgba(92,199,180,.18); }
.ef-window .h17-check { color:#c2dad6; }
.ef-window .h17-note { color:#91aeaa; }
.ef-window .h17-note b { color:#8ee0cd; }
.ef-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.ef-flags { display:flex; flex-wrap:wrap; gap:2px 0; padding-top:8px; border-top:1px dashed #2e5959; }
.ef-window .h17-btn:not(.h17-btn-main) { color:#c2dad6; border-color:#35605e; }
.ef-window .h17-btn:not(.h17-btn-main):hover { color:#8ee0cd; border-color:#5cc7b4; }

.ef-lanes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ef-lane { border-radius:14px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-top:4px solid var(--line2); }
.ef-lane.is-bad { border-top-color:var(--bad); background:var(--badbg); }
.ef-lane.is-warn { border-top-color:var(--warn); background:var(--warnbg); }
.ef-lane.is-ok { border-top-color:var(--ok); background:var(--okbg); }
.ef-lane span { display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; opacity:.75; margin-bottom:6px; }
.ef-lane b { font-family:var(--fd); font-size:19px; color:var(--ink); }
.ef-lane p { font-size:12.5px; line-height:1.8; color:var(--ink2); margin:8px 0 0; }
.ef-cards { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-top:14px; }
.ef-card h3 { font-size:18px; margin-bottom:10px; }
.ef-summary { font-size:14px; line-height:2; color:var(--ink2); background:var(--card2); border-left:3px solid var(--a); border-radius:0 10px 10px 0; padding:12px 16px; }
.ef .h17-bench-grid { grid-template-columns:1fr 1.2fr; }
.ef .h17-bench-out { background:linear-gradient(180deg,var(--card2),var(--card)); }
@media (max-width:900px){
    .ef-hero-grid,.ef-cards,.ef-lanes { grid-template-columns:1fr; }
    .ef-intro { padding:0 0 22px; }
    .ef-window { border-left:0; border-top:1px solid var(--line); }
    .ef-row2 { grid-template-columns:1fr; }
}