/* ======================================================================
   精油稀释比例计算器 · 独立设计（薰衣草紫 + 奶油底 + 水滴花瓣）
   浅色 = 花田奶油；深色 = 夜紫香薰
   ====================================================================== */
.eo{
  --ink:#2b2140; --sub:#6b5d85; --faint:#9c8fb8;
  --bg:#f7f3fb; --card:#ffffff; --card2:#f4eefb; --line:#e3d8f0; --line2:#ece3f6;
  --pri:#7c3aed; --pri-2:#a78bfa; --pri-soft:#efe6fd; --pri-ink:#5b21b6;
  --sage:#4d7c0f; --sage-soft:#eef6dd;
  --rose:#be185d; --rose-soft:#fde7f0;
  --red:#b4232a; --red-soft:#fdeaea;
  --r:20px;
  --shadow:0 1px 2px rgba(43,33,64,.05),0 12px 28px rgba(124,58,237,.10);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    radial-gradient(640px 300px at 88% -100px, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(520px 280px at 6% 100px, rgba(190,24,93,.05), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .eo{
  --ink:#e9e2f7; --sub:#a798c6; --faint:#756890;
  --bg:#130e22; --card:#1c1530; --card2:#231a3a; --line:#372a55; --line2:#2e2348;
  --pri:#a78bfa; --pri-2:#c4b5fd; --pri-soft:rgba(167,139,250,.14); --pri-ink:#ddd6fe;
  --sage:#a3e635; --sage-soft:rgba(163,230,53,.12);
  --rose:#f9a8d4; --rose-soft:rgba(249,168,212,.12);
  --red:#f87171; --red-soft:rgba(248,113,113,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
}
.eo *{box-sizing:border-box;}
.eo b{font-weight:700;}
.eo-wrap{max-width:1080px;margin:0 auto;}
.eo input,.eo select{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;}

.eo-hero{
  margin-top:22px;border-radius:26px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#6d28d9,#8b5cf6 55%,#c084fc);
  border:1px solid #7c3aed;position:relative;overflow:hidden;
}
:root[data-theme="dark"] .eo-hero{background:linear-gradient(135deg,#2e1065,#4c1d95 60%,#6d28d9);}
.eo-hero:before{content:"💧";position:absolute;right:34px;top:14px;font-size:64px;opacity:.25;transform:rotate(18deg);}
.eo-hero:after{content:"🌿";position:absolute;right:120px;bottom:10px;font-size:44px;opacity:.22;}
.eo-hero-in{padding:26px 28px;position:relative;z-index:1;}
.eo-hero h1{margin:0 0 8px;font-size:clamp(23px,3.4vw,31px);font-weight:900;color:#fdfaff;line-height:1.3;}
.eo-hero p{margin:0;color:#e4d5ff;font-size:14.5px;max-width:740px;}
.eo-hero p em{font-style:normal;color:#fff;font-weight:800;}

.eo-desk{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;margin-top:20px;}
@media (max-width:900px){.eo-desk{grid-template-columns:1fr;}}
.eo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.eo-card h2{margin:0 0 10px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.eo-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50% 50% 50% 4px;background:var(--pri);color:#fff;font-size:12px;font-weight:800;transform:rotate(-4deg);}
.eo-tip{font-size:12.5px;color:var(--sub);margin:0 0 8px;}

.eo-field{display:flex;align-items:center;gap:8px;margin:11px 0;flex-wrap:wrap;}
.eo-field label{font-size:13.5px;color:var(--sub);min-width:96px;}
.eo-in,.eo-sel{background:var(--card2);border:1px solid var(--line);border-radius:999px;color:var(--ink);padding:6px 14px;font-size:14px;outline:none;}
.eo-in{width:104px;}
.eo-in:focus,.eo-sel:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.eo-unit{font-size:13px;color:var(--faint);}
.eo-uses{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.eo-use{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700;cursor:pointer;}
.eo-use.on{background:var(--pri);border-color:var(--pri);color:#fff;}
.eo-use small{display:block;font-weight:400;font-size:10.5px;opacity:.85;}
.eo-btn{border:none;border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;}
.eo-btn-go{background:var(--pri);color:#fff;}
.eo-btn-go:hover{background:var(--pri-2);}
.eo-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.eo-btn-ghost:hover{border-color:var(--pri-2);}
.eo-rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.eo-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.eo-msg.err{color:var(--red);}
.eo-msg.ok{color:var(--pri);}
.eo-msg.warn{color:var(--rose);}

.eo-drop{display:flex;align-items:center;gap:16px;background:var(--pri-soft);border:1px dashed var(--pri);border-radius:18px;padding:14px 18px;margin-bottom:12px;}
.eo-drop .big{font-size:44px;font-weight:900;color:var(--pri-ink);font-family:ui-monospace,Consolas,monospace;line-height:1;}
.eo-drop .desc{font-size:13.5px;color:var(--sub);}
.eo-drop .desc b{color:var(--ink);}
.eo-gauge{height:10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);overflow:hidden;margin:4px 0 10px;}
.eo-gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--pri));border-radius:999px;transition:width .25s;}
.eo-gauge i.over{background:linear-gradient(90deg,var(--rose),#e11d48);}
.eo-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.eo-table th,.eo-table td{border:1px solid var(--line);padding:6px 10px;text-align:center;}
.eo-table th{background:var(--card2);font-weight:700;}
.eo-table td.d{color:var(--pri-ink);font-weight:800;font-family:ui-monospace,Consolas,monospace;}
.eo-safe{margin-top:14px;font-size:13px;color:var(--sub);background:var(--sage-soft);border-radius:12px;padding:10px 14px;}
.eo-safe b{color:var(--sage);}

.eo-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.eo-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.eo-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.eo-faq p{margin:0;color:var(--sub);font-size:14px;}
.eo-faq p b{color:var(--ink);}