/* 23 机油粘度选择 · 保养选型台：暖纸底 + 琥珀刻度，左表单 / 右结论 / 下细节 */
.eov{
  --ink:#24211c; --sub:#6e675c; --card:#fffdf9; --line:#e6ded0;
  --pri:#b8640b; --pri-soft:#fdf0dc; --ok:#2e7d55; --warn:#b6860f; --bad:#b6402f; --bg:#f8f5ef;
  color:var(--ink);background:var(--bg);font-size:15px;line-height:1.82;padding:26px 0 54px;min-height:60vh;
}
:root[data-theme="dark"] .eov{
  --ink:#f2ece2; --sub:#b3aa9a; --card:#1c1d1a; --line:#37342d;
  --pri:#f0a94a; --pri-soft:rgba(240,169,74,.13); --ok:#6cd39c; --warn:#f0c26a; --bad:#ff8f7d; --bg:#111210;
}
.eov *{box-sizing:border-box;}
.eov-wrap{max-width:1180px;margin:0 auto;padding:0 18px;}
.eov h1,.eov h2,.eov h3{line-height:1.36;margin:0;letter-spacing:.01em;}
.eov b{font-weight:700;} .eov em{font-style:normal;}
.eov-hero{
  display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:center;
  padding:30px 32px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(105deg,var(--card) 55%,var(--pri-soft));
  box-shadow:0 3px 16px rgba(90,60,15,.06);
}
.eov-badge{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--pri);color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;}
.eov h1{font-size:31px;font-weight:800;margin:13px 0 12px;}
.eov h1 em{display:block;font-size:18px;font-weight:600;color:var(--pri);margin-top:6px;}
.eov-hero p{margin:0 0 16px;max-width:760px;color:var(--sub);font-size:15px;line-height:1.85;}
.eov-hero p b{color:var(--ink);}
.eov-hero-meta{display:flex;flex-wrap:wrap;gap:8px;}
.eov-hero-meta span{font-size:12.5px;font-weight:650;padding:5px 11px;border-radius:7px;background:var(--card);border:1px solid var(--line);color:var(--sub);}
.eov-gauge{position:relative;height:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
.eov-gauge-scale{position:relative;width:100%;height:8px;border-radius:5px;
  background:linear-gradient(90deg,var(--pri),#e8bf72 45%,#d7d1c4 100%);}
.eov-gauge-scale i{position:absolute;left:var(--p);top:14px;transform:translateX(-50%);font-style:normal;
  font:700 12px/1 ui-monospace,Menlo,monospace;color:var(--sub);}
.eov-gauge-scale i:before{content:"";position:absolute;left:50%;top:-14px;height:10px;width:1px;background:var(--line);}
.eov-drop{width:66px;height:66px;margin-bottom:16px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--pri),#f2c478);box-shadow:inset -8px -8px 16px rgba(0,0,0,.12);}
.eov-gauge-cap{position:absolute;bottom:-6px;font-size:11.5px;color:var(--sub);letter-spacing:.05em;}

/* 两栏：表单 + 结论 */
.eov-cols{display:grid;grid-template-columns:380px 1fr;gap:18px;margin-top:18px;align-items:start;}
.eov-card,.eov-panel,.eov-empty,.eov-out{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 2px 10px rgba(80,60,20,.05);}
.eov-form{padding:22px;}
.eov-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--pri-soft);}
.eov-card-h h2{font-size:20px;font-weight:750;}
.eov-card-h span{font-size:12.5px;color:var(--sub);} .eov-card-h b{color:var(--bad);}
.eov-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13.5px;font-weight:650;color:var(--sub);}
.eov-field b{color:var(--bad);margin-left:3px;}
.eov-field small{font-size:11.5px;font-weight:400;color:var(--sub);}
.eov-in,.eov-ta{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);
  font-size:14px;font-family:inherit;transition:border-color .16s,box-shadow .16s;}
.eov-in:focus,.eov-ta:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}
.eov-check{flex-direction:row;align-items:center;gap:9px;font-weight:600;font-size:13.5px;padding:4px 0;}
.eov-check input{width:16px;height:16px;accent-color:var(--pri);}
.eov-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.eov-btn{padding:10px 17px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);
  font-size:14px;font-weight:650;line-height:1.4;cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s;}
