/* 芳疗助手自己的组件。语汇沿用主站 portal 卡：
   半透明白底 + 毛玻璃 + rule-soft 细边 + 直角 + 顶部一道 accent 色条。
   变量与字体全部来自 _muxi-base.css，这里不重新定义。 */

:root{ --oil-accent:#c9bde3; }

.o-stage{max-width:920px;margin:0 auto;padding:48px 24px 72px;position:relative;z-index:1}

/* 页头：跟首页一样居中 */
.o-head{text-align:center;margin-bottom:44px}
.o-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:18px}
.o-title{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.26em;
  color:var(--ink);line-height:1.5;margin:0 0 14px}
.o-lede{font-family:var(--sans);font-size:14px;line-height:1.95;color:var(--ink-soft);
  max-width:30rem;margin:0 auto}
.o-rule{width:40px;height:1px;background:var(--rule);margin:26px auto 0}

/* 卡片：照抄 m-portal 的质感 */
.o-card{background:rgba(255,255,255,.55);backdrop-filter:blur(4px);
  border:1px solid var(--rule-soft);padding:26px 28px;position:relative;overflow:hidden;
  margin-bottom:16px;text-align:left}
.o-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-accent,var(--oil-accent))}
.o-card.plain::before{display:none}

.o-label{font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.o-label::after{content:'';flex:1;height:1px;background:var(--rule-soft)}
.o-label em{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.06em;
  text-transform:none}

/* 提问 */
.o-ask{display:flex;gap:10px;margin-bottom:10px}
.o-ask input{flex:1;padding:14px 20px;border:1px solid var(--rule);border-radius:999px;
  background:rgba(255,255,255,.7);color:var(--ink);font-family:var(--sans);font-size:14px}
.o-ask input::placeholder{color:var(--ink-faint)}
.o-ask input:focus{outline:none;border-color:var(--oil-accent);background:#fff}
.o-btn{padding:14px 30px;border:none;border-radius:999px;font-family:var(--sans);font-size:13px;
  letter-spacing:.14em;background:var(--ink);color:#fff;cursor:pointer}
.o-btn.ghost{background:rgba(255,255,255,.6);border:1px solid var(--rule);color:var(--ink-soft)}
.o-hint{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-faint);
  text-align:center;margin:0 0 40px}

/* 门禁 */
.o-gate{text-align:center;padding:56px 32px}
.o-gate h2{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.2em;
  color:var(--ink);margin:0 0 12px}
.o-gate p{font-family:var(--sans);font-size:13px;line-height:2;color:var(--ink-soft);
  margin:0 0 26px}

/* 油柜 */
.o-oils{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:8px}
.o-oils label{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;
  color:var(--ink-soft);padding:8px 12px;border:1px solid var(--rule-soft);
  background:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.o-oils label:hover{border-color:var(--rule)}
.o-oils label:has(input:checked){border-color:var(--oil-accent);
  background:rgba(201,189,227,.14);color:var(--ink)}
.o-oils input{accent-color:var(--primary);flex:none}

/* 画像 */
.o-prof{display:flex;flex-wrap:wrap;gap:8px}
.o-prof label{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;
  color:var(--ink-soft);padding:7px 16px;border:1px solid var(--rule-soft);border-radius:999px;
  background:rgba(255,255,255,.5)}
.o-prof input[type=number]{width:3.2rem;padding:2px 6px;border:1px solid var(--rule);
  background:#fff;color:var(--ink);font-family:var(--mono);font-size:12px}

/* 标签 */
.o-cat{border-bottom:1px solid var(--rule-soft);padding:4px 0}
.o-cat:last-of-type{border-bottom:none}
.o-cat>summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:15px;
  letter-spacing:.18em;color:var(--ink);padding:14px 0;display:flex;justify-content:space-between}
.o-cat>summary::-webkit-details-marker{display:none}
.o-cat>summary::after{content:'＋';color:var(--ink-faint);font-size:12px;font-family:var(--sans)}
.o-cat[open]>summary::after{content:'－'}
.o-cat .cnote{font-family:var(--sans);font-size:12px;color:var(--ink-faint);margin:0 0 12px}
.o-chips{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:16px}
.o-chip{font-family:var(--sans);font-size:13px;padding:7px 18px;border-radius:999px;
  border:1px solid var(--rule);background:rgba(255,255,255,.6);color:var(--ink-soft);cursor:pointer}
.o-chip:hover{border-color:var(--oil-accent)}
.o-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.o-chip .n{font-family:var(--mono);font-size:10px;opacity:.5;margin-left:6px}
.o-chip.amber::after{content:'·';color:var(--primary-light);margin-left:5px}

/* 结果 */
.o-rhead{font-family:var(--serif);font-size:20px;letter-spacing:.22em;color:var(--ink);
  text-align:center;margin:44px 0 6px}
.o-rsub{font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--ink-faint);
  text-transform:uppercase;text-align:center;margin-bottom:26px}
.o-dose-bar{font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  background:rgba(255,255,255,.5);border:1px solid var(--rule-soft);padding:14px 20px;
  margin-bottom:16px}
.o-dose-bar b{font-family:var(--mono);color:var(--ink);font-weight:400}
.o-dose-bar .cmp{font-size:12px;color:var(--ink-faint);margin-top:3px}
.o-plan-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:8px}
.o-plan-h b{font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:.14em;color:var(--ink)}
.o-dose{font-family:var(--mono);font-size:13px;color:var(--primary)}
.o-card p{font-family:var(--sans);font-size:13px;line-height:1.95;color:var(--ink-soft);margin:0}
.o-card p.warn{color:var(--primary-light);margin-top:8px}
.o-card.stop{--card-accent:#d99a9a}
.o-card.stop b{color:#a5595c}
.o-card.stop .sub{font-size:12px;color:var(--ink-soft);margin-top:6px;display:block}
.o-card.dashed{border-style:dashed}
.o-buy{font-family:var(--sans);font-size:13px;color:var(--ink-faint);text-align:center;margin-top:20px}
.o-buy b{color:var(--ink);font-weight:400}
.o-empty{font-family:var(--sans);font-size:13px;color:var(--ink-faint);text-align:center;padding:20px 0}
.o-seek{text-align:center;padding:34px 28px}
.o-seek p{font-family:var(--sans);font-size:14px;line-height:2.1;color:var(--ink)}
.o-foot{font-family:var(--sans);font-size:11px;line-height:2;color:var(--ink-faint);
  text-align:center;max-width:920px;margin:0 auto;padding:28px 24px 56px;
  border-top:1px solid var(--rule-soft)}

@media (max-width:640px){
  .o-stage{padding:32px 18px 56px}
  .o-title{font-size:23px;letter-spacing:.2em}
  .o-card{padding:20px 18px}
}

/* 油柜里的分组小标题（复方与单方分开） */
.o-sublabel{grid-column:1/-1;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--ink-faint);text-transform:uppercase;margin:14px 0 2px;
  padding-top:12px;border-top:1px solid var(--rule-soft)}

.o-search{width:100%;padding:9px 16px;margin-bottom:12px;border:1px solid var(--rule-soft);
  border-radius:999px;background:rgba(255,255,255,.6);color:var(--ink);
  font-family:var(--sans);font-size:13px}
.o-search:focus{outline:none;border-color:var(--oil-accent);background:#fff}
.o-oils label i{font-style:normal;color:var(--ink-faint);font-size:11px}

/* 油柜勾选后的即时反馈——没有提交按钮，勾一下就存，但得让人看见 */
.o-saved{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--ok,#5f8a6a);font-weight:400;margin-left:8px}
.o-label{flex-wrap:wrap}

/* ── 我的精油库：已收进来的，一行行摆着，随时拿掉 ── */
.o-my{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.o-mine{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 15px;
  border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.75);
  font-family:var(--sans);font-size:13px;color:var(--ink)}
.o-mine i{font-style:normal;font-size:10px;color:var(--ink-faint);
  border-left:1px solid var(--rule-soft);padding-left:6px}
.o-mine u{text-decoration:none;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:var(--primary);background:rgba(201,189,227,.28);padding:1px 5px;border-radius:2px}
.o-mine .rm{cursor:pointer;font-weight:400;color:var(--ink-faint);font-size:15px;
  line-height:1;padding:0 4px;border-radius:50%}
.o-mine .rm:hover{color:#a5595c;background:rgba(165,89,92,.1)}

.o-add{padding:9px 22px;border:1px dashed var(--rule);border-radius:999px;
  background:rgba(255,255,255,.5);color:var(--ink-soft);cursor:pointer;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em}
.o-add:hover{border-color:var(--oil-accent);color:var(--ink)}

/* ── 添加面板：默认收着，不占地方 ── */
.o-picker{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.o-brandbar{display:flex;align-items:center;gap:7px;margin-bottom:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--ink-faint);text-transform:uppercase}
.o-brand{padding:5px 14px;border:1px solid var(--rule);border-radius:999px;
  background:rgba(255,255,255,.6);color:var(--ink-soft);cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:0}
.o-brand.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.o-pick{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:8px 12px;border:1px solid var(--rule-soft);
  background:rgba(255,255,255,.5);cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.o-pick:hover{border-color:var(--oil-accent);color:var(--ink)}
.o-pick i{font-style:normal;color:var(--ink-faint);font-size:11px}
.o-pick b{font-weight:400;color:var(--primary);font-size:15px;line-height:1}
.o-pick.owned{opacity:.45;cursor:default;background:transparent}
.o-pick.owned b{color:var(--ok,#5f8a6a)}

/* 首页只留一行入口，精油库本身在独立一页 */
.o-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(255,255,255,.55);backdrop-filter:blur(4px);
  border:1px solid var(--rule-soft);padding:16px 20px;margin-bottom:16px;
  cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:all .2s}
.o-entry::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--oil-accent)}
.o-entry:hover{background:rgba(255,255,255,.85);border-color:var(--rule)}
.o-entry .k{font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  color:var(--ink-faint);text-transform:uppercase}
.o-entry .v{font-family:var(--sans);font-size:13px;color:var(--ink);flex:1;min-width:8rem}
.o-entry .go{font-family:var(--sans);font-size:12px;color:var(--primary);white-space:nowrap}

/* ── 配方本体：几支油配在一起 ── */
.o-formula{margin:14px 0 16px;padding:14px 16px;background:rgba(255,255,255,.5);
  border-left:2px solid var(--oil-accent)}
.o-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.o-line .rl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ink-faint);
  min-width:2.4em}
.o-line .on{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:var(--ink)}
.o-line .dp{font-family:var(--mono);font-size:14px;color:var(--primary)}
.o-line .nt{font-family:var(--sans);font-size:11px;color:var(--ink-faint)}
.o-formula .wy{font-family:var(--sans);font-size:12px;line-height:1.8;color:var(--ink-faint);
  margin:0 0 10px 3.2em}
.o-formula .wy.warn{color:var(--primary-light)}
.o-card .stp{font-size:13px;color:var(--ink-soft);margin:0}
.o-card .bal{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-faint);margin:8px 0 0}

.o-keep{margin-top:14px;padding:7px 18px;border:1px solid var(--rule);border-radius:999px;
  background:rgba(255,255,255,.6);color:var(--primary);cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em}
.o-keep:hover{border-color:var(--oil-accent);background:#fff}
.o-keep:disabled{color:var(--ok,#5f8a6a);cursor:default;opacity:.7}
.o-keep.del{color:var(--ink-faint)}
.o-keep.del:hover{color:#a5595c;border-color:#e5c2c2}