@font-face { font-family:'OPPO Sans'; src:url('./Assets/fonts/OPPOSans-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'OPPO Sans'; src:url('./Assets/fonts/OPPOSans-Medium.woff2') format('woff2'); font-style:normal; font-weight:500 600; font-display:swap; }
@font-face { font-family:'OPPO Sans'; src:url('./Assets/fonts/OPPOSans-Bold.woff2') format('woff2'); font-style:normal; font-weight:700 900; font-display:swap; }
@font-face { font-family:'Geist'; src:url('./Assets/fonts/Geist-Variable.woff2') format('woff2'); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family:'Material Symbols Rounded'; src:url('./Assets/fonts/MaterialSymbolsRounded.woff2') format('woff2'); font-style:normal; font-weight:300; font-display:block; }

:root {
  color-scheme:light;
  background:#ffffff;
  --cm-bg:#ffffff; --cm-surface:#ffffff; --cm-surface-2:#f8f8f8; --cm-text:#111111;
  --cm-muted:#6b6b6b; --cm-line:#dedede; --cm-brand:#111111; --cm-brand-dark:#000000; --cm-highlight:#ffa903; --cm-highlight-strong:#d88600;
  --cm-tag-bg:var(--cm-highlight); --cm-tag-bg-active:var(--cm-highlight-strong); --cm-tag-text:#ffffff;
  --cm-brand-soft:#f6f6f6; --cm-accent:#303030; --cm-good:#222222; --cm-danger:#b42318; --cm-shadow:none;
  --cm-r-sm:8px; --cm-r-md:14px; --cm-r-lg:22px; --cm-sidebar:248px; --cm-sidebar-rail:92px;
  --cm-card-border:rgba(0,0,0,.05); --cm-card-border-hover:rgba(0,0,0,.1); --cm-card-radius:24px;
  --cm-font-sans:'Geist','OPPO Sans',system-ui,sans-serif;
  --cm-font-display:'Geist','OPPO Sans',system-ui,sans-serif;
  --cm-font-mono:'Geist','OPPO Sans',ui-monospace,monospace;
  --cm-fs-xs:10px; --cm-fs-sm:12px; --cm-fs-md:14px; --cm-fs-lg:16px; --cm-fs-xl:20px; --cm-fs-2xl:28px;
  --cm-fs-control:14px;
  --cm-fw-regular:400; --cm-fw-medium:500; --cm-fw-semibold:600; --cm-fw-bold:700;
  --cm-product-radius:18px; --cm-product-media:#f3f3f3; --cm-product-pad:18px;
  --cm-control-h:44px; --cm-control-radius:12px;
  --cm-panel-radius:22px; --cm-panel-pad:24px;
  --cm-copy-gap:7px; --cm-section-gap:40px;
  --cm-lh-display:1.04; --cm-lh-heading:1.14; --cm-lh-title:1.28;
  --cm-lh-body:1.6; --cm-lh-caption:1.45; --cm-lh-control:1.25;
}

/* Unified product dropdowns and borderless selection states */
.cm-product-select { min-width:0; position:relative; }
.cm-product-select-trigger {
  appearance:none;
  width:100%;
  min-height:44px;
  padding:0 13px;
  border:1px solid var(--cm-line);
  border-radius:12px;
  background:var(--cm-surface);
  color:var(--cm-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font:inherit;
  font-size:12px;
  font-weight:var(--cm-fw-medium);
  text-align:left;
  cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
}
.cm-product-select-trigger>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-product-select-trigger>i { flex:none; color:var(--cm-muted); font-size:15px; transition:transform 220ms cubic-bezier(.2,.82,.2,1); }
.cm-product-select-trigger:hover,.cm-product-select.open .cm-product-select-trigger { border-color:color-mix(in srgb,var(--cm-text) 18%,var(--cm-line)); background:var(--cm-surface-2); }
.cm-product-select.open .cm-product-select-trigger>i { transform:rotate(180deg); }
.cm-product-select-menu {
  position:absolute;
  z-index:180;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  min-width:220px;
  max-height:min(320px,52vh);
  padding:7px;
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--cm-line) 86%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--cm-surface) 96%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
  animation:cm-filter-in 180ms cubic-bezier(.2,.75,.25,1) both;
}
.cm-product-select-menu[hidden] { display:none; }
.cm-product-select-menu button {
  appearance:none;
  width:100%;
  min-height:43px;
  padding:0 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--cm-text);
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
.cm-product-select-menu button>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-product-select-menu button:hover,.cm-product-select-menu button:focus-visible { outline:0; background:var(--cm-surface-2); }
.cm-product-select-menu button.selected { border:0; background:var(--cm-surface-2); color:var(--cm-text); font-weight:var(--cm-fw-semibold); }
.cm-product-select-menu button.selected>i { color:var(--cm-highlight-strong); font-size:15px; }
.cm-product-select-compact { width:160px; flex:none; }
.cm-product-select-field { width:100%; }
.cm-product-select-brew { width:100%; }
.cm-product-select-brew .cm-product-select-trigger { height:64px; padding:0; border:0; border-radius:0; background:transparent; font-size:15px; font-weight:var(--cm-fw-bold); }
.cm-product-select-brew .cm-product-select-trigger:hover,.cm-product-select-brew.open .cm-product-select-trigger { border:0; background:transparent; }
.cm-product-select-brew .cm-product-select-menu { top:calc(100% + 10px); left:-14px; width:calc(100% + 52px); }

:is(.cm-language-menu,.cm-filter-menu,.cm-detail-more-menu) {
  border-color:color-mix(in srgb,var(--cm-line) 86%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--cm-surface) 96%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
}
:is(.cm-language-menu,.cm-filter-menu,.cm-detail-more-menu) button { border:0; }
.cm-language-menu button.active,.cm-filter-menu button.selected { border:0; background:var(--cm-surface-2); color:var(--cm-text); font-weight:var(--cm-fw-semibold); }
.cm-language-menu button.active>i,.cm-filter-menu button.selected>i { color:var(--cm-highlight-strong); }

#coffmeApp :focus-visible { outline:2px solid color-mix(in srgb,var(--cm-highlight) 62%,transparent); outline-offset:2px; }
.cm-input:focus,.cm-select:focus,.cm-textarea:focus,.cm-auth-input:focus {
  border-color:color-mix(in srgb,var(--cm-highlight) 52%,var(--cm-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-highlight) 13%,transparent);
}
:is(.cm-ratio-presets button.selected,.cm-choice.selected,.cm-step-editor .cm-choice.selected,.cm-step-editor.expanded .cm-choice.selected,.cm-draft-drippers>button.selected,.cm-explore-categories button.active,.cm-rating button.on,.cm-tag.on,.cm-mobile-language-grid button.active) { border-color:transparent; box-shadow:none; }
.cm-wizard-progress button.active { border-bottom-color:transparent; }
.cm-sensory-row button.on { border-color:transparent; box-shadow:none; }
.cm-range-shell:has(input:focus-visible),.cm-step-editor.expanded .cm-range-shell:has(input:focus-visible) {
  border-color:color-mix(in srgb,var(--cm-highlight) 52%,var(--cm-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-highlight) 13%,transparent);
}
#coffmeApp .cm-mobile-nav .cm-nav-btn:focus-visible { outline-color:color-mix(in srgb,var(--cm-highlight) 62%,transparent); }
.cm-draft-drippers>button.selected { background:var(--cm-surface-2); }
.cm-draft-selected { background:var(--cm-highlight); color:#111; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-product-select-compact { width:100%; }
  .cm-product-select-menu { min-width:100%; }
  .cm-product-select-brew .cm-product-select-menu { left:-10px; width:calc(100% + 42px); }
}
[data-theme="dark"] {
  --cm-bg:#111111; --cm-surface:#181818; --cm-surface-2:#242424; --cm-text:#f7f7f7;
  --cm-muted:#a6a6a6; --cm-line:#363636; --cm-brand:#f3f3f3; --cm-brand-dark:#ffffff;
  --cm-brand-soft:#292929; --cm-accent:#d0d0d0; --cm-good:#eeeeee; --cm-danger:#ff7169; --cm-shadow:none;
  --cm-card-border:rgba(255,255,255,.1); --cm-card-border-hover:rgba(255,255,255,.18);
}
[data-theme="dark"] .cm-btn.brand { color:#111111; }
html,body { margin:0; min-height:100%; background:#ffffff; }
html,body,* { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { width:0!important; height:0!important; display:none!important; }
html { overflow-y:auto; }
body.cm-ready { overflow:auto; min-height:100dvh; background:#ffffff; color:var(--cm-text); font-family:var(--cm-font-sans); font-size:var(--cm-fs-md); font-weight:var(--cm-fw-regular); line-height:1.5; letter-spacing:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.cm-ready:not(.cm-timer-running):not(.cm-modal-open) { overflow-y:auto!important; overscroll-behavior-y:auto; touch-action:pan-y; }
body.cm-ready.cm-modal-open { overflow:hidden!important; }
body.cm-ready * { box-sizing:border-box; }
body.cm-ready button,body.cm-ready input,body.cm-ready select,body.cm-ready textarea { font:inherit; }
body.cm-ready button { color:inherit; }

/* Authentication gate */
body.cm-auth-body { overflow:hidden!important; background:#f3f1ec; }
.cm-auth-shell { width:100%; min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(460px,.95fr); color:#111; background:#f3f1ec; }
.cm-auth-story { min-height:100dvh; position:relative; isolation:isolate; overflow:hidden; padding:clamp(28px,4vw,58px); background:#111 url('./Assets/hero-cold-brew-v2.jpg') center/cover no-repeat; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.cm-auth-story:after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.2) 32%,rgba(0,0,0,.88)); }
.cm-auth-brand { display:flex; align-items:center; gap:12px; font-size:18px; letter-spacing:-.04em; text-transform:uppercase; }
.cm-auth-brand>img { width:42px; height:42px; border-radius:12px; display:block; object-fit:cover; box-shadow:0 8px 22px rgba(0,0,0,.24); }
.cm-auth-brand strong { font-size:18px; }
.cm-auth-story-copy { max-width:720px; padding:10vh 0 6vh; }
.cm-auth-story-copy>span { font-size:10px; font-weight:700; letter-spacing:.16em; opacity:.65; }
.cm-auth-story-copy h2 { margin:18px 0!important; font-size:clamp(42px,5.2vw,76px); font-weight:700; line-height:1.02; letter-spacing:-.065em; text-wrap:balance; }
.cm-auth-story-copy p { max-width:520px; color:rgba(255,255,255,.68); font-size:14px; line-height:1.75; }
.cm-auth-story>small { font-size:9px; font-weight:700; letter-spacing:.15em; opacity:.55; }
.cm-auth-form-side { min-height:100dvh; padding:42px clamp(32px,6vw,96px) 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cm-auth-form-card { width:100%; max-width:460px; }
.cm-auth-panel-head { margin-bottom:32px; }
.cm-auth-step { display:block; margin-bottom:14px; color:#8b6b37; font-size:10px; font-weight:700; letter-spacing:.14em; }
.cm-auth-panel-head h1,.cm-auth-message h1 { margin:0; font-size:clamp(32px,3.1vw,46px); font-weight:700; line-height:1.08; letter-spacing:-.055em; }
.cm-auth-panel-head p,.cm-auth-message p { margin:14px 0 0; color:#68645e; font-size:13px; line-height:1.7; }
.cm-auth-gate-form { display:grid; gap:17px; }
.cm-auth-field { display:grid; gap:8px; }
.cm-auth-field label { font-size:12px; font-weight:600; }
.cm-auth-input-wrap { position:relative; }
.cm-auth-input { appearance:none; width:100%; height:54px; padding:0 15px; border:1px solid #d8d3ca; border-radius:13px; outline:0; background:rgba(255,255,255,.74); color:#111; font:inherit; font-size:14px; transition:border-color .16s,box-shadow .16s,background .16s; }
.cm-auth-input::placeholder { color:#a09b93; }
.cm-auth-input:focus { border-color:#111; background:#fff; box-shadow:0 0 0 1px #111; }
.cm-auth-submit,.cm-auth-secondary,.cm-auth-text-btn { appearance:none; border:0; font:inherit; cursor:pointer; }
.cm-auth-submit { min-height:55px; margin-top:3px; padding:0 18px; border-radius:13px; background:#111; color:#fff!important; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:650; transition:transform .16s,background .16s; }
.cm-auth-submit:hover { background:#000; transform:translateY(-1px); }
.cm-auth-submit:disabled { opacity:.58; cursor:wait; transform:none; }
.cm-auth-submit>span { font-size:20px; font-weight:400; }
.cm-auth-secondary { min-height:52px; border:1px solid #cbc6bd; border-radius:13px; background:transparent; color:#111; font-size:13px; font-weight:600; }
.cm-auth-secondary:hover { border-color:#111; background:rgba(255,255,255,.55); }
.cm-auth-oauth { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cm-auth-provider { min-height:52px; padding:0 14px; border:1px solid #cbc6bd; border-radius:13px; background:rgba(255,255,255,.65); color:#111; display:flex; align-items:center; justify-content:center; gap:10px; font:inherit; cursor:pointer; transition:border-color .16s,background .16s,transform .16s; }
.cm-auth-provider:hover { border-color:#111; background:#fff; transform:translateY(-1px); }
.cm-auth-locale { position:absolute; top:22px; right:24px; z-index:2; display:flex; gap:3px; padding:3px; border:1px solid #d9d4ca; border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); }
.cm-auth-locale button { min-height:30px; padding:4px 10px; border:0; border-radius:999px; background:transparent; color:#777168; font:600 11px/1 var(--cm-font-body); cursor:pointer; }
.cm-auth-locale button.active { background:#111; color:#fff; }
.cm-auth-provider:disabled { opacity:.55; cursor:wait; transform:none; }
.cm-auth-provider strong { font-size:12px; font-weight:650; white-space:nowrap; }
.cm-auth-provider>span { width:20px; height:20px; display:grid; place-items:center; font-size:17px; font-weight:700; line-height:1; }
.cm-provider-google { color:#4285f4; font-family:Arial,sans-serif; }
.cm-provider-apple { color:#111; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.cm-auth-oauth-note { margin:-7px 2px 0; color:#827c73; font-size:10px; line-height:1.55; text-align:center; }
.cm-auth-text-btn { justify-self:center; padding:5px; background:transparent; color:#6c675f; font-size:12px; }
.cm-auth-text-btn:hover { color:#111; text-decoration:underline; text-underline-offset:4px; }
.cm-auth-divider { height:20px; display:flex; align-items:center; gap:12px; color:#938e85; font-size:10px; }
.cm-auth-divider:before,.cm-auth-divider:after { content:''; height:1px; flex:1; background:#d8d3ca; }
.cm-auth-notice,.cm-auth-error,.cm-auth-success { margin:0; padding:12px 13px; border-radius:11px; display:flex; align-items:flex-start; gap:9px; font-size:11px; line-height:1.55; }
.cm-auth-notice { background:#eae6de; color:#666057; }
.cm-auth-error { background:#f7e7e4; color:#9b2c20; }
.cm-auth-success { background:#e4eee4; color:#285d2e; }
.cm-auth-notice i,.cm-auth-error i,.cm-auth-success i { flex:none; margin-top:1px; font-size:15px; }
.cm-password-rules { display:flex; flex-wrap:wrap; gap:7px 16px; color:#8b857c; font-size:10px; }
.cm-password-rules span { display:flex; align-items:center; gap:5px; transition:color .16s; }
.cm-password-rules i { font-size:10px; }
.cm-password-rules span.valid { color:#31723a; }
.cm-password-rules span.valid i:before { content:'\2713'; font-family:inherit; font-style:normal; }
.cm-auth-privacy { width:100%; max-width:460px; margin:26px 0 0; color:#948f87; font-size:9px; line-height:1.5; text-align:center; }
.cm-auth-loading,.cm-auth-message { max-width:420px; text-align:center; }
.cm-auth-loading>span,.cm-auth-spinner { width:24px; height:24px; margin:0 auto 18px; border:2px solid #d2cdc4; border-top-color:#111; border-radius:50%; display:block; animation:cm-auth-spin .8s linear infinite; }
.cm-auth-spinner { width:16px; height:16px; margin:0 8px 0 0; border-color:rgba(255,255,255,.35); border-top-color:#fff; display:inline-block; }
.cm-auth-loading strong { display:block; font-size:17px; }
.cm-auth-loading p { margin:8px 0 0; color:#777168; font-size:12px; }
.cm-auth-message>span { width:58px; height:58px; margin:0 auto 18px; border-radius:18px; background:#111; color:#fff; display:grid; place-items:center; font-size:25px; }
.cm-auth-message code { padding:2px 5px; border-radius:5px; background:#e6e1d8; }
@keyframes cm-auth-spin { to { transform:rotate(360deg); } }
@media (max-width:430px) { .cm-auth-oauth { grid-template-columns:1fr; } }
@media (max-width:860px) {
  body.cm-auth-body { overflow:auto!important; }
  .cm-auth-shell { grid-template-columns:1fr; }
  .cm-auth-story { min-height:280px; padding:24px; }
  .cm-auth-story-copy { padding:48px 0 12px; }
  .cm-auth-story-copy h2 { margin:12px 0!important; font-size:clamp(34px,10vw,52px); }
  .cm-auth-story-copy p,.cm-auth-story>small { display:none; }
  .cm-auth-form-side { min-height:auto; padding:42px 22px calc(38px + env(safe-area-inset-bottom)); justify-content:flex-start; }
}
@media (max-width:480px) {
  .cm-auth-story { min-height:238px; }
  .cm-auth-story-copy { padding-top:32px; }
  .cm-auth-panel-head h1 { font-size:34px; }
  .cm-auth-form-side { padding-inline:18px; }
}
#coffmeApp h1,#coffmeApp h2,#coffmeApp h3,#coffmeApp h4,#coffmeApp p { margin:0; }
#coffmeApp h1,#coffmeApp h2,#coffmeApp h3,#coffmeApp h4,#coffmeApp h5,#coffmeApp h6 { font-weight:var(--cm-fw-bold); text-wrap:balance; }
#coffmeApp p { text-wrap:pretty; }
#coffmeApp { min-height:100vh; min-height:100dvh; background:#ffffff; }
#coffmeApp :focus-visible { outline:2px solid color-mix(in srgb,var(--cm-text) 72%,transparent); outline-offset:2px; }
.cm-skip { position:fixed; top:-60px; left:16px; z-index:9999; padding:10px 14px; border-radius:10px; background:var(--cm-text); color:var(--cm-surface); }
.cm-skip:focus { top:12px; }
.cm-layout { min-height:100vh; display:grid; grid-template-columns:var(--cm-sidebar) minmax(0,1fr); }
.cm-sidebar { position:fixed; inset:0 auto 0 0; width:var(--cm-sidebar); padding:24px 18px; border-right:1px solid var(--cm-line); background:#ffffff; display:flex; flex-direction:column; z-index:40; }
[data-theme="dark"] .cm-sidebar { background:#181818; }
.cm-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 34px; font-family:var(--cm-font-display); font-size:var(--cm-fs-xl); font-weight:var(--cm-fw-bold); letter-spacing:-.05em; text-transform:uppercase; }
.cm-brand-mark { width:38px; height:38px; flex:none; border-radius:11px; display:block; object-fit:cover; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.cm-nav { display:grid; gap:6px; }
.cm-nav-btn { appearance:none; border:0; background:transparent; width:100%; min-height:46px; padding:0 12px; border-radius:11px; display:flex; align-items:center; gap:12px; color:var(--cm-muted); font-size:13px; font-weight:600; line-height:1.3; letter-spacing:.025em; cursor:pointer; text-align:left; transition:.18s ease; }
.cm-nav-btn:hover { background:var(--cm-surface-2); color:var(--cm-text); }
.cm-nav-btn.active { background:#111111; color:#ffffff; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.cm-nav-btn.active i { color:#ffffff; font-variation-settings:'FILL' 1; }
.cm-nav-btn i { font-size:20px; }
.cm-mobile-nav-icon { display:none; }
.cm-nav .cm-nav-btn>.hgi-stroke { display:none; }
.cm-nav .cm-mobile-nav-icon { display:inline-block; flex:none; color:currentColor; font-family:'Material Symbols Rounded'; font-size:22px; font-style:normal; font-weight:300; line-height:1; white-space:nowrap; direction:ltr; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; font-variation-settings:'FILL' 0,'opsz' 24; transition:color .18s ease,font-variation-settings .18s ease,transform .18s ease; }
.cm-nav .cm-nav-btn.active .cm-mobile-nav-icon { font-variation-settings:'FILL' 1,'opsz' 24; }
.cm-sidebar-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--cm-line); display:grid; gap:5px; }
.cm-mini-card { padding:15px; border:1px solid var(--cm-line); border-radius:var(--cm-r-md); background:color-mix(in srgb,var(--cm-surface) 82%,var(--cm-brand-soft)); }
.cm-mini-card strong { display:block; font-size:13px; margin-bottom:5px; }
.cm-mini-card span { color:var(--cm-muted); font-size:12px; line-height:1.45; }
.cm-main { grid-column:2; min-width:0; padding-top:78px; }
.cm-topbar { height:78px; padding:0 clamp(20px,4vw,48px); border:0; display:flex; align-items:center; justify-content:space-between; gap:18px; position:fixed; inset:0 0 auto var(--cm-sidebar); z-index:60; background:color-mix(in srgb,var(--cm-bg) 92%,transparent); backdrop-filter:blur(20px) saturate(1.2); }
.cm-page-heading { min-width:0; display:flex; align-items:center; gap:15px; }
.cm-page-heading>div:last-child { min-width:0; }
#cmBackAction:empty { display:none; }
.cm-back-link { appearance:none; min-height:38px; padding:0 10px 0 2px; border:0; border-right:1px solid var(--cm-line); background:transparent; color:var(--cm-muted); display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; cursor:pointer; transition:color .16s ease; }
.cm-back-link:hover { color:var(--cm-highlight-strong); }
.cm-back-link i { font-size:17px; }
.cm-page-heading small { display:block; color:var(--cm-muted); font-family:var(--cm-font-mono); font-size:var(--cm-fs-xs); font-weight:var(--cm-fw-medium); line-height:1.35; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.cm-page-heading h1 { font-family:var(--cm-font-display); font-size:var(--cm-fs-xl); font-weight:var(--cm-fw-semibold); line-height:1.2; letter-spacing:-.035em; }
.cm-topbar-tools { min-width:0; display:flex; align-items:center; gap:10px; }
.cm-top-actions { display:flex; align-items:center; gap:9px; }
.cm-sidebar-toggle { display:none; }
.cm-mobile-more-trigger,.cm-mobile-more-panel { display:none; }
.cm-content { max-width:1380px; margin:0 auto; padding:42px clamp(20px,4vw,52px) 88px; }
.cm-page { display:none; }
.cm-page.active { display:block; }
@keyframes cm-enter { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.cm-btn { border:1px solid var(--cm-line); background:var(--cm-surface); min-height:var(--cm-control-h); border-radius:var(--cm-control-radius); padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:var(--cm-fs-control); font-weight:var(--cm-fw-medium); line-height:1.2; letter-spacing:0; cursor:pointer; transition:.18s ease; text-decoration:none; }
.cm-btn.primary,.cm-btn.brand { font-weight:var(--cm-fw-semibold); }
.cm-btn:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--cm-brand) 62%,var(--cm-line)); box-shadow:0 7px 18px rgba(65,55,40,.08); }
.cm-btn:active { transform:none; }
.cm-btn.primary { background:var(--cm-text); color:var(--cm-surface); border-color:var(--cm-text); }
.cm-btn.brand { background:var(--cm-brand); color:#fff; border-color:var(--cm-brand); box-shadow:0 8px 20px color-mix(in srgb,var(--cm-brand) 20%,transparent); }
.cm-btn.brand:hover { background:var(--cm-brand-dark); border-color:var(--cm-brand-dark); }
.cm-btn.danger { color:var(--cm-danger); }
.cm-btn.ghost { border-color:transparent; background:transparent; }
.cm-icon-btn { width:var(--cm-control-h); height:var(--cm-control-h); padding:0; border:1px solid var(--cm-line); border-radius:var(--cm-control-radius); background:var(--cm-surface); display:grid; place-items:center; cursor:pointer; transition:.18s ease; }
.cm-icon-btn:hover { border-color:var(--cm-brand); color:var(--cm-brand-dark); background:var(--cm-brand-soft); }
.cm-icon-btn i { font-size:19px; }
.cm-solid-icon,.cm-heart-icon { width:18px; height:18px; flex:none; display:block; }
.cm-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:18px; margin-bottom:30px; }
.cm-hero-main { min-height:420px; border-radius:var(--cm-r-lg); padding:clamp(24px,4vw,46px); overflow:hidden; position:relative; isolation:isolate; background:#111; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--cm-shadow); border:1px solid #1d1d1d; }
.cm-hero-media { position:absolute; inset:0; z-index:-1; overflow:hidden; background:#111; }
.cm-hero-media-layer { position:absolute; inset:-1px; background-size:cover; background-position:center; transform:scale(1); backface-visibility:hidden; will-change:opacity,transform; }
.cm-hero-media-layer.current { opacity:1; }
.cm-hero-media-layer.next { opacity:0; transform:scale(1.018); transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .78s cubic-bezier(.22,.61,.36,1); }
.cm-hero-media-layer.next.visible { opacity:1; transform:scale(1); }
.cm-hero-media-layer.slide-0 { background-color:#fff; background-image:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 34%,rgba(255,255,255,.08) 72%),url('./Assets/hero-brew-lift-v2.jpg'); }
.cm-hero-media-layer.slide-1 { background-image:linear-gradient(90deg,rgba(22,4,0,.92) 0%,rgba(30,6,0,.58) 43%,rgba(20,0,0,.05) 78%),url('./Assets/hero-cold-brew-v2.jpg'); }
.cm-hero-media-layer.slide-2 { background-image:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.06) 78%),url('./Assets/hero-hot-pour-v2.jpg'); }
.cm-hero-copy { position:relative; z-index:1; transition:opacity .18s ease,transform .24s cubic-bezier(.22,.61,.36,1); }
.cm-hero-copy.out { opacity:0; transform:translateY(8px); }
.cm-hero-main:after { display:none; }
.cm-eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:var(--cm-fs-xs); font-weight:var(--cm-fw-bold); opacity:.72; margin-bottom:12px; }
.cm-hero-main h2 { max-width:760px; font-family:var(--cm-font-display); font-size:clamp(34px,4.8vw,64px); font-weight:var(--cm-fw-semibold); line-height:.96; letter-spacing:-.055em; margin:0 0 18px; }
.cm-hero-main p { max-width:560px; font-size:var(--cm-fs-md); font-weight:var(--cm-fw-regular); line-height:1.65; color:rgba(255,255,255,.7); }
.cm-hero-main.slide-0 { background-color:#fff; color:#111; border-color:#e7e7e7; }
.cm-hero-main.slide-0 p { color:rgba(0,0,0,.6); }
.cm-hero-main.slide-0 .cm-hero-actions .cm-btn { background:#111; color:#fff; border-color:#111; }
.cm-hero-main.slide-0 .cm-hero-actions .cm-btn.secondary { background:rgba(255,255,255,.82); color:#111; border-color:rgba(0,0,0,.2); }
.cm-hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.cm-hero-actions .cm-btn { background:#fff; color:#000; border-color:#fff; }
.cm-hero-actions .cm-btn.secondary { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.cm-hero-side { border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); padding:24px; background:var(--cm-surface); display:flex; flex-direction:column; overflow:visible; box-shadow:0 10px 32px rgba(0,0,0,.05); }
.cm-hero-side h3 { font-size:18px; margin-bottom:5px; }
.cm-hero-side>p { font-size:13px; color:var(--cm-muted); line-height:1.55; }
.cm-week-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.cm-week-head p { color:var(--cm-muted); font-size:13px; }
.cm-week-head .cm-btn { min-height:32px; padding:0 8px; white-space:nowrap; }
.cm-caffeine-total { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:22px 0 12px; border-bottom:1px solid var(--cm-line); }
.cm-caffeine-total>span { color:var(--cm-muted); font-size:12px; font-weight:var(--cm-fw-medium); }
.cm-caffeine-total strong { font-family:var(--cm-font-display); font-size:40px; font-weight:var(--cm-fw-bold); line-height:.9; letter-spacing:-.05em; }
.cm-caffeine-total small { font-family:var(--cm-font-sans); font-size:12px; font-weight:var(--cm-fw-medium); letter-spacing:0; color:var(--cm-muted); }
.cm-number { display:inline-block; color:currentColor; font-family:var(--cm-font-sans); font-weight:900; font-variant-numeric:tabular-nums; line-height:1; vertical-align:baseline; }
.cm-number,.cm-list-icon,.cm-detail-step>span,.cm-step-editor-title>span:first-child,.cm-wizard-progress button>span,.cm-insight-ranking>span,.cm-brew-plan-steps>div>span,.cm-brew-timeline article>span,.cm-immersive-step-list li b {
  font-family:var(--cm-font-sans);
  font-weight:900!important;
  font-variant-numeric:tabular-nums;
  -webkit-text-stroke:.16px currentColor;
}
.cm-number.light { color:#fff; }
.cm-caffeine-total .cm-number { font-size:34px; }
.cm-streak { margin:auto 0 0; display:flex; align-items:end; gap:6px; height:124px; position:relative; }
.cm-streak-day { flex:1; min-width:12px; height:100%; padding:0; border:0; background:transparent; position:relative; cursor:pointer; }
.cm-streak-fill { position:absolute; left:0; right:0; bottom:0; display:block; min-height:4px; background:var(--cm-brand-soft); transition:background .15s,transform .15s; }
.cm-streak-day.on .cm-streak-fill { background:var(--cm-brand); }
.cm-streak-day:hover .cm-streak-fill,.cm-streak-day:focus-visible .cm-streak-fill { transform:scaleX(1.14); }
.cm-day-preview { position:absolute; z-index:20; left:50%; bottom:calc(100% + 10px); width:184px; padding:11px 12px; border:1px solid var(--cm-line); background:var(--cm-text); color:var(--cm-surface); text-align:left; opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:.15s ease; pointer-events:none; box-shadow:var(--cm-shadow); }
.cm-streak-day:hover .cm-day-preview,.cm-streak-day:focus-visible .cm-day-preview { opacity:1; visibility:visible; transform:translate(-50%,0); }
.cm-streak-day:first-child .cm-day-preview { left:0; transform:translate(0,6px); }
.cm-streak-day:first-child:hover .cm-day-preview,.cm-streak-day:first-child:focus-visible .cm-day-preview { transform:translate(0,0); }
.cm-streak-day:last-child .cm-day-preview { left:auto; right:0; transform:translate(0,6px); }
.cm-streak-day:last-child:hover .cm-day-preview,.cm-streak-day:last-child:focus-visible .cm-day-preview { transform:translate(0,0); }
.cm-day-preview strong,.cm-day-preview em,.cm-day-preview small { display:block; min-width:0; }
.cm-day-preview strong { font-size:12px; }
.cm-day-preview em { margin-top:4px; font-style:normal; font-size:11px; opacity:.72; }
.cm-day-preview small { margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; opacity:.72; }
.cm-streak-labels { display:flex; justify-content:space-between; margin-top:7px; color:var(--cm-muted); font-size:11px; font-weight:var(--cm-fw-medium); }
.cm-caffeine-note { margin-top:12px; color:var(--cm-muted)!important; font-size:10px!important; line-height:1.45!important; }
.cm-hero-side .cm-caffeine-note { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px!important; line-height:1.4!important; }
.cm-hero-side .cm-caffeine-note strong { color:var(--cm-text); font-size:12px; font-weight:var(--cm-fw-bold); }
.cm-hero-side .cm-caffeine-note span { text-align:right; }
.cm-section { margin-top:var(--cm-section-gap); }
.cm-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px; }
.cm-section-head h2 { font-family:var(--cm-font-display); font-size:var(--cm-fs-xl); font-weight:var(--cm-fw-semibold); line-height:1.3; letter-spacing:-.035em; }
.cm-section-head p { max-width:720px; color:var(--cm-muted); font-size:var(--cm-fs-sm); font-weight:var(--cm-fw-regular); line-height:1.65; margin-top:var(--cm-copy-gap); }
.cm-section-head .cm-btn.ghost,.cm-chart-head .cm-btn.ghost,.cm-week-head .cm-btn.ghost { flex:none; min-height:auto; margin:0; padding:4px 0; border:0; border-radius:0; background:transparent; color:var(--cm-highlight); box-shadow:none; line-height:1.3; }
.cm-section-head .cm-btn.ghost::after,.cm-chart-head .cm-btn.ghost::after,.cm-week-head .cm-btn.ghost::after { content:'→'; margin-left:6px; transition:transform .18s ease; }
.cm-section-head .cm-btn.ghost i,.cm-chart-head .cm-btn.ghost i,.cm-week-head .cm-btn.ghost i { display:none; }
.cm-section-head .cm-btn.ghost:hover,.cm-chart-head .cm-btn.ghost:hover,.cm-week-head .cm-btn.ghost:hover { transform:none; border-color:transparent; background:transparent; color:var(--cm-highlight-strong); box-shadow:none; text-decoration:underline; text-underline-offset:4px; }
.cm-section-head .cm-btn.ghost:hover::after,.cm-chart-head .cm-btn.ghost:hover::after,.cm-week-head .cm-btn.ghost:hover::after { transform:translateX(3px); }
[data-theme="dark"] .cm-section-head .cm-btn.ghost,[data-theme="dark"] .cm-chart-head .cm-btn.ghost,[data-theme="dark"] .cm-week-head .cm-btn.ghost { color:var(--cm-highlight); }

.cm-language { min-width:0; position:relative; }
.cm-language-trigger { width:max-content; max-width:min(220px,calc(100vw - 32px)); min-height:44px; padding:6px 12px 6px 7px; overflow:visible; border:1px solid var(--cm-line); border-radius:999px; background:var(--cm-surface); color:var(--cm-text); display:flex; align-items:center; gap:9px; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.cm-language-trigger:hover,.cm-language.open .cm-language-trigger { border-color:var(--cm-text); background:var(--cm-surface-2); }
.cm-language-trigger>i { flex:none; color:var(--cm-muted); font-size:13px; }
.cm-language.locked .cm-language-trigger { cursor:default; border-color:var(--cm-line); background:var(--cm-surface-2); color:var(--cm-muted); }
.cm-language.locked .cm-language-trigger:hover { border-color:var(--cm-line); background:var(--cm-surface-2); }
.cm-language-status,.cm-setting-status { padding:4px 8px; border-radius:999px; background:var(--cm-brand-soft); color:var(--cm-brand-dark); font-size:10px; font-style:normal; font-weight:700; line-height:1; white-space:nowrap; }
.cm-language-label { min-width:0; max-width:126px; overflow:hidden; padding:.08em 0 .12em; font-size:var(--cm-fs-control); font-weight:var(--cm-fw-medium); line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.cm-lang-flag { width:27px; height:27px; flex:none; overflow:hidden; border:1px solid color-mix(in srgb,var(--cm-line) 80%,transparent); border-radius:50%; background:#f5f5f5; display:block; }
.cm-lang-flag img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.cm-language-menu { position:absolute; z-index:120; top:calc(100% + 9px); right:0; width:218px; padding:7px; border:1px solid var(--cm-line); border-radius:14px; background:var(--cm-surface); box-shadow:0 18px 48px rgba(0,0,0,.14); }
.cm-language-menu button { appearance:none; width:100%; min-height:43px; padding:6px 9px; border:0; border-radius:9px; background:transparent; color:var(--cm-text); display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.cm-language-menu button:hover,.cm-language-menu button.active { background:var(--cm-surface-2); }
.cm-language-menu button>span:nth-child(2) { font-size:var(--cm-fs-sm); font-weight:var(--cm-fw-medium); }
.cm-language-menu button>i { font-size:15px; }
.cm-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cm-stat { min-height:118px; position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--cm-line); background:var(--cm-surface); border-radius:20px; padding:18px 34% 18px 20px; box-shadow:0 6px 20px rgba(0,0,0,.035); }
.cm-stat-content { position:relative; z-index:2; min-height:84px; display:flex; flex-direction:column; align-items:flex-start; }
.cm-stat.interactive { appearance:none; width:100%; color:var(--cm-text); text-align:left; cursor:pointer; transition:background .18s,color .18s,border-color .18s,transform .18s; }
.cm-stat.interactive:hover { background:var(--cm-surface); color:var(--cm-text); border-color:color-mix(in srgb,var(--cm-text) 34%,var(--cm-line)); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.065); }
.cm-stat.interactive:hover .cm-stat-label,.cm-stat.interactive:hover small { color:inherit; opacity:.72; }
.cm-stat.interactive .cm-stat-content>small { color:var(--cm-highlight); font-weight:600; opacity:1; }
.cm-stat.interactive:hover .cm-stat-art { transform:translate3d(-2px,-2px,0) scale(1.025); }
.cm-stat-label { color:var(--cm-muted); font-size:12px; font-weight:var(--cm-fw-medium); line-height:1.4; }
.cm-stat-value { margin-top:auto; display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.cm-stat-value strong { min-width:0; max-width:100%; display:block; overflow:hidden; font-family:var(--cm-font-display); font-size:var(--cm-fs-2xl); font-weight:var(--cm-fw-semibold); line-height:1; letter-spacing:-.04em; text-overflow:ellipsis; }
.cm-stat-value strong .cm-number { font-size:27px; }
.cm-stat-value span { color:var(--cm-muted); font-size:11px; font-weight:var(--cm-fw-medium); }
.cm-stat-value .cm-number { color:var(--cm-text); }
.cm-stat small { display:block; margin-top:6px; color:var(--cm-muted); font-size:10px; line-height:1.3; white-space:nowrap; }
.cm-stat-art { position:absolute; z-index:1; width:112px; height:106px; right:3px; bottom:-2px; object-fit:contain; object-position:center; pointer-events:none; user-select:none; opacity:.9; transform:translate3d(0,0,0); transition:transform .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease; }
[data-theme="dark"] .cm-stat-art { opacity:.82; }
.cm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cm-card { border:1px solid var(--cm-line); background:var(--cm-surface); border-radius:var(--cm-panel-radius); padding:var(--cm-panel-pad); box-shadow:0 8px 28px rgba(0,0,0,.045); }
.cm-list { display:grid; }
.cm-list-row { min-height:74px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; border-bottom:1px solid var(--cm-line); }
.cm-list-row:last-child { border-bottom:0; }
.cm-list-icon { width:42px; height:42px; border-radius:11px; background:var(--cm-brand-soft); color:var(--cm-brand-dark); display:grid; place-items:center; font-family:var(--cm-font-mono); font-weight:700; font-size:12px; }
.cm-list-score-icon { width:46px; height:46px; border-radius:10px; background:#111; color:#fff; font-family:var(--cm-font-display); font-size:14px; font-weight:var(--cm-fw-bold); letter-spacing:-.025em; }
.cm-list-score-icon .cm-number { color:#fff; font-size:16px; font-weight:900; }
.cm-list-copy { min-width:0; }
.cm-list-copy strong { display:block; font-size:var(--cm-fs-md); font-weight:var(--cm-fw-semibold); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-list-copy span { display:block; color:var(--cm-muted); font-size:var(--cm-fs-sm); font-weight:var(--cm-fw-regular); line-height:1.55; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-row-actions { display:flex; align-items:center; gap:6px; }
.cm-row-actions .cm-icon-btn { width:34px; height:34px; border:0; background:transparent; }
.cm-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cm-search { flex:1; min-width:210px; position:relative; }
.cm-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--cm-muted); }
.cm-input,.cm-select,.cm-textarea { width:100%; border:1px solid var(--cm-line); color:var(--cm-text); background:var(--cm-surface); border-radius:var(--cm-control-radius); outline:none; transition:.15s; }
.cm-input,.cm-select { height:var(--cm-control-h); padding:0 13px; }
.cm-search .cm-input { padding-left:41px; }
.cm-textarea { min-height:105px; padding:12px 13px; resize:vertical; line-height:1.55; }
.cm-input:focus,.cm-select:focus,.cm-textarea:focus { border-color:var(--cm-text); box-shadow:0 0 0 1px var(--cm-text); }
#coffmeApp .cm-input:focus-visible,#coffmeApp .cm-select:focus-visible,#coffmeApp .cm-textarea:focus-visible { outline:none; }
.cm-recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px); }
.cm-recipe { container-type:inline-size; position:relative; width:100%; min-height:270px; aspect-ratio:347/270; border:1px solid var(--cm-card-border); border-radius:clamp(20px,6.92cqi,28px); background:#ffffff; overflow:hidden; transition:transform .22s cubic-bezier(.2,.75,.25,1),border-color .22s ease; cursor:pointer; box-shadow:none; }
.cm-recipe:hover { transform:translateY(-3px); border-color:var(--cm-card-border-hover); box-shadow:none; }
.cm-recipe:focus-within { border-color:rgba(0,0,0,.14); box-shadow:none; }
.cm-recipe-link { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
/* Shared adaptive media layout for recipe and dripper cards. */
.cm-recipe-top,.cm-dripper-media { height:52.6%; min-height:142px; position:relative; overflow:hidden; isolation:isolate; background:#f7f7f7; color:#111111; }
.cm-recipe-top:after,.cm-dripper-media:after { content:''; position:absolute; z-index:2; inset:0 38% 0 0; pointer-events:none; background:linear-gradient(90deg,#f7f7f7 76%,rgba(247,247,247,0)); }
.cm-recipe-method,.cm-dripper-tag { display:block; width:max-content; max-width:100%; margin-bottom:clamp(8px,2.3cqi,10px); padding:clamp(2px,.58cqi,3px) clamp(8px,2.31cqi,10px); overflow:hidden; border:0; border-radius:35px; background:#efa536; color:#272117; font-size:clamp(10px,2.88cqi,11px); font-weight:var(--cm-fw-bold); line-height:1.4; letter-spacing:0; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.cm-recipe-copy,.cm-dripper-card-copy { position:absolute; z-index:3; left:clamp(16px,4.61cqi,20px); right:36%; bottom:clamp(12px,3.46cqi,16px); min-width:0; overflow:visible; }
.cm-recipe-copy h3,.cm-dripper-card-copy h3 { display:-webkit-box; width:100%; min-width:0; overflow:hidden; padding-bottom:.08em; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; white-space:normal; text-wrap:wrap; font-family:var(--cm-font-display); font-size:clamp(21px,6.5cqi,27px); font-weight:var(--cm-fw-bold); line-height:1.16; letter-spacing:-.04em; }
.cm-recipe-copy p,.cm-dripper-card-copy p { display:block; width:100%; min-width:0; max-height:1.3em; overflow:hidden; margin-top:clamp(3px,1.15cqi,5px)!important; color:rgba(0,0,0,.2); font-size:clamp(10px,3.46cqi,13px); font-weight:var(--cm-fw-regular); line-height:1.3; text-overflow:ellipsis; white-space:nowrap!important; }
.cm-recipe-dripper { position:absolute; z-index:1; width:60%; height:115%; right:-17%; top:8%; object-fit:contain; transform:rotate(-12.57deg); transform-origin:50% 50%; filter:none; transition:transform .38s cubic-bezier(.2,.75,.25,1); pointer-events:none; }
.cm-recipe:hover .cm-recipe-dripper { transform:translate(-2%,1%) rotate(-17deg) scale(1.035); filter:none; }
.cm-card-monogram { position:absolute; z-index:1; right:clamp(-42px,-8cqi,-24px); top:52%; color:rgba(17,17,17,.055); font-family:var(--cm-font-display); font-size:clamp(132px,55cqi,210px); font-weight:900; font-style:normal; line-height:.72; letter-spacing:-.1em; transform:translateY(-48%) rotate(-10deg); transform-origin:50% 55%; pointer-events:none; user-select:none; transition:color .28s ease,transform .38s cubic-bezier(.2,.75,.25,1); }
.cm-recipe:hover .cm-recipe-monogram,.cm-recipe:focus-within .cm-recipe-monogram { color:rgba(17,17,17,.09); transform:translate(-6%,-50%) rotate(-14deg) scale(1.04); }
.cm-recipe-body { height:47.4%; min-height:128px; padding:clamp(18px,5.76cqi,24px) clamp(14px,4.61cqi,20px) clamp(14px,4.61cqi,20px); position:relative; background:#ffffff; display:flex; flex-direction:column; }
.cm-recipe-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:0; margin:0 clamp(16px,5.76cqi,24px); padding:0; }
.cm-recipe-meta>div { min-width:0; }
.cm-recipe-meta>div:nth-child(2) { text-align:center; }
.cm-recipe-meta>div:last-child { text-align:right; }
.cm-recipe-meta span { display:block; color:#6b6b6b; opacity:.4; font-size:clamp(10px,2.88cqi,11px); font-weight:var(--cm-fw-regular); line-height:1.2; letter-spacing:0; }
.cm-recipe-meta strong { display:block; color:#111111; font-size:clamp(11px,3.46cqi,14px); font-weight:var(--cm-fw-bold); line-height:1.2; margin-top:clamp(3px,1.15cqi,5px); white-space:nowrap; }
.cm-recipe-actions { position:relative; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) clamp(40px,11.53cqi,48px); gap:clamp(8px,2.31cqi,10px); margin-top:auto; }
.cm-recipe-actions .cm-btn { min-height:clamp(40px,11.53cqi,48px); border-radius:54px; box-shadow:none; font-size:clamp(13px,4.03cqi,15px); font-weight:var(--cm-fw-semibold); }
.cm-recipe-actions .cm-btn.brand { background:#111111; border-color:#111111; color:#ffffff; }
.cm-recipe-actions .cm-btn.brand:hover { background:#000000; border-color:#000000; }
.cm-recipe-actions .cm-btn .cm-solid-icon { width:clamp(17px,5.18cqi,20px); height:clamp(17px,5.18cqi,20px); }
.cm-recipe-actions .cm-favorite-btn { position:relative; z-index:4; width:clamp(40px,11.53cqi,48px); height:clamp(40px,11.53cqi,48px); padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.05); color:#777777; display:grid; place-items:center; cursor:pointer; transition:transform .18s ease,background .18s ease,color .18s ease; }
.cm-recipe-actions .cm-favorite-btn .cm-heart-icon { width:clamp(18px,5.18cqi,20px); height:clamp(18px,5.18cqi,20px); }
.cm-recipe-actions .cm-favorite-btn:hover { transform:scale(1.05); background:rgba(0,0,0,.09); }
.cm-recipe-actions .cm-favorite-btn.active { background:rgba(0,0,0,.05); color:#ef2d32; box-shadow:none; }
.cm-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) minmax(112px,140px) auto auto; align-items:center; gap:8px; padding:8px; border:1px solid var(--cm-line); border-radius:18px; background:#ffffff; box-shadow:none; }
[data-theme="dark"] .cm-toolbar { background:#181818; }
.cm-toolbar>.cm-search { min-width:0; }
.cm-toolbar>.cm-btn { min-height:44px; padding-inline:14px; white-space:nowrap; }
.cm-toolbar .cm-search .cm-input { border-color:transparent; background:transparent; }
.cm-toolbar .cm-search .cm-input:focus { background:var(--cm-surface); border-color:var(--cm-text); }
.cm-toolbar>.cm-select { border-color:transparent; background:var(--cm-surface-2); }
.cm-empty { min-height:180px; padding:44px 24px; text-align:center; color:var(--cm-muted); border:1px dashed var(--cm-line); border-radius:var(--cm-panel-radius); display:grid; place-content:center; }
.cm-empty i { display:block; font-size:30px; margin-bottom:10px; }
.cm-timer-wrap { max-width:860px; margin:0 auto; }
.cm-timer-card { padding:clamp(24px,5vw,48px); border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); background:var(--cm-surface); text-align:center; }
.cm-timer-setup { max-width:520px; margin:0 auto; }
.cm-timer-setup h2 { font-family:var(--cm-font-display); font-size:32px; font-weight:var(--cm-fw-semibold); letter-spacing:-.045em; margin-bottom:8px; }
.cm-timer-setup p { color:var(--cm-muted); font-size:var(--cm-fs-md); font-weight:var(--cm-fw-regular); line-height:1.65; margin-bottom:24px; }
.cm-field { display:grid; gap:7px; text-align:left; margin-bottom:15px; }
.cm-field label { font-size:var(--cm-fs-sm); font-weight:var(--cm-fw-semibold); }
.cm-field-hint { color:var(--cm-muted); font-size:11px; }
.cm-timer-ring { width:min(300px,75vw); aspect-ratio:1; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--cm-brand) var(--progress),var(--cm-surface-2) 0); position:relative; }
.cm-timer-ring:after { content:''; position:absolute; inset:15px; border-radius:50%; background:var(--cm-surface); }
.cm-timer-time { z-index:1; font-variant-numeric:tabular-nums; }
.cm-timer-time strong { display:block; font-size:58px; letter-spacing:-.065em; }
.cm-timer-time span { color:var(--cm-muted); font-size:12px; }
.cm-step-title { font-family:var(--cm-font-display); font-size:var(--cm-fs-2xl); font-weight:var(--cm-fw-semibold); letter-spacing:-.04em; margin-bottom:8px; }
.cm-step-note { color:var(--cm-muted); font-size:var(--cm-fs-md); font-weight:var(--cm-fw-regular); margin-bottom:24px; }
.cm-timer-controls { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.cm-steps { display:grid; gap:8px; margin-top:24px; text-align:left; }
.cm-step-row { padding:12px 14px; border-radius:10px; background:var(--cm-surface-2); display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--cm-muted); }
.cm-step-row.active { background:var(--cm-brand-soft); color:var(--cm-brand-dark); font-weight:var(--cm-fw-semibold); }
.cm-insight-toolbar { min-height:116px; margin-bottom:28px; padding:0; border:0; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.cm-insight-toolbar .cm-kicker { margin-bottom:8px; color:var(--cm-highlight-strong); }
.cm-insight-toolbar h2 { font-family:var(--cm-font-display); font-size:clamp(28px,3vw,42px); font-weight:var(--cm-fw-semibold); line-height:1.16; letter-spacing:-.05em; }
.cm-insight-toolbar p { max-width:620px; margin-top:9px!important; color:var(--cm-muted); font-size:12px; line-height:1.65; }
.cm-period-switch { flex:none; padding:4px; border:0; border-radius:999px; background:var(--cm-surface-2); display:grid; grid-template-columns:repeat(3,58px); gap:0; }
.cm-period-switch button { appearance:none; min-height:38px; border:0; border-radius:999px; background:transparent; color:var(--cm-muted); font-size:12px; font-weight:600; cursor:pointer; transition:color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease; }
.cm-period-switch button:hover { color:var(--cm-text); }
.cm-period-switch button.active { background:#111111; color:#ffffff; box-shadow:0 7px 18px rgba(0,0,0,.15); }
.cm-period-tools { flex:none; display:grid; justify-items:end; gap:9px; }
.cm-period-nav { display:grid; grid-template-columns:34px minmax(132px,auto) 34px; align-items:center; gap:5px; }
.cm-period-nav button { appearance:none; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--cm-surface-2); color:var(--cm-text); display:grid; place-items:center; cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.cm-period-nav button:hover:not(:disabled) { background:var(--cm-text); color:var(--cm-surface); transform:translateY(-1px); }
.cm-period-nav button:disabled { opacity:.32; cursor:not-allowed; }
.cm-period-nav button i { font-size:16px; }
.cm-period-nav strong { min-width:0; color:var(--cm-muted); font-size:12px; font-weight:600; text-align:center; white-space:nowrap; }
.cm-records-panel { padding:clamp(22px,3vw,30px); border:1px solid var(--cm-line); border-radius:var(--cm-panel-radius); background:var(--cm-surface); }
.cm-records-panel .cm-kicker { margin-bottom:7px; color:var(--cm-highlight-strong); }
.cm-table { width:100%; border-collapse:collapse; }
.cm-table th { padding:10px 12px; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--cm-muted); border-bottom:1px solid var(--cm-line); }
.cm-table td { padding:14px 12px; border-bottom:1px solid var(--cm-line); font-size:13px; vertical-align:middle; }
.cm-table tr:last-child td { border-bottom:0; }
.cm-table tbody tr { transition:background .15s ease; }
.cm-table tbody tr:hover { background:color-mix(in srgb,var(--cm-brand-soft) 58%,transparent); }
.cm-score { display:inline-flex; align-items:center; gap:5px; color:var(--cm-text); font-weight:700; }
.cm-bars { height:230px; display:flex; align-items:end; gap:9px; padding-top:25px; }
.cm-bar-item { flex:1; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:8px; }
.cm-bar { width:100%; max-width:42px; min-height:4px; background:var(--cm-brand); border-radius:7px 7px 2px 2px; }
.cm-bar-item span { color:var(--cm-muted); font-size:11px; }
.cm-donut-wrap { display:flex; align-items:center; justify-content:center; gap:24px; min-height:230px; }
.cm-donut { width:145px; height:145px; border-radius:50%; background:conic-gradient(var(--cm-brand) 0 42%,#555 42% 70%,#aaa 70% 88%,var(--cm-surface-2) 88%); display:grid; place-items:center; }
.cm-donut:after { content:''; width:88px; height:88px; border-radius:50%; background:var(--cm-surface); }
.cm-legend { display:grid; gap:9px; font-size:12px; }
.cm-legend span:before { content:''; width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--c); margin-right:8px; }
.cm-settings { width:min(920px,100%); max-width:none; display:grid; gap:16px; }
.cm-setting-row { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--cm-line); }
.cm-setting-row:last-child { border-bottom:0; }
.cm-setting-copy strong { font-size:13px; line-height:1.4; display:block; }
.cm-setting-copy span { font-size:12px; line-height:1.55; color:var(--cm-muted); display:block; margin-top:5px; }
.cm-switch { width:46px; height:26px; border:0; border-radius:20px; background:var(--cm-line); position:relative; cursor:pointer; flex:none; }
.cm-switch:after { content:''; width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:.18s; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.cm-switch.on { background:var(--cm-brand); }
.cm-switch.on:after { transform:translateX(20px); background:var(--cm-surface); }
.cm-modal-wrap { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.cm-modal-wrap.open { display:flex; }
.cm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.cm-modal { width:min(760px,100%); max-height:min(840px,92vh); overflow:hidden; position:relative; background:var(--cm-surface); border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); box-shadow:0 30px 90px rgba(43,36,27,.25); display:flex; flex-direction:column; }
.cm-modal-head { position:relative; z-index:5; flex:none; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--cm-line); background:var(--cm-surface); }
.cm-modal-head h2 { font-family:var(--cm-font-display); font-size:var(--cm-fs-xl); font-weight:var(--cm-fw-semibold); line-height:1.25; letter-spacing:-.035em; }
.cm-modal-body { min-width:0; min-height:0; flex:1; padding:22px; overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; overscroll-behavior-y:contain; touch-action:pan-y; }
.cm-recipe-modal { width:min(820px,calc(100vw - 40px)); height:min(900px,94vh); max-height:min(900px,94vh); overflow:hidden; border-radius:24px; border-color:var(--cm-card-border); box-shadow:0 28px 80px rgba(0,0,0,.18); display:flex; flex-direction:column; }
.cm-recipe-modal .cm-modal-head { padding:20px 28px 16px; border-bottom:0; }
.cm-recipe-modal .cm-modal-head .cm-icon-btn { width:44px; height:44px; border-radius:13px; }
.cm-recipe-modal .cm-modal-body { padding:26px 30px 0; }
.cm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cm-field.full { grid-column:1/-1; }
.cm-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:24px; }
.cm-action-spacer { flex:1; }
.cm-rating { display:flex; gap:6px; }
.cm-rating button { width:39px; height:39px; border:1px solid var(--cm-line); background:var(--cm-surface); border-radius:9px; cursor:pointer; color:var(--cm-muted); }
.cm-rating button.on { background:var(--cm-text); border-color:var(--cm-text); color:var(--cm-surface); }
.cm-tags { display:flex; flex-wrap:wrap; gap:7px; }
.cm-tag { min-height:34px; padding:0 11px; border:1px solid var(--cm-line); border-radius:999px; background:var(--cm-surface); font-size:12px; cursor:pointer; }
.cm-tag.on { border-color:var(--cm-brand); background:var(--cm-brand-soft); color:var(--cm-brand-dark); }
.cm-toast-stack { position:fixed; right:18px; bottom:18px; z-index:500; display:grid; gap:8px; }
.cm-toast { min-width:240px; max-width:360px; padding:13px 15px; border-radius:12px; background:var(--cm-text); color:var(--cm-surface); box-shadow:var(--cm-shadow); font-size:12px; animation:cm-toast .22s ease both; }
@keyframes cm-toast { from{opacity:0;transform:translateY(8px)} }
.cm-mobile-nav { display:none; }
.cm-mobile-only { display:none; }
.cm-file-input { display:none; }
.cm-danger-zone { border-color:color-mix(in srgb,var(--cm-danger) 35%,var(--cm-line)); }
.cm-muted { color:var(--cm-muted); line-height:1.6; }
.cm-mt { margin-top:16px; }

/* Immersive brew workspace */
.cm-timer-mode #coffmeApp,.cm-timer-mode .cm-layout { background:#161616; }
.cm-timer-mode .cm-layout { display:block; grid-template-columns:minmax(0,1fr)!important; }
.cm-timer-mode .cm-sidebar,.cm-timer-mode .cm-mobile-nav { display:none; }
.cm-timer-mode .cm-main { width:100%; min-height:100vh; grid-column:1/-1; }
.cm-timer-mode .cm-top-actions [data-action="open-brew"] { display:none; }
.cm-timer-mode .cm-topbar { left:0!important; background:#161616; color:#ffffff; border-bottom-color:#343434; }
.cm-timer-mode .cm-page-heading { margin-left:0!important; }
.cm-timer-mode .cm-sidebar-toggle { display:none!important; }
.cm-timer-mode .cm-page-heading small { color:#9c9c9c; }
.cm-timer-mode .cm-content { max-width:none; padding:0; }
.cm-timer-mode #cm-page-timer { min-height:calc(100vh - 76px); background:#161616; color:#ffffff; }
.cm-timer-mode .cm-timer-wrap { max-width:none; min-height:inherit; }
.cm-timer-mode .cm-timer-card { min-height:inherit; border:0; border-radius:0; background:#161616; color:#ffffff; display:grid; place-items:center; padding:clamp(36px,6vw,88px) clamp(20px,8vw,120px); }
.cm-timer-mode .cm-timer-setup { width:min(780px,100%); max-width:none; }
.cm-timer-mode .cm-eyebrow { color:#aaa !important; }
.cm-timer-mode .cm-timer-setup h2 { font-size:clamp(42px,7vw,84px); line-height:.92; margin-bottom:18px; }
.cm-timer-mode .cm-timer-setup>p { max-width:610px; margin:0 auto 38px; color:#aaa; }
.cm-timer-mode .cm-field label,.cm-timer-mode .cm-field-hint { color:#c7c7c7; }
.cm-timer-mode .cm-select { height:52px; border-color:#454545; background:#111; color:#fff; }
.cm-timer-mode .cm-timer-setup>.cm-card { border:0; border-top:1px solid #3a3a3a; border-bottom:1px solid #3a3a3a; border-radius:0; background:transparent; padding:24px 0; }
.cm-timer-mode .cm-timer-setup>.cm-card .cm-list-copy span { color:#999; }
.cm-timer-mode .cm-step-row { border-bottom:1px solid #292929; border-radius:0; background:transparent; color:#aaa; }
.cm-timer-mode .cm-step-row:last-child { border-bottom:0; }
.cm-timer-mode .cm-step-row.active { background:#fff; color:#000; }
.cm-timer-mode .cm-btn.brand,.cm-timer-mode .cm-btn.primary { background:#fff; color:#000; border-color:#fff; }
.cm-timer-mode .cm-btn:not(.brand):not(.primary) { background:transparent; color:#fff; border-color:#555; }
.cm-timer-mode .cm-timer-ring { background:conic-gradient(#fff var(--progress),#272727 0); }
.cm-timer-mode .cm-timer-ring:after { background:#161616; }
.cm-timer-mode .cm-timer-time span,.cm-timer-mode .cm-step-note { color:#aaa; }
.cm-timer-mode .cm-top-actions .cm-btn.primary { background:#ffffff; color:#111111; border-color:#ffffff; }

/* Inline post-brew record */
.cm-completion-log { width:min(760px,100%); margin:28px auto 0; padding:clamp(22px,4vw,34px); border:1px solid #404040; border-radius:20px; background:#202020; color:#ffffff; text-align:left; box-shadow:0 24px 64px rgba(0,0,0,.24); }
.cm-completion-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid #3d3d3d; }
.cm-completion-head h3,.cm-completion-log.saved h3 { font-family:var(--cm-font-display); font-size:var(--cm-fs-2xl); font-weight:var(--cm-fw-semibold); letter-spacing:-.04em; }
.cm-completion-head p,.cm-completion-log.saved p { margin-top:6px!important; color:#aaaaaa; font-size:var(--cm-fs-sm); }
.cm-completion-head>span { color:#8f8f8f; font-family:var(--cm-font-mono); font-size:var(--cm-fs-xs); white-space:nowrap; }
.cm-completion-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cm-completion-grid .cm-field { margin:0; }
.cm-completion-grid .full { grid-column:1/-1; }
.cm-completion-log .cm-field label { color:#dddddd; }
.cm-completion-log .cm-rating button { border-color:#4a4a4a; background:#161616; color:#aaaaaa; }
.cm-completion-log .cm-rating button.on { border-color:#ffffff; background:#ffffff; color:#111111; }
.cm-completion-log .cm-tag { border-color:#4a4a4a; background:#161616; color:#bbbbbb; }
.cm-completion-log .cm-tag.on { border-color:#ffffff; background:#ffffff; color:#111111; }
.cm-completion-log .cm-textarea { min-height:96px; border-color:#4a4a4a; background:#161616; color:#ffffff; }
.cm-completion-log .cm-textarea::placeholder { color:#777777; }
.cm-completion-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:22px; }
.cm-completion-log.saved { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px 20px; }
.cm-completion-icon { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#ffffff; color:#111111; font-size:24px; }
.cm-completion-log.saved .cm-eyebrow { margin-bottom:5px; color:#ffffff!important; }
.cm-completion-log.saved .cm-completion-actions { grid-column:1/-1; margin-top:4px; }

/* Editorial statistics sections */
.cm-insight-panel { border-top:1px solid var(--cm-line); padding:22px 0 0; background:transparent; }
.cm-insight-target { scroll-margin-top:110px; }
.cm-caffeine-panel { display:grid; grid-template-columns:minmax(280px,32%) minmax(0,1fr); border:1px solid var(--cm-line); background:var(--cm-surface); }
.cm-caffeine-overview { padding:clamp(24px,3vw,38px); background:#151515; color:#ffffff; display:flex; flex-direction:column; min-height:390px; }
.cm-kicker { display:block; margin-bottom:14px; color:rgba(255,255,255,.58); font:600 10px/1.2 var(--cm-font-sans); letter-spacing:.16em; }
.cm-caffeine-overview h2 { max-width:260px; font-family:var(--cm-font-display); font-size:clamp(26px,2.6vw,38px); font-weight:var(--cm-fw-semibold); line-height:1; letter-spacing:-.045em; }
.cm-caffeine-overview>div:first-child>p { max-width:290px; margin-top:14px; color:rgba(255,255,255,.64); font-size:12px; line-height:1.65; }
.cm-caffeine-primary { margin:auto 0 24px; padding-top:32px; }
.cm-caffeine-primary strong { display:block; font-family:var(--cm-font-display); font-size:clamp(58px,6vw,86px); font-weight:var(--cm-fw-semibold); line-height:.84; letter-spacing:-.07em; }
.cm-caffeine-primary span { display:block; margin-top:13px; font-size:11px; letter-spacing:.08em; opacity:.62; }
.cm-caffeine-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.22); }
.cm-caffeine-facts>div { min-width:0; padding:16px 8px 0 0; }
.cm-caffeine-facts span,.cm-caffeine-facts strong { display:block; }
.cm-caffeine-facts span { font-size:10px; opacity:.55; }
.cm-caffeine-facts strong { margin-top:5px; font-size:12px; white-space:nowrap; }
.cm-caffeine-overview .cm-caffeine-note { margin-top:22px; color:rgba(255,255,255,.48)!important; }
.cm-caffeine-chart { min-width:0; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; }
.cm-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:0; }
.cm-chart-head strong { font-size:13px; line-height:1.4; letter-spacing:.02em; }
.cm-chart-head span { display:block; margin-top:5px; color:var(--cm-muted); font-size:10px; line-height:1.5; }
.cm-caffeine-bars { height:290px; flex:1; gap:clamp(8px,1.4vw,20px); padding:28px 0 0; }
.cm-caffeine-bars .cm-bar-item { appearance:none; min-width:0; padding:0; border:0; background:transparent; color:var(--cm-text); cursor:pointer; }
.cm-caffeine-bars .cm-bar-item>strong { font-family:var(--cm-font-mono); font-size:10px; font-weight:600; }
.cm-caffeine-bars .cm-bar { max-width:54px; transition:opacity .15s,transform .15s; }
.cm-caffeine-bars .cm-bar-item:hover .cm-bar,.cm-caffeine-bars .cm-bar-item:focus-visible .cm-bar { opacity:.65; transform:scaleX(.88); }

/* Metric detail pages */
.cm-insight-detail { display:grid; gap:22px; }
.cm-insight-detail-hero { min-height:250px; padding:clamp(28px,4vw,52px); border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); background:var(--cm-surface); display:flex; align-items:flex-end; justify-content:space-between; gap:32px; overflow:hidden; }
.cm-insight-detail-hero>div:first-child { max-width:620px; }
.cm-insight-detail-hero>div:first-child>span { display:block; margin-bottom:16px; color:var(--cm-muted); font:600 10px/1.2 var(--cm-font-mono); letter-spacing:.14em; }
.cm-insight-detail-hero h2 { font-family:var(--cm-font-display); font-size:clamp(36px,5vw,68px); font-weight:var(--cm-fw-semibold); line-height:.98; letter-spacing:-.055em; }
.cm-insight-detail-hero p { max-width:560px; margin-top:16px!important; color:var(--cm-muted); font-size:13px; line-height:1.7; }
.cm-insight-detail-hero>div:last-child { min-width:190px; text-align:right; }
.cm-insight-detail-hero>div:last-child strong,.cm-insight-detail-hero>div:last-child span { display:block; }
.cm-insight-detail-hero>div:last-child strong { font-family:var(--cm-font-display); font-size:clamp(42px,5vw,72px); font-weight:var(--cm-fw-semibold); line-height:.9; letter-spacing:-.06em; }
.cm-insight-detail-hero.metric-methods>div:last-child strong { max-width:260px; margin-left:auto; overflow-wrap:anywhere; font-size:clamp(28px,3.2vw,46px); line-height:1; }
.cm-insight-detail-hero>div:last-child span { margin-top:12px; color:var(--cm-muted); font-size:11px; }
.cm-insight-detail-body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); gap:22px; align-items:start; }
.cm-insight-detail-body>.cm-insight-detail-panel:only-child { grid-column:1/-1; }
.cm-insight-detail-panel { min-width:0; padding:24px; border:1px solid var(--cm-line); border-radius:var(--cm-r-md); background:var(--cm-surface); }
.cm-detail-bars { height:290px; display:flex; align-items:end; gap:clamp(5px,1vw,12px); padding-top:28px; }
.cm-detail-bar { min-width:0; height:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }
.cm-detail-bar strong { color:var(--cm-muted); font:600 10px/1 var(--cm-font-mono); }
.cm-detail-bar i { width:100%; max-width:32px; min-height:3px; display:block; border-radius:5px 5px 1px 1px; background:var(--cm-text); }
.cm-detail-bar span { color:var(--cm-muted); font-size:10px; white-space:nowrap; }
.cm-distribution { display:grid; }
.cm-distribution-row { min-height:52px; display:grid; grid-template-columns:minmax(76px,auto) minmax(80px,1fr) 32px; align-items:center; gap:12px; border-bottom:1px solid var(--cm-line); }
.cm-distribution-row:last-child { border-bottom:0; }
.cm-distribution-row>span { overflow:hidden; color:var(--cm-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.cm-distribution-row>div { height:6px; overflow:hidden; border-radius:999px; background:var(--cm-surface-2); }
.cm-distribution-row i { height:100%; display:block; border-radius:inherit; background:var(--cm-text); }
.cm-distribution-row strong { text-align:right; font:600 12px/1 var(--cm-font-mono); }
.cm-insight-ranking { appearance:none; width:100%; min-height:70px; padding:0; border:0; border-bottom:1px solid var(--cm-line); background:transparent; color:var(--cm-text); display:grid; grid-template-columns:36px minmax(0,1fr) auto 20px; align-items:center; gap:12px; text-align:left; cursor:pointer; }
.cm-insight-ranking:last-child { border-bottom:0; }
.cm-insight-ranking>span { font:600 11px/1 var(--cm-font-mono); }
.cm-insight-ranking div,.cm-insight-ranking strong,.cm-insight-ranking small { min-width:0; display:block; }
.cm-insight-ranking div strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.cm-insight-ranking small { margin-top:4px; color:var(--cm-muted); font-size:10px; }
.cm-insight-ranking em { color:var(--cm-highlight); font-style:normal; font-size:12px; font-weight:600; white-space:nowrap; }
.cm-insight-ranking:hover { background:var(--cm-surface-2); }

/* Recipe detail */
.cm-detail-shell { display:grid; gap:24px; }
.cm-detail-back { width:max-content; }
.cm-detail-hero { min-height:310px; padding:clamp(30px,4vw,52px); border-radius:var(--cm-r-lg); background:#151515; color:#ffffff; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; box-shadow:none; position:relative; overflow:hidden; transition:background .3s ease; }
.cm-detail-hero:hover { background:#101010; }
.cm-detail-copy { position:relative; z-index:2; max-width:58%; padding-top:40px; display:flex; flex-direction:column; align-items:flex-start; }
.cm-detail-dripper { position:absolute; width:min(38vw,450px); height:120%; right:14%; bottom:-38%; object-fit:contain; transform:rotate(-8deg); transform-origin:52% 64%; filter:none; opacity:1; pointer-events:none; transition:transform .5s cubic-bezier(.2,.75,.25,1); }
.cm-detail-hero:hover .cm-detail-dripper { transform:translate(-4%,-2%) rotate(-13deg) scale(1.035); }
.cm-detail-monogram { position:absolute; z-index:1; right:5%; bottom:-.2em; color:rgba(255,255,255,.07); font-family:var(--cm-font-display); font-size:clamp(190px,31vw,430px); font-weight:900; line-height:.72; letter-spacing:-.1em; transform:rotate(-9deg); transform-origin:50% 70%; pointer-events:none; user-select:none; transition:color .3s ease,transform .5s cubic-bezier(.2,.75,.25,1); }
.cm-detail-hero:hover .cm-detail-monogram { color:rgba(255,255,255,.1); transform:translate(-3%,-2%) rotate(-13deg) scale(1.035); }
.cm-detail-actions { position:absolute; z-index:5; top:24px; right:24px; }
.cm-detail-copy .cm-eyebrow { margin-bottom:clamp(22px,2.4vw,34px); }
.cm-detail-hero h2 { max-width:700px; margin:0; font-family:var(--cm-font-display); font-size:clamp(38px,6vw,76px); font-weight:var(--cm-fw-semibold); line-height:1.01; letter-spacing:-.052em; text-wrap:balance; }
.cm-detail-hero p { max-width:600px; margin-top:clamp(24px,2.4vw,34px); color:rgba(255,255,255,.68); font-size:clamp(12px,1.1vw,15px); line-height:1.72; }
.cm-detail-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; }
.cm-detail-hero .cm-btn { color:#ffffff; border-color:rgba(255,255,255,.3); background:transparent; }
.cm-detail-hero .cm-btn.brand { color:#111111; border-color:#ffffff; background:#ffffff; }
.cm-detail-hero .cm-detail-favorite.active { color:#e12727; border-color:#ffffff; background:#ffffff; }
.cm-detail-favorite .cm-heart-icon { width:17px; height:17px; }
.cm-detail-more { position:relative; }
.cm-detail-more .cm-more-trigger { width:44px; padding:0; justify-content:center; font-size:14px; letter-spacing:2px; }
.cm-detail-more-menu { position:absolute; z-index:10; top:calc(100% + 8px); right:0; width:176px; padding:7px; border:1px solid rgba(0,0,0,.1); border-radius:13px; background:#fff; color:#111; box-shadow:0 16px 40px rgba(0,0,0,.2); }
.cm-detail-more-menu button { appearance:none; width:100%; min-height:42px; padding:0 11px; border:0; border-radius:9px; background:transparent; color:#111; display:flex; align-items:center; gap:10px; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.cm-detail-more-menu button:hover,.cm-detail-more-menu button:focus-visible { background:#f4f4f4; outline:none; }
.cm-detail-more-menu button.danger { color:#cf2525; }
.cm-detail-metrics { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--cm-line); border-bottom:1px solid var(--cm-line); }
.cm-detail-metrics>div { padding:20px 16px; border-right:1px solid var(--cm-line); }
.cm-detail-metrics>div:last-child { border-right:0; }
.cm-detail-metrics span,.cm-detail-metrics strong { display:block; }
.cm-detail-metrics span { color:var(--cm-muted); font-size:10px; }
.cm-detail-metrics strong { margin-top:7px; font-size:15px; }
.cm-detail-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:34px; }
.cm-detail-section { min-width:0; }
.cm-detail-steps { display:grid; }
.cm-detail-step { min-height:72px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; border-bottom:1px solid var(--cm-line); }
.cm-detail-step>span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--cm-brand-soft); color:var(--cm-brand-dark); font:700 11px var(--cm-font-mono); }
.cm-detail-step strong,.cm-detail-step small { display:block; }
.cm-detail-step strong { font-size:13px; }
.cm-detail-step small { margin-top:4px; color:var(--cm-muted); font-size:12px; }
.cm-detail-step p { margin-top:5px!important; color:var(--cm-muted); font-size:10px; }
.cm-detail-step em { color:var(--cm-muted); font:normal 12px var(--cm-font-mono); text-align:right; }
.cm-detail-step em small { margin:0 0 3px; font:500 9px var(--cm-font); }

/* Segmented recipe wizard */
.cm-modal-step { display:block; margin-top:6px; color:var(--cm-muted); font-size:10px; line-height:1.5; }
.cm-recipe-flow-head { min-height:72px; padding:0 22px 0 30px; gap:22px; }
.cm-recipe-flow-head>.cm-icon-btn { flex:none; }
.cm-wizard-progress { position:relative; top:auto; z-index:auto; width:100%; min-width:0; padding:0; border:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:transparent; backdrop-filter:none; }
.cm-wizard-progress button { appearance:none; min-height:48px; padding:0 4px; border:0; border-bottom:2px solid transparent; background:transparent; color:#a0a0a0; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:var(--cm-fw-medium); cursor:pointer; }
.cm-wizard-progress button>span { width:20px; height:20px; border-radius:50%; background:#f1f1f1; color:#777; display:grid; place-items:center; font-size:10px; }
.cm-wizard-progress button.active { border-bottom-color:var(--cm-text); color:var(--cm-text); font-weight:var(--cm-fw-semibold); }
.cm-wizard-progress button.active>span { background:var(--cm-text); color:var(--cm-surface); }
.cm-wizard-progress button.done { color:var(--cm-text); }
.cm-wizard-progress button.done>span { background:#ececec; color:var(--cm-text); }
.cm-wizard-progress button:disabled { cursor:default; }
.cm-wizard { min-height:0; display:flex; flex-direction:column; }
.cm-wizard-section-title { margin-bottom:22px; }
.cm-wizard-section-title h3 { font-family:var(--cm-font-display); font-size:22px; font-weight:var(--cm-fw-bold); }
.cm-wizard-section-title p { margin-top:6px; color:var(--cm-muted); font-size:11px; }
.cm-parameter-title { display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.cm-parameter-title h3 { display:flex; align-items:baseline; gap:10px; }
.cm-parameter-title h3 strong { color:var(--cm-highlight-strong); font:var(--cm-fw-bold) 17px var(--cm-font-display); }
.cm-parameter-title p { margin:0; text-align:right; }
.cm-wizard-intro { margin-bottom:20px; max-width:640px; }
.cm-wizard-kicker { display:block; margin-bottom:7px; color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); }
.cm-wizard-intro h3 { font-family:var(--cm-font-display); font-size:24px; font-weight:var(--cm-fw-bold); }
.cm-wizard-intro p { margin-top:7px; color:var(--cm-muted); font-size:12px; }
.cm-wizard-intro-row { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.cm-draft-summary { flex:none; max-width:280px; text-align:right; }
.cm-draft-summary strong,.cm-draft-summary span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-draft-summary strong { font-size:12px; font-weight:var(--cm-fw-semibold); }
.cm-draft-summary span { margin-top:5px; color:var(--cm-muted); font-size:10px; }
.cm-recipe-modal .cm-field { margin-bottom:18px; }
.cm-recipe-modal .cm-field>label,.cm-field-heading label { font-size:12px; font-weight:var(--cm-fw-semibold); letter-spacing:.01em; }
.cm-recipe-modal .cm-input { height:50px; padding:0 15px; border-radius:12px; font-size:14px; }
.cm-recipe-modal .cm-input.invalid { border-color:var(--cm-danger); box-shadow:0 0 0 1px color-mix(in srgb,var(--cm-danger) 35%,transparent); }
.cm-recipe-modal .cm-textarea { min-height:96px; padding:14px 15px; border-radius:12px; font-size:13px; }
.cm-field-heading { margin-bottom:9px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cm-field-heading>span,.cm-optional { color:var(--cm-muted); font-size:10px; font-weight:500; }
.cm-recipe-modal .cm-modal-body.cm-wizard { min-height:0; flex:1; padding:0; overflow:hidden; }
.cm-wizard-scroll { min-width:0; min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; overscroll-behavior-y:contain; touch-action:pan-y; padding:26px 30px 30px; }
.cm-recipe-modal .cm-form-actions { position:relative; bottom:auto; z-index:4; min-height:74px; flex:none; margin:0; padding:14px 30px; border-top:1px solid var(--cm-card-border); background:var(--cm-surface); backdrop-filter:none; }
.cm-wizard-footer-hint { color:var(--cm-muted); font-size:10px; }
.cm-wizard-nav-btn { min-width:110px; height:46px; padding:0 16px; border:1px solid var(--cm-card-border-hover); border-radius:14px; display:flex; align-items:center; justify-content:center; gap:8px; font:600 12px var(--cm-font-sans); cursor:pointer; transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease; }
.cm-wizard-nav-btn:hover { transform:translateY(-1px); }
.cm-wizard-nav-btn.secondary { background:var(--cm-surface); color:var(--cm-text); }
.cm-wizard-nav-btn.primary { border-color:var(--cm-text); background:var(--cm-text); color:var(--cm-surface); }
.cm-text-action { appearance:none; min-height:40px; padding:0 4px; border:0; background:transparent; color:var(--cm-muted); display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:var(--cm-fw-medium); cursor:pointer; }
.cm-text-action:hover { color:var(--cm-text); }
.cm-text-action.danger { color:var(--cm-danger); }
.cm-text-action i { font-size:16px; }
.cm-name-field { margin-bottom:22px!important; }
.cm-name-assist { min-height:28px; margin-top:8px; color:var(--cm-muted); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; }
.cm-name-assist>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.cm-name-assist button { min-height:28px; padding:0 9px; border:1px solid var(--cm-card-border); border-radius:999px; background:var(--cm-surface); color:var(--cm-muted); font:500 10px var(--cm-font-sans); cursor:pointer; }
.cm-name-assist button:hover { border-color:var(--cm-text); color:var(--cm-text); }
.cm-field-error { color:var(--cm-danger); display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:var(--cm-fw-semibold); }
.cm-ratio-presets { margin:0 0 22px; }
.cm-ratio-presets>div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cm-ratio-presets button { min-height:42px; padding:6px 12px; border:1px solid var(--cm-card-border); border-radius:10px; background:var(--cm-surface); color:var(--cm-text); display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.cm-ratio-presets button:hover { border-color:var(--cm-card-border-hover); background:#f7f7f7; }
.cm-ratio-presets button.selected { border-color:var(--cm-text); background:var(--cm-text); color:var(--cm-surface); }
.cm-ratio-presets strong { font-size:11px; }
.cm-ratio-presets small { font:500 10px var(--cm-font-mono); opacity:.62; }
.cm-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cm-choice-grid.compact { grid-template-columns:repeat(5,1fr); }
.cm-choice { min-height:42px; padding:8px 10px; border:1px solid var(--cm-card-border-hover); border-radius:10px; background:var(--cm-surface); color:var(--cm-text); font-size:12px; cursor:pointer; transition:.15s; }
.cm-choice:hover { border-color:#999; }
.cm-choice.selected { border-color:var(--cm-text); background:var(--cm-text); color:var(--cm-surface); font-weight:var(--cm-fw-semibold); }
.cm-range-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cm-range-field { min-width:0; }
.cm-range-shell { position:relative; height:66px; overflow:hidden; border:1px solid var(--cm-line); border-radius:15px; background:#f1f1f1; isolation:isolate; transition:border-color .16s ease,box-shadow .16s ease; }
.cm-range-shell:has(input:focus-visible) { border-color:var(--cm-text); box-shadow:0 0 0 2px color-mix(in srgb,var(--cm-text) 18%,transparent); }
.cm-range-shell progress { appearance:none; -webkit-appearance:none; position:absolute; inset:0; z-index:0; width:100%; height:100%; border:0; background:#f1f1f1; }
.cm-range-shell progress::-webkit-progress-bar { background:#f1f1f1; }
.cm-range-shell progress::-webkit-progress-value { border-radius:13px 0 0 13px; background:#111111; transition:width .08s linear; }
.cm-range-shell progress::-moz-progress-bar { border-radius:13px 0 0 13px; background:#111111; transition:width .08s linear; }
.cm-range-content { position:absolute; inset:0; z-index:2; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:#ffffff; mix-blend-mode:difference; pointer-events:none; }
.cm-range-content label { overflow:hidden; font-size:13px; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.cm-range-content output { flex:none; font:700 18px/1 var(--cm-font-mono); letter-spacing:-.025em; }
.cm-range-shell input[type='range'] { appearance:none; -webkit-appearance:none; position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.cm-range-shell input[type='range']::-webkit-slider-runnable-track { height:100%; }
.cm-range-shell input[type='range']::-webkit-slider-thumb { width:22px; height:66px; appearance:none; -webkit-appearance:none; }
.cm-range-shell input[type='range']::-moz-range-track { height:100%; }
.cm-range-shell input[type='range']::-moz-range-thumb { width:22px; height:66px; border:0; }
.cm-range-scale { display:none; }
.cm-ratio-preview { min-height:66px; margin:0; padding:14px 18px; border:1px solid var(--cm-card-border); border-radius:12px; background:#f6f6f6; color:var(--cm-text); display:flex; align-items:center; justify-content:space-between; }
.cm-ratio-preview span { font-size:11px; opacity:.65; }
.cm-ratio-preview strong { font-family:var(--cm-font-display); font-size:23px; font-weight:var(--cm-fw-semibold); letter-spacing:-.04em; }
.cm-parameter-intro { align-items:center; }
.cm-ratio-preview.compact { min-width:166px; min-height:58px; padding:9px 13px; border-color:transparent; background:#f4f4f4; display:grid; grid-template-columns:1fr auto; gap:2px 16px; }
.cm-ratio-preview.compact strong { font-size:19px; }
.cm-ratio-preview.compact small { grid-column:1/-1; color:var(--cm-muted); font-size:9px; text-align:right; }
.cm-grind-row { margin-bottom:20px!important; padding-bottom:20px; border-bottom:1px solid var(--cm-card-border); }
.cm-grind-row .cm-choice-grid { width:100%; }
.cm-step-page-head { margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.cm-step-page-head>div:first-child { min-width:0; }
.cm-step-page-head h3 { margin-top:5px; overflow:hidden; font-family:var(--cm-font-display); font-size:24px; font-weight:var(--cm-fw-bold); line-height:1.12; text-overflow:ellipsis; white-space:nowrap; }
.cm-step-page-head p { margin-top:12px; color:var(--cm-muted); font-size:11px; line-height:1.35; }
.cm-step-balance { min-width:235px; margin:0; padding:0; border:0; border-radius:0; background:transparent; display:grid; grid-template-columns:auto; justify-items:end; align-items:end; gap:1px; text-align:right; }
.cm-step-balance span { color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-medium); }
.cm-step-balance strong { color:var(--cm-text); font-family:var(--cm-font-display); font-size:clamp(24px,2.2vw,32px); font-weight:var(--cm-fw-bold); line-height:1; }
.cm-step-balance small { color:var(--cm-text); font-size:10px; font-weight:var(--cm-fw-medium); }
.cm-step-balance.balanced small { color:var(--cm-muted); }
.cm-step-builder { display:grid; gap:12px; }
.cm-step-editor { padding:13px; border:1px solid rgba(0,0,0,.05); border-radius:16px; background:var(--cm-surface); transform-origin:top center; transition:border-color .28s ease,background .36s cubic-bezier(.22,1,.36,1),color .28s ease,opacity .2s ease; }
.cm-step-editor.collapsed:hover { background:#fafafa; }
.cm-step-editor.expanded { padding:16px; border-color:rgba(0,0,0,.12); background:#fff; color:var(--cm-text); }
.cm-step-editor.dragging { opacity:.5; }
.cm-step-editor.drag-target { border-color:var(--cm-highlight-strong); background:color-mix(in srgb,var(--cm-highlight) 5%,var(--cm-surface)); }
.cm-step-editor-head { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; }
.cm-step-drag-handle { width:22px; height:36px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:grab; touch-action:none; }
.cm-step-drag-handle:active { cursor:grabbing; }
.cm-step-drag-handle i { width:10px; display:grid; grid-template-columns:repeat(2,3px); gap:3px 4px; }
.cm-step-drag-handle b { width:3px; height:3px; border-radius:50%; background:#a7a7a7; }
.cm-step-editor-title { min-width:0; padding:0; border:0; background:transparent; color:var(--cm-text); display:grid; grid-template-columns:36px minmax(0,1fr) auto 18px; align-items:center; gap:11px; text-align:left; cursor:pointer; }
.cm-step-editor-title>span:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--cm-brand-soft); color:var(--cm-brand-dark); font:700 11px var(--cm-font-mono); }
.cm-step-editor-title strong { overflow:hidden; font-size:13px; font-weight:var(--cm-fw-bold); text-overflow:ellipsis; white-space:nowrap; }
.cm-step-editor-title small { color:var(--cm-muted); font:500 10px var(--cm-font-mono); }
.cm-step-toggle-icon { width:18px; height:18px; display:grid; place-items:center; color:var(--cm-muted); font-size:15px; transition:transform .18s ease; }
.cm-step-toggle-icon.open { transform:rotate(180deg); }
.cm-step-toggle-icon>i { font-size:inherit; }
.cm-step-editor-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.cm-step-icon-action { width:34px; height:34px; padding:0; border:0; border-radius:10px; background:rgba(0,0,0,.045); color:var(--cm-text); display:grid; place-items:center; font-size:15px; cursor:pointer; transition:background .15s ease,transform .15s ease; }
.cm-step-icon-action:hover { background:rgba(0,0,0,.09); transform:translateY(-1px); }
.cm-step-icon-action.danger { color:var(--cm-danger); }
.cm-step-editor.expanded .cm-step-drag-handle b { background:#999; }
.cm-step-editor.expanded .cm-step-editor-title { color:var(--cm-text); }
.cm-step-editor.expanded .cm-step-editor-title>span:first-child { border:1px solid var(--cm-line); background:#fff; color:#111; }
.cm-step-editor.expanded .cm-step-editor-title small,.cm-step-editor.expanded .cm-step-toggle-icon { color:var(--cm-muted); }
.cm-step-editor.expanded .cm-step-icon-action { border:1px solid var(--cm-line); background:transparent; color:var(--cm-text); }
.cm-step-editor.expanded .cm-step-icon-action:hover { border-color:#aaa; background:transparent; }
.cm-step-editor.expanded .cm-step-icon-action.danger { border-color:color-mix(in srgb,var(--cm-danger) 28%,var(--cm-line)); color:var(--cm-danger); }
.cm-step-editor-body { margin-top:13px; padding:16px 0 2px; border-top:1px solid var(--cm-line); border-radius:0; background:transparent; color:var(--cm-text); }
.cm-step-control-label { margin:13px 0 8px; color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-medium); }
.cm-step-options-head { margin:0 0 9px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-medium); }
.cm-advanced-toggle { min-height:30px; padding:0; border:0; background:transparent; color:var(--cm-muted); display:inline-flex; align-items:center; gap:9px; font:600 10px var(--cm-font); cursor:pointer; }
.cm-advanced-toggle:hover,.cm-advanced-toggle[aria-checked="true"] { color:var(--cm-text); }
.cm-advanced-toggle .cm-switch { width:38px; height:22px; pointer-events:none; }
.cm-advanced-toggle .cm-switch:after { width:16px; height:16px; }
.cm-advanced-toggle .cm-switch.on { background:var(--cm-text); }
.cm-advanced-toggle .cm-switch.on:after { transform:translateX(16px); }
.cm-step-type-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:18px; }
.cm-step-type-grid.common { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cm-step-type-grid .cm-choice { min-height:36px; padding:0 8px; font-size:11px; }
.cm-step-editor .cm-choice { border-color:transparent; background:#f0f0f0; }
.cm-step-editor .cm-choice:hover { border-color:transparent; background:#e7e7e7; }
.cm-step-editor .cm-choice.selected { border-color:#111111; background:#111111; color:#ffffff; }
.cm-step-editor.expanded .cm-choice { border-color:var(--cm-line); background:transparent; color:var(--cm-text); }
.cm-step-editor.expanded .cm-choice:hover { border-color:#aaa; background:transparent; color:var(--cm-text); }
.cm-step-editor.expanded .cm-choice.selected { border-color:#111; background:#111; color:#fff; box-shadow:none; }
.cm-step-editor.expanded .cm-step-options-head,.cm-step-editor.expanded .cm-step-control-label,.cm-step-editor.expanded .cm-advanced-toggle,.cm-step-editor.expanded .cm-step-extra-grid label>span { color:var(--cm-muted); }
.cm-step-editor.expanded .cm-advanced-toggle:hover,.cm-step-editor.expanded .cm-advanced-toggle[aria-checked="true"] { color:var(--cm-text); }
.cm-step-editor.expanded .cm-advanced-toggle .cm-switch { background:#ddd; }
.cm-step-editor.expanded .cm-advanced-toggle .cm-switch.on { background:#111; }
.cm-step-editor.expanded .cm-advanced-toggle .cm-switch.on:after { background:#fff; }
.cm-step-editor.expanded .cm-range-shell,.cm-step-editor.expanded .cm-range-shell progress,.cm-step-editor.expanded .cm-range-shell progress::-webkit-progress-bar { border-color:var(--cm-line); background:#fff; }
.cm-step-editor.expanded .cm-range-shell progress::-webkit-progress-value { background:#111; }
.cm-step-editor.expanded .cm-range-shell progress::-moz-progress-bar { background:#111; }
.cm-step-editor.expanded .cm-range-content { color:#111; mix-blend-mode:normal; }
.cm-step-editor.expanded .cm-range-content label { color:#fff; }
.cm-step-editor.expanded .cm-range-content output { color:#111; }
.cm-step-editor.expanded .cm-range-shell:has(input:focus-visible) { border-color:#111; box-shadow:0 0 0 2px rgba(0,0,0,.14); }
.cm-step-editor.expanded .cm-step-extra-grid label { color:var(--cm-text); }
.cm-step-editor.expanded .cm-step-extra-grid .cm-input { border-color:var(--cm-line); background:#fff; color:var(--cm-text); }
.cm-step-type-grid.advanced { margin-bottom:0; }
.cm-advanced-options { margin:-2px 0 18px; padding-top:2px; border-top:1px solid var(--cm-card-border); }
.cm-technique-grid { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); margin-bottom:0; }
.cm-step-editor .cm-choice-grid { margin-bottom:14px; }
.step-ranges { grid-template-columns:1fr 1fr; margin-top:14px; padding-top:0; border-top:0; }
.step-ranges.single { grid-template-columns:1fr; }
.cm-step-extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.cm-step-extra-grid label { color:var(--cm-text); font-size:11px; font-weight:var(--cm-fw-semibold); }
.cm-step-extra-grid label.full { grid-column:1/-1; }
.cm-step-extra-grid label>span { margin-left:5px; color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-regular); }
.cm-step-extra-grid .cm-input { width:100%; min-height:42px; margin-top:7px; font-size:12px; }
.cm-legacy-step-note { margin:10px 0 0; color:var(--cm-muted); font-size:10px; }
.cm-step-complete { width:100%; min-height:42px; margin-top:16px; padding:0 14px; border:1px solid #111; border-radius:11px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font:700 12px var(--cm-font); cursor:pointer; transition:background .18s ease,color .18s ease,transform .18s ease; }
.cm-step-complete:hover { background:#292929; color:#fff; transform:translateY(-1px); }
body.cm-ready .cm-step-complete { color:#fff; font:700 12px var(--cm-font); }
body.cm-ready .cm-step-complete:hover { color:#fff; }
.cm-add-step { width:100%; min-height:46px; margin-top:12px; border:0; background:#f3f3f3; box-shadow:none!important; }
.cm-add-step:hover { background:#e9e9e9; }
.cm-optional-note { margin-top:14px; padding:0 15px; border:0; border-radius:12px; background:#f7f7f7; }
.cm-optional-note summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:var(--cm-fw-semibold); cursor:pointer; list-style:none; }
.cm-optional-note summary::-webkit-details-marker { display:none; }
.cm-optional-note summary span { color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-regular); }
.cm-optional-note .cm-textarea { width:100%; margin:0 0 15px; }

/* AI recipe import and brew coach */
.cm-ai-status,.cm-ai-badge { display:inline-flex; align-items:center; width:max-content; min-height:26px; padding:0 9px; border:1px solid var(--cm-line); border-radius:999px; background:var(--cm-surface-2); color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); letter-spacing:.04em; }
.cm-ai-status.connected,.cm-ai-badge { border-color:#111; background:#111; color:#fff; }
[data-theme="dark"] .cm-ai-status.connected,[data-theme="dark"] .cm-ai-badge { border-color:#fff; background:#fff; color:#111; }
.cm-ai-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.cm-ai-quota { display:inline-flex; align-items:center; width:max-content; min-height:26px; padding:0 9px; border:1px solid var(--cm-line); border-radius:999px; background:var(--cm-surface); color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); letter-spacing:.02em; white-space:nowrap; }
.cm-ai-quota::before { content:''; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#4b8f55; }
.cm-ai-quota.exhausted { border-color:color-mix(in srgb,var(--cm-danger) 34%,var(--cm-line)); color:var(--cm-danger); }
.cm-ai-quota.exhausted::before { background:var(--cm-danger); }
#cm-page-insights .cm-ai-quota.dark { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.07); color:rgba(255,255,255,.78); }
#cm-page-insights .cm-ai-quota.dark::before { background:#9fdda7; }
#cm-page-insights .cm-ai-quota.dark.exhausted { border-color:rgba(255,113,105,.45); color:#ff9b95; }
#cm-page-insights .cm-ai-quota.dark.exhausted::before { background:#ff7169; }
.cm-btn:disabled { opacity:.48; cursor:not-allowed; transform:none!important; box-shadow:none!important; }
.cm-ai-coach { padding:clamp(24px,4vw,42px); border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); background:var(--cm-surface); box-shadow:0 14px 42px rgba(0,0,0,.06); }
.cm-ai-coach-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.cm-ai-coach-head>div { max-width:760px; }
.cm-ai-coach-head h2 { margin-top:14px!important; font-family:var(--cm-font-display); font-size:clamp(27px,3.2vw,44px); font-weight:var(--cm-fw-semibold); line-height:1; letter-spacing:-.055em; }
.cm-ai-coach-head p { margin-top:10px!important; color:var(--cm-muted); font-size:var(--cm-fs-md); line-height:1.6; }
.cm-ai-coach-head .cm-btn { flex:none; }
.cm-btn.ai-primary { border-color:#111; background:#111; color:#fff; }
.cm-ai-placeholder { min-height:170px; margin-top:28px; border:1px dashed var(--cm-line); border-radius:16px; display:grid; place-items:center; align-content:center; gap:12px; color:var(--cm-muted); text-align:center; }
.cm-ai-placeholder>div { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#111; color:#fff; font-size:21px; }
.cm-ai-placeholder p { max-width:440px; font-size:var(--cm-fs-sm); }
.cm-ai-advice-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr); gap:20px; margin-top:30px; }
.cm-ai-changes { display:grid; gap:10px; }
.cm-ai-changes article { padding:18px 20px; border:1px solid var(--cm-line); border-radius:14px; background:var(--cm-surface); }
.cm-ai-changes article>span,.cm-ai-advice-grid aside>span { color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); letter-spacing:.08em; text-transform:uppercase; }
.cm-ai-changes article>div { display:flex; align-items:center; gap:10px; margin-top:9px; }
.cm-ai-changes article>div strong { font-size:var(--cm-fs-lg); font-weight:var(--cm-fw-semibold); }
.cm-ai-changes article>div i { color:var(--cm-muted); }
.cm-ai-changes article p { margin-top:8px!important; color:var(--cm-muted); font-size:var(--cm-fs-sm); line-height:1.55; }
.cm-ai-advice-grid aside { padding:22px; border-radius:16px; background:#111; color:#fff; }
.cm-ai-advice-grid aside>span { color:#aaa; }
.cm-ai-advice-grid aside ul { margin:18px 0; padding-left:18px; display:grid; gap:10px; font-size:var(--cm-fs-sm); }
.cm-ai-advice-grid aside>p { padding-top:16px; border-top:1px solid #383838; color:#aaa; font-size:var(--cm-fs-sm); }
.cm-ai-advice-grid aside .cm-btn { width:100%; margin-top:18px; }
.cm-ai-disclaimer { margin-top:18px; color:var(--cm-muted); font-size:10px; }
.cm-ai-error { margin-top:16px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--cm-danger) 35%,var(--cm-line)); border-radius:10px; background:color-mix(in srgb,var(--cm-danger) 6%,var(--cm-surface)); color:var(--cm-danger); font-size:var(--cm-fs-sm); line-height:1.5; }
.cm-ai-empty { padding:30px; border:1px dashed var(--cm-line); border-radius:14px; color:var(--cm-muted); text-align:center; }
.cm-ai-loader { width:30px; height:30px; border:2px solid var(--cm-line); border-top-color:var(--cm-text); border-radius:50%; animation:cm-spin .75s linear infinite; flex:none; }
@keyframes cm-spin { to{transform:rotate(360deg)} }

/* AI insight workspace */
#cm-page-insights .cm-ai-coach { position:relative; isolation:isolate; overflow:hidden; padding:clamp(30px,4vw,52px); border:0; border-radius:28px; background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.11),transparent 28%),linear-gradient(145deg,#191919 0%,#0d0d0d 72%); color:#fff; box-shadow:none; }
#cm-page-insights .cm-ai-coach::before { content:''; position:absolute; z-index:-1; width:320px; height:320px; right:-120px; bottom:-190px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 44px rgba(255,255,255,.018),0 0 0 88px rgba(255,255,255,.012); pointer-events:none; }
.cm-ai-orb { position:absolute; z-index:-1; right:clamp(22px,5vw,76px); top:50%; color:rgba(255,255,255,.035); font-family:var(--cm-font-display); font-size:clamp(170px,21vw,320px); font-weight:900; line-height:.7; letter-spacing:-.1em; transform:translateY(-44%); pointer-events:none; user-select:none; }
#cm-page-insights .cm-ai-badge { min-height:28px; padding-inline:10px; border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); backdrop-filter:blur(12px); }
#cm-page-insights .cm-ai-coach-head { position:relative; z-index:1; }
#cm-page-insights .cm-ai-coach-head>div:first-child { max-width:760px; }
#cm-page-insights .cm-ai-coach-head h2 { max-width:760px; margin-top:20px!important; color:#fff; font-size:clamp(34px,4vw,58px); font-weight:var(--cm-fw-semibold); line-height:.98; }
#cm-page-insights .cm-ai-coach-head p { max-width:700px; margin-top:16px!important; color:rgba(255,255,255,.58); line-height:1.7; }
.cm-ai-coach-actions { flex:none; display:flex; align-items:center; justify-content:flex-end; gap:9px; }
#cm-page-insights .cm-ai-coach .cm-btn { min-height:46px; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; box-shadow:none; backdrop-filter:blur(12px); }
#cm-page-insights .cm-ai-coach .cm-btn:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.13); transform:translateY(-1px); }
#cm-page-insights .cm-ai-coach .cm-btn.ai-primary { border-color:#fff; background:#fff; color:#111; }
#cm-page-insights .cm-ai-coach .cm-btn.ai-primary:hover { background:#ededed; }
.cm-ai-history-button>span { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.12); display:inline-grid; place-items:center; font-size:9px; }
#cm-page-insights .cm-ai-placeholder { min-height:158px; margin-top:34px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.56); backdrop-filter:blur(10px); }
#cm-page-insights .cm-ai-placeholder>div { width:48px; height:48px; background:#fff; color:#111; }
#cm-page-insights .cm-ai-placeholder>span { color:rgba(255,255,255,.38); font:700 9px/1 var(--cm-font-sans); letter-spacing:.18em; }
#cm-page-insights .cm-ai-placeholder p { color:rgba(255,255,255,.62); }
#cm-page-insights .cm-ai-advice-grid { position:relative; z-index:1; }
#cm-page-insights .cm-ai-changes article { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); }
#cm-page-insights .cm-ai-changes article>span { color:rgba(255,255,255,.42); }
#cm-page-insights .cm-ai-changes article p { color:rgba(255,255,255,.55); }
#cm-page-insights .cm-ai-changes article>div i { color:rgba(255,255,255,.35); }
#cm-page-insights .cm-ai-advice-grid aside { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.075); }
#cm-page-insights .cm-ai-advice-grid aside>p { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.58); }
#cm-page-insights .cm-ai-disclaimer { color:rgba(255,255,255,.38); }
#cm-page-insights .cm-ai-error { border-color:rgba(255,120,120,.25); background:rgba(164,28,28,.18); color:#ffb5b5; }
#cm-page-insights .cm-ai-loader { border-color:rgba(255,255,255,.2); border-top-color:#fff; }
.cm-ai-processing { min-height:126px; margin-top:32px; border-radius:20px; background:rgba(255,255,255,.035); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; color:rgba(255,255,255,.58); }
.cm-ai-processing>span { width:min(360px,62%); height:2px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); position:relative; }
.cm-ai-processing>span::after { content:''; position:absolute; inset:0; width:42%; border-radius:inherit; background:#fff; animation:cm-ai-scan-line 1.4s ease-in-out infinite; }
.cm-ai-processing p { font-size:11px; }
@keyframes cm-ai-scan-line { 0%{transform:translateX(-110%)} 100%{transform:translateX(350%)} }

/* AI advice history follows the shared modal structure with a dedicated dark surface. */
.cm-modal.cm-ai-history-modal { --cm-modal-head-bg:rgba(17,17,17,.78); width:min(820px,calc(100vw - 40px)); height:min(720px,88vh); max-height:88vh; border-color:rgba(255,255,255,.16); background:#111; color:#fff; }
.cm-modal.cm-ai-history-modal .cm-modal-head { color:#fff; }
.cm-modal.cm-ai-history-modal .cm-modal-head .cm-icon-btn { background:rgba(255,255,255,.08); color:#fff; }
.cm-modal.cm-ai-history-modal .cm-modal-head .cm-icon-btn:hover { background:#fff; color:#111; }
.cm-modal.cm-ai-history-modal .cm-modal-step { color:rgba(255,255,255,.48); }
.cm-ai-history-scroll { padding:calc(var(--cm-modal-head-height) + 24px) 24px 24px; }
.cm-modal.cm-ai-history-modal .cm-form-actions { border-top:1px solid rgba(255,255,255,.08); background:#111; }
.cm-modal.cm-ai-history-modal .cm-form-actions .cm-text-action { color:rgba(255,255,255,.58); }
.cm-modal.cm-ai-history-modal .cm-form-actions .cm-btn.brand { border-color:#fff; background:#fff; color:#111; }
.cm-ai-history-list { display:grid; gap:10px; }
.cm-ai-history-list>button { appearance:none; width:100%; min-height:120px; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.04); color:#fff; display:grid; grid-template-columns:minmax(150px,.35fr) minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:7px 24px; text-align:left; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.cm-ai-history-list>button:hover,.cm-ai-history-list>button:focus-visible { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); outline:none; transform:translateY(-1px); }
.cm-ai-history-list>button>span { grid-row:1/3; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
.cm-ai-history-list>button b { color:rgba(255,255,255,.32); font:700 11px/1 var(--cm-font-mono); }
.cm-ai-history-list>button small { color:rgba(255,255,255,.42); font-size:10px; line-height:1.5; }
.cm-ai-history-list>button>strong { overflow:hidden; font-size:17px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.cm-ai-history-list>button>p { overflow:hidden; color:rgba(255,255,255,.54); font-size:12px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.cm-ai-history-list>button>em { grid-column:3; grid-row:1/3; color:rgba(255,255,255,.62); display:flex; align-items:center; gap:8px; font-style:normal; font-size:10px; white-space:nowrap; }
.cm-ai-history-empty { min-height:360px; display:grid; place-items:center; align-content:center; gap:12px; text-align:center; }
.cm-ai-history-empty>span { width:52px; height:52px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font-size:22px; }
.cm-ai-history-empty h3 { margin-top:6px; font-size:20px; }
.cm-ai-history-empty p { color:rgba(255,255,255,.5); font-size:12px; }

.cm-ai-import-status { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.cm-ai-import-status p { color:var(--cm-muted); font-size:var(--cm-fs-xs); text-align:right; }
.cm-ai-source-grid { display:grid; grid-template-columns:1fr 38px 1fr; align-items:stretch; gap:12px; }
.cm-ai-upload { min-height:230px; padding:18px; border:1px dashed #bdbdbd; border-radius:14px; background:#fafafa; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative; cursor:pointer; text-align:center; overflow:hidden; }
.cm-ai-upload:hover { border-color:#111; background:#f5f5f5; }
.cm-ai-upload>i { font-size:30px; }
.cm-ai-upload strong { font-size:var(--cm-fs-md); }
.cm-ai-upload span { max-width:100%; color:var(--cm-muted); font-size:var(--cm-fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-ai-upload input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cm-ai-upload.has-image { justify-content:flex-end; }
.cm-ai-upload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm-ai-upload.has-image>span { position:relative; z-index:2; max-width:90%; padding:6px 9px; border-radius:7px; background:rgba(0,0,0,.72); color:#fff; }
.cm-ai-upload .cm-icon-btn { position:absolute; z-index:3; top:10px; right:10px; width:34px; height:34px; background:#fff; color:#111; }
.cm-ai-or { display:grid; place-items:center; color:var(--cm-muted); font-size:10px; }
.cm-ai-or span { width:28px; height:28px; border:1px solid var(--cm-line); border-radius:50%; display:grid; place-items:center; background:var(--cm-surface); }
.cm-ai-source-grid>.cm-field { margin:0; }
.cm-ai-source-grid .cm-textarea { min-height:230px; }
.cm-ai-analyzing { margin-top:18px; padding:18px; border:1px solid var(--cm-line); border-radius:14px; display:flex; align-items:center; gap:15px; }
.cm-ai-analyzing strong { display:block; font-size:var(--cm-fs-md); }
.cm-ai-analyzing p { margin-top:4px!important; color:var(--cm-muted); font-size:var(--cm-fs-xs); }
.cm-ai-result { margin-top:20px; padding:20px; border:1px solid #111; border-radius:16px; }
.cm-ai-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--cm-line); }
.cm-ai-result-head span { color:var(--cm-muted); font-size:10px; }
.cm-ai-result-head h3 { margin-top:4px!important; font-family:var(--cm-font-display); font-size:var(--cm-fs-xl); font-weight:var(--cm-fw-semibold); }
.cm-ai-result-head>strong { font-family:var(--cm-font-mono); font-size:var(--cm-fs-xl); }
.cm-ai-result-metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin:16px 0; background:var(--cm-line); border:1px solid var(--cm-line); }
.cm-ai-result-metrics>div { padding:12px; background:var(--cm-surface); }
.cm-ai-result-metrics span,.cm-ai-result-metrics strong { display:block; }
.cm-ai-result-metrics span { color:var(--cm-muted); font-size:10px; }
.cm-ai-result-metrics strong { margin-top:5px; font-size:var(--cm-fs-sm); white-space:nowrap; }
.cm-ai-warnings { margin-top:14px; display:grid; gap:6px; }
.cm-ai-warnings p { display:flex; align-items:center; gap:7px; color:var(--cm-muted); font-size:var(--cm-fs-xs); }

/* AI recipe import — product flow */
.cm-ai-modal { width:min(920px,calc(100vw - 40px)); height:auto; max-height:min(880px,94vh); border-radius:24px; overflow:hidden; }
.cm-ai-modal .cm-modal-head { padding:20px 24px; }
.cm-ai-modal .cm-modal-head h2 { font-size:clamp(22px,2.4vw,30px); font-weight:var(--cm-fw-bold); }
.cm-ai-modal .cm-modal-head .cm-icon-btn { width:44px; height:44px; border-radius:13px; }
.cm-ai-modal .cm-modal-body { padding:24px; }
.cm-ai-import-status { min-height:72px; margin:0 0 22px; padding:0 2px 20px; border-bottom:1px solid var(--cm-line); align-items:flex-end; }
.cm-ai-import-status>div { display:grid; gap:10px; }
.cm-ai-import-status>div>strong { font-size:15px; font-weight:var(--cm-fw-bold); }
.cm-ai-import-status p { max-width:410px; font-size:12px; line-height:1.55; }
.cm-ai-status>i { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }
.cm-ai-source-grid { grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:12px; }
.cm-ai-upload { min-height:280px; padding:22px; border:1px solid var(--cm-line); border-radius:16px; background:#fff; gap:9px; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.cm-ai-upload:hover { border-color:#111; background:#fafafa; transform:translateY(-1px); }
.cm-ai-upload-icon { width:54px; height:54px; margin-bottom:7px; border-radius:50%; background:#111; color:#fff; display:grid; place-items:center; }
.cm-ai-upload-icon i { font-size:23px; }
.cm-ai-upload>strong { font-size:15px; font-weight:var(--cm-fw-bold); }
.cm-ai-upload>span:not(.cm-ai-upload-icon):not(.cm-ai-file-ready) { color:var(--cm-muted); font-size:12px; }
.cm-ai-upload>small { color:#9a9a9a; font-size:10px; }
.cm-ai-upload.has-image { border-style:solid; background:#f4f4f4; }
.cm-ai-upload img { object-fit:contain; background:#f4f4f4; }
.cm-ai-file-ready { position:absolute!important; z-index:2; right:12px; bottom:12px; left:12px; max-width:none!important; min-height:48px; padding:8px 12px!important; border-radius:11px!important; background:rgba(17,17,17,.9)!important; color:#fff!important; display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:0 8px; text-align:left; }
.cm-ai-file-ready i { grid-row:1/3; }
.cm-ai-file-ready b,.cm-ai-file-ready small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-ai-file-ready b { font-size:11px; }
.cm-ai-file-ready small { color:#aaa; font-size:9px; }
.cm-ai-or span { width:30px; height:30px; border:0; background:#f3f3f3; color:#777; font-size:9px; font-weight:var(--cm-fw-bold); }
.cm-ai-copy-input { min-height:280px; padding:18px; border:1px solid var(--cm-line); border-radius:16px; background:#fff; display:flex; flex-direction:column; }
.cm-ai-field-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.cm-ai-field-head label { font-size:13px; font-weight:var(--cm-fw-bold); }
.cm-ai-field-head span { color:#999; font-size:9px; }
.cm-ai-copy-input .cm-textarea { min-height:0; flex:1; padding:0; border:0; border-radius:0; background:transparent; font-size:13px; line-height:1.65; resize:none; }
.cm-ai-copy-input .cm-textarea:focus { border:0; box-shadow:none; }
.cm-ai-copy-input>p { margin-top:10px!important; color:var(--cm-muted); font-size:10px; }
.cm-ai-import .cm-ai-error { margin-top:18px; padding:16px 18px; border-color:rgba(205,38,38,.22); border-radius:14px; background:#fff; display:flex; align-items:flex-start; gap:12px; }
.cm-ai-import .cm-ai-error>i { width:30px; height:30px; flex:none; border-radius:50%; background:#fff1f1; color:#c92828; display:grid; place-items:center; }
.cm-ai-import .cm-ai-error strong { display:block; color:#111; font-size:13px; font-weight:var(--cm-fw-bold); }
.cm-ai-import .cm-ai-error p { margin-top:4px!important; color:#b52a2a; font-size:11px; }
.cm-ai-import .cm-ai-error .cm-text-action { margin-top:9px; padding:0; color:#111; font-size:11px; }
.cm-ai-import.state-error .cm-ai-upload,
.cm-ai-import.state-error .cm-ai-copy-input { min-height:220px; }
.cm-ai-analyzing { min-height:150px; margin-top:18px; padding:24px; border:0; border-radius:16px; background:#111; color:#fff; gap:22px; }
.cm-ai-scan { width:82px; height:82px; flex:none; position:relative; overflow:hidden; border:1px solid #3b3b3b; border-radius:50%; background:radial-gradient(circle at center,#1d1d1d 0 2px,transparent 3px); }
.cm-ai-scan:before,.cm-ai-scan:after { content:''; position:absolute; inset:50% 10px auto; height:1px; background:#333; }
.cm-ai-scan:after { inset:10px 50% 10px auto; width:1px; height:auto; }
.cm-ai-scan>span { position:absolute; z-index:2; top:-20%; bottom:-20%; left:0; width:2px; background:#fff; box-shadow:0 0 18px rgba(255,255,255,.75); animation:cm-ai-scan 1.7s cubic-bezier(.4,0,.2,1) infinite; }
.cm-ai-scan>i { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; opacity:.72; animation:cm-ai-node 1.4s ease-in-out infinite alternate; }
.cm-ai-scan>i:nth-of-type(1) { left:23px; top:27px; }
.cm-ai-scan>i:nth-of-type(2) { right:20px; top:38px; animation-delay:.25s; }
.cm-ai-scan>i:nth-of-type(3) { left:39px; bottom:18px; animation-delay:.5s; }
.cm-ai-analyzing>div:last-child { min-width:0; flex:1; }
.cm-ai-analyzing>div:last-child>span { color:#858585; font-size:9px; font-weight:var(--cm-fw-bold); }
.cm-ai-analyzing strong { margin-top:8px; font-size:17px; }
.cm-ai-analyzing p { margin-top:7px!important; color:#a8a8a8; font-size:11px; }
.cm-ai-progress { height:3px; margin-top:18px; overflow:hidden; border-radius:999px; background:#2d2d2d; }
.cm-ai-progress i { display:block; width:38%; height:100%; border-radius:inherit; background:#fff; animation:cm-ai-progress 1.35s ease-in-out infinite; }
.cm-btn-loader { width:14px; height:14px; border:1.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:cm-spin .7s linear infinite; }
.cm-ai-import.state-loading .cm-ai-source-grid { opacity:.42; pointer-events:none; filter:grayscale(1); }
.cm-ai-import>.cm-form-actions { position:sticky; bottom:0; z-index:5; margin:22px -24px 0; padding:14px 24px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--cm-line); background:rgba(255,255,255,.96); backdrop-filter:blur(16px); }
.cm-ai-import>.cm-form-actions .cm-text-action { margin-right:auto; }
@keyframes cm-ai-scan { 0% { transform:translateX(8px); opacity:.2; } 50% { opacity:1; } 100% { transform:translateX(72px); opacity:.2; } }
@keyframes cm-ai-node { to { transform:scale(1.8); opacity:1; } }
@keyframes cm-ai-progress { 0% { transform:translateX(-120%); } 100% { transform:translateX(365%); } }
.cm-account-mini { width:100%; min-height:58px; padding:8px 10px; border-color:transparent; border-radius:11px; background:transparent; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; color:var(--cm-text); transition:background .18s ease,border-color .18s ease; }
.cm-account-mini:hover { border-color:var(--cm-line); background:var(--cm-surface-2); }
.cm-account-mini:focus-visible { border-color:var(--cm-text); }
.cm-account-mini>span:last-child { min-width:0; flex:1; }
.cm-account-mini strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:var(--cm-text); font-size:12px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.cm-account-mini small { display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--cm-muted); font-size:10px; font-weight:500; line-height:1.3; }
.cm-account-mini small::before { content:''; width:5px; height:5px; flex:none; border-radius:50%; background:#8a8a8a; }
.cm-account-mini.signed-in small::before { background:var(--cm-text); }
.cm-account-mini.syncing small::before { animation:cm-sync-pulse 1.2s ease infinite; }
.cm-account-mini.sync-error small::before { background:var(--cm-danger); }
.cm-account-mini .cm-account-avatar { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--cm-text); color:var(--cm-surface); font-size:12px; font-weight:700; line-height:1; }
.cm-account-mini .cm-account-avatar img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.cm-account-avatar i { font-size:18px; }
.cm-sidebar-foot>.cm-nav-btn { min-height:42px; padding-inline:10px; color:var(--cm-text); }
.cm-sync-badge { padding:7px 10px; border-radius:999px; background:var(--cm-surface-2); color:var(--cm-muted); font-size:10px; font-weight:700; }
.cm-sync-badge.synced { background:#111; color:#fff; }
.cm-sync-badge.syncing,.cm-sync-badge.pending { animation:cm-sync-pulse 1.2s ease infinite; }
.cm-sync-badge.error,.cm-sync-badge.offline { color:var(--cm-danger); }
@keyframes cm-sync-pulse { 50%{opacity:.45} }
.cm-cloud-error { margin-top:12px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--cm-danger) 28%,var(--cm-line)); border-radius:10px; color:var(--cm-danger); font-size:12px; }
.cm-account-setup,.cm-auth-form { max-width:560px; margin:0 auto; }
.cm-account-setup { padding-block:42px; text-align:center; }
.cm-account-hero-icon { width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:var(--cm-text); color:var(--cm-surface); font-size:27px; }
.cm-account-setup h3,.cm-account-intro h3,.cm-cloud-merge h3 { font-family:var(--cm-font-display); font-size:22px; letter-spacing:-.035em; }
.cm-account-setup>p,.cm-account-scroll>p { max-width:460px; margin:10px auto 24px; color:var(--cm-muted); font-size:12px; line-height:1.7; }
.cm-account-setup code { padding:2px 5px; border-radius:5px; background:var(--cm-surface-2); }
.cm-account-steps { display:grid; gap:8px; text-align:left; }
.cm-account-steps span { padding:12px 14px; border:1px solid var(--cm-line); border-radius:11px; font-size:12px; }
.cm-account-steps b { margin-right:10px; font-family:var(--cm-font-mono); }
.cm-account-intro { display:flex; gap:14px; align-items:flex-start; margin-bottom:26px; padding:18px; border-radius:14px; background:var(--cm-surface-2); }
.cm-account-intro>span { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--cm-text); color:var(--cm-surface); }
.cm-account-intro p { margin-top:6px; color:var(--cm-muted); font-size:12px; }
.cm-account-modal { width:min(700px,100%); }
.cm-account-center { min-height:min(650px,84vh); }
.cm-account-profile { min-width:0; padding:24px; border-radius:22px; background:#111; color:#fff; display:flex; align-items:center; gap:18px; }
.cm-account-avatar-editor { width:74px; flex:none; display:grid; justify-items:center; gap:7px; }
.cm-account-profile-avatar { appearance:none; width:68px; height:68px; padding:0; position:relative; flex:none; overflow:hidden; border:3px solid rgba(255,255,255,.18); border-radius:22px; background:#fff; color:#111; display:grid; place-items:center; font-size:24px; font-weight:900; line-height:1; cursor:pointer; }
.cm-account-profile-avatar>img { width:100%; height:100%; object-fit:cover; }
.cm-account-profile-avatar>i { width:23px; height:23px; position:absolute; right:3px; bottom:3px; border-radius:8px; background:#ffa903; color:#111; display:grid; place-items:center; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.cm-account-profile-avatar:focus-visible { outline:2px solid #ffa903; outline-offset:3px; }
.cm-avatar-remove { appearance:none; padding:0; border:0; background:transparent; color:rgba(255,255,255,.58); font-size:9px; cursor:pointer; }
.cm-account-profile>div { min-width:0; }
.cm-account-profile-kicker { display:block; margin-bottom:7px; color:rgba(255,255,255,.48); font-size:9px; font-weight:700; letter-spacing:.12em; }
.cm-account-profile h3 { max-width:100%; overflow:hidden; font-family:var(--cm-font-display); font-size:clamp(20px,3vw,28px); line-height:1.18; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.cm-account-profile>div:last-child>small { max-width:100%; margin-top:5px; display:block; overflow:hidden; color:rgba(255,255,255,.48); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.cm-account-profile p { margin-top:8px!important; color:rgba(255,255,255,.66); font-size:11px; display:flex; align-items:center; gap:7px; }
.cm-account-profile p i { width:6px; height:6px; flex:none; border-radius:50%; background:#fff; }
.cm-account-membership-card { appearance:none; width:100%; min-height:118px; margin-top:14px; padding:18px 20px; border:0; border-radius:20px; display:grid; grid-template-columns:66px minmax(0,1fr) auto; align-items:center; gap:17px; text-align:left; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.cm-account-membership-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(17,17,17,.08); }
.cm-account-membership-card.free { background:#f2f2f0; color:#111; }
.cm-account-membership-card.vip { background:#ffa903; color:#111; }
.cm-account-tier-mark { width:62px; height:62px; border-radius:18px; background:#111; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.08em; }
.cm-account-membership-card.vip .cm-account-tier-mark { background:#fff; color:#111; }
.cm-account-membership-card div { min-width:0; }
.cm-account-membership-card div small { display:block; color:#777; font-size:8px; font-weight:700; letter-spacing:.14em; }
.cm-account-membership-card.vip div small { color:rgba(17,17,17,.58); }
.cm-account-membership-card div strong { margin-top:5px; display:block; font-family:var(--cm-font-display); font-size:21px; letter-spacing:-.035em; }
.cm-account-membership-card div p { margin-top:6px!important; color:#777; font-size:10px; line-height:1.5; }
.cm-account-membership-card.vip div p { color:rgba(17,17,17,.62); }
.cm-account-membership-card>em { display:flex; align-items:center; gap:7px; color:#555; font-size:10px; font-style:normal; font-weight:650; white-space:nowrap; }
.cm-account-membership-card.vip>em { color:#111; }
.cm-account-summary { margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cm-account-summary article { min-width:0; min-height:118px; padding:17px; border-radius:17px; background:var(--cm-modal-soft); display:flex; flex-direction:column; justify-content:flex-end; }
.cm-account-summary article>span { color:var(--cm-muted); font-size:10px; display:flex; align-items:center; gap:7px; }
.cm-account-summary article>span i { color:#111; font-size:15px; }
.cm-account-summary strong { margin-top:auto; padding-top:15px; font-family:var(--cm-font-display); font-size:30px; font-weight:700; line-height:1; }
.cm-account-summary small { margin-top:6px; color:var(--cm-muted); font-size:10px; }
.cm-account-details { margin-top:28px; }
.cm-account-section-title { margin-bottom:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.cm-account-section-title h3 { font-size:16px; line-height:1.3; }
.cm-account-section-title p { margin-top:5px!important; color:var(--cm-muted); font-size:10px; }
.cm-account-details dl { margin:0; border-radius:18px; background:var(--cm-modal-soft); overflow:hidden; }
.cm-account-details dl>div { min-width:0; min-height:58px; padding:13px 16px; display:grid; grid-template-columns:minmax(90px,.42fr) minmax(0,1fr); align-items:center; gap:18px; }
.cm-account-details dl>div+div { border-top:1px solid rgba(17,17,17,.055); }
.cm-account-details dt { color:var(--cm-muted); font-size:10px; }
.cm-account-details dd { min-width:0; margin:0; overflow:hidden; font-size:12px; font-weight:600; line-height:1.4; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.cm-account-note { margin:14px 2px 0!important; color:var(--cm-muted); font-size:10px; line-height:1.65; }
.cm-account-actions .cm-text-action { margin-right:auto; }
.cm-auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; }
.cm-auth-actions .ghost { grid-column:1/-1; }
.cm-merge-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.cm-merge-summary article { padding:18px; border:1px solid var(--cm-line); border-radius:14px; }
.cm-merge-summary span,.cm-merge-summary small { display:block; color:var(--cm-muted); font-size:10px; }
.cm-merge-summary strong { display:block; margin:8px 0 3px; font-size:18px; }
.cm-cloud-merge>p,.cm-cloud-scroll>p { margin-top:8px; color:var(--cm-muted); font-size:12px; }

/* Dripper library */
.cm-library-intro { min-height:260px; padding:clamp(28px,4vw,52px); margin-bottom:24px; border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); background:#f7f7f7; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; overflow:hidden; }
.cm-library-intro>div:first-child { max-width:720px; }
.cm-kicker { display:block; color:var(--cm-muted); font-family:var(--cm-font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; }
.cm-library-intro h2 { margin-top:14px!important; font-family:var(--cm-font-display); font-size:clamp(34px,5vw,66px); font-weight:var(--cm-fw-semibold); line-height:1.04; letter-spacing:-.06em; }
.cm-library-intro p { max-width:570px; margin-top:16px!important; color:var(--cm-muted); font-size:var(--cm-fs-md); line-height:1.65; }
.cm-library-intro>div:last-child { min-width:180px; padding-left:24px; border-left:1px solid #d7d7d7; }
.cm-library-intro>div:last-child strong,.cm-library-intro>div:last-child span { display:block; }
.cm-library-intro>div:last-child strong { font-family:var(--cm-font-display); font-size:68px; line-height:.9; letter-spacing:-.06em; }
.cm-library-intro>div:last-child span { margin-top:10px; color:var(--cm-muted); font-size:12px; }
.cm-dripper-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px); }
.cm-dripper-card { container-type:inline-size; position:relative; width:100%; max-width:100%; min-width:0; min-height:270px; aspect-ratio:347/270; border:1px solid var(--cm-card-border); border-radius:clamp(20px,6.92cqi,28px); background:#fff; overflow:hidden; cursor:pointer; box-shadow:none; transition:transform .22s cubic-bezier(.2,.75,.25,1),border-color .22s ease; }
.cm-dripper-card:hover { transform:translateY(-3px); border-color:var(--cm-card-border-hover); box-shadow:none; }
.cm-dripper-card:active { transform:translateY(-1px) scale(.992); border-color:rgba(0,0,0,.28); }
.cm-dripper-card:focus-within { border-color:rgba(0,0,0,.14); box-shadow:none; }
.cm-dripper-link { position:absolute; inset:0; z-index:2; width:100%; border:0; background:transparent; cursor:pointer; }
.cm-dripper-link:focus-visible { outline:2px solid #111; outline-offset:-4px; border-radius:inherit; }
.cm-dripper-media img { position:absolute; z-index:1; width:60%; height:108%; right:-14%; top:5%; object-fit:contain; transform:none; filter:none; transition:transform .38s cubic-bezier(.2,.75,.25,1); pointer-events:none; }
.cm-dripper-card:hover .cm-dripper-media img,.cm-dripper-card:focus-within .cm-dripper-media img { transform:translate(-3%,-1%) scale(1.035); }
.cm-dripper-card:active .cm-dripper-media img { transform:translate(-2%,0) scale(.985); }
.cm-dripper-card-body { height:47.4%; min-height:128px; padding:clamp(18px,5.76cqi,24px) clamp(14px,4.61cqi,20px) clamp(14px,4.61cqi,20px); position:relative; background:#ffffff; display:flex; flex-direction:column; }
.cm-dripper-card-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; margin:0 clamp(16px,5.76cqi,24px); }
.cm-dripper-card-stats>div { min-width:0; }
.cm-dripper-card-stats>div:nth-child(2) { text-align:center; }
.cm-dripper-card-stats>div:last-child { text-align:right; }
.cm-dripper-card-stats span { display:block; color:#6b6b6b; opacity:.4; font-size:clamp(10px,2.88cqi,11px); line-height:1.2; }
.cm-dripper-card-stats strong { display:block; margin-top:clamp(3px,1.15cqi,5px); color:#111111; font-size:clamp(11px,3.46cqi,14px); font-weight:var(--cm-fw-bold); line-height:1.2; white-space:nowrap; }
.cm-dripper-card-actions { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) clamp(40px,11.53cqi,48px); gap:clamp(8px,2.31cqi,10px); margin-top:auto; pointer-events:none; }
.cm-dripper-card-actions>span { min-height:clamp(40px,11.53cqi,48px); border-radius:54px; background:#111111; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:clamp(13px,4.03cqi,15px); font-weight:var(--cm-fw-semibold); }
.cm-dripper-card-actions>em { width:clamp(40px,11.53cqi,48px); height:clamp(40px,11.53cqi,48px); border-radius:50%; background:rgba(0,0,0,.05); color:#111111; display:grid; place-items:center; font-style:normal; }
.cm-dripper-card-actions>em i { font-size:clamp(17px,5.18cqi,20px); transition:transform .18s ease; }
.cm-dripper-card:hover .cm-dripper-card-actions>em i { transform:translateX(2px); }
.cm-dripper-detail { display:grid; gap:24px; }
.cm-dripper-detail .cm-detail-back { justify-self:start; }
.cm-list-dripper-icon { padding:0; overflow:visible; border-radius:0; background:transparent; }
.cm-list-dripper-icon img { width:100%; height:100%; object-fit:contain; transform:none; }
.cm-dripper-presets { padding:24px; border:1px solid var(--cm-line); border-radius:20px; background:var(--cm-surface); }
.cm-dripper-presets>.cm-section-head>span { color:var(--cm-muted); font-size:10px; }
.cm-dripper-preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.cm-dripper-preset-grid button { min-width:0; min-height:92px; padding:16px 48px 16px 16px; position:relative; border:1px solid var(--cm-line); border-radius:14px; background:var(--cm-surface); color:var(--cm-text); text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.cm-dripper-preset-grid button:hover { border-color:rgba(255,169,3,.65); background:rgba(255,169,3,.045); }
.cm-dripper-preset-grid button>span { display:inline-block; padding:2px 7px; border-radius:999px; background:var(--cm-surface-2); color:var(--cm-muted); font-size:10px; }
.cm-dripper-preset-grid button>span.exact { background:rgba(255,169,3,.14); color:#b87400; }
.cm-dripper-preset-grid strong,.cm-dripper-preset-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-dripper-preset-grid strong { margin-top:8px; font-size:13px; }
.cm-dripper-preset-grid small { margin-top:5px; color:var(--cm-muted); font-size:10px; }
.cm-dripper-preset-grid i { position:absolute; right:16px; top:50%; color:#ffa903; transform:translateY(-50%); }
.cm-dripper-hero { min-height:410px; border:1px solid var(--cm-line); border-radius:var(--cm-r-lg); background:linear-gradient(135deg,#fff 0%,#f1f1f1 100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,44%); overflow:hidden; }
.cm-dripper-hero-copy { padding:clamp(32px,5vw,64px); align-self:center; position:relative; z-index:2; }
.cm-dripper-hero-copy h2 { margin-top:14px!important; max-width:650px; font-family:var(--cm-font-display); font-size:clamp(42px,6vw,78px); font-weight:var(--cm-fw-semibold); line-height:.92; letter-spacing:-.06em; }
.cm-dripper-hero-copy p { max-width:560px; margin:18px 0 26px!important; color:var(--cm-muted); font-size:13px; line-height:1.7; }
.cm-dripper-hero-media { position:relative; min-height:380px; }
.cm-dripper-hero-media img { position:absolute; width:118%; height:118%; right:-23%; bottom:-24%; object-fit:contain; transform:rotate(10deg); filter:none; }
.cm-dripper-hero-monogram { position:absolute; right:4%; bottom:-.08em; color:rgba(17,17,17,.065); font-family:var(--cm-font-display); font-size:clamp(220px,28vw,410px); font-weight:900; line-height:.72; letter-spacing:-.1em; transform:rotate(-9deg); pointer-events:none; user-select:none; }
.cm-dripper-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--cm-line); border-radius:16px; overflow:hidden; }
.cm-dripper-stats article { min-width:0; padding:20px 22px; background:var(--cm-surface); border-right:1px solid var(--cm-line); }
.cm-dripper-stats article:last-child { border-right:0; }
.cm-dripper-stats span { display:block; color:var(--cm-muted); font-size:10px; }
.cm-dripper-stats strong { display:inline-block; margin-top:8px; font-family:var(--cm-font-display); font-size:30px; line-height:1; letter-spacing:-.04em; }
.cm-dripper-stats strong.date { font-size:17px; }
.cm-dripper-stats small { margin-left:4px; color:var(--cm-muted); font-size:10px; }
.cm-dripper-picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cm-dripper-picker-grid>button { min-width:0; padding:0 0 15px; border:1px solid var(--cm-line); border-radius:14px; background:var(--cm-surface); text-align:left; overflow:hidden; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.cm-dripper-picker-grid>button:hover { transform:translateY(-2px); border-color:var(--cm-text); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.cm-dripper-picker-grid>button:active { transform:translateY(0) scale(.985); background:#f5f5f5; border-color:#111; }
.cm-dripper-picker-grid>button:focus-visible { outline:2px solid #111; outline-offset:2px; }
.cm-dripper-picker-grid>button>span { height:150px; display:block; position:relative; overflow:hidden; background:#f5f5f5; }
.cm-dripper-picker-grid img { width:100%; height:100%; object-fit:contain; transform:none; transition:transform .3s cubic-bezier(.2,.75,.25,1); }
.cm-dripper-picker-grid>button:hover img,.cm-dripper-picker-grid>button:focus-visible img { transform:translateY(-2%) scale(1.045); }
.cm-dripper-picker-grid>button:active img { transform:scale(.985); }
.cm-dripper-picker-grid strong,.cm-dripper-picker-grid small { display:block; padding:0 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-dripper-picker-grid strong { margin-top:13px; font-size:12px; }
.cm-dripper-picker-grid small { margin-top:4px; color:var(--cm-muted); font-size:10px; }
.cm-draft-drippers { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cm-draft-drippers>button { position:relative; min-width:0; min-height:94px; padding:10px 42px 10px 10px; border:1px solid var(--cm-line); border-radius:16px; background:var(--cm-surface); display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.cm-draft-drippers>button:hover { transform:translateY(-1px); border-color:#a4a4a4; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.cm-draft-drippers>button.selected { border-color:var(--cm-text); box-shadow:inset 0 0 0 1px var(--cm-text); background:var(--cm-surface-2); }
.cm-draft-dripper-media { width:76px; height:72px; flex:none; border-radius:12px; overflow:hidden; display:grid!important; place-items:center; background:#fff; }
.cm-draft-drippers img { width:72px; height:68px; object-fit:contain; transform:rotate(6deg); }
.cm-draft-drippers span,.cm-draft-drippers strong,.cm-draft-drippers small { display:block; min-width:0; }
.cm-draft-dripper-copy { flex:1; }
.cm-draft-drippers strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.3; }
.cm-draft-drippers small { margin-top:5px; color:var(--cm-muted); font-size:10px; }
.cm-draft-selected { position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; display:grid!important; place-items:center; background:var(--cm-text); color:var(--cm-surface); }
.cm-draft-selected i { font-size:14px; }
.cm-add-first-dripper { grid-column:1/-1; justify-content:center; min-height:74px!important; padding:14px!important; }
.cm-hero-side,.cm-stat,.cm-card,.cm-toolbar,.cm-records-panel,.cm-insight-detail-hero,.cm-insight-detail-panel,.cm-ai-coach,.cm-library-intro { border-color:var(--cm-card-border); border-radius:var(--cm-card-radius); box-shadow:none; }
.cm-caffeine-panel { overflow:hidden; border-color:var(--cm-card-border); border-radius:var(--cm-card-radius); box-shadow:none; }
.cm-stat.interactive:hover { border-color:var(--cm-card-border-hover); box-shadow:none; }
.cm-dripper-picker-grid>button,.cm-draft-drippers>button { border-color:var(--cm-card-border); border-radius:20px; box-shadow:none; }
.cm-dripper-picker-grid>button:hover,.cm-draft-drippers>button:hover { border-color:var(--cm-card-border-hover); box-shadow:none; }
[data-theme="dark"] .cm-library-intro,[data-theme="dark"] .cm-dripper-card,[data-theme="dark"] .cm-dripper-hero,[data-theme="dark"] .cm-dripper-media,[data-theme="dark"] .cm-dripper-picker-grid>button>span { background:#fff; color:#111; }
[data-theme="dark"] .cm-recipe,[data-theme="dark"] .cm-dripper-card,[data-theme="dark"] .cm-library-intro { border-color:rgba(0,0,0,.05); }
[data-theme="dark"] .cm-recipe:hover,[data-theme="dark"] .cm-dripper-card:hover { border-color:rgba(0,0,0,.1); }
.cm-explore { display:grid; gap:22px; }
.cm-explore-intro { min-height:250px; padding:clamp(28px,4vw,52px); border:1px solid var(--cm-card-border); border-radius:var(--cm-card-radius); background:#111; color:#fff; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:42px; overflow:hidden; position:relative; }
.cm-explore-intro:after { content:''; position:absolute; width:360px; height:360px; right:-120px; top:-190px; border:74px solid rgba(255,169,3,.9); border-radius:50%; pointer-events:none; }
.cm-explore-intro>div { position:relative; z-index:1; }
.cm-explore-intro .cm-kicker { color:#ffa903; margin-bottom:15px; }
.cm-explore-intro h2 { max-width:700px; font-size:clamp(34px,4.7vw,62px); }
.cm-explore-intro p { max-width:660px; margin-top:16px!important; color:rgba(255,255,255,.64); font-size:var(--cm-fs-md); line-height:1.65; }
.cm-explore-intro-stat { min-width:190px; padding-left:28px; border-left:1px solid rgba(255,255,255,.2); }
.cm-explore-intro-stat strong,.cm-explore-intro-stat span,.cm-explore-intro-stat small { display:block; }
.cm-explore-intro-stat strong { font-size:64px; font-weight:var(--cm-fw-bold); }
.cm-explore-intro-stat span { margin-top:4px; font-size:13px; font-weight:var(--cm-fw-semibold); }
.cm-explore-intro-stat small { margin-top:7px; color:rgba(255,255,255,.48); font-size:10px; }
.cm-explore-tools { display:grid; grid-template-columns:minmax(240px,1fr) 160px; gap:10px; padding:10px; border:1px solid var(--cm-card-border); border-radius:16px; background:#fff; }
.cm-explore-tools .cm-input { border-color:transparent; }
.cm-filter-select { min-width:0; position:relative; }
.cm-filter-trigger { appearance:none; width:100%; height:44px; padding:0 14px; border:1px solid transparent; border-radius:11px; background:#f5f5f5; color:#111; display:flex; align-items:center; justify-content:space-between; gap:12px; font:inherit; font-size:12px; font-weight:var(--cm-fw-semibold); text-align:left; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.cm-filter-trigger:hover,.cm-filter-select.open .cm-filter-trigger { border-color:rgba(0,0,0,.12); background:#fff; }
.cm-filter-trigger i { color:#676767; transition:transform .2s ease; }
.cm-filter-select.open .cm-filter-trigger i { transform:rotate(180deg); }
.cm-filter-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:max(210px,100%); max-height:min(340px,55vh); overflow:auto; padding:7px; border:1px solid rgba(0,0,0,.1); border-radius:14px; background:#fff; box-shadow:0 18px 46px rgba(0,0,0,.14); animation:cm-filter-in .18s cubic-bezier(.2,.75,.25,1) both; }
.cm-filter-menu button { appearance:none; width:100%; min-height:42px; padding:0 11px; border:0; border-radius:9px; background:transparent; color:#333; display:flex; align-items:center; justify-content:space-between; gap:12px; font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.cm-filter-menu button:hover,.cm-filter-menu button:focus-visible { background:#f4f4f4; color:#111; outline:none; }
.cm-filter-menu button.selected { background:#111; color:#fff; font-weight:var(--cm-fw-semibold); }
.cm-filter-menu button i { flex:none; }
@keyframes cm-filter-in { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.cm-explore-categories { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.cm-explore-categories::-webkit-scrollbar { display:none; }
.cm-explore-categories button { appearance:none; flex:none; min-height:36px; padding:0 14px; border:1px solid rgba(0,0,0,.07); border-radius:999px; background:#fff; color:#6b6b6b; font-size:12px; font-weight:var(--cm-fw-medium); cursor:pointer; transition:.16s ease; }
.cm-explore-categories button:hover { border-color:rgba(0,0,0,.18); color:#111; }
.cm-explore-categories button.active { border-color:#111; background:#111; color:#fff; }
.cm-explore-results { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--cm-muted); font-size:12px; }
.cm-explore-results strong { color:var(--cm-text); }
.cm-explore-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px); }
.cm-explore-grid>.cm-empty { grid-column:1/-1; }
.cm-explore-card { min-width:0; position:relative; border:1px solid rgba(0,0,0,.05); border-radius:24px; overflow:hidden; background:#fff; color:#111; transition:transform .22s ease,border-color .22s ease; }
.cm-explore-card:hover { transform:translateY(-3px); border-color:rgba(0,0,0,.12); }
.cm-explore-card-link { position:absolute; z-index:4; inset:0; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.cm-explore-card-link:focus-visible { outline:2px solid #111; outline-offset:-4px; border-radius:22px; }
.cm-explore-card-media { min-height:220px; padding:20px; position:relative; overflow:hidden; background:#f7f7f7; }
.cm-explore-card-label { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cm-explore-card-label span { padding:5px 10px; border-radius:999px; background:#ffa903; color:#111; font-size:10px; font-weight:var(--cm-fw-bold); }
.cm-explore-card-label small { color:#747474; font-size:10px; font-weight:var(--cm-fw-medium); }
.cm-explore-card-title { position:absolute; z-index:3; left:20px; right:38%; bottom:21px; }
.cm-explore-card-title>span { color:#7a7a7a; font-size:10px; font-weight:var(--cm-fw-bold); text-transform:uppercase; }
.cm-explore-card-title h3 { display:-webkit-box; margin-top:7px!important; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:clamp(20px,2vw,28px); }
.cm-explore-card-title p { display:-webkit-box; margin-top:8px!important; overflow:hidden; color:#747474; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:12px; }
.cm-explore-card-media>img { position:absolute; width:58%; height:92%; right:-13%; bottom:-18%; object-fit:contain; transform:rotate(-12deg); transition:transform .35s ease; }
.cm-explore-card:hover .cm-explore-card-media>img { transform:translate(-3%,1%) rotate(-17deg) scale(1.03); }
.cm-explore-card:hover .cm-explore-monogram,.cm-explore-card:focus-within .cm-explore-monogram { color:rgba(17,17,17,.09); transform:translate(-6%,-50%) rotate(-14deg) scale(1.04); }
.cm-explore-monogram { top:66%; }
.cm-explore-card-body { padding:18px 20px 20px; }
.cm-explore-metrics { display:grid; grid-template-columns:1.35fr .8fr .8fr; gap:12px; }
.cm-explore-metrics span,.cm-explore-metrics strong { display:block; }
.cm-explore-metrics span { color:#969696; font-size:10px; }
.cm-explore-metrics strong { margin-top:5px; font-size:12px; }
.cm-explore-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:15px; }
.cm-explore-tags span { padding:4px 8px; border-radius:999px; background:#f3f3f3; color:#6b6b6b; font-size:10px; }
.cm-explore-source { min-height:48px; margin-top:16px; padding-top:15px; border-top:1px solid rgba(0,0,0,.07); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cm-explore-source>span { min-width:0; overflow:hidden; color:#777; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.cm-explore-source .cm-btn { position:relative; z-index:5; min-height:36px; padding-inline:12px; border-color:#111; background:#111; color:#fff; font-size:11px; }
.cm-explore-source .cm-btn.added,.cm-explore-detail-actions .cm-btn.added { border-color:#dedede; background:#f4f4f4; color:#777; cursor:default; }
.cm-explore-modal { width:min(1040px,calc(100vw - 40px)); height:min(900px,94vh); max-height:min(900px,94vh); overflow:hidden; isolation:isolate; background:#fff; }
.cm-explore-modal .cm-modal-head { padding:18px 24px; }
.cm-explore-modal .cm-modal-head h2 { font-size:clamp(20px,2vw,26px); }
.cm-explore-modal .cm-modal-step { margin-top:6px; font-size:11px; }
.cm-explore-detail { padding:0 28px 24px; }
.cm-explore-detail-hero { min-height:252px; margin:0 -28px; padding:36px 42px 34px; position:relative; overflow:hidden; background:#f7f7f7; display:flex; align-items:center; }
.cm-explore-detail-hero>div:first-child { width:min(61%,610px); position:relative; z-index:2; }
.cm-explore-detail-hero>div:first-child>span { display:block; color:#d88600; font-size:11px; font-weight:var(--cm-fw-bold); }
.cm-explore-detail-hero h3 { max-width:16ch; margin-top:14px!important; font-size:clamp(30px,4vw,48px); font-weight:var(--cm-fw-bold); line-height:1.08; text-wrap:balance; }
.cm-explore-detail-hero .cm-explore-tags { margin-top:18px; }
.cm-explore-detail-hero img { position:absolute; width:46%; height:112%; right:-2%; bottom:-24%; object-fit:contain; object-position:center bottom; transform:rotate(-8deg); }
.cm-explore-detail-monogram { position:absolute; z-index:1; right:5%; top:50%; color:rgba(17,17,17,.06); font-family:var(--cm-font-display); font-size:clamp(190px,28vw,390px); font-weight:900; line-height:.72; letter-spacing:-.1em; transform:translateY(-43%) rotate(-9deg); pointer-events:none; user-select:none; }
.cm-explore-detail-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0 -28px; padding:0 28px; border-bottom:1px solid var(--cm-line); background:#fff; }
.cm-explore-detail-metrics>div { min-width:0; padding:18px 14px; border-right:1px solid var(--cm-line); }
.cm-explore-detail-metrics>div:first-child { padding-left:4px; }
.cm-explore-detail-metrics>div:last-child { border-right:0; }
.cm-explore-detail-metrics span,.cm-explore-detail-metrics strong { display:block; }
.cm-explore-detail-metrics span { color:var(--cm-muted); font-size:11px; }
.cm-explore-detail-metrics strong { margin-top:8px; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.cm-explore-detail-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.55fr); gap:34px; padding:30px 0 22px; }
.cm-explore-detail-layout>section .cm-section-head { margin-bottom:8px; }
.cm-explore-detail-layout aside { position:sticky; top:92px; padding:22px; border:1px solid var(--cm-line); border-radius:16px; background:#fff; align-self:start; }
.cm-explore-detail-layout h3 { font-size:15px; font-weight:var(--cm-fw-bold); }
.cm-explore-detail-layout aside p { margin-top:12px!important; color:var(--cm-muted); font-size:12px; line-height:1.65; }
.cm-explore-detail .cm-detail-step { min-height:78px; grid-template-columns:46px minmax(0,1fr) auto; gap:16px; }
.cm-explore-detail .cm-detail-step>span { width:42px; height:42px; border-radius:12px; background:#f3f3f3; color:#111; }
.cm-explore-detail .cm-detail-step strong { font-size:14px; }
.cm-explore-detail .cm-detail-step small { margin-top:6px; }
.cm-explore-detail-actions { position:sticky; bottom:0; z-index:4; margin:0 -28px; padding:14px 28px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--cm-line); background:rgba(255,255,255,.96); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Unified modal visual system — spacing and soft surfaces replace decorative rules. */
.cm-modal { --cm-modal-soft:#f8f8f8; --cm-modal-soft-2:#fbfbfb; --cm-modal-head-height:82px; --cm-modal-head-bg:rgba(255,255,255,.68); isolation:isolate; border-color:rgba(255,255,255,.78); border-radius:28px; background:#fff; color:#111; box-shadow:0 34px 100px rgba(0,0,0,.24); backdrop-filter:none; -webkit-backdrop-filter:none; }
.cm-modal>.cm-modal-head { position:absolute; inset:0 0 auto; z-index:10; min-height:var(--cm-modal-head-height); overflow:hidden; border-bottom:0; background:var(--cm-modal-head-bg); backdrop-filter:blur(20px) saturate(1.22); -webkit-backdrop-filter:blur(20px) saturate(1.22); }
.cm-modal-body { background:#fff; }
.cm-modal-head .cm-icon-btn { border:0; background:rgba(17,17,17,.045); box-shadow:none; }
.cm-modal-head .cm-icon-btn:hover { background:#111; color:#fff; }
.cm-modal-step { color:#777; }

/* Fixed modal chrome: only the content pane scrolls. */
.cm-fixed-actions { padding:0!important; overflow:hidden!important; display:flex; flex-direction:column; }
.cm-fixed-actions>.cm-modal-scroll { min-width:0; min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; overscroll-behavior-y:contain; touch-action:pan-y; scrollbar-gutter:stable; }
.cm-ai-scroll,.cm-brew-scroll { padding:calc(var(--cm-modal-head-height) + 24px) 24px 24px; }
.cm-account-scroll,.cm-cloud-scroll { padding:calc(var(--cm-modal-head-height) + 24px) 22px 24px; }
.cm-explore-scroll { padding:91px 28px 88px; }
.cm-fixed-actions>.cm-form-actions,.cm-fixed-actions>.cm-auth-actions,.cm-fixed-actions>.cm-explore-detail-actions { position:relative; bottom:auto; z-index:6; min-height:72px; flex:none; margin:0!important; padding:14px 24px calc(14px + env(safe-area-inset-bottom)); background:#fff; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Shared modal footer treatment. */
.cm-recipe-modal .cm-form-actions,.cm-ai-import>.cm-form-actions,.cm-explore-detail-actions { border-top:0!important; background:#fff; box-shadow:none; backdrop-filter:none; }
.cm-recipe-modal .cm-form-actions { padding-top:14px; }
.cm-ai-import>.cm-form-actions,.cm-explore-detail-actions { padding-top:14px; }

/* AI import: retain interaction cues, remove structural boxes and dividers. */
.cm-ai-import-status { min-height:0; padding:18px 20px; border-bottom:0; border-radius:18px; background:#f8f8f8; }
.cm-ai-status { border:0; }
.cm-ai-upload,.cm-ai-copy-input { border:0; background:var(--cm-modal-soft); box-shadow:none; }
.cm-ai-upload:hover { border:0; background:#ececec; box-shadow:0 12px 30px rgba(0,0,0,.07); }
.cm-ai-upload-icon { background:#111; color:#fff; }
.cm-ai-upload-icon .hgi-stroke { color:#fff!important; opacity:1!important; filter:none!important; -webkit-text-fill-color:#fff; }
.cm-ai-or span { border:0; background:#efefef; }
.cm-ai-result { border:0; background:#f8f8f8; }
.cm-ai-result-head { padding-bottom:8px; border-bottom:0; }
.cm-ai-result-metrics { gap:8px; margin:18px 0; border:0; background:transparent; }
.cm-ai-result-metrics>div { border-radius:11px; background:#fff; }

/* Explore detail: metrics and steps become soft content groups instead of a grid. */
.cm-explore-modal { background:#fff; }
.cm-explore-modal .cm-modal-head { background:rgba(255,255,255,.68); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); }
.cm-explore-modal .cm-modal-body { background:#fff; }
.cm-explore-detail-hero { z-index:1; min-height:252px; padding:36px 42px 34px; overflow:visible; background:#fff; }
.cm-explore-detail-hero img { z-index:1; height:112%; bottom:-34%; }
.cm-explore-detail-metrics { position:relative; z-index:3; isolation:isolate; gap:0; margin:10px 0 0; padding:8px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:20px; background:rgba(255,255,255,.74); box-shadow:0 14px 36px rgba(17,17,17,.06); backdrop-filter:blur(18px) saturate(1.08); -webkit-backdrop-filter:blur(18px) saturate(1.08); }
.cm-explore-detail-metrics>div { position:relative; min-height:82px; padding:15px 16px; border-right:0; border-radius:0; background:transparent; display:flex; flex-direction:column; justify-content:center; }
.cm-explore-detail-metrics>div:first-child { padding-left:14px; }
.cm-explore-detail-metrics>div+div:before { content:''; position:absolute; left:0; top:50%; width:1px; height:32px; background:rgba(17,17,17,.09); transform:translateY(-50%); }
.cm-explore-detail-metrics span { color:#666; font-size:11px; font-weight:var(--cm-fw-medium); line-height:1.3; }
.cm-explore-detail-metrics strong { margin-top:7px; padding:.08em 0 .14em; overflow:visible; color:#111; font-size:18px; font-weight:800; line-height:1.22; letter-spacing:-.025em; text-overflow:clip; white-space:nowrap; }
.cm-explore-detail .cm-detail-steps { gap:8px; }
.cm-explore-detail .cm-detail-step { min-height:72px; padding:10px 14px; border-bottom:0; border-radius:14px; background:#f8f8f8; }
.cm-explore-detail .cm-detail-step>span { background:#111; color:#fff; font-family:var(--cm-font-sans); font-weight:900; }
.cm-explore-detail-layout aside { border:0; background:#f8f8f8; }
.cm-replay-kicker { display:block; margin-bottom:9px; color:#666; font-size:9px; font-weight:var(--cm-fw-bold); letter-spacing:.08em; text-transform:uppercase; }
.cm-explore-detail-layout>section .cm-section-head h3 { line-height:1.35; }
.cm-explore-detail-layout>section .cm-section-head p { margin-top:7px!important; line-height:1.55; }
.cm-explore-detail-actions:before { content:''; position:absolute; z-index:0; left:0; right:0; top:-48px; height:48px; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%); pointer-events:none; }
.cm-explore-detail-actions>* { position:relative; z-index:1; }

/* Recipe, account, record and picker modals use the same quiet grouping language. */
.cm-recipe-modal { --cm-modal-head-height:72px; }
.cm-recipe-modal .cm-modal-head,.cm-ai-modal .cm-modal-head { background:var(--cm-modal-head-bg); }
.cm-recipe-modal .cm-wizard-scroll { padding-top:calc(var(--cm-modal-head-height) + 26px); }
.cm-modal>.cm-modal-body:not(.cm-fixed-actions):not(.cm-wizard) { padding-top:calc(var(--cm-modal-head-height) + 22px); }
.cm-recipe-modal .cm-modal-body.cm-wizard { background:#fff; }
.cm-grind-row,.cm-step-editor-body,.cm-advanced-options { border-top:0; border-bottom:0; }
.cm-step-editor { border:0; background:var(--cm-modal-soft); }
.cm-step-editor.collapsed:hover { background:#ededed; }
.cm-step-editor.expanded { border:0; background:linear-gradient(145deg,#f2f2f2 0%,#fff 72%); box-shadow:0 12px 34px rgba(0,0,0,.06); }
.cm-step-editor.expanded .cm-step-editor-title>span:first-child,.cm-step-editor.expanded .cm-step-icon-action { border:0; background:rgba(17,17,17,.055); }
.cm-account-intro,.cm-account-steps span,.cm-merge-summary article { border:0; background:var(--cm-modal-soft); }
.cm-dripper-picker-grid>button { border-color:transparent; background:var(--cm-modal-soft); }

/* The same quiet panel language is used on secondary pages where dividers were doing too much work. */
.cm-settings { gap:18px; }
.cm-settings .cm-card { padding:24px; border:0; border-radius:22px; background:var(--cm-surface-2); box-shadow:none; }
.cm-settings .cm-section-head { margin-bottom:12px; }
.cm-settings .cm-setting-row { min-height:72px; margin-top:8px; padding:15px 17px; border:0; border-radius:14px; background:var(--cm-surface); }
.cm-settings .cm-setting-copy span { line-height:1.55; }
.cm-insight-panel,.cm-insight-detail-panel { padding:24px; border:1px solid var(--cm-line); border-radius:22px; background:var(--cm-surface); }
.cm-insight-panel .cm-list { gap:4px; }
.cm-insight-panel .cm-list-row { padding-inline:4px; border-bottom:0; }
.cm-insight-detail-panel .cm-insight-ranking,.cm-insight-detail-panel .cm-distribution-row { border-bottom:0; }
.cm-insight-detail-panel .cm-insight-ranking { padding-inline:10px; border-radius:12px; }
.cm-insight-detail-hero { border:1px solid var(--cm-line); background:var(--cm-surface); }
.cm-library-intro { border:0; background:var(--cm-surface-2); }
.cm-insight-note { padding:6px 2px 0; display:flex; align-items:baseline; gap:10px 28px; color:var(--cm-muted); font-size:11px; line-height:1.65; }
.cm-insight-note>span { flex:none; color:var(--cm-text); font-size:12px; font-weight:var(--cm-fw-bold); }
.cm-insight-note p { margin:0!important; }
.cm-insight-note strong { color:var(--cm-text); font-weight:var(--cm-fw-semibold); }

/* Recipe details mirror the explored-recipe hierarchy without turning the page into another modal. */
.cm-detail-metrics { position:relative; gap:0; padding:8px; overflow:hidden; border:0; border-radius:20px; background:var(--cm-surface-2); }
.cm-detail-metrics>div { position:relative; min-height:72px; padding:14px 16px; border:0; display:flex; flex-direction:column; justify-content:center; }
.cm-detail-metrics>div+div:before { content:''; position:absolute; left:0; top:50%; width:1px; height:30px; background:var(--cm-line); transform:translateY(-50%); }
.cm-detail-metrics strong { margin-top:7px; padding:.06em 0 .12em; font-size:17px; font-weight:800; line-height:1.2; }
.cm-detail-steps { gap:8px; }
.cm-detail-step { min-height:72px; padding:10px 14px; border-bottom:0; border-radius:14px; background:var(--cm-surface-2); }
.cm-detail-step>span { background:#111; color:#fff; font-family:var(--cm-font-sans); font-weight:900; }
.cm-dripper-picker-grid>button:hover { border-color:transparent; background:#ececec; box-shadow:0 12px 30px rgba(0,0,0,.07); }
.cm-draft-drippers>button { border-color:transparent; background:var(--cm-modal-soft); box-shadow:none; }
.cm-draft-drippers>button:hover { border-color:transparent; background:#ececec; box-shadow:0 12px 30px rgba(0,0,0,.06); }
.cm-draft-drippers>button.selected { border-color:var(--cm-text); background:var(--cm-surface-2); box-shadow:inset 0 0 0 1px var(--cm-text); }

/* Dripper detail uses the same editorial hierarchy as the refreshed detail surfaces. */
.cm-dripper-detail { gap:20px; }
.cm-dripper-hero { min-height:430px; position:relative; isolation:isolate; border:0; border-radius:28px; background:radial-gradient(circle at 82% 22%,rgba(255,255,255,.14),transparent 27%),linear-gradient(145deg,#1a1a1a 0%,#101010 72%); color:#fff; box-shadow:none; }
.cm-dripper-hero::after { content:''; position:absolute; z-index:-1; width:390px; height:390px; right:-130px; bottom:-220px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 48px rgba(255,255,255,.018),0 0 0 96px rgba(255,255,255,.012); pointer-events:none; }
.cm-dripper-hero-copy { min-width:0; padding:clamp(36px,5vw,66px); }
.cm-dripper-hero-copy .cm-kicker { color:rgba(255,255,255,.55); }
.cm-dripper-hero-copy h2 { max-width:12ch; margin-top:18px!important; padding:.04em 0 .12em; color:#fff; font-size:clamp(46px,6vw,80px); line-height:1.02; letter-spacing:-.055em; overflow-wrap:anywhere; text-wrap:balance; }
.cm-dripper-hero-copy p { max-width:590px; margin:16px 0 28px!important; color:rgba(255,255,255,.58); line-height:1.75; }
.cm-dripper-hero-copy .cm-btn.brand { border-color:#fff; background:#fff; color:#111; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.cm-dripper-hero-copy .cm-btn.brand:hover { background:#ededed; transform:translateY(-1px); }
.cm-dripper-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.cm-dripper-hero-copy .cm-dripper-delete {
  min-height:48px;
  padding-inline:17px;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);
  color:#ff9b95;
  box-shadow:none;
}
.cm-dripper-hero-copy .cm-dripper-delete:hover {
  border-color:rgba(255,155,149,.48);
  background:rgba(255,155,149,.12);
  color:#ffd0cc;
  box-shadow:none;
}
.cm-dripper-hero-media { min-width:0; overflow:hidden; background:radial-gradient(circle at 58% 46%,rgba(255,255,255,.22),transparent 52%); }
.cm-dripper-hero-media img { width:112%; height:112%; right:-17%; bottom:-20%; object-position:center bottom; filter:none; }
.cm-dripper-hero-monogram { color:rgba(255,255,255,.055); }
.cm-dripper-stats { gap:0; padding:8px; overflow:visible; border:0; border-radius:20px; background:var(--cm-surface-2); }
.cm-dripper-stats article { min-height:86px; padding:15px 18px; position:relative; border:0; background:transparent; display:flex; align-items:flex-start; align-content:center; flex-wrap:wrap; }
.cm-dripper-stats article+article::before { content:''; position:absolute; left:0; top:50%; width:1px; height:34px; background:var(--cm-line); transform:translateY(-50%); }
.cm-dripper-stats span { width:100%; line-height:1.45; }
.cm-dripper-stats strong { max-width:100%; margin-top:8px; padding:.04em 0 .12em; font-size:30px; font-weight:800; line-height:1.18; overflow-wrap:anywhere; }
.cm-dripper-stats strong.date { display:block; width:100%; font-size:17px; line-height:1.35; white-space:normal; }
.cm-dripper-stats small { align-self:flex-end; margin:0 0 .38em 5px; }
.cm-dripper-presets { padding:26px; border:1px solid var(--cm-line); border-radius:22px; background:var(--cm-surface); }
.cm-dripper-presets>.cm-section-head { margin-bottom:20px; }
.cm-dripper-presets>.cm-section-head>span { flex:none; padding:6px 9px; border-radius:999px; background:var(--cm-surface-2); line-height:1; }
.cm-dripper-preset-grid { gap:12px; margin-top:0; }
.cm-dripper-preset-grid button { min-height:128px; padding:18px 52px 18px 18px; border:0; border-radius:16px; background:var(--cm-surface-2); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.cm-dripper-preset-grid button:hover { border-color:transparent; background:#ededed; transform:translateY(-1px); }
.cm-dripper-preset-grid button>span { flex:none; background:#e9e9e9; color:#666; }
.cm-dripper-preset-grid button>span.exact { background:#111; color:#fff; }
.cm-dripper-preset-grid strong,.cm-dripper-preset-grid small { max-width:100%; white-space:normal; text-overflow:clip; }
.cm-dripper-preset-grid strong { margin-top:10px; display:block; font-size:14px; line-height:1.45; overflow:visible; overflow-wrap:anywhere; }
.cm-dripper-preset-grid small { margin-top:7px; line-height:1.5; overflow-wrap:anywhere; }
.cm-dripper-preset-grid i { right:18px; color:#111; }
.cm-dripper-detail>.cm-detail-grid { gap:18px; }
.cm-dripper-detail>.cm-detail-grid>.cm-detail-section { min-width:0; padding:24px; border:1px solid var(--cm-line); border-radius:22px; background:var(--cm-surface); }
.cm-dripper-detail>.cm-detail-grid .cm-list { gap:6px; }
.cm-dripper-detail>.cm-detail-grid .cm-list-row { min-width:0; padding:0 4px; border-bottom:0; }
.cm-dripper-detail>.cm-detail-grid .cm-list-copy strong,.cm-dripper-detail>.cm-detail-grid .cm-list-copy span { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.cm-dripper-detail .cm-empty { border:0; border-radius:16px; background:var(--cm-surface-2); }
@media (max-width:1200px) {
  .cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1050px) {
  .cm-stat-grid { grid-template-columns:repeat(2,1fr); }
  .cm-recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cm-dripper-grid { grid-template-columns:repeat(2,1fr); }
  .cm-detail-hero { align-items:flex-start; justify-content:flex-end; flex-direction:column; }
  .cm-detail-metrics { grid-template-columns:repeat(3,1fr); }
  .cm-detail-metrics>div:nth-child(4):before { display:none; }
  .cm-ai-result-metrics { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  .cm-toolbar { grid-template-columns:minmax(0,1fr) 118px auto auto; }
  .cm-toolbar>.cm-btn { padding-inline:12px; }
}
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-layout { display:block; }
  .cm-sidebar { display:none; }
  .cm-main { min-width:0; padding-top:64px; }
  .cm-topbar { height:64px; padding:0 16px; left:0; }
  .cm-page-heading small { display:none; }
  .cm-page-heading h1 { font-size:18px; }
  .cm-page-heading { gap:8px; }
  .cm-back-link { width:36px; min-height:36px; padding:0; border-right:0; justify-content:center; }
  .cm-back-link span { display:none; }
  .cm-topbar-tools { gap:6px; }
  .cm-top-actions .cm-btn span { display:none; }
  .cm-top-actions .cm-btn { width:42px; padding:0; }
  .cm-language-label,.cm-language-trigger>i { display:none; }
  .cm-language-trigger { min-width:42px; min-height:42px; padding:6px; justify-content:center; }
  .cm-language-menu { position:fixed; top:72px; right:12px; width:min(218px,calc(100vw - 24px)); }
  .cm-content { padding:24px 16px calc(96px + env(safe-area-inset-bottom)); }
  .cm-section { margin-top:32px; }
  .cm-section-head { gap:16px; margin-bottom:17px; }
  .cm-section-head p { margin-top:6px; line-height:1.6; }
  .cm-hero { grid-template-columns:1fr; }
  .cm-hero-main { min-height:460px; padding:28px 22px; background-position:62% center; }
  .cm-hero-side { min-height:210px; }
  .cm-grid-2 { grid-template-columns:1fr; }
  .cm-recipe-grid { grid-template-columns:minmax(0,480px); justify-content:center; }
  .cm-explore-intro { min-height:360px; grid-template-columns:1fr; align-items:end; }
  .cm-explore-intro-stat { padding:18px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.2); }
  .cm-explore-tools { grid-template-columns:1fr; }
  .cm-explore-grid { grid-template-columns:minmax(0,480px); justify-content:center; }
  .cm-toolbar { grid-template-columns:minmax(0,1fr) repeat(2,auto); gap:7px; padding:7px; }
  .cm-toolbar>.cm-search { grid-column:1/-1; }
  .cm-toolbar>.cm-select { width:100%!important; }
  .cm-toolbar>.cm-btn { min-height:42px; padding-inline:11px; }
  .cm-explore-modal { width:100%; max-height:94vh; }
  .cm-explore-modal .cm-modal-head { padding:16px 18px; }
  .cm-explore-scroll { padding:82px 18px 80px; }
  .cm-explore-detail { padding:0 18px 20px; }
  .cm-explore-detail-hero { min-height:250px; margin:0 -18px; padding:28px 22px; align-items:flex-end; }
  .cm-explore-detail-hero>div:first-child { width:72%; max-width:none; }
  .cm-explore-detail-hero h3 { max-width:13ch; font-size:clamp(26px,8vw,38px); }
  .cm-explore-detail-hero img { width:58%; height:94%; right:-16%; bottom:-30%; opacity:1; filter:none; }
  .cm-explore-detail-metrics { grid-template-columns:repeat(3,1fr); margin:8px 0 0; padding:6px; }
  .cm-explore-detail-metrics>div { min-height:70px; padding:11px 12px; border-bottom:0; }
  .cm-explore-detail-metrics>div:nth-child(4):before { display:none; }
  .cm-explore-detail-layout { grid-template-columns:1fr; gap:20px; padding:24px 0 18px; }
  .cm-explore-detail-layout aside { position:static; }
  .cm-explore-detail-actions { bottom:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .cm-dripper-preset-grid { grid-template-columns:1fr; }
  .cm-mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); left:0; right:0; bottom:0; z-index:80; margin:0; border:0; border-top:1px solid var(--cm-line); border-radius:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--cm-surface); box-shadow:0 -8px 24px rgba(0,0,0,.04); }
  .cm-mobile-nav .cm-nav-btn { min-width:0; min-height:54px; padding:5px 2px; justify-content:center; flex-direction:column; gap:3px; border-radius:10px; background:transparent; color:#a8a8a8; font-size:10px; font-weight:var(--cm-fw-medium); letter-spacing:0; box-shadow:none; }
  .cm-mobile-nav .cm-nav-btn:hover { transform:none; background:transparent; color:#777; }
  .cm-mobile-nav .cm-nav-btn.active { background:transparent; color:#111; box-shadow:none; }
  #coffmeApp .cm-mobile-nav .cm-nav-btn:focus-visible { outline:1px solid rgba(17,17,17,.22); outline-offset:-1px; }
  .cm-mobile-nav .cm-nav-btn>.hgi-stroke { display:none; }
  .cm-mobile-nav .cm-mobile-nav-icon { display:inline-block; color:currentColor; font-family:'Material Symbols Rounded'; font-size:23px; font-style:normal; font-weight:300; line-height:1; white-space:nowrap; direction:ltr; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; font-variation-settings:'FILL' 0,'opsz' 24; transition:color .18s ease,font-variation-settings .18s ease,transform .18s ease; }
  .cm-mobile-nav .cm-nav-btn.active .cm-mobile-nav-icon { color:#111; font-variation-settings:'FILL' 1,'opsz' 24; transform:translateY(-1px); }
  .cm-mobile-only { display:grid; }
  .cm-table-wrap { overflow-x:auto; margin:0 -8px; }
  .cm-table { min-width:620px; }
  .cm-form-grid { grid-template-columns:1fr; }
  .cm-field.full { grid-column:auto; }
  .cm-modal-wrap { align-items:flex-end; padding:0; }
  .cm-modal-wrap,.cm-modal { overflow-x:hidden; overscroll-behavior-x:none; }
  .cm-modal { width:100%; max-width:100vw; max-height:92vh; border-radius:22px 22px 0 0; touch-action:pan-y; }
  .cm-account-center { min-height:0; height:84vh; }
  .cm-account-profile { padding:20px 18px; gap:14px; }
  .cm-account-profile-avatar { width:52px; height:52px; border-radius:16px; font-size:20px; }
  .cm-account-profile h3 { font-size:19px; }
  .cm-account-summary { gap:7px; }
  .cm-account-summary article { min-height:102px; padding:12px; }
  .cm-account-summary strong { font-size:25px; }
  .cm-account-details dl>div { grid-template-columns:82px minmax(0,1fr); gap:12px; }
  .cm-account-actions { flex-wrap:nowrap; }
  .cm-account-actions .cm-btn { min-width:108px; }
  .cm-recipe-modal { width:100%; max-height:94vh; border-radius:22px 22px 0 0; }
  .cm-recipe-modal .cm-modal-head { padding:18px 18px 15px; }
  .cm-recipe-flow-head { padding:0 14px 0 18px; gap:6px; }
  .cm-wizard-progress { padding:0; gap:2px; }
  .cm-wizard-progress button { min-width:0; min-height:44px; padding-inline:1px; gap:4px; overflow:hidden; font-size:10px; line-height:1.2; white-space:nowrap; }
  .cm-wizard-progress button>span { width:18px; height:18px; }
  .cm-recipe-modal .cm-modal-body { padding:0; }
  .cm-recipe-modal .cm-wizard-scroll { padding:calc(var(--cm-modal-head-height) + 22px) 18px 24px; }
  .cm-recipe-modal .cm-form-actions { margin:0; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .cm-wizard-footer-hint { display:none; }
  .cm-name-assist { align-items:flex-start; flex-direction:column; }
  .cm-name-assist>div { justify-content:flex-start; }
  .cm-caffeine-panel { grid-template-columns:1fr; }
  .cm-insight-toolbar { min-height:0; margin-bottom:24px; align-items:flex-start; flex-direction:column; gap:26px; }
  .cm-period-tools { width:100%; justify-items:stretch; gap:12px; }
  .cm-period-switch { width:100%; padding:4px; grid-template-columns:repeat(3,1fr); }
  .cm-period-switch button { min-height:44px; }
  .cm-period-nav { grid-template-columns:40px minmax(0,1fr) 40px; gap:8px; }
  .cm-period-nav button { width:40px; height:40px; }
  .cm-insight-panel,.cm-insight-detail-panel { padding:20px; border-radius:19px; }
  .cm-insight-panel .cm-list-row { min-height:66px; }
  .cm-insight-note { align-items:flex-start; flex-direction:column; gap:5px; padding-inline:2px; }
  .cm-caffeine-overview { min-height:350px; }
  .cm-caffeine-bars { height:230px; }
  .cm-insight-detail-hero { min-height:300px; align-items:flex-start; flex-direction:column; }
  .cm-insight-detail-hero>div:last-child { min-width:0; text-align:left; }
  .cm-insight-detail-body { grid-template-columns:1fr; }
  .cm-detail-bars { height:230px; overflow-x:auto; }
  .cm-detail-bar { min-width:26px; }
  .cm-detail-grid { grid-template-columns:1fr; }
  .cm-detail-hero { min-height:390px; padding-bottom:96px; }
  .cm-detail-copy { max-width:78%; padding-top:0; }
  .cm-detail-dripper { width:64vw; right:-13%; bottom:-22%; opacity:1; transform:rotate(-8deg); filter:none; }
  .cm-detail-monogram { right:-2%; bottom:.05em; font-size:clamp(190px,72vw,320px); }
  .cm-detail-actions { top:auto; right:18px; bottom:18px; left:18px; justify-content:flex-end; }
  .cm-detail-actions .cm-detail-favorite { margin-right:auto; }
  .cm-detail-more-menu { top:auto; right:0; bottom:calc(100% + 8px); }
  .cm-choice-grid.compact { grid-template-columns:repeat(3,1fr); }
  .cm-step-type-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cm-step-extra-grid { grid-template-columns:1fr; }
  .cm-step-extra-grid label.full { grid-column:auto; }
  .cm-range-grid { grid-template-columns:1fr; }
  .cm-wizard-intro-row { align-items:flex-start; flex-direction:column; gap:10px; }
  .cm-parameter-title { align-items:flex-start; flex-direction:column; gap:4px; }
  .cm-parameter-title p { text-align:left; }
  .cm-parameter-intro .cm-ratio-preview { width:100%; }
  .cm-step-page-head { align-items:stretch; flex-direction:column; gap:12px; }
  .cm-step-balance { width:100%; min-width:0; }
  .cm-draft-summary { max-width:100%; text-align:left; }
  .cm-step-balance { grid-template-columns:1fr auto; }
  .cm-step-balance small { grid-column:1/-1; }
  .step-ranges { grid-template-columns:1fr; }
  .cm-draft-drippers { grid-template-columns:1fr; }
  .cm-wizard { min-height:0; }
  .cm-completion-log { border-radius:16px; }
  .cm-completion-grid { grid-template-columns:1fr; }
  .cm-completion-log.saved { grid-template-columns:1fr; text-align:center; }
  .cm-completion-log.saved .cm-completion-icon { margin:0 auto; }
  .cm-completion-log.saved .cm-completion-actions { grid-column:auto; justify-content:center; }
  .cm-ai-coach-head { flex-direction:column; }
  #cm-page-insights .cm-ai-coach { padding:26px 22px; border-radius:22px; }
  #cm-page-insights .cm-ai-coach-head { gap:24px; }
  #cm-page-insights .cm-ai-coach-head h2 { font-size:clamp(34px,11vw,48px); }
  .cm-ai-coach-actions { width:100%; justify-content:stretch; }
  .cm-ai-coach-actions .cm-btn { min-width:0; flex:1; padding-inline:13px; }
  .cm-ai-orb { right:-22px; font-size:190px; }
  .cm-ai-advice-grid { grid-template-columns:1fr; }
  .cm-modal.cm-ai-history-modal { width:100%; height:92vh; max-height:92vh; border-radius:22px 22px 0 0; }
  .cm-ai-history-scroll { padding:calc(var(--cm-modal-head-height) + 18px) 18px 18px; }
  .cm-ai-history-list>button { min-height:0; padding:17px; grid-template-columns:1fr auto; grid-template-rows:auto auto auto; gap:8px 14px; }
  .cm-ai-history-list>button>span { grid-column:1/3; grid-row:auto; align-self:auto; flex-direction:row; align-items:center; }
  .cm-ai-history-list>button>strong { grid-column:1; }
  .cm-ai-history-list>button>p { grid-column:1/3; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .cm-ai-history-list>button>em { grid-column:2; grid-row:2; }
  .cm-ai-source-grid { grid-template-columns:1fr; }
  .cm-ai-or { height:24px; }
  .cm-ai-modal { width:100%; max-height:94vh; border-radius:22px 22px 0 0; }
  .cm-ai-modal .cm-modal-head { padding:17px 18px; }
  .cm-ai-modal .cm-modal-body { padding:20px 18px; }
  .cm-ai-scroll,.cm-brew-scroll { padding:calc(var(--cm-modal-head-height) + 20px) 18px 20px; }
  .cm-account-scroll,.cm-cloud-scroll { padding:calc(var(--cm-modal-head-height) + 20px) 18px 20px; }
  .cm-modal>.cm-modal-body:not(.cm-fixed-actions):not(.cm-wizard) { padding-top:calc(var(--cm-modal-head-height) + 18px); }
  .cm-ai-import-status { align-items:flex-start; padding-bottom:18px; }
  .cm-ai-import-status p { max-width:none; }
  .cm-ai-upload,.cm-ai-copy-input { min-height:220px; }
  .cm-ai-analyzing { align-items:flex-start; padding:20px; }
  .cm-ai-scan { width:64px; height:64px; }
  .cm-ai-import>.cm-form-actions { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .cm-ai-import-status { align-items:flex-start; flex-direction:column; }
  .cm-ai-import-status p { text-align:left; }
  .cm-ai-result-metrics { grid-template-columns:repeat(2,1fr); }
  .cm-library-intro { min-height:330px; align-items:flex-start; flex-direction:column; }
  .cm-library-intro>div:last-child { padding:18px 0 0; border:0; }
  .cm-dripper-grid { grid-template-columns:minmax(0,480px); justify-content:center; }
  .cm-dripper-hero { min-height:600px; grid-template-columns:1fr; }
  .cm-dripper-hero-copy { padding:32px 24px 8px; align-self:start; }
  .cm-dripper-hero-copy h2 { max-width:none; padding-bottom:.16em; font-size:clamp(40px,13vw,58px); line-height:1.05; }
  .cm-dripper-hero-copy p { margin-top:12px!important; }
  .cm-dripper-hero-media { min-height:280px; }
  .cm-dripper-hero-media img { width:106%; height:118%; right:-20%; bottom:-28%; }
  .cm-dripper-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .cm-dripper-stats article { min-height:88px; padding:14px; border:0!important; border-radius:14px; background:var(--cm-surface); }
  .cm-dripper-stats article+article::before { display:none; }
  .cm-dripper-stats strong { font-size:27px; }
  .cm-dripper-stats strong.date { font-size:15px; }
  .cm-dripper-presets { padding:20px; }
  .cm-settings { width:100%; }
  .cm-dripper-presets>.cm-section-head { align-items:flex-start; }
  .cm-dripper-detail>.cm-detail-grid>.cm-detail-section { padding:20px; }
  .cm-dripper-picker-grid { grid-template-columns:repeat(2,1fr); }
  .cm-timer-mode #cm-page-timer { min-height:calc(100vh - 64px); }
  .cm-timer-mode .cm-timer-card { padding:38px 18px 96px; align-items:start; }
  .cm-timer-mode .cm-timer-setup h2 { font-size:48px; }
}
@media (max-width:460px) {
  .cm-stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .cm-stat { min-height:108px; padding:13px 34% 13px 14px; }
  .cm-stat-content { min-height:80px; }
  .cm-stat-value strong { font-size:23px; }
  .cm-stat-value strong .cm-number { font-size:24px; }
  .cm-stat small { max-width:86px; white-space:normal; }
  .cm-stat-art { width:82px; height:80px; right:-2px; bottom:0; opacity:.76; }
  .cm-hero-main h2 { font-size:34px; }
  .cm-detail-metrics { grid-template-columns:repeat(2,1fr); }
  .cm-draft-drippers { grid-template-columns:1fr; }
  .cm-dripper-picker-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .cm-dripper-picker-grid>button>span { height:112px; }
  .cm-detail-metrics>div:nth-child(3):before,.cm-detail-metrics>div:nth-child(5):before { display:none; }
  .cm-choice-grid { grid-template-columns:repeat(2,1fr); }
  .cm-choice-grid.compact { grid-template-columns:repeat(2,1fr); }
  .cm-ratio-presets>div { grid-template-columns:repeat(3,1fr); }
  .cm-wizard-nav-btn { min-width:98px; }
  .cm-step-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cm-step-editor-head { grid-template-columns:20px minmax(0,1fr) auto; gap:7px; }
  .cm-step-editor-title { grid-template-columns:32px minmax(0,1fr) auto 16px; gap:8px; }
  .cm-step-editor-title>span { width:30px; height:30px; }
  .cm-step-editor-title small { grid-column:3; grid-row:1; }
  .cm-step-toggle-icon { grid-column:4; grid-row:1; }
  .cm-step-editor-actions { gap:5px; }
  .cm-step-icon-action { width:30px; height:30px; }
  .cm-review-metrics { grid-template-columns:repeat(2,1fr); }
  .cm-review-metrics>div:nth-child(2) { border-right:0; }
  .cm-review-metrics>div:nth-child(-n+2) { border-bottom:1px solid var(--cm-line); }
  .cm-form-actions { flex-wrap:wrap; }
  .cm-action-spacer { display:none; }
  .cm-detail-copy .cm-eyebrow { margin-bottom:18px; }
  .cm-detail-hero h2 { line-height:1.04; }
  .cm-detail-hero p { margin-top:20px; line-height:1.65; }
  .cm-settings .cm-card { padding:18px; border-radius:19px; }
  .cm-settings .cm-setting-row { align-items:flex-start; padding:14px; }
}
/* Focused brew timer — white editorial workspace */
.cm-timer-mode #coffmeApp,.cm-timer-mode .cm-layout,.cm-timer-mode .cm-main { background:#fff; color:#111; }
.cm-timer-mode .cm-topbar { background:rgba(255,255,255,.96); color:#111; border-bottom-color:rgba(0,0,0,.08); backdrop-filter:blur(16px); }
.cm-timer-mode .cm-page-heading small { color:var(--cm-muted); }
.cm-timer-mode #cm-page-timer { min-height:calc(100vh - 76px); background:#fff; color:#111; }
.cm-timer-mode .cm-content { max-width:none; padding:0; }
.cm-timer-mode .cm-timer-wrap { width:100%; max-width:none; min-height:inherit; margin:0; }
.cm-brew-kicker { display:block; color:#777; font:700 10px var(--cm-font-mono); }
.cm-brew-setup { min-height:calc(100vh - 76px); padding:clamp(20px,3vw,42px); display:grid; place-items:center; }
.cm-brew-setup-grid { width:min(1180px,100%); min-height:min(690px,calc(100vh - 118px)); border:1px solid rgba(0,0,0,.1); border-radius:28px; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr); overflow:hidden; background:#fff; }
.cm-brew-setup-main { min-width:0; padding:clamp(38px,5vw,72px); display:flex; flex-direction:column; }
.cm-brew-setup-main h2 { margin-top:16px; font-family:var(--cm-font-display); font-size:clamp(45px,5vw,76px); font-weight:var(--cm-fw-bold); line-height:.98; }
.cm-brew-setup-main>p { max-width:460px; margin-top:20px!important; color:var(--cm-muted); font-size:13px; line-height:1.65; }
.cm-brew-recipe-select { min-height:68px; margin-top:clamp(30px,5vh,58px); padding:0 18px; border:1px solid rgba(0,0,0,.12); border-radius:14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; cursor:pointer; transition:border-color .18s ease,transform .18s ease; }
.cm-brew-recipe-select:hover { border-color:#111; transform:translateY(-1px); }
.cm-brew-recipe-select>span { color:var(--cm-muted); font-size:10px; }
.cm-brew-recipe-select>i { font-size:16px; pointer-events:none; }
.cm-brew-recipe-select select { width:100%; height:64px; padding:0; border:0; outline:0; appearance:none; background:transparent; color:#111; font:700 15px var(--cm-font); cursor:pointer; }
.cm-brew-setup-metrics { margin-top:18px; padding:20px 0; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); display:grid; grid-template-columns:repeat(4,1fr); }
.cm-brew-setup-metrics>div { min-width:0; padding:0 14px; border-right:1px solid rgba(0,0,0,.08); }
.cm-brew-setup-metrics>div:first-child { padding-left:0; }
.cm-brew-setup-metrics>div:last-child { padding-right:0; border-right:0; text-align:right; }
.cm-brew-setup-metrics span,.cm-brew-setup-metrics strong { display:block; }
.cm-brew-setup-metrics span { color:var(--cm-muted); font-size:10px; }
.cm-brew-setup-metrics strong { margin-top:7px; font-family:var(--cm-font-display); font-size:22px; font-weight:var(--cm-fw-bold); line-height:1; white-space:nowrap; }
.cm-brew-setup-metrics small { margin-left:2px; color:var(--cm-muted); font-size:10px; }
.cm-brew-start { width:100%; min-height:62px; margin-top:auto; padding:0 20px; border:1px solid #111; border-radius:14px; background:#111; color:#fff; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:12px; cursor:pointer; transition:background .18s ease,transform .18s ease; }
.cm-brew-start:hover { background:#292929; transform:translateY(-1px); }
.cm-brew-start .cm-solid-icon { width:20px; height:20px; }
.cm-brew-start span { font-size:14px; font-weight:var(--cm-fw-bold); text-align:left; }
.cm-brew-start small { color:rgba(255,255,255,.58); font-size:10px; }
body.cm-ready .cm-brew-start,body.cm-ready .cm-brew-start span,body.cm-ready .cm-brew-start .cm-solid-icon { color:#fff; }
.cm-brew-plan { min-width:0; border-left:1px solid rgba(0,0,0,.08); background:#fafafa; display:flex; flex-direction:column; }
.cm-brew-plan-visual { height:260px; position:relative; overflow:hidden; background:#f5f5f5; }
.cm-brew-plan-visual>span { position:absolute; left:24px; top:14px; color:rgba(0,0,0,.06); font:900 clamp(110px,12vw,178px)/1 var(--cm-font-display); }
.cm-brew-plan-visual img { position:absolute; width:62%; height:112%; right:-6%; bottom:-20%; object-fit:contain; transform:rotate(-7deg); }
.cm-brew-plan-head { padding:24px 28px 20px; border-bottom:1px solid rgba(0,0,0,.08); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.cm-brew-plan-head span,.cm-brew-plan-head strong { display:block; }
.cm-brew-plan-head span { color:var(--cm-muted); font-size:10px; }
.cm-brew-plan-head strong { max-width:300px; margin-top:6px; overflow:hidden; font-size:17px; font-weight:var(--cm-fw-bold); text-overflow:ellipsis; white-space:nowrap; }
.cm-brew-plan-head>small { color:var(--cm-muted); font:600 10px var(--cm-font-mono); white-space:nowrap; }
.cm-brew-plan-steps { min-height:0; padding:0 28px 26px; overflow:auto; }
.cm-brew-plan-steps>div { min-height:72px; border-bottom:1px solid rgba(0,0,0,.08); display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:13px; }
.cm-brew-plan-steps>div>span { color:#aaa; font:700 10px var(--cm-font-mono); }
.cm-brew-plan-steps strong,.cm-brew-plan-steps small { display:block; }
.cm-brew-plan-steps strong { font-size:12px; }
.cm-brew-plan-steps small { margin-top:5px; color:var(--cm-muted); font-size:10px; }

.cm-brew-live { height:100vh; min-height:620px; padding:88px clamp(24px,3vw,44px) 18px; overflow:auto; display:flex; flex-direction:column; background:#fff; }
.cm-brew-live-head { min-height:92px; padding:0 0 24px; border-bottom:1px solid rgba(0,0,0,.1); display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.cm-brew-live-head h2 { margin-top:9px; font-family:var(--cm-font-display); font-size:clamp(26px,3vw,42px); font-weight:var(--cm-fw-bold); line-height:1; }
.cm-brew-live-head p { margin-top:9px!important; color:var(--cm-muted); font-size:11px; }
.cm-brew-total { width:min(390px,34vw); display:grid; grid-template-columns:auto 1fr; align-items:end; gap:7px 16px; text-align:right; }
.cm-brew-total>span { color:var(--cm-muted); font-size:10px; }
.cm-brew-total strong { font-family:var(--cm-font-display); font-size:20px; font-weight:var(--cm-fw-bold); }
.cm-brew-total strong small { color:var(--cm-muted); font-size:11px; font-weight:var(--cm-fw-medium); }
.cm-brew-total i { grid-column:1/-1; height:3px; overflow:hidden; background:#e9e9e9; }
.cm-brew-total i b { height:100%; display:block; background:#111; transition:width .25s linear; }
.cm-brew-live-grid { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(310px,.58fr); }
.cm-brew-stage { min-width:0; padding:clamp(24px,3vw,42px) clamp(28px,6vw,92px) 18px 0; border-right:1px solid rgba(0,0,0,.1); display:grid; grid-template-columns:90px minmax(0,1fr); grid-template-rows:auto 1fr auto auto auto; align-content:stretch; }
.cm-brew-stage-index { padding-top:6px; display:grid; justify-items:start; align-content:start; }
.cm-brew-stage-index span,.cm-brew-stage-index small { color:var(--cm-muted); font:700 9px var(--cm-font-mono); }
.cm-brew-stage-index strong { margin-top:4px; font-family:var(--cm-font-display); font-size:48px; font-weight:var(--cm-fw-bold); line-height:.9; }
.cm-brew-stage-copy { min-width:0; align-self:start; }
.cm-brew-stage-copy>span { color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); }
.cm-brew-stage-copy h1 { max-width:760px; margin-top:10px; overflow-wrap:anywhere; font-family:var(--cm-font-display); font-size:clamp(48px,5.5vw,82px); font-weight:var(--cm-fw-bold); line-height:.9; }
.cm-brew-stage-copy p { max-width:520px; margin-top:20px!important; color:var(--cm-muted); font-size:12px; line-height:1.65; }
.cm-brew-stage-time { grid-column:2; align-self:end; margin:12px 0 16px; }
.cm-brew-stage-time span,.cm-brew-stage-time strong { display:block; }
.cm-brew-stage-time span { color:var(--cm-muted); font-size:10px; }
.cm-brew-stage-time strong { margin-top:5px; font:700 clamp(58px,6.5vw,92px)/.88 var(--cm-font-display); font-variant-numeric:tabular-nums; }
.cm-brew-stage-targets { grid-column:1/-1; padding:12px 0; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); display:grid; grid-template-columns:repeat(3,1fr); }
.cm-brew-stage-targets>div { min-width:0; padding:0 22px; border-right:1px solid rgba(0,0,0,.1); }
.cm-brew-stage-targets>div:first-child { padding-left:0; }
.cm-brew-stage-targets>div:last-child { border-right:0; text-align:right; }
.cm-brew-stage-targets span,.cm-brew-stage-targets strong { display:block; }
.cm-brew-stage-targets span { color:var(--cm-muted); font-size:10px; }
.cm-brew-stage-targets strong { margin-top:7px; font-family:var(--cm-font-display); font-size:20px; font-weight:var(--cm-fw-bold); }
.cm-brew-stage-targets strong small { color:var(--cm-muted); font-size:10px; }
.cm-brew-stage-progress { grid-column:1/-1; padding:12px 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; }
.cm-brew-stage-progress>span { height:7px; overflow:hidden; border-radius:99px; background:#ededed; }
.cm-brew-stage-progress b { height:100%; display:block; border-radius:inherit; background:#111; transition:width .25s linear; }
.cm-brew-stage-progress small { width:34px; color:var(--cm-muted); font:700 10px var(--cm-font-mono); text-align:right; }
.cm-brew-control-dock { grid-column:1/-1; margin-top:8px; display:grid; grid-template-columns:minmax(170px,1fr) minmax(150px,.7fr) auto; gap:9px; }
.cm-brew-control-dock button { min-height:48px; padding:0 18px; border:1px solid rgba(0,0,0,.12); border-radius:13px; background:#fff; color:#111; display:flex; align-items:center; justify-content:center; gap:10px; font:700 12px var(--cm-font); cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; }
.cm-brew-control-dock button:hover { transform:translateY(-1px); border-color:#111; }
.cm-brew-control-dock button.primary { border-color:#111; background:#111; color:#fff; }
.cm-brew-control-dock button.primary:hover { background:#292929; }
body.cm-ready .cm-brew-control-dock button.primary { color:#fff; }
.cm-brew-control-dock button.quiet { border-color:transparent; color:var(--cm-muted); }
.cm-brew-timeline { min-width:0; padding:clamp(30px,4vw,60px) 0 30px clamp(26px,4vw,54px); }
.cm-brew-timeline-head { min-height:42px; display:flex; align-items:start; justify-content:space-between; gap:18px; }
.cm-brew-timeline-head>span { font-size:13px; font-weight:var(--cm-fw-bold); }
.cm-brew-timeline-head small { color:var(--cm-muted); font-size:9px; text-align:right; }
.cm-brew-timeline article { min-height:78px; padding:14px 12px; border-bottom:1px solid rgba(0,0,0,.08); display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; transition:background .25s ease,color .25s ease,border-radius .25s ease; }
.cm-brew-timeline article>span { color:#aaa; font:700 10px var(--cm-font-mono); text-align:center; }
.cm-brew-timeline article strong,.cm-brew-timeline article small { display:block; }
.cm-brew-timeline article strong { font-size:12px; }
.cm-brew-timeline article small { margin-top:5px; color:var(--cm-muted); font-size:9px; }
.cm-brew-timeline article em { color:var(--cm-muted); font:600 10px var(--cm-font-mono); }
.cm-brew-timeline article.complete { opacity:.46; }
.cm-brew-timeline article.current { margin:7px 0; border:0; border-radius:13px; background:#111; color:#fff; }
.cm-brew-timeline article.current>span,.cm-brew-timeline article.current small,.cm-brew-timeline article.current em { color:rgba(255,255,255,.62); }
.cm-brew-live.paused .cm-brew-stage-copy h1,.cm-brew-live.paused .cm-brew-stage-time strong { opacity:.48; }
.cm-brew-finish { width:min(850px,100%); margin:auto; padding:50px 0; text-align:center; }
.cm-brew-finish>h2 { margin-top:14px; font-family:var(--cm-font-display); font-size:clamp(48px,7vw,88px); font-weight:var(--cm-fw-bold); line-height:.95; }
.cm-brew-finish>p { margin-top:16px!important; color:var(--cm-muted); font-size:12px; }
.cm-timer-mode .cm-completion-log { border-color:rgba(0,0,0,.1); background:#fff; color:#111; box-shadow:none; }
.cm-timer-mode .cm-completion-head { border-bottom-color:rgba(0,0,0,.1); }
.cm-timer-mode .cm-completion-head p,.cm-timer-mode .cm-completion-log.saved p { color:var(--cm-muted); }
.cm-timer-mode .cm-completion-log .cm-field label { color:#111; }
.cm-timer-mode .cm-completion-log .cm-rating button,.cm-timer-mode .cm-completion-log .cm-tag { border-color:rgba(0,0,0,.12); background:#fff; color:var(--cm-muted); }
.cm-timer-mode .cm-completion-log .cm-rating button.on,.cm-timer-mode .cm-completion-log .cm-tag.on { border-color:#111; background:#111; color:#fff; }
.cm-timer-mode .cm-completion-log .cm-textarea { border-color:rgba(0,0,0,.12); background:#fff; color:#111; }
.cm-timer-mode .cm-completion-log .cm-textarea::placeholder { color:#999; }

@media (max-width:980px) {
  .cm-brew-setup-grid { grid-template-columns:1fr; }
  .cm-brew-plan { border-top:1px solid rgba(0,0,0,.08); border-left:0; }
  .cm-brew-plan-visual { height:210px; }
  .cm-brew-live-grid { grid-template-columns:1fr; }
  .cm-brew-stage { padding-right:0; border-right:0; }
  .cm-brew-timeline { padding:28px 0 10px; border-top:1px solid rgba(0,0,0,.1); }
}
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-timer-mode #cm-page-timer { min-height:calc(100vh - 64px); }
  .cm-brew-setup { min-height:calc(100vh - 64px); padding:14px; }
  .cm-brew-live { height:100vh; min-height:620px; padding:78px 14px 14px; }
  .cm-brew-setup-grid { min-height:0; border-radius:20px; }
  .cm-brew-setup-main { padding:28px 22px; }
  .cm-brew-setup-main h2 { font-size:44px; }
  .cm-brew-setup-main>p { margin-top:14px!important; }
  .cm-brew-recipe-select { margin-top:28px; }
  .cm-brew-setup-metrics { grid-template-columns:repeat(2,1fr); gap:18px 0; }
  .cm-brew-setup-metrics>div:nth-child(2) { border-right:0; text-align:right; }
  .cm-brew-setup-metrics>div:nth-child(3) { padding-left:0; }
  .cm-brew-start { margin-top:28px; }
  .cm-brew-plan-visual { height:180px; }
  .cm-brew-plan-head { padding:20px; }
  .cm-brew-plan-steps { padding:0 20px 20px; }
  .cm-brew-live-head { align-items:flex-start; flex-direction:column; }
  .cm-brew-total { width:100%; }
  .cm-brew-stage { padding:34px 0 22px; grid-template-columns:58px minmax(0,1fr); }
  .cm-brew-stage-index strong { font-size:34px; }
  .cm-brew-stage-copy h1 { font-size:50px; }
  .cm-brew-stage-copy p { margin-top:14px!important; }
  .cm-brew-stage-time { margin:32px 0 24px; }
  .cm-brew-stage-time strong { font-size:68px; }
  .cm-brew-stage-targets { gap:0; }
  .cm-brew-stage-targets>div { padding:0 10px; }
  .cm-brew-stage-targets strong { font-size:15px; }
  .cm-brew-control-dock { grid-template-columns:1fr 1fr; }
  .cm-brew-control-dock button.quiet { grid-column:1/-1; min-height:42px; }
  .cm-brew-timeline article { padding-left:4px; padding-right:4px; }
  .cm-brew-finish { padding:28px 0; }
}
@media (max-width:460px) {
  .cm-brew-setup { padding:0; }
  .cm-brew-setup-grid { border:0; border-radius:0; }
  .cm-brew-plan { display:none; }
  .cm-brew-live { padding:78px 18px 18px; }
  .cm-brew-live-head h2 { font-size:25px; }
  .cm-brew-stage-copy h1 { font-size:46px; }
  .cm-brew-stage-targets>div:nth-child(3) { display:none; }
  .cm-brew-stage-targets { grid-template-columns:repeat(2,1fr); }
  .cm-brew-stage-targets>div:nth-child(2) { border-right:0; text-align:right; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Immersive full-screen brew timer */
body.cm-timer-running { overflow:hidden; overscroll-behavior:none; }
body.cm-timer-running .cm-topbar,body.cm-timer-running .cm-mobile-nav { display:none!important; }
body.cm-timer-running .cm-main,body.cm-timer-running .cm-content,body.cm-timer-running #cm-page-timer,body.cm-timer-running .cm-timer-wrap { width:100%; height:100dvh; min-height:0; padding:0; margin:0; overflow:hidden; }
.cm-brew-immersive { --water-level:0%; position:fixed; inset:0; z-index:80; height:100dvh; overflow:hidden; isolation:isolate; background:#fff; color:#111; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:clamp(22px,3vw,42px) clamp(24px,4.5vw,70px) clamp(22px,3vw,38px); }
.cm-brew-live.done { height:auto; min-height:calc(100dvh - 76px); overflow:visible; }
.cm-brew-water-fill { position:absolute; z-index:-1; left:0; right:0; bottom:-56px; height:calc(100% + 56px); border-top:2px solid #111; background:#111; transform:translate3d(0,calc(100% - var(--water-level)),0); transition:transform .25s linear; will-change:transform; contain:layout style; backface-visibility:hidden; }
@keyframes cm-water-quick-drain { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,100%,0); } }
.cm-brew-immersive.quick-drain .cm-brew-water-fill { animation:cm-water-quick-drain .7s cubic-bezier(.5,0,.8,.28) both; }
.cm-brew-immersive.flow-down .cm-brew-water-fill,.cm-brew-immersive.flow-up .cm-brew-water-fill { transition-timing-function:linear; }
.cm-immersive-head,.cm-immersive-stage,.cm-water-progress-copy,.cm-immersive-step-list { position:relative; z-index:1; color:#fff; mix-blend-mode:difference; }
.cm-immersive-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.cm-immersive-head>div:last-child { text-align:right; }
.cm-immersive-head span,.cm-immersive-head strong { display:block; }
.cm-immersive-head span { font-size:12px; font-weight:var(--cm-fw-semibold); text-transform:uppercase; }
.cm-immersive-head strong { margin-top:8px; font-size:14px; font-weight:var(--cm-fw-bold); }
.cm-immersive-step-list { position:absolute; top:52%; left:clamp(24px,4.5vw,70px); width:clamp(190px,15vw,228px); transform:translateY(-50%); pointer-events:none; }
.cm-immersive-step-list>span { display:block; margin-bottom:15px; font-size:11px; font-weight:var(--cm-fw-bold); }
.cm-immersive-step-list ol { list-style:none; display:grid; gap:4px; }
.cm-immersive-step-list li { position:relative; min-width:0; padding:10px 0 10px 12px; display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:10px; opacity:.38; transition:opacity .28s ease; }
.cm-immersive-step-list li+li { border-top:1px solid currentColor; }
.cm-immersive-step-list li.done { opacity:.62; }
.cm-immersive-step-list li.current { opacity:1; }
.cm-immersive-step-list li.current::before { content:""; position:absolute; top:9px; bottom:9px; left:0; width:2px; border-radius:2px; background:currentColor; }
.cm-immersive-step-list li b { font-family:var(--cm-font-display); font-size:13px; font-weight:var(--cm-fw-bold); }
.cm-immersive-step-list li strong,.cm-immersive-step-list li small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-immersive-step-list li strong { font-size:13px; font-weight:var(--cm-fw-bold); }
.cm-immersive-step-list li small { margin-top:5px; font-size:11px; opacity:.72; }
.cm-immersive-stage { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 0; }
.cm-immersive-kicker { font-size:12px; font-weight:var(--cm-fw-bold); }
.cm-immersive-stage h1 { max-width:900px; margin-top:10px; font-family:var(--cm-font-display); font-size:clamp(30px,3.8vw,58px); font-weight:var(--cm-fw-bold); line-height:1; overflow-wrap:anywhere; }
.cm-rolling-time { height:clamp(96px,14vw,176px); margin-top:clamp(12px,1.7vw,24px); display:flex; align-items:center; justify-content:center; font-family:var(--cm-font-display); font-size:clamp(92px,14vw,176px); font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.cm-roll-window { width:.64em; height:1.08em; margin-block:-.04em; padding-block:.04em; overflow:hidden; display:block; box-sizing:border-box; }
.cm-roll-track { display:block; transform:translate3d(0,calc(var(--roll-step) * -1em),0); transition:transform var(--roll-duration,.5s) cubic-bezier(.16,.82,.22,1); will-change:transform; backface-visibility:hidden; contain:layout paint; }
.cm-roll-track>span { width:100%; height:1em; display:flex; align-items:center; justify-content:center; }
.cm-roll-separator { width:.28em; height:1em; display:flex; align-items:center; justify-content:center; transform:translateY(-.06em); }
.cm-immersive-targets { width:min(640px,58vw); margin-top:clamp(16px,2vw,28px); display:grid; grid-template-columns:repeat(3,1fr); }
.cm-immersive-targets>div { min-width:0; padding:0 22px; border-right:1px solid rgba(17,17,17,.18); }
.cm-immersive-targets>div:last-child { border-right:0; }
.cm-immersive-targets span,.cm-immersive-targets strong { display:block; }
.cm-immersive-targets span { font-size:12px; font-weight:var(--cm-fw-medium); }
.cm-immersive-targets strong { margin-top:7px; font-family:var(--cm-font-display); font-size:clamp(20px,2.2vw,32px); font-weight:var(--cm-fw-bold); }
.cm-immersive-footer { display:grid; grid-template-columns:minmax(180px,1fr) minmax(460px,auto); align-items:end; gap:32px; }
.cm-water-progress-copy span,.cm-water-progress-copy strong,.cm-water-progress-copy small { display:block; }
.cm-water-progress-copy span { font-size:12px; font-weight:var(--cm-fw-semibold); }
.cm-water-progress-copy strong { margin-top:4px; font-family:var(--cm-font-display); font-size:34px; font-weight:var(--cm-fw-bold); line-height:1; }
.cm-water-progress-copy small { margin-top:8px; font-size:12px; opacity:.62; }
.cm-immersive-controls { display:grid; grid-template-columns:repeat(3,minmax(132px,1fr)); gap:9px; }
.cm-immersive-controls button { min-height:56px; padding:0 20px; border:1px solid rgba(17,17,17,.28); border-radius:14px; background:rgba(255,255,255,.94); color:#111; display:flex; align-items:center; justify-content:center; gap:10px; font:700 14px var(--cm-font-sans); cursor:pointer; backdrop-filter:blur(12px); transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease; }
.cm-immersive-controls button i { font-size:19px; }
.cm-immersive-controls button:hover { transform:translateY(-2px); background:#fff; }
.cm-immersive-controls .cm-immersive-pause { border-color:#111; background:#fff; color:#111; }
.cm-immersive-controls .cm-immersive-pause:hover { background:#f2f2f2; }
.cm-immersive-controls .cm-immersive-skip { border-color:rgba(255,255,255,.7); background:#111; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.cm-immersive-controls .cm-immersive-skip:hover { background:#292929; }
.cm-immersive-controls button.danger { border-color:color-mix(in srgb,var(--cm-danger) 34%,transparent); background:#fff7f6; color:var(--cm-danger); }
.cm-immersive-controls button.danger:hover { border-color:var(--cm-danger); background:#fff; }
.cm-immersive.paused .cm-rolling-time,.cm-brew-immersive.paused .cm-immersive-stage h1 { opacity:.42; }
.cm-brew-immersive.paused .cm-brew-water-fill { transition:none; animation-play-state:paused; }
.cm-brew-countdown { background:#fff; color:#111; }
.cm-brew-countdown .cm-immersive-head { color:#111; mix-blend-mode:normal; }
.cm-countdown-stage { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cm-countdown-stage>span { font-size:11px; font-weight:var(--cm-fw-bold); }
.cm-countdown-stage>strong { margin-top:clamp(8px,1.4vw,18px); font-family:var(--cm-font-display); font-size:clamp(150px,24vw,320px); font-weight:900; line-height:.8; animation:cm-ready-count .72s cubic-bezier(.2,.75,.25,1) both; }
.cm-countdown-stage h1 { margin-top:clamp(30px,4vw,58px); font-family:var(--cm-font-display); font-size:clamp(26px,3.2vw,46px); font-weight:var(--cm-fw-bold); }
.cm-countdown-stage p { margin-top:12px!important; color:var(--cm-muted); font-size:12px; }
.cm-countdown-footer { display:flex; justify-content:flex-end; gap:10px; }
.cm-countdown-footer button { min-width:140px; min-height:52px; padding:0 22px; border:1px solid rgba(17,17,17,.22); border-radius:14px; background:#fff; color:#111; font:700 12px var(--cm-font-sans); cursor:pointer; }
.cm-countdown-footer button.primary { border-color:#111; background:#111; color:#fff; }
@keyframes cm-ready-count { from { opacity:.15; transform:translateY(18px) scale(.92); } to { opacity:1; transform:none; } }
@media (max-width:640px) {
  .cm-countdown-stage>strong { font-size:clamp(126px,42vw,190px); }
  .cm-countdown-stage h1 { max-width:300px; font-size:24px; }
  .cm-countdown-footer { display:grid; grid-template-columns:1fr 1fr; }
  .cm-countdown-footer button { min-width:0; padding:0 12px; }
}

/* Optional advanced sensory rating */
.cm-advanced-rating { width:100%; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); }
.cm-advanced-trigger { width:100%; min-height:64px; padding:0; border:0; background:transparent; color:#111; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; cursor:pointer; }
.cm-advanced-trigger>span,.cm-advanced-trigger strong,.cm-advanced-trigger small { display:block; }
.cm-advanced-trigger strong { font-size:12px; font-weight:var(--cm-fw-bold); }
.cm-advanced-trigger small { margin-top:5px; color:var(--cm-muted); font-size:10px; }
.cm-advanced-trigger>i { font-size:17px; }
.cm-advanced-body { padding:5px 0 22px; animation:cm-advanced-in .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cm-advanced-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.cm-advanced-intro { margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cm-advanced-intro p { color:var(--cm-muted); font-size:10px; }
.cm-advanced-intro button { border:0; background:transparent; color:var(--cm-muted); font:600 10px var(--cm-font); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cm-sensory-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }
.cm-sensory-row { min-height:48px; display:grid; grid-template-columns:72px minmax(0,1fr) 24px; align-items:center; gap:12px; }
.cm-sensory-row>span { font-size:11px; font-weight:var(--cm-fw-semibold); }
.cm-sensory-row>div { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.cm-sensory-row button { height:32px; border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff; color:var(--cm-muted); font:700 10px var(--cm-font); cursor:pointer; transition:background .14s ease,color .14s ease,border-color .14s ease; }
.cm-sensory-row button.on { border-color:#111; background:#111; color:#fff; }
.cm-sensory-row>strong { font-family:var(--cm-font-display); font-size:14px; text-align:right; }
.cm-record-sensory { margin-top:7px; display:flex; flex-wrap:wrap; gap:5px 12px; }
.cm-record-sensory span { display:inline-flex; align-items:baseline; gap:4px; color:var(--cm-muted); font-size:9px; }
.cm-record-sensory b { color:inherit; font-weight:var(--cm-fw-semibold); }
.cm-record-sensory.compact { gap:4px 9px; }

/* Adaptive copy rhythm: keep multilingual content readable without changing card geometry. */
.cm-hero-copy { width:min(760px,76%); min-width:0; }
#coffmeApp .cm-hero-main h2 {
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow-wrap:anywhere;
  margin-bottom:24px;
  padding-bottom:.18em;
  font-size:clamp(34px,4.25vw,58px);
  line-height:1.04;
  text-wrap:balance;
}
.cm-hero-main p {
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.cm-hero-actions { max-width:100%; flex-wrap:nowrap; }
.cm-hero-actions .cm-btn { min-width:0; max-width:min(100%,240px); }
.cm-hero-actions .cm-btn span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[lang="en"] .cm-hero-main h2,
html[lang="fr"] .cm-hero-main h2,
html[lang="es"] .cm-hero-main h2,
html[lang="pt"] .cm-hero-main h2,
html[lang="de"] .cm-hero-main h2 { font-size:clamp(32px,3.8vw,52px); line-height:1.1; letter-spacing:-.045em; }

#cm-page-insights .cm-grid-2 { align-items:start; }
.cm-frequency-panel { align-self:start; min-width:0; }
.cm-frequency-panel .cm-section-head { align-items:flex-start; }
.cm-frequency-panel .cm-section-head>div { min-width:0; }
.cm-frequency-panel .cm-section-head h2 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow-wrap:anywhere;
  line-height:1.24;
}
.cm-frequency-panel .cm-section-head p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  line-height:1.5;
}
.cm-frequency-panel .cm-section-head .cm-btn { flex:none; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-frequency-panel .cm-bars { height:250px; padding-top:16px; }
.cm-frequency-panel .cm-bar-item { min-width:0; gap:7px; }
.cm-frequency-panel .cm-bar-value { min-height:1.2em; color:var(--cm-muted); font-size:10px; font-weight:var(--cm-fw-semibold); line-height:1.2; }
.cm-frequency-panel .cm-bar-item span { display:block; width:100%; overflow:hidden; line-height:1.35; text-align:center; text-overflow:ellipsis; white-space:nowrap; }

.cm-record-sensory.compact {
  display:block;
  max-width:100%;
  overflow:hidden;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cm-record-sensory.compact span { display:inline-flex; margin-right:9px; }
.cm-record-sensory.compact span:last-child { margin-right:0; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-hero-copy { width:100%; }
  #coffmeApp .cm-hero-main h2 { -webkit-line-clamp:4; line-clamp:4; margin-bottom:26px; padding-bottom:.2em; font-size:clamp(30px,9vw,40px); line-height:1.1; }
  html[lang="en"] .cm-hero-main h2,
  html[lang="fr"] .cm-hero-main h2,
  html[lang="es"] .cm-hero-main h2,
  html[lang="pt"] .cm-hero-main h2,
  html[lang="de"] .cm-hero-main h2 { font-size:clamp(28px,8.3vw,37px); line-height:1.14; }
  html[lang="en"] .cm-hero-main,
  html[lang="fr"] .cm-hero-main,
  html[lang="es"] .cm-hero-main,
  html[lang="pt"] .cm-hero-main,
  html[lang="de"] .cm-hero-main { min-height:520px; }
  .cm-hero-main p { -webkit-line-clamp:3; line-clamp:3; line-height:1.55; }
  .cm-hero-actions { padding-right:50px; }
  .cm-hero-actions .cm-btn { max-width:calc(62vw - 32px); }
  .cm-frequency-panel .cm-section-head { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .cm-frequency-panel .cm-bars { height:220px; }
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-brew-live.done { min-height:calc(100dvh - 64px); }
  .cm-brew-immersive { padding:22px 18px 18px; }
  .cm-immersive-head { gap:14px; }
  .cm-immersive-head>div:first-child span { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cm-immersive-step-list { top:76px; left:18px; right:18px; width:auto; transform:none; pointer-events:auto; }
  .cm-immersive-step-list>span { display:none; }
  .cm-immersive-step-list ol { display:flex; gap:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .cm-immersive-step-list ol::-webkit-scrollbar { display:none; }
  .cm-immersive-step-list li { flex:0 0 142px; padding:7px 12px; grid-template-columns:22px minmax(0,1fr); gap:7px; }
  .cm-immersive-step-list li:first-child { padding-left:0; }
  .cm-immersive-step-list li+li { border-top:0; border-left:1px solid currentColor; }
  .cm-immersive-step-list li.current { transform:translateY(3px); }
  .cm-immersive-step-list li.current::before { display:none; }
  .cm-immersive-stage { padding:8px 0; }
  .cm-immersive-stage h1 { font-size:clamp(30px,9vw,46px); }
  .cm-rolling-time { height:clamp(86px,27vw,126px); font-size:clamp(82px,27vw,126px); }
  .cm-immersive-targets { width:100%; }
  .cm-immersive-targets>div { padding:0 10px; }
  .cm-immersive-footer { grid-template-columns:1fr; gap:13px; }
  .cm-water-progress-copy { display:grid; grid-template-columns:auto auto 1fr; align-items:end; gap:9px; }
  .cm-water-progress-copy strong { margin:0; font-size:26px; }
  .cm-water-progress-copy small { margin:0; text-align:right; }
  .cm-immersive-controls { grid-template-columns:1.2fr 1fr 1fr; }
  .cm-immersive-controls button { min-height:50px; padding:0 10px; }
  .cm-sensory-grid { grid-template-columns:1fr; gap:6px; }
}
@media (max-width:430px) {
  .cm-brew-immersive { padding:18px 14px 14px; }
  .cm-immersive-head span { font-size:10px; }
  .cm-immersive-head strong { font-size:11px; }
  .cm-immersive-step-list { top:66px; left:14px; right:14px; }
  .cm-immersive-step-list li { flex-basis:118px; padding:6px 10px; }
  .cm-immersive-step-list li small { display:none; }
  .cm-immersive-kicker { font-size:9px; }
  .cm-rolling-time { margin-top:8px; }
  .cm-immersive-targets { margin-top:12px; }
  .cm-immersive-targets span { font-size:9px; }
  .cm-immersive-targets strong { font-size:19px; }
  .cm-water-progress-copy span,.cm-water-progress-copy small { font-size:9px; }
  .cm-immersive-controls { gap:6px; }
  .cm-immersive-controls button { min-width:0; min-height:48px; padding:0 7px; border-radius:12px; font-size:11px; gap:5px; }
  .cm-immersive-controls button i { display:inline-block; font-size:15px; }
  .cm-sensory-row { grid-template-columns:58px minmax(0,1fr) 20px; gap:8px; }
}

/* Mobile header actions */
@keyframes cm-mobile-more-in {
  from { opacity:.98; transform:translateY(-100%); }
  to { opacity:1; transform:none; }
}
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-topbar-tools>.cm-top-actions,.cm-topbar-tools>#cmLanguageRoot { display:none; }
  .cm-mobile-more-trigger { width:42px; height:42px; padding:0; overflow:hidden; border:1px solid var(--cm-line); border-radius:12px; background:var(--cm-surface); color:var(--cm-text); display:grid; place-items:center; cursor:pointer; }
  .cm-mobile-more-trigger i,.cm-mobile-more-row>i { font-family:'Material Symbols Rounded'; font-style:normal; font-weight:400; line-height:1; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; }
  .cm-mobile-more-trigger svg { width:24px; height:24px; display:block; fill:currentColor; }
  .cm-mobile-more-trigger:focus-visible,.cm-mobile-more-panel button:focus-visible { outline:2px solid var(--cm-text); outline-offset:3px; }
  .cm-mobile-more-panel { position:fixed; inset:0; z-index:130; width:100%; height:100dvh; padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; background:var(--cm-surface); color:var(--cm-text); display:flex; flex-direction:column; animation:cm-mobile-more-in .32s cubic-bezier(.22,.78,.24,1) both; }
  .cm-mobile-more-panel>header { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
  .cm-mobile-more-panel>header small { display:block; margin-bottom:8px; color:var(--cm-muted); font-size:11px; font-weight:600; letter-spacing:.04em; }
  .cm-mobile-more-panel>header h2 { font-family:var(--cm-font-display); font-size:clamp(30px,9vw,42px); font-weight:var(--cm-fw-semibold); line-height:1.05; letter-spacing:-.045em; }
  .cm-mobile-more-close { flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:14px; background:var(--cm-surface-2); color:var(--cm-text); display:grid; place-items:center; cursor:pointer; }
  .cm-mobile-more-close i { font-size:20px; }
  .cm-mobile-more-content { flex:1 0 auto; padding:44px 0 36px; display:grid; align-content:start; gap:30px; }
  .cm-mobile-more-content>section { min-width:0; }
  .cm-mobile-more-content>section>span { display:block; margin:0 0 10px 4px; color:var(--cm-muted); font-size:11px; font-weight:600; letter-spacing:.08em; }
  .cm-mobile-more-actions { display:grid; gap:10px; }
  .cm-mobile-more-actions .cm-btn { width:100%; min-height:66px; padding:0 20px; border:0; border-radius:18px; background:var(--cm-surface-2); color:var(--cm-text); justify-content:flex-start; font-size:15px; box-shadow:none; }
  .cm-mobile-more-actions .cm-btn:hover { transform:none; box-shadow:none; }
  .cm-mobile-more-actions .cm-btn.primary { background:var(--cm-text); color:var(--cm-surface); }
  .cm-mobile-more-actions .cm-btn span { display:inline; }
  .cm-mobile-more-actions .cm-btn i { font-size:19px; }
  .cm-mobile-more-row { width:100%; min-height:76px; padding:14px 16px; border:1px solid var(--cm-line); border-radius:18px; background:transparent; color:var(--cm-text); display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; text-align:left; cursor:pointer; }
  .cm-mobile-more-content>section>.cm-mobile-more-row+.cm-mobile-more-row { margin-top:10px; }
  .cm-mobile-more-row>i { width:42px; height:42px; border-radius:13px; background:var(--cm-surface-2); display:grid; place-items:center; font-size:21px; }
  .cm-mobile-more-row div { min-width:0; }
  .cm-mobile-more-row strong,.cm-mobile-more-row small { display:block; }
  .cm-mobile-more-row strong { font-size:14px; line-height:1.3; }
  .cm-mobile-more-row small { margin-top:5px; color:var(--cm-muted); font-size:11px; line-height:1.35; }
  .cm-mobile-more-row>.hgi-stroke { color:var(--cm-muted); font-size:18px; }
  .cm-mobile-language-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .cm-mobile-language-grid button { min-width:0; min-height:62px; padding:10px 13px; border:1px solid var(--cm-line); border-radius:16px; background:transparent; color:var(--cm-text); display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; text-align:left; cursor:pointer; }
  .cm-mobile-language-grid button.active { border-color:var(--cm-text); background:var(--cm-text); color:var(--cm-surface); }
  .cm-mobile-language-grid .cm-lang-flag { width:28px; height:28px; }
  .cm-mobile-language-grid strong { min-width:0; font-size:12px; line-height:1.25; overflow-wrap:anywhere; }
  .cm-mobile-language-grid .hgi-stroke { font-size:15px; }
  .cm-mobile-language-locked { min-height:72px; padding:12px 14px; border:1px solid var(--cm-line); border-radius:16px; background:var(--cm-surface-2); color:var(--cm-muted); display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:11px; }
  .cm-mobile-language-locked>div { min-width:0; }
  .cm-mobile-language-locked strong,.cm-mobile-language-locked small { display:block; }
  .cm-mobile-language-locked strong { color:var(--cm-text); font-size:13px; line-height:1.3; }
  .cm-mobile-language-locked small { margin-top:4px; font-size:10px; line-height:1.4; }
  .cm-mobile-language-locked em { padding:5px 8px; border-radius:999px; background:var(--cm-brand-soft); color:var(--cm-brand-dark); font-size:10px; font-style:normal; font-weight:700; }
  .cm-mobile-more-panel>footer { flex:0 0 auto; padding-top:18px; border-top:1px solid var(--cm-line); display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
  .cm-mobile-more-panel>footer span { font-size:11px; font-weight:800; letter-spacing:.12em; }
  .cm-mobile-more-panel>footer small { color:var(--cm-muted); font-size:10px; }
  body.cm-mobile-more-open .cm-mobile-nav { opacity:0; pointer-events:none; }
}

/* 2026 responsive layout fixes */
.cm-sidebar-foot>.cm-nav-btn.active,
.cm-sidebar-foot>.cm-nav-btn.active span,
.cm-sidebar-foot>.cm-nav-btn.active i { color:#fff; }

/* Home recommendation card: let copy determine the required height instead of clipping it. */
.cm-hero-main { min-height:clamp(400px,36vw,520px); height:auto; }
.cm-hero-copy { width:min(760px,72%); padding-block:4px; }
#coffmeApp .cm-hero-main h2 {
  display:-webkit-box;
  overflow:hidden;
  max-width:100%;
  margin-bottom:clamp(16px,2vw,24px);
  padding:0;
  font-size:clamp(36px,4.1vw,62px);
  line-height:1.06;
  letter-spacing:-.05em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.cm-hero-main p {
  display:block;
  overflow:visible;
  max-width:min(100%,620px);
  font-size:clamp(13px,1.2vw,17px);
  line-height:1.6;
}

/* Keep the animated water layer in the same stacking context so all copy is visible from frame one. */
.cm-brew-water-fill { z-index:0; }
.cm-brew-immersive>.cm-immersive-head,
.cm-brew-immersive>.cm-immersive-stage,
.cm-brew-immersive>.cm-immersive-step-list,
.cm-brew-immersive>.cm-immersive-footer {
  z-index:2;
}

@media (max-width:1024px) {
  .cm-hero-main { min-height:clamp(420px,46vw,500px); }
  .cm-hero-copy { width:min(680px,82%); }
  #coffmeApp .cm-hero-main h2 { font-size:clamp(34px,5.8vw,54px); }
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  html,body.cm-timer-running,#coffmeApp { overscroll-behavior:none; }
  body.cm-timer-running { position:fixed; inset:0; width:100%; height:100dvh; touch-action:none; }

  .cm-hero-main { min-height:500px; padding:30px 22px; }
  .cm-hero-copy { width:100%; padding-top:120px; }
  #coffmeApp .cm-hero-main h2 {
    display:-webkit-box;
    overflow:hidden;
    margin-bottom:18px;
    padding:0;
    font-size:clamp(32px,9.2vw,44px);
    line-height:1.1;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    text-wrap:pretty;
  }
  .cm-hero-main p { display:block; overflow:visible; font-size:clamp(13px,3.7vw,16px); }
  .cm-hero-actions { padding-right:0; flex-wrap:wrap; }
  .cm-hero-actions .cm-btn { max-width:100%; flex:1 1 150px; }

  .cm-brew-immersive {
    height:100dvh;
    min-height:0;
    grid-template-rows:auto minmax(0,1fr) auto;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
    overflow:hidden;
    touch-action:none;
  }
  .cm-countdown-stage { gap:clamp(6px,1.5dvh,14px); padding:6px 0; overflow:hidden; }
  .cm-countdown-stage>strong {
    margin:0;
    font-size:clamp(104px,22dvh,174px);
    line-height:.78;
  }
  .cm-countdown-stage h1 { max-width:18ch; margin:0; font-size:clamp(21px,6vw,28px); line-height:1.25; }
  .cm-countdown-stage p { max-width:28ch; margin:0!important; line-height:1.45; }
  .cm-countdown-footer { gap:8px; }
  .cm-countdown-footer button { min-height:48px; border-radius:14px; }

  .cm-immersive-step-list { pointer-events:none; }
  .cm-immersive-step-list ol { overflow:hidden; touch-action:none; }
  .cm-immersive-stage { padding:54px 0 4px; overflow:visible; }
  .cm-immersive-stage h1 { max-width:16ch; font-size:clamp(26px,7.5vw,40px); line-height:1.08; }
  .cm-rolling-time { height:clamp(72px,21vw,104px); margin-top:6px; font-size:clamp(70px,21vw,104px); }
  .cm-immersive-targets { margin-top:8px; }
  .cm-immersive-footer { gap:8px; }
  .cm-water-progress-copy { min-height:24px; }
  .cm-immersive-controls { grid-template-columns:1.25fr 1fr 1fr; gap:7px; }
  .cm-immersive-controls button { min-height:48px; padding:0 9px; border-radius:16px; font-size:11px; gap:5px; }
  .cm-immersive-controls .cm-immersive-pause { box-shadow:0 8px 24px rgba(0,0,0,.12); }
  .cm-immersive-controls .cm-immersive-skip { border-color:#111; }
  .cm-immersive-controls button.danger { background:rgba(255,247,246,.96); }
}

@media (max-width:430px), (max-height:700px) and (max-width:760px) {
  .cm-brew-immersive { padding-top:calc(10px + env(safe-area-inset-top)); }
  .cm-immersive-head strong { margin-top:3px; }
  .cm-immersive-step-list { top:54px; }
  .cm-immersive-stage { padding-top:46px; }
  .cm-immersive-stage h1 { font-size:clamp(24px,7vw,34px); }
  .cm-rolling-time { height:clamp(64px,19vw,88px); font-size:clamp(62px,19vw,88px); }
  .cm-immersive-targets strong { margin-top:4px; font-size:17px; }
  .cm-water-progress-copy {
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:end;
    gap:7px;
    min-width:0;
  }
  .cm-water-progress-copy strong { margin:0; font-size:22px; }
  .cm-water-progress-copy small {
    margin:0;
    overflow:hidden;
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cm-immersive-controls button { min-height:46px; border-radius:15px; }
  .cm-countdown-stage>strong { font-size:clamp(92px,19dvh,142px); }
  .cm-countdown-stage h1 { font-size:clamp(20px,5.6vw,25px); }
}

/* Registration completion: make the email-verification handoff unmistakable. */
.cm-auth-verify { display:grid; gap:18px; }
.cm-auth-verify-icon { width:58px; height:58px; border-radius:18px; background:#111; color:#fff; display:grid; place-items:center; }
.cm-auth-verify-icon i { font-size:25px; }
.cm-auth-verify h1 { margin:0; font-size:clamp(34px,3.2vw,48px); font-weight:700; line-height:1.06; letter-spacing:-.055em; }
.cm-auth-verify>p { margin:2px 0 -10px; color:#68645e; font-size:12px; }
.cm-auth-verify>strong { min-width:0; padding-bottom:15px; overflow-wrap:anywhere; border-bottom:1px solid rgba(17,17,17,.12); font-size:15px; line-height:1.45; }
.cm-auth-verify-steps { display:grid; gap:8px; }
.cm-auth-verify-steps>span { min-height:48px; padding:10px 12px; border-radius:12px; background:#f1eee8; display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:10px; color:#4f4a43; font-size:12px; line-height:1.45; }
.cm-auth-verify-steps b { width:28px; height:28px; border-radius:9px; background:#111; color:#fff; display:grid; place-items:center; font-size:10px; }

/* Immersive timer refinement: white canvas with black water rising from the bottom. */
.cm-brew-immersive { box-sizing:border-box; border:0; outline:0; background:#fff; color:#111; }
.cm-brew-water-fill { border-top:1px solid #111; background:#111; }
.cm-brew-immersive>.cm-immersive-head,
.cm-brew-immersive>.cm-immersive-stage,
.cm-brew-immersive>.cm-immersive-step-list,
.cm-brew-immersive>.cm-immersive-footer {
  color:#fff;
  mix-blend-mode:difference;
  text-shadow:none;
  -webkit-text-stroke:0;
}
.cm-brew-countdown { background:#fff; color:#111; }
.cm-brew-countdown>.cm-immersive-head { color:#111; mix-blend-mode:normal; }
.cm-immersive-head { padding-bottom:14px; border-bottom:1px solid currentColor; }
.cm-immersive-head span { letter-spacing:.06em; }
.cm-immersive-stage { padding:clamp(20px,3vh,44px) clamp(220px,17vw,300px) 18px; }
.cm-immersive-stage h1 { max-width:14ch; font-size:clamp(30px,3.2vw,52px); line-height:1.08; text-wrap:balance; }
.cm-rolling-time { height:clamp(92px,11.5vw,150px); font-size:clamp(88px,11.5vw,150px); letter-spacing:-.055em; }
.cm-immersive-targets { width:min(620px,54vw); margin-top:clamp(12px,1.6vw,22px); }
.cm-immersive-targets>div { padding:0 clamp(14px,1.8vw,24px); }
.cm-immersive-footer { padding-top:14px; border-top:1px solid currentColor; align-items:center; }
.cm-immersive-controls { width:min(720px,55vw); justify-self:end; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-brew-immersive { padding-inline:16px; }
  .cm-immersive-head { min-height:72px; padding:0 2px 12px; align-items:flex-start; }
  .cm-immersive-head>div:first-child { min-width:0; max-width:62%; }
  .cm-immersive-head>div:last-child { flex:none; }
  .cm-immersive-step-list { top:88px; left:16px; right:16px; padding:8px 0; border-bottom:1px solid currentColor; }
  .cm-immersive-step-list ol { justify-content:flex-start; }
  .cm-immersive-stage { padding:70px 0 8px; }
  .cm-immersive-stage h1 { max-width:13ch; font-size:clamp(27px,7.2vw,38px); }
  .cm-rolling-time { height:clamp(76px,23vw,112px); font-size:clamp(74px,23vw,112px); letter-spacing:-.06em; }
  .cm-immersive-targets { width:100%; margin-top:10px; }
  .cm-immersive-footer { padding-top:10px; }
  .cm-immersive-controls { width:100%; justify-self:stretch; }
}

@media (max-width:430px), (max-height:700px) and (max-width:760px) {
  .cm-immersive-head { min-height:58px; padding-bottom:8px; }
  .cm-immersive-step-list { top:66px; padding:5px 0; }
  .cm-immersive-stage { padding-top:54px; }
  .cm-immersive-targets { margin-top:5px; }
  .cm-immersive-footer { padding-top:7px; }
}

/* Unified player-style brew controls. */
.cm-immersive-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.cm-immersive-controls button,
.cm-immersive-controls .cm-immersive-pause,
.cm-immersive-controls .cm-immersive-skip,
.cm-immersive-controls button.danger {
  min-width:0;
  min-height:54px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cm-immersive-controls button:hover,
.cm-immersive-controls .cm-immersive-pause:hover,
.cm-immersive-controls .cm-immersive-skip:hover {
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);
}
.cm-immersive-controls .cm-immersive-pause {
  border-color:#fff;
  background:#fff;
  color:#111;
}
.cm-immersive-controls .cm-immersive-pause:hover { background:#ededed; color:#111; }
.cm-immersive-controls button.danger {
  border-color:rgba(238,93,82,.55);
  background:rgba(238,93,82,.1);
  color:#ff8d84;
}
.cm-immersive-controls button.danger:hover {
  border-color:#ff8d84;
  background:rgba(238,93,82,.16);
  color:#ffaaa3;
}
.cm-immersive-controls button i { flex:none; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-immersive-controls {
    display:grid;
    grid-template-columns:56px 56px minmax(132px,1fr);
    justify-content:stretch;
    gap:10px;
  }
  .cm-immersive-controls button,
  .cm-immersive-controls .cm-immersive-pause,
  .cm-immersive-controls .cm-immersive-skip,
  .cm-immersive-controls button.danger {
    width:56px;
    height:56px;
    min-height:56px;
    padding:0;
    border-radius:50%;
  }
  .cm-immersive-controls .cm-immersive-pause,
  .cm-immersive-controls .cm-immersive-skip { justify-self:start; }
  .cm-immersive-controls .cm-immersive-pause span,
  .cm-immersive-controls .cm-immersive-skip span { display:none; }
  .cm-immersive-controls .cm-immersive-pause i,
  .cm-immersive-controls .cm-immersive-skip i { display:block; margin:0; font-size:22px; }
  .cm-immersive-controls button.danger {
    width:100%;
    border-radius:999px;
    font-size:13px;
    gap:7px;
  }
  .cm-immersive-controls button.danger i { font-size:18px; }
}

@media (max-width:430px) {
  .cm-immersive-controls { grid-template-columns:52px 52px minmax(124px,1fr); gap:8px; }
  .cm-immersive-controls button,
  .cm-immersive-controls .cm-immersive-pause,
  .cm-immersive-controls .cm-immersive-skip,
  .cm-immersive-controls button.danger { height:52px; min-height:52px; }
  .cm-immersive-controls .cm-immersive-pause,
  .cm-immersive-controls .cm-immersive-skip { width:52px; }
}

/* Countdown copy uses explicit vertical rows so the large numeral never overlaps the prompt. */
.cm-countdown-stage {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto auto;
  place-content:center;
  justify-items:center;
  gap:clamp(12px,1.8vh,24px);
  padding:clamp(20px,3vh,42px) 20px;
  overflow:hidden;
  text-align:center;
}
.cm-countdown-stage>span,
.cm-countdown-stage>strong,
.cm-countdown-stage h1,
.cm-countdown-stage p { margin:0!important; }
.cm-countdown-stage>strong {
  display:block;
  min-width:1em;
  padding:.04em 0 .08em;
  font-size:clamp(132px,19vw,260px);
  line-height:1;
  text-align:center;
}
.cm-countdown-stage h1 {
  max-width:20ch;
  font-size:clamp(28px,3.1vw,46px);
  line-height:1.22;
  text-wrap:balance;
}
.cm-countdown-stage p { max-width:32ch; line-height:1.55; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-countdown-stage {
    gap:clamp(10px,1.5vh,18px);
    padding:18px 14px;
  }
  .cm-countdown-stage>strong {
    padding:.02em 0 .08em;
    font-size:clamp(104px,20vh,176px);
    line-height:1;
  }
  .cm-countdown-stage h1 { max-width:16ch; font-size:clamp(23px,6.2vw,32px); line-height:1.25; }
}

@media (max-height:700px) and (max-width:760px) {
  .cm-countdown-stage { gap:8px; padding-block:10px; }
  .cm-countdown-stage>strong { font-size:clamp(86px,17vh,122px); }
  .cm-countdown-stage h1 { font-size:clamp(20px,5.5vw,26px); }
  .cm-countdown-stage p { font-size:10px; }
}

/* Mobile brew plan: horizontally swipe through steps without scrolling the page. */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-immersive-step-list { pointer-events:auto; touch-action:pan-x; }
  .cm-immersive-step-list ol {
    width:100%;
    display:flex;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
  .cm-immersive-step-list ol::-webkit-scrollbar { display:none; }
  .cm-immersive-step-list li {
    flex:0 0 clamp(142px,42vw,190px);
    scroll-snap-align:start;
  }
  .cm-immersive-step-list li:last-child { margin-right:18px; }
}

/* Keep the destructive action red instead of letting the black/white blend invert it to cyan. */
.cm-brew-immersive>.cm-immersive-footer {
  color:#111;
  mix-blend-mode:normal;
  z-index:auto;
}
.cm-water-progress-copy,
.cm-immersive-controls .cm-immersive-pause,
.cm-immersive-controls .cm-immersive-skip { mix-blend-mode:difference; }
.cm-water-progress-copy { color:#fff; }
.cm-immersive-controls { position:relative; z-index:2; isolation:isolate; }
.cm-immersive-controls .cm-immersive-skip,
.cm-immersive-controls .cm-immersive-skip:hover {
  mix-blend-mode:normal;
  border-color:#8f8f8f;
  background:#e9e9e9;
  color:#111;
}
.cm-immersive-controls .cm-immersive-skip:hover {
  border-color:#666;
  background:#dddddd;
}
.cm-immersive-controls button.danger,
.cm-immersive-controls button.danger:hover {
  mix-blend-mode:normal;
  border-color:#d9433a;
  background:#fff2f1;
  color:#c92f27;
}

/* Completion actions must stay readable on the white post-brew surface. */
.cm-timer-mode .cm-completion-actions .cm-btn,
.cm-timer-mode .cm-completion-actions .cm-btn.ghost {
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(17,17,17,.18);
  border-radius:14px;
  background:#fff;
  color:#111;
}
.cm-timer-mode .cm-completion-actions .cm-btn.brand {
  border-color:#111;
  background:#111;
  color:#fff;
}
.cm-timer-mode .cm-completion-actions .cm-btn:hover { border-color:#111; }
.cm-timer-mode .cm-completion-actions .cm-btn.brand:hover { background:#292929; color:#fff; }

/* Advanced sensory rating: compact grouped controls with a clear hierarchy. */
.cm-completion-log .cm-advanced-rating {
  padding:0;
  border:0;
  border-radius:18px;
  background:#f7f7f7;
  overflow:hidden;
}
.cm-completion-log .cm-advanced-trigger {
  min-height:76px;
  padding:16px 18px;
}
.cm-completion-log .cm-advanced-trigger strong { font-size:14px; }
.cm-completion-log .cm-advanced-trigger small { margin-top:6px; font-size:11px; }
.cm-completion-log .cm-advanced-trigger>i {
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
}
.cm-completion-log .cm-advanced-body { padding:4px 18px 18px; }
.cm-completion-log .cm-advanced-intro {
  min-height:44px;
  margin:0 0 14px;
  padding-top:12px;
  border-top:1px solid rgba(17,17,17,.08);
}
.cm-completion-log .cm-advanced-intro p { max-width:520px; font-size:11px; line-height:1.55; }
.cm-completion-log .cm-advanced-intro button { color:#111; font-size:11px; }
.cm-completion-log .cm-sensory-grid { gap:10px; }
.cm-completion-log .cm-sensory-row {
  min-height:64px;
  padding:10px 12px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:14px;
  background:#fff;
  grid-template-columns:64px minmax(0,1fr) 28px;
  gap:10px;
}
.cm-completion-log .cm-sensory-row>span { font-size:12px; }
.cm-completion-log .cm-sensory-row>div { gap:5px; }
.cm-completion-log .cm-sensory-row button {
  height:36px;
  border:0;
  border-radius:10px;
  background:#ededed;
  color:#666;
  font-size:11px;
}
.cm-completion-log .cm-sensory-row button.on { border:0; background:#111; color:#fff; }
.cm-completion-log .cm-sensory-row>strong {
  width:28px;
  height:28px;
  border-radius:50%;
  background:#ededed;
  display:grid;
  place-items:center;
  font-size:12px;
  text-align:center;
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-completion-log .cm-sensory-grid { grid-template-columns:1fr; }
  .cm-completion-log .cm-sensory-row { grid-template-columns:54px minmax(0,1fr) 26px; padding-inline:10px; }
  .cm-completion-log .cm-sensory-row button { height:34px; }
  .cm-completion-actions { width:100%; display:grid; grid-template-columns:1fr 1.35fr; }
  .cm-completion-actions .cm-btn { width:100%; }
}

/* Denser dashboard summary cards without the former orange link treatment. */
.cm-stat {
  min-height:136px;
  padding:20px 36% 18px 22px;
  background:linear-gradient(145deg,var(--cm-surface) 0%,color-mix(in srgb,var(--cm-surface-2) 48%,var(--cm-surface)) 100%);
}
.cm-stat-content { min-height:96px; }
.cm-stat-label {
  padding:5px 9px;
  border-radius:999px;
  background:var(--cm-surface-2);
  color:var(--cm-muted);
  font-size:11px;
}
.cm-stat-value { margin-top:14px; }
.cm-stat-value strong,
.cm-stat-value strong .cm-number { font-size:clamp(29px,2.2vw,38px); }
.cm-stat-value span { font-size:12px; }
.cm-stat .cm-stat-note,
.cm-stat.interactive .cm-stat-content>.cm-stat-note {
  max-width:150px;
  margin-top:9px;
  overflow:hidden;
  color:var(--cm-muted);
  font-size:10px;
  font-weight:500;
  line-height:1.35;
  opacity:.82;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cm-stat.interactive:hover .cm-stat-note { color:var(--cm-muted); opacity:1; }
.cm-stat-art {
  width:124px;
  height:116px;
  right:8px;
  bottom:5px;
  opacity:.96;
}

@media (max-width:460px) {
  .cm-stat { min-height:124px; padding:14px 34% 13px 14px; }
  .cm-stat-content { min-height:94px; }
  .cm-stat-label { padding:4px 7px; font-size:10px; }
  .cm-stat-value { margin-top:11px; }
  .cm-stat-value strong,
  .cm-stat-value strong .cm-number { font-size:26px; }
  .cm-stat .cm-stat-note { max-width:100px; margin-top:7px; font-size:9px; white-space:normal; }
  .cm-stat-art { width:86px; height:84px; right:-2px; bottom:2px; }
}

/* Top navigation: keep the back action visually separate and aligned with the title block. */
.cm-page-heading { align-items:center; gap:12px; }
#cmBackAction:not(:empty) {
  flex:none;
  display:flex;
  align-items:center;
  align-self:center;
  margin-right:2px;
}
.cm-back-link {
  min-height:40px;
  padding:0 13px;
  border:1px solid var(--cm-line);
  border-radius:12px;
  background:var(--cm-surface);
  color:var(--cm-text);
  gap:6px;
  line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.035);
}
.cm-back-link:hover {
  border-color:color-mix(in srgb,var(--cm-text) 30%,var(--cm-line));
  background:var(--cm-surface-2);
  color:var(--cm-text);
  transform:translateX(-1px);
}
.cm-back-link i { font-size:16px; }
.cm-page-heading>div:last-child { align-self:center; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-page-heading { gap:9px; }
  #cmBackAction:not(:empty) { margin-right:0; }
  .cm-back-link {
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    border-radius:12px;
    justify-content:center;
  }
  .cm-back-link span { display:none; }
  .cm-back-link i { font-size:18px; }
}

/* Insight card refinements. */
.cm-stat-value strong,
.cm-stat-value strong .cm-number {
  overflow:visible;
  padding:.04em 0 .12em;
  line-height:1.12;
  text-overflow:clip;
}
.cm-stat[data-metric="methods"] { padding-right:40%; }
.cm-stat[data-metric="methods"] .cm-stat-value {
  width:100%;
  min-width:0;
  white-space:normal;
}
.cm-stat[data-metric="methods"] .cm-stat-value strong,
.cm-stat[data-metric="methods"] .cm-stat-value strong .cm-number {
  max-width:100%;
  overflow-wrap:anywhere;
  font-size:clamp(25px,2.1vw,36px);
  line-height:1.12;
}
.cm-stat[data-metric="methods"] .cm-stat-art {
  width:96px;
  height:96px;
  right:22px;
  bottom:14px;
  object-fit:contain;
  object-position:center;
}

#cm-page-insights .cm-grid-2 { align-items:stretch; }
#cm-page-insights .cm-grid-2>.cm-insight-panel,
#cm-page-insights .cm-frequency-panel {
  height:100%;
  min-height:100%;
  align-self:stretch;
  display:flex;
  flex-direction:column;
}
#cm-page-insights .cm-frequency-panel .cm-bars,
#cm-page-insights .cm-grid-2>.cm-insight-panel>.cm-list { flex:1; }
#cm-page-insights .cm-grid-2>.cm-insight-panel>.cm-list>.cm-empty { height:100%; min-height:250px; }

/* Recommendation eyebrow becomes a compact orange corner-style badge. */
.cm-hero-main .cm-eyebrow {
  width:max-content;
  max-width:100%;
  margin-bottom:16px;
  padding:7px 11px;
  border-radius:8px;
  background:#ff9f0a;
  color:#3b2100;
  opacity:1;
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  box-shadow:0 5px 16px rgba(255,159,10,.18);
}

@media (max-width:460px) {
  .cm-stat[data-metric="methods"] { padding-right:34%; }
  .cm-stat[data-metric="methods"] .cm-stat-value strong,
  .cm-stat[data-metric="methods"] .cm-stat-value strong .cm-number { font-size:23px; }
  .cm-stat[data-metric="methods"] .cm-stat-art { width:72px; height:72px; right:7px; bottom:9px; }
  .cm-hero-main .cm-eyebrow { padding:6px 9px; font-size:9px; }
}

/* Unified motion language: quiet depth, short travel and consistent easing. */
:root {
  --cm-motion-fast:160ms;
  --cm-motion-base:320ms;
  --cm-motion-slow:520ms;
  --cm-motion-ease:cubic-bezier(.22,.8,.24,1);
  --cm-motion-exit:cubic-bezier(.4,0,1,1);
}

.cm-page.active { animation:cm-page-reveal var(--cm-motion-base) var(--cm-motion-ease) both; }
.cm-page.active>.cm-hero,
.cm-page.active>.cm-insight-toolbar,
.cm-page.active>.cm-toolbar,
.cm-page.active>.cm-library-intro,
.cm-page.active>.cm-detail-shell,
.cm-page.active>.cm-dripper-detail {
  animation:cm-section-rise 420ms var(--cm-motion-ease) both;
}
.cm-page.active>.cm-stat-grid,
.cm-page.active>.cm-recipe-grid,
.cm-page.active>.cm-dripper-grid,
.cm-page.active>.cm-explore-grid,
.cm-page.active>.cm-section {
  animation:cm-section-rise 460ms var(--cm-motion-ease) 55ms both;
}
@keyframes cm-page-reveal {
  from { opacity:0; transform:translate3d(0,7px,0); }
  to { opacity:1; transform:none; }
}
@keyframes cm-section-rise {
  from { opacity:0; transform:translate3d(0,12px,0); }
  to { opacity:1; transform:none; }
}

/* Stagger repeated cards without making the page feel busy. */
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>:nth-child(1) { animation-delay:60ms; }
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>:nth-child(2) { animation-delay:95ms; }
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>:nth-child(3) { animation-delay:130ms; }
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>:nth-child(4) { animation-delay:165ms; }
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>* {
  animation-name:cm-card-arrive;
  animation-duration:420ms;
  animation-timing-function:var(--cm-motion-ease);
  animation-fill-mode:both;
}
@keyframes cm-card-arrive {
  from { opacity:0; transform:translate3d(0,10px,0) scale(.992); }
  to { opacity:1; transform:none; }
}

/* Modal and menu transitions share the same material response. */
.cm-modal-wrap.open .cm-backdrop { animation:cm-backdrop-in 220ms ease-out both; }
.cm-modal-wrap.open .cm-modal { animation:cm-modal-in 360ms var(--cm-motion-ease) both; transform-origin:50% 58%; }
.cm-language.open .cm-language-menu,
.cm-detail-more.open .cm-detail-more-menu { animation:cm-popover-in 220ms var(--cm-motion-ease) both; transform-origin:top right; }
@keyframes cm-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes cm-modal-in {
  from { opacity:0; transform:translate3d(0,14px,0) scale(.975); }
  to { opacity:1; transform:none; }
}
@keyframes cm-popover-in {
  from { opacity:0; transform:translate3d(0,-5px,0) scale(.98); }
  to { opacity:1; transform:none; }
}

/* Micro-interactions remain restrained and use the same timing curve. */
.cm-btn,.cm-icon-btn,.cm-back-link,.cm-nav-btn,
.cm-stat,.cm-recipe,.cm-dripper-card,.cm-explore-card,
.cm-tag,.cm-rating button,.cm-sensory-row button {
  transition-duration:var(--cm-motion-fast);
  transition-timing-function:var(--cm-motion-ease);
}
.cm-btn:active,.cm-icon-btn:active,.cm-back-link:active { transform:translateY(1px) scale(.985); }
.cm-tag:active,.cm-rating button:active,.cm-sensory-row button:active { transform:scale(.94); }
.cm-nav-btn.active .cm-mobile-nav-icon { animation:cm-nav-settle 280ms var(--cm-motion-ease) both; }
@keyframes cm-nav-settle {
  0% { transform:translateY(2px) scale(.88); opacity:.45; }
  100% { transform:translateY(-1px) scale(1); opacity:1; }
}

/* Dynamic content feels continuous when values and lists refresh. */
.cm-list-row,.cm-insight-ranking,.cm-distribution-row { transition:background-color var(--cm-motion-fast) ease,transform var(--cm-motion-fast) var(--cm-motion-ease),opacity var(--cm-motion-fast) ease; }
.cm-list-row:hover { transform:translateX(2px); }
.cm-bar,.cm-detail-bar i,.cm-distribution-row i { transition:height var(--cm-motion-slow) var(--cm-motion-ease),width var(--cm-motion-slow) var(--cm-motion-ease),opacity var(--cm-motion-fast) ease; }
.cm-advanced-trigger>i,.cm-step-toggle-icon,.cm-filter-trigger i { transition:transform 240ms var(--cm-motion-ease),background-color var(--cm-motion-fast) ease; }

/* Keep full-screen brewing immediate; timer DOM is refreshed every second. */
.cm-brew-immersive,.cm-brew-countdown { animation:none; }
.cm-immersive-stage h1,.cm-immersive-targets strong,.cm-water-progress-copy strong { transition:opacity 180ms ease,transform 240ms var(--cm-motion-ease); }

@media (prefers-reduced-motion:reduce) {
  .cm-page.active,
  .cm-page.active>*,
  .cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>*,
  .cm-modal-wrap.open .cm-backdrop,
  .cm-modal-wrap.open .cm-modal,
  .cm-language.open .cm-language-menu,
  .cm-detail-more.open .cm-detail-more-menu,
  .cm-brew-immersive { animation:none!important; }
}

/* Responsive density: reflow before card content starts competing for space. */
.cm-stat { container-type:inline-size; }
@media (max-width:1320px) {
  .cm-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cm-stat { min-height:132px; }
  .cm-stat-art { right:16px; }
  .cm-stat[data-metric="methods"] .cm-stat-art { right:24px; }
}
@media (max-width:820px) {
  .cm-stat-grid { gap:10px; }
  .cm-stat { padding-right:36%; }
  .cm-stat-art { width:92px; height:88px; right:2px; }
  .cm-stat[data-metric="methods"] .cm-stat-art { width:74px; height:74px; right:8px; bottom:10px; }
  .cm-stat[data-metric="methods"] .cm-stat-value strong,
  .cm-stat[data-metric="methods"] .cm-stat-value strong .cm-number { font-size:22px; }
}
@media (max-width:380px) {
  .cm-stat-grid { grid-template-columns:1fr; }
}

/* Compact screens can pan charts without clipping dates or values. */
@media (max-width:900px) {
  #cm-page-insights .cm-frequency-panel { min-height:390px; overflow:hidden; }
  #cm-page-insights .cm-frequency-panel .cm-bars {
    width:100%;
    min-height:270px;
    height:270px;
    padding:20px 4px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
  #cm-page-insights .cm-frequency-panel .cm-bars::-webkit-scrollbar { display:none; }
  #cm-page-insights .cm-frequency-panel .cm-bar-item { flex:0 0 64px; min-width:64px; }
  #cm-page-insights .cm-frequency-panel .cm-bar-item span { overflow:visible; text-overflow:clip; }
}

/* Brew history becomes readable record cards on mobile instead of a squeezed table. */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-records-panel { padding:18px; }
  .cm-table-wrap { margin:0; overflow:visible; }
  .cm-table { min-width:0; width:100%; display:block; }
  .cm-table thead { display:none; }
  .cm-table tbody { display:grid; gap:12px; }
  .cm-table tr {
    width:100%;
    padding:14px;
    border:1px solid var(--cm-line);
    border-radius:16px;
    background:var(--cm-surface-2);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
  }
  .cm-table tbody tr:hover { background:var(--cm-surface-2); }
  .cm-table td {
    min-width:0;
    padding:0;
    border:0;
    display:block;
    font-size:12px;
  }
  .cm-table td::before {
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    color:var(--cm-muted);
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
  }
  .cm-table td:nth-child(2),.cm-table td:nth-child(4) { grid-column:1/-1; }
  .cm-table td:last-child { grid-column:2; grid-row:1; justify-self:end; }
  .cm-table td:last-child::before { display:none; }
  .cm-table .cm-row-actions { justify-content:flex-end; }
  .cm-table .cm-record-sensory.compact { white-space:normal; }
}

/* Refined dripper profile hero: compact editorial copy with a complete product silhouette. */
.cm-dripper-hero {
  min-height:400px;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  border-radius:30px;
  background:radial-gradient(circle at 76% 42%,rgba(255,255,255,.11),transparent 32%),linear-gradient(145deg,#1a1a1a 0%,#0d0d0d 76%);
}
.cm-dripper-hero::before {
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:#ff9f0a;
  opacity:.9;
}
.cm-dripper-hero-copy {
  align-self:center;
  padding:clamp(34px,4vw,56px);
}
.cm-dripper-hero-copy .cm-kicker {
  width:max-content;
  max-width:100%;
  margin-bottom:18px;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(255,159,10,.13);
  color:#ffb23f;
  letter-spacing:.1em;
}
.cm-dripper-hero-copy h2 {
  max-width:14ch;
  margin-top:0!important;
  padding:0 0 .1em;
  font-size:clamp(44px,5vw,70px);
  line-height:1.02;
}
.cm-dripper-hero-copy p {
  max-width:540px;
  margin:14px 0 24px!important;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.7;
}
.cm-dripper-hero-copy .cm-btn.brand {
  min-height:48px;
  padding:0 17px;
  border-radius:14px;
  box-shadow:none;
}
.cm-dripper-hero-media {
  min-height:360px;
  overflow:hidden;
  background:radial-gradient(circle at 52% 55%,rgba(255,255,255,.16),transparent 47%);
}
.cm-dripper-hero-media::after {
  content:'';
  position:absolute;
  left:15%;
  right:8%;
  bottom:8%;
  height:18px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(14px);
}
.cm-dripper-hero-media img {
  z-index:1;
  width:94%;
  height:94%;
  right:-3%;
  bottom:-3%;
  object-fit:contain;
  object-position:center bottom;
  transform:rotate(5deg);
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-dripper-hero {
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto 230px;
    border-radius:24px;
  }
  .cm-dripper-hero::before { width:100%; height:4px; }
  .cm-dripper-hero-copy { padding:28px 24px 18px; }
  .cm-dripper-hero-copy .cm-kicker { margin-bottom:16px; padding:6px 9px; }
  .cm-dripper-hero-copy h2 {
    max-width:100%;
    font-size:clamp(40px,10vw,54px);
    line-height:1.04;
  }
  .cm-dripper-hero-copy p {
    display:-webkit-box;
    margin:12px 0 20px!important;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    font-size:12px;
    line-height:1.65;
  }
  .cm-dripper-hero-copy .cm-btn.brand { width:max-content; min-height:46px; }
  .cm-dripper-hero-media { min-height:230px; }
  .cm-dripper-hero-media img {
    width:88%;
    height:108%;
    right:-1%;
    bottom:-12%;
    transform:rotate(4deg);
  }
}

/* Keep Explore recipe cards on the same compact type scale across devices. */
#coffmeApp .cm-explore-card-label span {
  font-size:12px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
}
#coffmeApp .cm-explore-card-label small {
  font-size:12px;
  font-weight:var(--cm-fw-regular);
  line-height:var(--cm-lh-caption);
}
#coffmeApp .cm-explore-card-title>span {
  font-size:12px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-caption);
}
#coffmeApp .cm-explore-card-title h3 {
  margin-top:6px!important;
  font-size:20px;
  font-weight:var(--cm-fw-semibold);
  line-height:1.16;
  letter-spacing:-.025em;
}
#coffmeApp .cm-explore-card-title p {
  margin-top:6px!important;
  font-size:12px;
  font-weight:var(--cm-fw-regular);
  line-height:1.5;
}

/* Recipes and brewers share the same compact card typography as Explore. */
#coffmeApp :is(.cm-recipe-method,.cm-dripper-tag) {
  font-size:12px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
}
#coffmeApp :is(.cm-recipe-copy,.cm-dripper-card-copy) h3 {
  font-size:20px;
  font-weight:var(--cm-fw-semibold);
  line-height:1.16;
  letter-spacing:-.025em;
}
#coffmeApp :is(.cm-recipe-copy,.cm-dripper-card-copy) p {
  margin-top:6px!important;
  font-size:12px;
  font-weight:var(--cm-fw-regular);
  line-height:1.5;
}
#coffmeApp :is(.cm-recipe-meta,.cm-dripper-card-stats) span {
  font-size:12px;
  font-weight:var(--cm-fw-regular);
  line-height:var(--cm-lh-caption);
}
#coffmeApp :is(.cm-recipe-meta,.cm-dripper-card-stats) strong {
  margin-top:4px;
  font-size:13px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
}
#coffmeApp :is(.cm-recipe-actions .cm-btn,.cm-dripper-card-actions>span) {
  font-size:14px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
}

/* Brewer names need slightly more presence than recipe names. */
#coffmeApp .cm-dripper-card-copy h3 {
  font-size:22px;
}

/* One visual treatment for top-left card category tags. */
#coffmeApp :is(.cm-recipe-method,.cm-dripper-tag,.cm-explore-card-label span) {
  border-color:transparent;
  border-radius:999px;
  background:var(--cm-tag-bg);
  color:var(--cm-tag-text);
  font-size:12px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
}
#coffmeApp .cm-hero-main .cm-eyebrow {
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:14px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cm-tag-bg);
  color:var(--cm-tag-text);
  opacity:1;
  font-size:12px;
  font-weight:var(--cm-fw-semibold);
  line-height:var(--cm-lh-control);
  letter-spacing:.04em;
}

@media (max-width:430px) {
  .cm-dripper-hero { grid-template-rows:auto 205px; }
  .cm-dripper-hero-copy { padding:25px 20px 14px; }
  .cm-dripper-hero-copy h2 { font-size:40px; }
  .cm-dripper-hero-media { min-height:205px; }
  .cm-dripper-hero-media img { width:84%; height:105%; right:1%; bottom:-10%; }
}

/* Recommended recipes follow the same quiet surface and warm-accent system. */
.cm-dripper-presets {
  padding:clamp(22px,3vw,32px);
  border:0;
  border-radius:26px;
  background:var(--cm-surface-2);
}
.cm-dripper-presets>.cm-section-head {
  margin-bottom:22px;
  align-items:flex-start;
}
.cm-dripper-presets>.cm-section-head h2 { font-size:clamp(20px,2vw,28px); }
.cm-dripper-presets>.cm-section-head p { max-width:720px; margin-top:7px!important; }
.cm-dripper-presets>.cm-section-head>span {
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,159,10,.13);
  color:#b86700;
  font-size:10px;
  font-weight:700;
}
.cm-dripper-preset-grid { gap:12px; }
.cm-dripper-preset-grid button {
  min-height:112px;
  padding:17px 58px 17px 18px;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.065);
  border-radius:17px;
  background:var(--cm-surface);
  box-shadow:0 4px 16px rgba(0,0,0,.025);
  justify-content:center;
  transition:transform var(--cm-motion-fast) var(--cm-motion-ease),border-color var(--cm-motion-fast) ease,box-shadow var(--cm-motion-fast) ease,background var(--cm-motion-fast) ease;
}
.cm-dripper-preset-grid button::before {
  content:'';
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#ff9f0a;
  opacity:0;
  transform:scaleY(.45);
  transition:opacity var(--cm-motion-fast) ease,transform var(--cm-motion-fast) var(--cm-motion-ease);
}
.cm-dripper-preset-grid button:hover {
  border-color:rgba(255,159,10,.34);
  background:var(--cm-surface);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transform:translateY(-2px);
}
.cm-dripper-preset-grid button:hover::before { opacity:1; transform:scaleY(1); }
.cm-dripper-preset-grid button>span {
  padding:4px 8px;
  border-radius:7px;
  background:rgba(17,17,17,.06);
  color:#666;
  font-size:9px;
  font-weight:700;
  line-height:1;
}
.cm-dripper-preset-grid button>span.exact {
  background:rgba(255,159,10,.14);
  color:#b86700;
}
.cm-dripper-preset-grid strong {
  max-width:100%;
  margin-top:11px;
  padding-right:8px;
  font-size:15px;
  font-weight:750;
  line-height:1.35;
}
.cm-dripper-preset-grid small {
  margin-top:7px;
  color:var(--cm-muted);
  font-size:10px;
  line-height:1.45;
}
.cm-dripper-preset-grid i {
  width:34px;
  height:34px;
  right:16px;
  border-radius:50%;
  background:var(--cm-surface-2);
  color:#111;
  display:grid;
  place-items:center;
  font-size:15px;
  transition:background var(--cm-motion-fast) ease,color var(--cm-motion-fast) ease,transform var(--cm-motion-fast) var(--cm-motion-ease);
}
.cm-dripper-preset-grid button:hover i {
  background:#111;
  color:#fff;
  transform:translate(2px,-50%);
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-dripper-presets { padding:20px; border-radius:22px; }
  .cm-dripper-presets>.cm-section-head { gap:12px; }
  .cm-dripper-presets>.cm-section-head>span { align-self:flex-start; }
  .cm-dripper-preset-grid { grid-template-columns:1fr; gap:10px; }
  .cm-dripper-preset-grid button { min-height:104px; padding:15px 54px 15px 16px; }
  .cm-dripper-preset-grid strong { font-size:14px; }
}

/* Timer visual cleanup: fewer rules and solid, borderless controls. */
.cm-brew-water-fill { border-top:0; }
.cm-immersive-head,
.cm-immersive-footer { border:0; }
.cm-immersive-step-list li+li { border:0; }
.cm-immersive-targets>div { border-right:0; }
.cm-immersive-targets { gap:8px; }
.cm-immersive-targets>div {
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
}
.cm-immersive-step-list li.current::before { width:3px; }

.cm-immersive-controls button,
.cm-immersive-controls .cm-immersive-pause,
.cm-immersive-controls .cm-immersive-skip,
.cm-immersive-controls button.danger {
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cm-immersive-controls .cm-immersive-pause {
  background:#fff;
  color:#111;
}
.cm-immersive-controls .cm-immersive-pause:hover { border:0; background:#ededed; }
.cm-immersive-controls .cm-immersive-skip,
.cm-immersive-controls .cm-immersive-skip:hover {
  border:0;
  background:#dcdcdc;
  color:#111;
}
.cm-immersive-controls .cm-immersive-skip:hover { background:#cfcfcf; }
.cm-immersive-controls button.danger,
.cm-immersive-controls button.danger:hover {
  border:0;
  background:#d92d25;
  color:#fff;
  opacity:1;
  box-shadow:none;
}
.cm-immersive-controls button.danger:hover { background:#bd211b; }

/* Countdown keeps only the information hierarchy, without decorative separators. */
.cm-brew-countdown .cm-immersive-head { border:0; }
.cm-countdown-footer button,
.cm-countdown-footer button.primary {
  border:0;
  box-shadow:none;
}
.cm-countdown-footer button { background:#ededed; color:#111; }
.cm-countdown-footer button.primary { background:#111; color:#fff; }

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-immersive-step-list { border-bottom:0; }
  .cm-immersive-targets { gap:5px; }
  .cm-immersive-targets>div { padding:9px 6px; border-radius:11px; }
}

/* Follow-up timer and compact-header corrections. */
.cm-immersive-targets { gap:0; }
.cm-immersive-targets>div {
  padding:0 22px;
  border-radius:0;
  background:transparent;
  border-right:1px solid rgba(17,17,17,.18);
}
.cm-immersive-targets>div:last-child { border-right:0; }

/* The body stays fixed, but horizontal gestures are delegated to the step rail. */
body.cm-timer-running,
body.cm-timer-running .cm-brew-immersive { touch-action:pan-x; }
body.cm-timer-running .cm-immersive-step-list,
body.cm-timer-running .cm-immersive-step-list ol {
  pointer-events:auto;
  touch-action:pan-x!important;
}
body.cm-timer-running .cm-immersive-step-list ol {
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
}

/* With no sidebar, center the back action and page title as one header group. */
.cm-timer-mode:not(.cm-timer-running) .cm-topbar { justify-content:center; }
.cm-timer-mode:not(.cm-timer-running) .cm-page-heading {
  position:static;
  width:100%;
  max-width:none;
  justify-content:center;
  transform:none;
}
.cm-timer-mode:not(.cm-timer-running) .cm-page-heading>div:last-child {
  width:min(620px,calc(100% - 360px));
  min-width:0;
  text-align:center;
}
.cm-timer-mode:not(.cm-timer-running) #cmBackAction:not(:empty) {
  position:absolute;
  left:clamp(16px,4vw,48px);
  margin:0;
}
.cm-timer-mode:not(.cm-timer-running) .cm-topbar-tools {
  position:absolute;
  right:clamp(16px,4vw,48px);
}

/* The selected button already communicates the value; remove the duplicate score column. */
.cm-completion-log .cm-sensory-row {
  grid-template-columns:64px minmax(0,1fr);
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-immersive-targets { gap:0; }
  .cm-immersive-targets>div {
    padding:0 10px;
    border-radius:0;
    background:transparent;
    border-right:1px solid rgba(17,17,17,.18);
  }
  .cm-immersive-targets>div:last-child { border-right:0; }
  .cm-timer-mode:not(.cm-timer-running) .cm-page-heading {
    width:100%;
    max-width:none;
  }
  .cm-timer-mode:not(.cm-timer-running) .cm-page-heading>div:last-child {
    width:min(62vw,520px);
    min-width:0;
  }
  .cm-timer-mode:not(.cm-timer-running) .cm-page-heading h1 {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cm-timer-mode:not(.cm-timer-running) .cm-topbar-tools { right:12px; }
  .cm-timer-mode:not(.cm-timer-running) #cmBackAction:not(:empty) { left:12px; }
  .cm-completion-log .cm-sensory-row { grid-template-columns:54px minmax(0,1fr); }
}

/* Membership, plans and subscription management */
.cm-membership-nav { position:relative; }
.cm-membership-nav em { margin-left:auto; padding:3px 7px; border-radius:999px; background:#ffa903; color:#111; font-size:8px; font-style:normal; font-weight:700; letter-spacing:.08em; }
.cm-membership-nav.active em { background:#fff; }
.cm-membership-page,.cm-subscribe-page,.cm-subscription-page { display:grid; gap:24px; }
.cm-membership-hero { min-height:440px; padding:clamp(32px,5vw,70px); position:relative; isolation:isolate; overflow:hidden; border-radius:30px; background:#111; color:#fff; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); align-items:center; gap:42px; }
.cm-membership-hero:before { content:''; position:absolute; z-index:-1; width:430px; height:430px; right:-150px; top:-250px; border:88px solid #ffa903; border-radius:50%; }
.cm-membership-hero-copy { position:relative; z-index:2; }
.cm-membership-kicker,.cm-benefit-intro>span,.cm-subscribe-intro>span,.cm-subscription-side>section>span,.cm-membership-cta>div>span { display:block; color:#d98900; font-size:10px; font-weight:700; letter-spacing:.16em; }
.cm-membership-hero .cm-membership-kicker { color:#ffa903; }
.cm-membership-hero h2 { max-width:820px; margin-top:18px!important; font-size:clamp(38px,5.4vw,76px); line-height:.98; letter-spacing:-.065em; }
.cm-membership-hero-copy>p { max-width:650px; margin-top:22px!important; color:rgba(255,255,255,.62); font-size:13px; line-height:1.75; }
.cm-membership-hero-actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.cm-membership-hero .cm-btn { min-height:48px; padding-inline:20px; border-color:rgba(255,255,255,.18); }
.cm-member-light { background:#fff; color:#111!important; }
.cm-member-ghost { background:rgba(255,255,255,.07); color:#fff!important; }
.cm-membership-orbit { width:min(290px,23vw); aspect-ratio:1; margin:auto; position:relative; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; }
.cm-membership-orbit:before,.cm-membership-orbit:after { content:''; position:absolute; inset:16%; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:rotate(36deg) scaleX(.42); }
.cm-membership-orbit:after { transform:rotate(-36deg) scaleX(.42); }
.cm-membership-orbit>span { font-size:clamp(92px,12vw,172px); font-weight:800; line-height:1; letter-spacing:-.11em; transform:translateX(-.05em); }
.cm-membership-orbit>i { position:absolute; top:9%; right:-2%; padding:6px 10px; border-radius:999px; background:#ffa903; color:#111; font-size:9px; font-style:normal; font-weight:700; letter-spacing:.12em; }
.cm-membership-orbit>b { position:absolute; left:3%; bottom:8%; color:#ffa903; font-size:30px; }
.cm-membership-summary { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--cm-card-border); border-radius:20px; }
.cm-membership-summary>div { min-width:0; padding:22px 24px; border-right:1px solid var(--cm-line); background:#fff; }
.cm-membership-summary>div:last-child { border-right:0; }
.cm-membership-summary span,.cm-membership-summary strong { display:block; }
.cm-membership-summary span { color:var(--cm-muted); font-size:10px; }
.cm-membership-summary strong { margin-top:8px; font-size:15px; }
.cm-benefit-intro { padding:70px 0 22px; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.6fr); align-items:end; gap:40px; }
.cm-benefit-intro>span { grid-column:1/-1; }
.cm-benefit-intro h2 { max-width:800px; font-size:clamp(36px,4.7vw,66px); line-height:1; letter-spacing:-.06em; }
.cm-benefit-intro p { color:var(--cm-muted); font-size:13px; line-height:1.75; }
.cm-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cm-benefit-card { min-height:310px; padding:30px; position:relative; overflow:hidden; border:1px solid var(--cm-card-border); border-radius:24px; background:#f6f6f6; display:flex; flex-direction:column; }
.cm-benefit-card.featured { background:#ffa903; }
.cm-benefit-card>span { position:absolute; right:25px; top:24px; color:rgba(17,17,17,.42); font-size:10px; font-weight:700; }
.cm-benefit-card>div { width:52px; height:52px; border-radius:16px; background:#111; color:#fff; display:grid; place-items:center; font-size:22px; }
.cm-benefit-card h3 { margin-top:auto!important; padding-top:42px; font-size:26px; letter-spacing:-.035em; }
.cm-benefit-card p { max-width:560px; margin-top:11px!important; color:#676767; font-size:12px; line-height:1.65; }
.cm-benefit-card.featured p { color:rgba(17,17,17,.68); }
.cm-benefit-card>strong { margin-top:22px; font-size:9px; letter-spacing:.15em; }
.cm-membership-compare { margin-top:46px; padding:clamp(28px,4vw,52px); border-radius:28px; background:#111; color:#fff; display:grid; grid-template-columns:minmax(260px,.7fr) minmax(460px,1.3fr); gap:54px; }
.cm-membership-compare>div:first-child>span { color:#ffa903; font-size:10px; font-weight:700; letter-spacing:.15em; }
.cm-membership-compare h2 { margin-top:16px!important; font-size:clamp(29px,3.2vw,46px); line-height:1.05; letter-spacing:-.045em; }
.cm-membership-compare>div:first-child>p { margin-top:16px!important; color:rgba(255,255,255,.55); font-size:12px; line-height:1.7; }
.cm-membership-table { min-width:0; }
.cm-membership-table>div { min-height:48px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.11); display:grid; grid-template-columns:minmax(150px,1.25fr) minmax(110px,.7fr) minmax(130px,.8fr); align-items:center; gap:16px; }
.cm-membership-table>div:first-child { color:rgba(255,255,255,.42); font-size:10px; }
.cm-membership-table span { font-size:12px; }
.cm-membership-table .member { color:#ffc04a; display:flex; align-items:center; gap:7px; }
.cm-membership-cta { margin-top:28px; padding:clamp(30px,4vw,54px); border-radius:28px; background:#ffa903; display:flex; align-items:center; justify-content:space-between; gap:34px; }
.cm-membership-cta>div>span { color:rgba(17,17,17,.58); }
.cm-membership-cta h2 { margin-top:12px!important; font-size:clamp(30px,3.4vw,48px); letter-spacing:-.045em; }
.cm-membership-cta p { margin-top:10px!important; color:rgba(17,17,17,.66); font-size:12px; }
.cm-membership-cta .cm-btn { flex:none; min-height:52px; padding-inline:22px; border:0; background:#111; color:#fff; }

.cm-subscribe-intro { padding:clamp(32px,4vw,54px); border-radius:28px; background:#f4f4f4; }
.cm-subscribe-intro h2 { max-width:800px; margin-top:14px!important; font-size:clamp(36px,4.5vw,62px); line-height:1.02; letter-spacing:-.06em; }
.cm-subscribe-intro>p { max-width:720px; margin-top:17px!important; color:var(--cm-muted); font-size:13px; line-height:1.7; }
.cm-subscribe-intro>div { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.cm-subscribe-intro>div>span { display:flex; align-items:center; gap:7px; color:#5f5f5f; font-size:11px; }
.cm-subscribe-intro>div i { color:#111; font-size:16px; }
.cm-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch; }
.cm-plan-card { min-width:0; min-height:510px; padding:28px; border:1px solid rgba(0,0,0,.08); border-radius:24px; background:#fff; display:flex; flex-direction:column; }
.cm-plan-card.featured { border-color:#111; background:#111; color:#fff; transform:translateY(-7px); }
.cm-plan-head { min-height:26px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cm-plan-head>span { color:#8a8a8a; font-size:9px; font-weight:700; letter-spacing:.16em; }
.cm-plan-head>em { padding:5px 9px; border-radius:999px; background:#f0f0f0; color:#555; font-size:9px; font-style:normal; }
.cm-plan-cycle { display:none; }
.cm-plan-card.featured .cm-plan-head>span { color:#ffa903; }
.cm-plan-card.featured .cm-plan-head>em { background:#ffa903; color:#111; }
.cm-plan-card h3 { margin-top:22px!important; font-size:28px; letter-spacing:-.04em; }
.cm-plan-card>p { min-height:58px; margin-top:12px!important; color:#747474; font-size:11px; line-height:1.65; }
.cm-plan-card.featured>p { color:rgba(255,255,255,.55); }
.cm-plan-price { min-height:88px; margin-top:25px; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.1); }
.cm-plan-card.featured .cm-plan-price { border-color:rgba(255,255,255,.13); }
.cm-plan-price strong,.cm-plan-price span { display:block; }
.cm-plan-price strong { font-size:27px; letter-spacing:-.04em; }
.cm-plan-price span { margin-top:5px; color:#8a8a8a; font-size:10px; }
.cm-plan-card ul { margin:22px 0 28px; padding:0; list-style:none; display:grid; gap:13px; }
.cm-plan-card li { display:flex; align-items:flex-start; gap:9px; color:#555; font-size:11px; line-height:1.45; }
.cm-plan-card li i { flex:none; margin-top:1px; color:#111; }
.cm-plan-card.featured li { color:rgba(255,255,255,.68); }
.cm-plan-card.featured li i { color:#ffa903; }
.cm-plan-action { appearance:none; width:100%; min-height:50px; margin-top:auto; padding:0 17px; border:0; border-radius:13px; background:#111; color:#fff!important; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:650; cursor:pointer; }
.cm-plan-card.featured .cm-plan-action { background:#fff; color:#111!important; }
.cm-plan-action:hover { transform:translateY(-1px); }
.cm-plan-action>span { font-size:20px; font-weight:400; }
.cm-subscribe-footnote { padding:22px 24px; border:1px solid var(--cm-card-border); border-radius:20px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:15px; }
.cm-subscribe-footnote>div:first-child { width:44px; height:44px; border-radius:13px; background:#f1f1f1; display:grid; place-items:center; font-size:19px; }
.cm-subscribe-footnote strong { font-size:12px; }
.cm-subscribe-footnote p { margin-top:4px!important; color:var(--cm-muted); font-size:10px; line-height:1.55; }

.cm-subscription-status { min-height:230px; padding:clamp(30px,4vw,52px); border-radius:28px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cm-subscription-status.active { background:#111; color:#fff; }
.cm-subscription-status.free { background:#f3f3f3; color:#111; }
.cm-subscription-status>div:first-child { position:relative; z-index:2; }
.cm-subscription-title { margin-top:14px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.cm-subscription-title h2 { font-size:clamp(34px,4vw,56px); letter-spacing:-.055em; }
.cm-subscription-title>span { padding:5px 10px; border-radius:999px; background:#ffa903; color:#111; font-size:9px; font-weight:700; }
.cm-subscription-status p { max-width:650px; margin-top:14px!important; color:var(--cm-muted); font-size:12px; }
.cm-subscription-status.active p { color:rgba(255,255,255,.58); }
.cm-subscription-mark { color:rgba(255,255,255,.08); font-size:clamp(70px,12vw,150px); font-weight:800; letter-spacing:-.08em; line-height:.8; }
.cm-subscription-status.free .cm-subscription-mark { color:rgba(17,17,17,.06); }
.cm-subscription-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); gap:16px; align-items:start; }
.cm-subscription-main { display:grid; gap:16px; }
.cm-subscription-details dl { margin:12px 0 0; }
.cm-subscription-details dl>div { min-height:52px; border-bottom:1px solid var(--cm-line); display:grid; grid-template-columns:minmax(130px,.6fr) minmax(0,1.4fr); align-items:center; gap:16px; }
.cm-subscription-details dl>div:last-child { border-bottom:0; }
.cm-subscription-details dt { color:var(--cm-muted); font-size:11px; }
.cm-subscription-details dd { margin:0; overflow:hidden; font-size:12px; font-weight:600; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.cm-subscription-id { font-family:var(--cm-font-mono); font-size:10px!important; }
.cm-subscription-badge { padding:6px 10px; border-radius:999px; background:#ededed; color:#555; font-size:9px; font-weight:700; white-space:nowrap; }
.cm-subscription-badge.active,.cm-subscription-badge.trialing { background:#e4efe5; color:#267033; }
.cm-subscription-badge.past_due { background:#fff0d6; color:#8a5700; }
.cm-subscription-badge.canceled,.cm-subscription-badge.expired { background:#f4e4e2; color:#922d24; }
.cm-subscription-actions .cm-setting-row>div:last-child { flex:none; }
.cm-subscription-side { display:grid; gap:16px; }
.cm-subscription-side>section { padding:24px; border-radius:22px; background:#f5f5f5; }
.cm-subscription-side h3 { margin-top:9px!important; font-size:19px; }
.cm-usage-item { margin-top:24px; }
.cm-usage-item>div { display:flex; justify-content:space-between; gap:12px; font-size:10px; }
.cm-usage-item>div>span { color:var(--cm-muted); }
.cm-usage-item>i { height:5px; margin-top:10px; border-radius:99px; background:#ddd; display:block; overflow:hidden; }
.cm-usage-item>i:after { content:''; width:var(--usage); height:100%; border-radius:inherit; background:#111; display:block; }
.cm-subscription-help { background:#111!important; color:#fff; }
.cm-subscription-help>div { width:42px; height:42px; border-radius:13px; background:#ffa903; color:#111; display:grid; place-items:center; }
.cm-subscription-help p { margin-top:10px!important; color:rgba(255,255,255,.55); font-size:10px; line-height:1.6; }
.cm-subscription-help .cm-btn { width:100%; margin-top:17px; color:#fff; }
.cm-cancel-modal { width:min(560px,calc(100vw - 40px)); }
.cm-cancel-subscription { padding:calc(var(--cm-modal-head-height) + 28px) 28px 26px; }
.cm-cancel-icon { width:54px; height:54px; border-radius:17px; background:#f5e6e4; color:var(--cm-danger); display:grid; place-items:center; font-size:23px; }
.cm-cancel-subscription h3 { margin-top:22px!important; font-size:26px; letter-spacing:-.04em; }
.cm-cancel-subscription>p { margin-top:12px!important; color:var(--cm-muted); font-size:12px; line-height:1.7; }
.cm-cancel-subscription ul { margin:22px 0 0; padding:18px 20px; border-radius:16px; background:#f7f7f7; list-style:none; display:grid; gap:11px; }
.cm-cancel-subscription li { display:flex; align-items:center; gap:9px; font-size:11px; }
.cm-cancel-subscription li i { color:#31723a; }
.cm-cancel-subscription .cm-form-actions { margin-top:24px; }

@media (max-width:1060px) {
  .cm-plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cm-plan-card { min-height:0; }
  .cm-plan-card.featured { transform:none; }
  .cm-plan-card>p { min-height:0; }
  .cm-subscription-layout { grid-template-columns:1fr; }
  .cm-subscription-side { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-membership-hero { min-height:540px; grid-template-columns:1fr; align-content:space-between; }
  .cm-membership-orbit { width:180px; position:absolute; right:-18px; bottom:-18px; opacity:.5; }
  .cm-membership-hero-copy { align-self:start; }
  .cm-membership-summary { grid-template-columns:1fr 1fr; }
  .cm-membership-summary>div:nth-child(2) { border-right:0; }
  .cm-membership-summary>div:nth-child(-n+2) { border-bottom:1px solid var(--cm-line); }
  .cm-benefit-intro { padding-top:46px; grid-template-columns:1fr; gap:18px; }
  .cm-benefit-grid { grid-template-columns:1fr; }
  .cm-membership-compare { grid-template-columns:1fr; gap:30px; }
  .cm-membership-cta { align-items:flex-start; flex-direction:column; }
  .cm-membership-cta .cm-btn { width:100%; }
  .cm-subscription-side { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .cm-membership-hero { min-height:500px; padding:28px 22px; border-radius:22px; }
  .cm-membership-hero h2 { font-size:40px; }
  .cm-membership-hero-actions { display:grid; }
  .cm-membership-summary>div { padding:17px 15px; }
  .cm-benefit-card { min-height:280px; padding:24px; }
  .cm-membership-compare { margin-top:24px; padding:28px 20px; border-radius:22px; }
  .cm-membership-table { overflow-x:auto; }
  .cm-membership-table>div { min-width:530px; }
  .cm-subscribe-intro { padding:28px 22px; border-radius:22px; }
  .cm-subscribe-page { gap:16px; }
  .cm-plan-grid { gap:7px; align-items:end; }
  .cm-plan-card { height:237px; min-height:237px; padding:14px 9px 10px; overflow:hidden; border-radius:16px; text-align:center; }
  .cm-plan-card.featured { height:261px; min-height:261px; border:2px solid #ffa903; background:#fff; color:#111; transform:none; box-shadow:0 9px 28px rgba(17,17,17,.1); }
  .cm-plan-head { min-height:22px; justify-content:center; }
  .cm-plan-head>span { display:none; }
  .cm-plan-head>em { max-width:100%; padding:4px 6px; overflow:hidden; background:#efefed; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
  .cm-plan-card.featured .cm-plan-head>em { background:#ffa903; color:#111; }
  .cm-plan-cycle { margin-top:9px; display:grid; justify-items:center; }
  .cm-plan-cycle strong { font-family:var(--cm-font-display); font-size:38px; line-height:.9; letter-spacing:-.06em; }
  .cm-plan-cycle span { margin-top:6px; font-size:7px; font-weight:800; letter-spacing:.08em; }
  .cm-plan-card h3 { margin-top:12px!important; font-size:13px; }
  .cm-plan-card>p,.cm-plan-card ul { display:none; }
  .cm-plan-price { min-height:0; margin-top:10px; padding:0; border:0; }
  .cm-plan-card.featured .cm-plan-price { border:0; }
  .cm-plan-price strong { font-size:11px; }
  .cm-plan-price span { margin-top:3px; font-size:8px; }
  .cm-plan-action { min-height:40px; margin-top:auto; padding:0 5px; border-radius:10px; justify-content:center; font-size:8.5px; white-space:nowrap; }
  .cm-plan-action>span { display:none; }
  .cm-plan-card.featured .cm-plan-action { background:#111; color:#fff!important; }
  .cm-subscribe-footnote { grid-template-columns:44px minmax(0,1fr); }
  .cm-subscribe-footnote .cm-btn { grid-column:1/-1; width:100%; }
  .cm-subscription-status { min-height:250px; padding:28px 22px; align-items:flex-start; }
  .cm-subscription-mark { position:absolute; right:-10px; bottom:12px; }
  .cm-subscription-details dl>div { grid-template-columns:100px minmax(0,1fr); }
  .cm-subscription-actions .cm-setting-row { align-items:flex-start; flex-direction:column; }
  .cm-subscription-actions .cm-setting-row>div:last-child,.cm-subscription-actions .cm-btn { width:100%; }
  .cm-cancel-subscription .cm-form-actions { display:grid; }
  .cm-cancel-subscription .cm-btn { width:100%; }
  .cm-account-profile { padding:18px 15px; }
  .cm-account-avatar-editor { width:60px; }
  .cm-account-profile-avatar { width:58px; height:58px; border-radius:18px; }
  .cm-account-membership-card { min-height:108px; padding:15px; grid-template-columns:52px minmax(0,1fr); gap:12px; }
  .cm-account-tier-mark { width:50px; height:50px; border-radius:15px; font-size:11px; }
  .cm-account-membership-card>em { grid-column:2; margin-top:-4px; }
}

/* Responsive typography: compact mobile rhythm while preserving the PC scale. */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  :root {
    --cm-fs-xs:9px;
    --cm-fs-sm:11px;
    --cm-fs-md:13px;
    --cm-fs-lg:15px;
    --cm-fs-xl:18px;
    --cm-fs-2xl:24px;
    --cm-fs-control:13px;
    --cm-copy-gap:5px;
    --cm-section-gap:32px;
  }
  body.cm-ready { font-size:var(--cm-fs-md); line-height:1.45; }
  .cm-page-heading h1 { font-size:17px; line-height:1.18; }
  .cm-section-head h2 { font-size:18px; line-height:1.22; letter-spacing:-.025em; }
  .cm-section-head p,
  .cm-hero-main p,
  .cm-library-intro p,
  .cm-dripper-hero-copy p,
  .cm-detail-hero p,
  .cm-insight-toolbar p,
  .cm-ai-coach-head p { font-size:12px; line-height:1.52; }
  .cm-section-head { margin-bottom:16px; }
  .cm-hero-main h2 { margin-bottom:12px; font-size:clamp(30px,9.2vw,38px); line-height:1.04; letter-spacing:-.045em; }
  .cm-library-intro h2 { margin-top:10px!important; font-size:clamp(31px,10vw,43px); line-height:1.02; }
  .cm-library-intro p { margin-top:11px!important; }
  .cm-dripper-hero-copy h2 { margin-top:10px!important; font-size:clamp(35px,11vw,48px); line-height:1; }
  .cm-dripper-hero-copy p { margin-top:9px!important; }
  .cm-detail-hero h2 { font-size:clamp(34px,11vw,48px); line-height:1; }
  .cm-detail-hero p { margin-top:13px; }
  .cm-insight-toolbar h2 { font-size:clamp(26px,8vw,34px); line-height:1.08; }
  .cm-insight-toolbar p { margin-top:7px!important; }
  .cm-insight-detail-hero h2 { font-size:clamp(31px,9.5vw,43px); line-height:1.02; }
  .cm-insight-detail-hero>div:last-child strong { font-size:clamp(36px,11vw,50px); }
  #cm-page-insights .cm-ai-coach-head h2 { margin-top:10px!important; font-size:clamp(30px,9.5vw,40px); line-height:1.02; }
  .cm-mobile-more-panel>header h2 { font-size:clamp(27px,8vw,35px); line-height:1.06; }
  .cm-auth-story-copy h2 { font-size:clamp(32px,9.5vw,44px); line-height:1.03; }
  .cm-auth-panel-head h1,.cm-auth-message h1 { font-size:clamp(29px,8.5vw,36px); line-height:1.08; }
  .cm-auth-panel-head p,.cm-auth-message p { margin-top:10px; line-height:1.55; }
  .cm-timer-setup h2 { font-size:clamp(34px,10vw,44px); line-height:1; }
  .cm-brew-setup-main h2 { font-size:clamp(36px,11vw,50px); line-height:.98; }
  .cm-brew-stage-copy h1 { font-size:clamp(38px,11vw,54px); line-height:.92; }
  .cm-rolling-time { height:clamp(82px,26vw,116px); font-size:clamp(78px,25vw,112px); }
  .cm-brew-finish>h2 { font-size:clamp(40px,12vw,58px); line-height:.98; }
  .cm-countdown-stage>strong { font-size:clamp(110px,38vw,180px); }
.cm-countdown-stage h1 { margin-top:24px; font-size:clamp(24px,7.5vw,34px); }
}

/* Flat visual language: rerenders stay still and only the operated control responds. */
.cm-page,
.cm-page.active,
.cm-page.active>.cm-hero,
.cm-page.active>.cm-insight-toolbar,
.cm-page.active>.cm-toolbar,
.cm-page.active>.cm-library-intro,
.cm-page.active>.cm-detail-shell,
.cm-page.active>.cm-dripper-detail,
.cm-page.active>.cm-stat-grid,
.cm-page.active>.cm-recipe-grid,
.cm-page.active>.cm-dripper-grid,
.cm-page.active>.cm-explore-grid,
.cm-page.active>.cm-section,
.cm-page.active :is(.cm-stat-grid,.cm-recipe-grid,.cm-dripper-grid,.cm-explore-grid)>*,
.cm-modal-wrap.open .cm-backdrop,
.cm-modal-wrap.open .cm-modal {
  animation:none!important;
}

/* P2 step adjustment area uses a single surface instead of a gradient/elevation. */
.cm-step-editor.expanded {
  border:1px solid var(--cm-line);
  background:#f3f3f3;
  box-shadow:none;
}
.cm-step-editor.expanded .cm-step-editor-body { background:transparent; }

/* Remove decorative elevation; hierarchy is expressed with borders and solid surfaces. */
.cm-auth-brand>img,
.cm-brand-mark,
.cm-nav-btn.active,
.cm-btn,
.cm-btn:hover,
.cm-btn.brand,
.cm-hero-main,
.cm-hero-side,
.cm-day-preview,
.cm-language-menu,
.cm-stat,
.cm-stat.interactive:hover,
.cm-card,
.cm-period-switch button.active,
.cm-switch:after,
.cm-modal,
.cm-recipe-modal,
.cm-toast,
.cm-completion-log,
.cm-detail-more-menu,
.cm-ai-coach,
.cm-account-profile-avatar>i,
.cm-account-membership-card:hover,
.cm-dripper-picker-grid>button:hover,
.cm-draft-drippers>button:hover,
.cm-filter-menu,
.cm-ai-upload:hover,
.cm-explore-detail-metrics,
.cm-dripper-preset-grid button,
.cm-dripper-preset-grid button:hover,
#cm-page-insights .cm-ai-coach::before,
.cm-dripper-hero::after,
.cm-dripper-hero-copy .cm-btn.brand,
.cm-mobile-nav,
.cm-immersive-controls .cm-immersive-pause,
.cm-back-link,
.cm-hero-main .cm-eyebrow,
.cm-plan-card.featured {
  box-shadow:none!important;
}

/* Typography system: shared hierarchy from the Coffme design specification. */
body.cm-ready { line-height:var(--cm-lh-body); }
#coffmeApp h1 { line-height:var(--cm-lh-display); }
#coffmeApp h2 { line-height:var(--cm-lh-heading); }
#coffmeApp h3 { line-height:1.22; }
#coffmeApp h4,#coffmeApp h5,#coffmeApp h6 { line-height:var(--cm-lh-title); }
#coffmeApp p,#coffmeApp li { line-height:var(--cm-lh-body); }
#coffmeApp label,#coffmeApp small,#coffmeApp dt,#coffmeApp dd { line-height:var(--cm-lh-caption); }
#coffmeApp button,#coffmeApp input,#coffmeApp select { line-height:var(--cm-lh-control); }
#coffmeApp textarea { line-height:1.55; }
#coffmeApp :is(.cm-hero-main,.cm-detail-hero,.cm-insight-detail-hero,.cm-library-intro,.cm-dripper-hero,.cm-ai-coach) h2,
#coffmeApp :is(.cm-brew-stage-copy,.cm-immersive-stage) h1 { line-height:var(--cm-lh-display); }
#coffmeApp :is(.cm-number,.cm-stat-value,.cm-timer-time,.cm-rolling-time,.cm-countdown-stage>strong) { line-height:1; }
.cm-auth-panel-head h1,.cm-auth-message h1,.cm-auth-story-copy h2 { line-height:var(--cm-lh-heading); }
.cm-auth-panel-head p,.cm-auth-message p,.cm-auth-story-copy p { line-height:var(--cm-lh-body); }

/* Desktop accessibility floor: auxiliary copy is never rendered below 12px. */
@media (min-width:1025px), (min-width:761px) and (orientation:landscape) {
  .cm-auth-story-copy>span,
  .cm-auth-story>small,
  .cm-auth-step,
  .cm-auth-oauth-note,
  .cm-auth-divider,
  .cm-auth-notice,.cm-auth-error,.cm-auth-success,
  .cm-password-rules,
  .cm-password-rules i,
  .cm-auth-privacy,
  .cm-page-heading small,
  .cm-day-preview em,
  .cm-day-preview small,
  .cm-streak-labels,
  .cm-caffeine-note,
  .cm-language-status,.cm-setting-status,
  .cm-stat-value>span,
  .cm-stat small,
  .cm-field-hint,
  .cm-bar-item span,
  .cm-caffeine-primary span,
  .cm-caffeine-facts span,
  .cm-chart-head span,
  .cm-caffeine-bars .cm-bar-item>strong,
  .cm-insight-detail-hero>div:last-child span,
  .cm-detail-bar span,
  .cm-insight-ranking small,
  .cm-detail-metrics span,
  .cm-detail-step p,
  .cm-modal-step,
  .cm-wizard-progress button>span,
  .cm-wizard-section-title p,
  .cm-wizard-kicker,
  .cm-draft-summary span,
  .cm-field-heading>span,.cm-optional,
  .cm-wizard-footer-hint,
  .cm-name-assist,
  .cm-field-error,
  .cm-ratio-presets strong,
  .cm-ratio-preview span,
  .cm-ratio-preview.compact small,
  .cm-step-page-head p,
  .cm-step-balance span,
  .cm-step-balance small,
  .cm-step-control-label,
  .cm-step-options-head,
  .cm-step-type-grid .cm-choice,
  .cm-step-extra-grid label,
  .cm-step-extra-grid label>span,
  .cm-legacy-step-note,
  .cm-optional-note summary span,
  .cm-ai-status,.cm-ai-badge,
  .cm-ai-quota,
  .cm-ai-changes article>span,.cm-ai-advice-grid aside>span,
  .cm-ai-disclaimer,
  .cm-ai-placeholder>span,
  .cm-ai-history-button>span,
  .cm-ai-processing p,
  .cm-ai-history-list>button small,
  .cm-ai-history-list>button>em,
  .cm-ai-or,
  .cm-ai-result-head span,
  .cm-ai-result-metrics span,
  .cm-ai-upload>small,
  .cm-ai-file-ready b,
  .cm-ai-file-ready small,
  .cm-ai-or span,
  .cm-ai-field-head span,
  .cm-ai-copy-input>p,
  .cm-ai-import .cm-ai-error p,
  .cm-ai-import .cm-ai-error .cm-text-action,
  .cm-ai-analyzing>div:last-child>span,
  .cm-ai-analyzing p,
  .cm-account-mini small,
  .cm-sync-badge,
  .cm-avatar-remove,
  .cm-account-profile-kicker,
  .cm-account-profile>div:last-child>small,
  .cm-account-profile p,
  .cm-account-membership-card div small,
  .cm-account-membership-card div p,
  .cm-account-membership-card>em,
  .cm-account-summary article>span,
  .cm-account-summary small,
  .cm-account-section-title p,
  .cm-account-details dt,
  .cm-account-note,
  .cm-merge-summary span,.cm-merge-summary small,
  .cm-kicker,
  .cm-dripper-presets>.cm-section-head>span,
  .cm-dripper-preset-grid button>span,
  .cm-dripper-preset-grid small,
  .cm-dripper-stats span,
  .cm-dripper-stats small,
  .cm-dripper-picker-grid small,
  .cm-draft-drippers small,
  .cm-explore-intro-stat small,
  .cm-explore-card-label span,
  .cm-explore-card-label small,
  .cm-explore-card-title>span,
  .cm-explore-metrics span,
  .cm-explore-tags span,
  .cm-explore-source>span,
  .cm-explore-source .cm-btn,
  .cm-explore-modal .cm-modal-step,
  .cm-explore-detail-hero>div:first-child>span,
  .cm-explore-detail-metrics span,
  .cm-replay-kicker,
  .cm-insight-note,
  .cm-wizard-progress button,
  .cm-brew-recipe-select>span,
  .cm-brew-setup-metrics span,
  .cm-brew-setup-metrics small,
  .cm-brew-start small,
  .cm-brew-plan-head span,
  .cm-brew-plan-steps small,
  .cm-brew-live-head p,
  .cm-brew-total>span,
  .cm-brew-total strong small,
  .cm-brew-stage-copy>span,
  .cm-brew-stage-time span,
  .cm-brew-stage-targets span,
  .cm-brew-stage-targets strong small,
  .cm-brew-timeline-head small,
  .cm-brew-timeline article small,
  .cm-immersive-step-list>span,
  .cm-immersive-step-list li small,
  .cm-countdown-stage>span,
  .cm-advanced-trigger small,
  .cm-advanced-intro p,
  .cm-sensory-row>span,
  .cm-record-sensory span,
  .cm-frequency-panel .cm-bar-value,
  .cm-immersive-head span,
  .cm-immersive-head strong,
  .cm-immersive-kicker,
  .cm-immersive-targets span,
  .cm-water-progress-copy span,.cm-water-progress-copy small,
  .cm-immersive-controls button,
  .cm-mobile-more-panel>header small,
  .cm-mobile-more-content>section>span,
  .cm-mobile-more-row small,
  .cm-mobile-language-locked small,
  .cm-mobile-language-locked em,
  .cm-mobile-more-panel>footer span,
  .cm-mobile-more-panel>footer small,
  .cm-auth-verify-steps b,
  .cm-countdown-stage p,
  .cm-completion-log .cm-advanced-trigger small,
  .cm-completion-log .cm-advanced-intro p,
  .cm-completion-log .cm-advanced-intro button,
  .cm-completion-log .cm-sensory-row button,
  .cm-stat-label,
  .cm-stat .cm-stat-note,
  .cm-stat.interactive .cm-stat-content>.cm-stat-note,
  .cm-hero-main .cm-eyebrow,
  .cm-membership-nav em,
  .cm-membership-kicker,.cm-benefit-intro>span,.cm-subscribe-intro>span,.cm-subscription-side>section>span,.cm-membership-cta>div>span,
  .cm-membership-orbit>i,
  .cm-membership-summary span,
  .cm-benefit-card>span,
  .cm-benefit-card>strong,
  .cm-membership-compare>div:first-child>span,
  .cm-membership-table>div:first-child,
  .cm-subscribe-intro>div>span,
  .cm-plan-head>span,
  .cm-plan-head>em,
  .cm-plan-card>p,
  .cm-plan-price span,
  .cm-plan-card li,
  .cm-subscribe-footnote p,
  .cm-subscription-title>span,
  .cm-subscription-details dt,
  .cm-subscription-id,
  .cm-subscription-badge,
  .cm-usage-item>div,
  .cm-subscription-help p,
  .cm-cancel-subscription li,
  .cm-plan-cycle span,
  .cm-plan-price strong,
  .cm-plan-action,
  .cm-account-tier-mark,
  #coffmeApp .cm-muted,
  .cm-recipe-method,.cm-dripper-tag,
  .cm-recipe-copy p,.cm-dripper-card-copy p,
  .cm-recipe-meta span,
  .cm-dripper-card-stats span {
    font-size:12px!important;
    line-height:var(--cm-lh-caption);
  }
}

@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  :root {
    --cm-lh-display:1.03;
    --cm-lh-heading:1.12;
    --cm-lh-title:1.25;
    --cm-lh-body:1.55;
    --cm-lh-caption:1.4;
    --cm-lh-control:1.2;
  }
}

/* Portrait tablets have enough content width for two product cards per row. */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-recipe-grid,
  .cm-dripper-grid,
  .cm-explore-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
  }
}

/* Nested empty states should not draw a second frame inside a framed panel. */
:is(.cm-card,.cm-insight-panel,.cm-records-panel,.cm-insight-detail-panel,.cm-detail-section) :is(.cm-list,.cm-table-wrap,.cm-distribution)>.cm-empty,
.cm-detail-section>.cm-empty {
  border:0;
  border-radius:0;
  background:transparent;
}

/* Account profile uses a centered, flat identity treatment. */
#coffmeApp .cm-account-profile {
  padding:8px 0 22px;
  border-radius:0;
  background:transparent;
  color:var(--cm-text);
  flex-direction:column;
  justify-content:center;
  gap:14px;
  text-align:center;
}
#coffmeApp .cm-account-avatar-editor {
  width:auto;
  overflow:visible;
  justify-items:center;
}
#coffmeApp .cm-account-profile-avatar {
  width:116px;
  height:116px;
  overflow:visible;
  border:1px solid var(--cm-line);
  border-radius:50%;
  background:var(--cm-surface-2);
  font-size:34px;
}
#coffmeApp .cm-account-profile-avatar>img {
  display:block;
  border-radius:50%;
}
#coffmeApp .cm-account-profile-avatar>.cm-avatar-camera {
  width:36px;
  height:36px;
  position:absolute;
  right:-12px;
  bottom:4px;
  border:3px solid #fff;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  font-family:'Material Symbols Rounded';
  font-size:19px;
  font-weight:600;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
  line-height:1;
  box-shadow:none;
  pointer-events:none;
}
#coffmeApp .cm-account-profile>div:last-child {
  width:100%;
  display:grid;
  justify-items:center;
}
#coffmeApp .cm-account-profile h3 {
  color:var(--cm-text);
  font-size:30px;
}
#coffmeApp .cm-account-profile>div:last-child>small {
  color:var(--cm-muted);
}
@media (max-width:760px) {
  #coffmeApp .cm-account-profile-avatar {
    width:96px;
    height:96px;
    border-radius:50%;
    font-size:28px;
  }
  #coffmeApp .cm-account-profile-avatar>.cm-avatar-camera {
    width:34px;
    height:34px;
    right:-10px;
    bottom:3px;
    font-size:18px;
  }
}

/* Mobile top bar follows the user's scroll intent without reacting to jitter. */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
  .cm-topbar {
    transform:translate3d(0,0,0);
    opacity:1;
    transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 220ms ease;
    will-change:transform;
  }
  body.cm-mobile-topbar-hidden .cm-topbar {
    transform:translate3d(0,calc(-100% - env(safe-area-inset-top)),0);
    opacity:.96;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .cm-topbar,.cm-layout,.cm-sidebar,.cm-sidebar-toggle,.cm-page-heading { transition:none!important; }
}

/* Collapsible desktop / landscape-tablet navigation. */
@media (min-width:1025px), (min-width:761px) and (orientation:landscape) {
  .cm-layout {
    transition:grid-template-columns 380ms cubic-bezier(.2,.82,.2,1);
  }
  .cm-sidebar {
    transform:translate3d(0,0,0);
    overflow:visible;
    transition:width 380ms cubic-bezier(.2,.82,.2,1),padding 380ms cubic-bezier(.2,.82,.2,1);
    will-change:width,padding;
  }
  .cm-topbar {
    transition:left 380ms cubic-bezier(.2,.82,.2,1);
  }
  .cm-page-heading {
    transition:margin-left 380ms cubic-bezier(.2,.82,.2,1);
  }
  .cm-sidebar .cm-nav-btn>span,
  .cm-sidebar .cm-account-mini>span:last-child {
    max-width:180px;
    opacity:1;
    overflow:hidden;
    white-space:nowrap;
    transform:translateX(0);
    transition:max-width 300ms cubic-bezier(.2,.82,.2,1),opacity 160ms ease,transform 300ms cubic-bezier(.2,.82,.2,1),visibility 0s linear 0s;
  }
  .cm-sidebar-toggle {
    position:fixed;
    top:20px;
    left:calc(var(--cm-sidebar) - 64px);
    z-index:70;
    width:52px;
    height:52px;
    padding:0;
    border:0;
    border-radius:14px;
    background:transparent;
    color:var(--cm-muted);
    display:grid;
    place-items:center;
    cursor:pointer;
    overflow:visible;
    transition:left 380ms cubic-bezier(.2,.82,.2,1),color 180ms ease,background-color 180ms ease,transform 180ms ease;
  }
  .cm-sidebar-toggle:hover {
    background:var(--cm-surface-2);
    color:var(--cm-text);
  }
  .cm-sidebar-toggle-state {
    position:absolute;
    inset:0;
    width:52px;
    height:52px;
    border-radius:14px;
    display:grid;
    place-items:center;
    transition:opacity 180ms ease,transform 260ms cubic-bezier(.2,.82,.2,1),visibility 0s linear 180ms;
  }
  .cm-sidebar-toggle-collapsed {
    opacity:0;
    visibility:hidden;
    transform:scale(.92);
  }
  .cm-sidebar-toggle-expanded {
    opacity:1;
    visibility:visible;
    transform:scale(1);
    background:var(--cm-surface-2);
    transition-delay:0s;
  }
  .cm-sidebar-toggle-logo {
    position:absolute;
    inset:0;
    width:52px;
    height:52px;
    border-radius:14px;
    object-fit:cover;
    opacity:1;
    transform:scale(1);
    transition:opacity 160ms ease,transform 240ms cubic-bezier(.2,.82,.2,1);
  }
  .cm-sidebar-toggle-open-icon,
  .cm-sidebar-toggle-close-icon {
    font-family:'Material Symbols Rounded';
    font-size:24px;
    font-style:normal;
    font-weight:400;
    line-height:1;
    font-feature-settings:'liga';
    -webkit-font-feature-settings:'liga';
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  }
  .cm-sidebar-toggle-open-icon {
    position:absolute;
    inset:0;
    border-radius:14px;
    background:var(--cm-surface-2);
    display:grid;
    place-items:center;
    opacity:0;
    transform:scale(.9);
    transition:opacity 160ms ease,transform 240ms cubic-bezier(.2,.82,.2,1);
  }
  body.cm-sidebar-collapsed .cm-layout {
    grid-template-columns:var(--cm-sidebar-rail) minmax(0,1fr);
  }
  body.cm-sidebar-collapsed .cm-sidebar {
    width:var(--cm-sidebar-rail);
    padding:16px 12px;
  }
  body.cm-sidebar-collapsed .cm-topbar {
    left:var(--cm-sidebar-rail);
  }
  body.cm-sidebar-collapsed .cm-sidebar-toggle {
    left:20px;
  }
  body.cm-sidebar-collapsed .cm-sidebar-toggle-collapsed {
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition-delay:0s;
  }
  body.cm-sidebar-collapsed .cm-sidebar-toggle-expanded {
    opacity:0;
    visibility:hidden;
    transform:scale(.92);
  }
  body.cm-sidebar-collapsed .cm-sidebar-toggle.is-hover-preview .cm-sidebar-toggle-logo,
  body.cm-sidebar-collapsed .cm-sidebar-toggle:hover .cm-sidebar-toggle-logo {
    opacity:0;
    transform:scale(.9);
  }
  body.cm-sidebar-collapsed .cm-sidebar-toggle.is-hover-preview .cm-sidebar-toggle-open-icon,
  body.cm-sidebar-collapsed .cm-sidebar-toggle:hover .cm-sidebar-toggle-open-icon {
    opacity:1;
    transform:scale(1);
  }
  body.cm-sidebar-collapsed .cm-page-heading {
    margin-left:0;
  }
  body.cm-sidebar-collapsed .cm-brand {
    height:64px;
    padding:0;
    opacity:0;
    pointer-events:none;
  }
  body.cm-sidebar-collapsed .cm-nav {
    gap:8px;
    justify-items:center;
  }
  body.cm-sidebar-collapsed .cm-nav-btn,
  body.cm-sidebar-collapsed .cm-sidebar-foot>.cm-nav-btn,
  body.cm-sidebar-collapsed .cm-account-mini {
    position:relative;
    width:52px;
    min-height:52px;
    padding:0;
    justify-content:center;
    gap:0;
    border-radius:14px;
  }
  body.cm-sidebar-collapsed .cm-nav-btn>span,
  body.cm-sidebar-collapsed .cm-account-mini>span:last-child {
    max-width:0;
    opacity:0;
    visibility:hidden;
    transform:translateX(-6px);
    transition:max-width 220ms cubic-bezier(.2,.82,.2,1),opacity 100ms ease,transform 220ms cubic-bezier(.2,.82,.2,1),visibility 0s linear 220ms;
  }
  body.cm-sidebar-collapsed .cm-nav .cm-mobile-nav-icon,
  body.cm-sidebar-collapsed .cm-sidebar-foot>.cm-nav-btn i {
    font-size:24px;
  }
  body.cm-sidebar-collapsed .cm-sidebar-foot {
    justify-items:center;
    border-top:0;
  }
  body.cm-sidebar-collapsed .cm-account-mini .cm-account-avatar {
    width:38px;
    height:38px;
  }
  #coffmeApp .cm-sidebar-toggle:focus-visible {
    outline-width:2px;
    outline-offset:-4px;
  }
  body.cm-sidebar-collapsed [data-sidebar-label]::after,
  .cm-sidebar-toggle::after {
    content:attr(data-sidebar-label);
    position:absolute;
    left:calc(100% + 14px);
    top:50%;
    z-index:120;
    width:max-content;
    max-width:220px;
    padding:9px 12px;
    border:1px solid var(--cm-line);
    border-radius:10px;
    background:var(--cm-text);
    color:var(--cm-surface);
    font:600 12px/1.2 var(--cm-font-sans);
    letter-spacing:0;
    box-shadow:0 10px 28px rgba(0,0,0,.16);
    opacity:0;
    pointer-events:none;
    transform:translate(4px,-50%);
    transition:opacity 120ms ease,transform 120ms ease;
  }
  body.cm-sidebar-collapsed [data-sidebar-label]:hover::after,
  body.cm-sidebar-collapsed [data-sidebar-label]:focus-visible::after,
  .cm-sidebar-toggle:hover::after,
  .cm-sidebar-toggle:focus-visible::after {
    opacity:1;
    transform:translate(0,-50%);
  }
  body:not(.cm-sidebar-collapsed) .cm-sidebar-toggle::after {
    top:calc(100% + 10px);
    left:auto;
    right:0;
    transform:translateY(-4px);
  }
  body:not(.cm-sidebar-collapsed) .cm-sidebar-toggle:hover::after,
  body:not(.cm-sidebar-collapsed) .cm-sidebar-toggle:focus-visible::after {
    transform:translateY(0);
  }
  .cm-timer-mode .cm-sidebar-toggle,
  body.cm-timer-running .cm-sidebar-toggle {
    display:none;
  }
}

/* Final cascade guard: selection is communicated without black outlines. */
#coffmeApp :focus-visible { outline:2px solid color-mix(in srgb,var(--cm-highlight) 62%,transparent); outline-offset:2px; }
#coffmeApp :is(.cm-input,.cm-select,.cm-textarea):focus,
.cm-auth-input:focus {
  border-color:color-mix(in srgb,var(--cm-highlight) 52%,var(--cm-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-highlight) 13%,transparent);
}
.cm-brew-recipe-select:hover { border-color:color-mix(in srgb,var(--cm-text) 18%,rgba(0,0,0,.12)); }
.cm-language-trigger:hover,.cm-language.open .cm-language-trigger,
.cm-filter-trigger:hover,.cm-filter-select.open .cm-filter-trigger { border-color:color-mix(in srgb,var(--cm-text) 18%,var(--cm-line)); }
.cm-language-menu button.active,.cm-filter-menu button.selected {
  border:0;
  background:var(--cm-surface-2);
  color:var(--cm-text);
  font-weight:var(--cm-fw-semibold);
}
.cm-language-menu button.active>i,.cm-filter-menu button.selected>i { color:var(--cm-highlight-strong); }
:is(.cm-ratio-presets button.selected,.cm-choice.selected,.cm-step-editor .cm-choice.selected,.cm-step-editor.expanded .cm-choice.selected,.cm-draft-drippers>button.selected,.cm-explore-categories button.active,.cm-rating button.on,.cm-tag.on,.cm-mobile-language-grid button.active) { border-color:transparent; box-shadow:none; }
.cm-draft-drippers>button.selected { background:var(--cm-surface-2); }
.cm-draft-selected { background:var(--cm-highlight); color:#111; }