.eov-btn:hover{border-color:var(--pri);transform:translateY(-1px);box-shadow:0 3px 10px rgba(80,60,20,.1);}
.eov-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.eov-btn-main{background:var(--pri);border-color:var(--pri);color:#fff;}
.eov-btn-main:hover{filter:brightness(1.1);}
.eov-btn-ghost{background:transparent;color:var(--sub);}
.eov-msg{margin:12px 0 0;font-size:13.5px;color:var(--sub);min-height:20px;}
.eov-msg.is-err{color:var(--bad);font-weight:600;} .eov-msg.is-ok{color:var(--ok);font-weight:600;}
.eov-empty{padding:46px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;}
.eov-empty-ic{font-size:36px;} .eov-empty b{font-size:17px;}
.eov-empty em{max-width:520px;font-size:13.5px;color:var(--sub);line-height:1.8;}

.eov-out{padding:0;overflow:hidden;}
.eov-pick{position:relative;padding:26px 26px 22px;background:linear-gradient(120deg,var(--pri),#d98d24);color:#fff;}
.eov-pick-k{font-size:12.5px;letter-spacing:.12em;opacity:.9;}
.eov-pick b{display:block;font:800 46px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;margin:6px 0 8px;}
.eov-pick p{margin:0;font-size:14px;line-height:1.8;max-width:640px;opacity:.96;}
.eov-pick-tag{position:absolute;right:22px;top:22px;padding:4px 10px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:11.5px;}
.eov-trio{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.eov-cell{padding:18px 22px;border-top:1px solid var(--line);}
.eov-cell+.eov-cell{border-left:1px solid var(--line);}
.eov-cell span{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;padding:2px 9px;border-radius:6px;}
.eov-cell.is-alt span{background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok);}
.eov-cell.is-no span{background:color-mix(in srgb,var(--bad) 12%,var(--card));color:var(--bad);}
.eov-cell b{display:block;font:750 24px/1.4 ui-monospace,Menlo,monospace;margin:8px 0 4px;}
.eov-cell p{margin:0;font-size:13.5px;color:var(--sub);line-height:1.75;}
.eov-note{padding:14px 22px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--sub);background:var(--bg);}
.eov-note b{color:var(--ink);}

/* 下方细节 */
.eov-wide{margin-top:18px;padding:0;}
.eov-panel{padding:20px 22px;margin:18px;border:1px solid var(--line);border-radius:12px;box-shadow:none;}
.eov-h2{font-size:19px;font-weight:750;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;}
.eov-h2 span{font-size:12.5px;font-weight:400;color:var(--sub);}
.eov-decode{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.eov-decode div{padding:14px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--line);}
.eov-decode span{display:block;font-size:12px;color:var(--sub);letter-spacing:.06em;}
.eov-decode b{display:block;font-size:22px;font-family:ui-monospace,Menlo,monospace;margin:5px 0;}
.eov-decode p{margin:0;font-size:13px;color:var(--sub);line-height:1.75;}
.eov-thermo{position:relative;padding:34px 8px 18px;border-radius:10px;background:var(--bg);border:1px solid var(--line);}
.eov-thermo-bar{position:relative;height:14px;border-radius:8px;background:linear-gradient(90deg,#4d86c8,#7fc0d8 42%,#f0c26a 78%,#e08a5a);}
.eov-thermo-tick{position:absolute;top:-24px;transform:translateX(-50%);font:600 11.5px/1 ui-monospace,Menlo,monospace;color:var(--sub);white-space:nowrap;}
.eov-thermo-tick:after{content:"";position:absolute;left:50%;top:20px;height:16px;width:1px;background:var(--line);}
.eov-thermo-you{position:absolute;top:-2px;width:3px;height:20px;background:var(--pri);border-radius:2px;transform:translateX(-50%);}
.eov-thermo-you span{position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--pri);}
.eov-thermo p{margin:14px 8px 0;font-size:13px;color:var(--sub);}
.eov-tw{overflow:auto;border:1px solid var(--line);border-radius:10px;}
.eov-tb{width:100%;border-collapse:collapse;font-size:13px;min-width:680px;}
.eov-tb th,.eov-tb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.eov-tb th{background:var(--pri-soft);font-weight:700;white-space:nowrap;}
.eov-tb tr:last-child td{border-bottom:none;} .eov-tb tr:hover td{background:var(--bg);}
.eov-tb .is-first{color:var(--pri);font-weight:800;}
.eov-ta{min-height:110px;resize:vertical;font:13.5px/1.7 ui-monospace,Menlo,monospace;}
.eov-final{margin:0 18px 18px;}
[hidden]{display:none !important;}

@media (max-width:860px){
  .eov{padding:18px 0 40px;}
  .eov-hero{grid-template-columns:1fr;padding:22px 18px;} .eov-gauge{display:none;} .eov h1{font-size:26px;}
  .eov-cols{grid-template-columns:1fr;}
  .eov-form,.eov-panel{padding:18px 15px;}
  .eov-decode,.eov-trio{grid-template-columns:1fr;}
  .eov-cell+.eov-cell{border-left:none;border-top:1px solid var(--line);}
  .eov-pick b{font-size:36px;}
  .eov-panel{margin:14px;}
  .eov-final{margin:0 14px 14px;}
}