/* Shared batch 2 layouts, restricted to workspace pages. */
.runtime-panel{padding:16px;border-radius:16px;gap:16px;font-size:15px;line-height:1.5;overflow:auto;display:block}
.runtime-panel h2{font-size:18px;margin:16px 0}.runtime-panel h3{font-size:18px}.runtime-panel h4{font-size:15px;margin:12px 0 8px}.runtime-panel p{margin:8px 0}.runtime-panel progress{width:100%;accent-color:var(--guide-purple,#7956a8)}
.runtime-panel button,.runtime-catalog button{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:15px}.runtime-panel fieldset{border:0;padding:0;margin:16px 0}.runtime-panel fieldset button{display:block;width:100%;text-align:left;margin:8px 0}.tutorial-current{border:1px solid var(--guide-purple,#7956a8);border-radius:16px;padding:16px;margin:16px 0}.tutorial-future{color:var(--muted);font-size:13px}.tutorial-target-outline{position:fixed;border:2px solid #7956a8;border-radius:10px;pointer-events:none;z-index:15}.tutorial-target-outline[hidden]{display:none}
.runtime-catalog section{margin:24px 0}.runtime-catalog article{padding:16px;border:1px solid var(--line);border-radius:16px;margin:12px 0}.runtime-catalog h3{font-size:15px;margin:0 0 8px}.runtime-catalog article>span{font-size:13px;color:var(--muted)}
#product-grid .batch2-product{position:relative;display:flex;flex-direction:column;padding:16px;gap:12px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:none;min-width:0}.batch2-product .batch2-photo{aspect-ratio:4/3;overflow:hidden;border-radius:10px}.batch2-photo img{width:100%;height:100%;object-fit:contain}.batch2-product h3{font-size:18px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}.batch2-product p{margin:0;font-size:15px}.batch2-product .batch2-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.batch2-numbers div{min-width:0}.batch2-numbers dt{font-size:12px;color:var(--muted)}.batch2-numbers dd{font-weight:600;margin:8px 0;font-size:18px}.batch2-product .batch2-tools{position:absolute;right:24px;top:24px;display:flex;gap:8px}.batch2-tools button{position:static!important;width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink)}.batch2-product .batch2-details{border:1px solid var(--line);padding:8px 12px;border-radius:10px;text-align:center;margin-top:auto;font-size:15px}.batch2-product .positive{color:var(--accent)}.batch2-product .risk{color:#b45309}

#main h1{font-size:28px;font-weight:600;line-height:1.5}#main>p{max-width:680px}.health-example{padding:16px;border:1px solid var(--line);border-radius:16px;max-width:680px;margin:24px 0}.health-example p{font-size:15px}
#cost-fields{gap:16px}#cost-fields label{display:flex;flex-direction:column;gap:8px;font-size:15px}#cost-fields input{width:100%;min-width:0;border-radius:10px;padding:12px}#cost-result{font-size:15px;line-height:1.5}#cost-import{margin:16px 0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}#cost-picker{max-width:calc(100vw - 32px);border:1px solid var(--line);border-radius:16px;padding:24px}#cost-picker button{display:block;margin:12px 0;padding:8px 12px}
#plans-root .grid{gap:16px}#plans-root .card h2,#plans-root .hero h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;line-height:1.5}#plans-root .card{border-radius:16px;padding:16px;box-shadow:none}#plans-root .card img{width:100%;aspect-ratio:4/3;object-fit:contain}.shared-workbench #plans-root{padding:0}.shared-workbench #plans-root .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.shared-workbench #plans-root .hero img{max-width:100%}
@media(max-width:600px){.runtime-panel{padding:14px;max-height:48dvh;height:48dvh;top:auto;bottom:0}.guide-on .content-shell{height:calc(52dvh - var(--header-height))}.tutorial-current{padding:14px}#product-grid .batch2-product{padding:14px}.batch2-numbers dd{font-size:15px}#cost-fields{grid-template-columns:1fr 1fr}.shared-workbench #plans-root .hero{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.runtime-panel,.runtime-panel *,.tutorial-target-outline{animation:none!important;transition:none!important}}

#product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}.batch2-product .batch2-photo{height:200px;aspect-ratio:auto}.batch2-tools .favorite-button{color:var(--ink)}#metrics-dialog[open]{position:fixed;z-index:14;max-width:min(680px,calc(100vw - 32px));max-height:80dvh;inset:8vh auto auto 24px}.runtime-panel{z-index:16}#main .primary-button:not([type=submit]){background:var(--bg);color:var(--ink)}

.runtime-panel[hidden]{display:none!important}.runtime-panel .sg-top{color:var(--ink)}.batch2-numbers dt{white-space:nowrap;font-size:12px}.batch2-product .positive{color:#28734b}.batch2-product .favorite-button svg{stroke:currentColor}.shared-workbench #main #cost-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#main .runtime-catalog article>span{color:var(--muted)}#plans-root .card{margin:0}#plans-root .grid{margin-top:24px}.runtime-panel h3{margin:16px 0 8px}
@media(max-width:600px){.shared-workbench #main #cost-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.batch2-numbers dt{font-size:12px}}

#cost-fields input::placeholder{color:var(--muted);opacity:.65}

/* Batch 3 tutorial forms */
.runtime-panel input:not([type=checkbox]),.runtime-panel select{width:100%;box-sizing:border-box;min-width:0;padding:8px;border:1px solid var(--line);border-radius:10px;font:inherit}.runtime-panel label{display:block;margin:12px 0}.runtime-panel input[type=checkbox]{width:auto;margin-right:8px}.runtime-panel p{overflow-wrap:anywhere}.runtime-panel [data-listing-choices] button{text-align:left;white-space:normal}.runtime-panel [data-tutorial-copy]{margin-bottom:12px}[data-exclude-form]{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:16px}[data-exclude-form] select{margin:0 12px;padding:8px;border-radius:10px}.runtime-catalog details{margin:12px 0}

#health-form label{display:block;margin:12px 0}#health-form input:not([type=file]),#health-form textarea,#health-form select{display:block;box-sizing:border-box;max-width:100%;width:100%;margin-top:8px}#health-form fieldset{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:16px}

#main .runtime-catalog article>.tutorial-completed{color:var(--accent);font-weight:600}

/* "从商品带入" picker: a short sheet of product rows (picture, name, CJ quote). */
#cost-picker{width:min(520px,calc(100vw - 32px));max-width:none;max-height:min(640px,calc(100dvh - 48px));padding:20px 10px 10px;border:0;border-radius:22px;background:var(--bg);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#cost-picker::backdrop{background:rgba(0,0,0,.38)}
#cost-picker h2{margin:0 0 8px;padding:0 14px;font-size:19px;font-weight:600;letter-spacing:-.01em}
#cost-picker .cp-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,var(--bg));color:var(--ink);cursor:pointer}
#cost-picker .cp-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
#cost-picker .cp-item{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;width:100%;margin:0;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease}
#cost-picker .cp-item:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
#cost-picker .cp-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
#cost-picker .cp-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
#cost-picker .cp-text{min-width:0}
#cost-picker .cp-name{display:block;overflow:hidden;font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
#cost-picker .cp-meta{display:block;font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
:root[data-theme=dark] #cost-picker{background:#1c1c1e;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}

/* ===== Product cards (app.html): one tappable card, picture on a soft tile, name, status, numbers. ===== */
:is(#product-grid,#saved-grid,#home-product-grid){gap:20px 16px}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product{position:relative;gap:0;padding:0;border:0;border-radius:20px;background:transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-details{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;border-radius:20px;font-size:0}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-details span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-details:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-photo{position:relative;height:auto;aspect-ratio:1/1;margin:0 0 14px;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));overflow:hidden}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* Product photos are shot on white: keep them on a light tile in dark mode too. */
:root[data-theme=dark] :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-photo{background:#e8e8ec}
/* Pointing at a card: a soft plate grows in behind the whole card and the card rises a hair.
   Pressing sinks it a little; letting go springs it back. The photo and the name stay still. */
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product::before{content:"";position:absolute;inset:-10px -10px -12px;z-index:-1;border-radius:28px;background:color-mix(in srgb,var(--ink) 4.5%,var(--bg));opacity:0;transform:scale(.94);transition:opacity .22s ease,transform .5s var(--spring-soft,cubic-bezier(.2,.8,.2,1));pointer-events:none}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product{overflow:visible;isolation:isolate;transition:transform .5s var(--spring-soft,cubic-bezier(.2,.8,.2,1))}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-photo{transition:background-color .25s ease}
@media(hover:hover){
 :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:hover{transform:translateY(-3px)}
 :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:hover::before{opacity:1;transform:none}
 :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:hover .batch2-photo{background:var(--bg)}
}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:has(.batch2-details:focus-visible)::before{opacity:1;transform:none}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:active:not(:has(.batch2-tools :active)){transform:translateY(-1px) scale(.975);transition-duration:.14s;transition-timing-function:ease-out}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-tools{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:6px}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-tools button{display:grid;place-items:center;width:34px;height:34px;min-height:34px;margin:0;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--ink);font-size:14px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);backdrop-filter:blur(8px);cursor:pointer;transition:transform .15s ease,background-color .15s ease}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-tools button:hover{transform:scale(1.06);background:var(--bg)}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-tools button svg{width:17px;height:17px}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product h3{margin:0 4px 6px;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.005em}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .card-status{align-self:flex-start;margin:0 4px 12px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,var(--bg));font-size:12px;font-weight:500;line-height:1.5;color:var(--muted)}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .card-status.positive{background:#e8f6ec;color:#1e7a3c}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .card-status.risk{background:#fff1e6;color:#b4530b}
:root[data-theme=dark] :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .card-status.positive{background:#12301d;color:#5ad27f}
:root[data-theme=dark] :is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .card-status.risk{background:#3a2210;color:#ffb066}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers{display:grid;grid-template-columns:auto 1fr 1fr;align-items:end;gap:4px 14px;margin:auto 0 0;padding:0 4px}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers>div{min-width:0}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers dt{overflow:hidden;text-overflow:ellipsis}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers dt{margin:0;font-size:11px;line-height:1.4;color:var(--muted);white-space:nowrap}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers dd{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers .card-price dd{font-size:20px;font-weight:700;letter-spacing:-.02em}
@media(max-width:600px){:is(#product-grid,#saved-grid,#home-product-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers{grid-template-columns:1fr 1fr}:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-numbers .card-price{grid-column:1/-1}:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product .batch2-photo{padding:10px}}
@media(prefers-reduced-motion:reduce){:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product,:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product::before{transition:none}:is(#product-grid,#saved-grid,#home-product-grid) .batch2-product:hover{transform:none}}

/* Card loading: soft tiles instead of an empty page while the library loads. */
#product-grid:empty{min-height:420px;background:
 linear-gradient(color-mix(in srgb,var(--ink) 4%,var(--bg)) 0 0) 0 0/calc((100% - 32px)/3) 280px no-repeat,
 linear-gradient(color-mix(in srgb,var(--ink) 4%,var(--bg)) 0 0) 50% 0/calc((100% - 32px)/3) 280px no-repeat,
 linear-gradient(color-mix(in srgb,var(--ink) 4%,var(--bg)) 0 0) 100% 0/calc((100% - 32px)/3) 280px no-repeat;border-radius:18px;animation:card-wait 1.4s ease-in-out infinite}
@keyframes card-wait{50%{opacity:.55}}

/* ===== Product info sheet (the card's "?"): a tall card beside the page, never over the tutorial
   panel on the right, so a lesson can ask about what it shows. ===== */
#metrics-dialog[open]{position:fixed;z-index:14;inset:88px auto 16px 16px;width:min(460px,calc(100vw - 32px));max-width:none;max-height:none;height:auto;border:0;border-radius:24px;background:var(--bg);box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent);animation:sheet-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-in{from{opacity:0;transform:translateX(-14px) scale(.98)}}
:root[data-theme=dark] #metrics-dialog[open]{background:#1c1c1e;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
#metrics-dialog .metrics-shell{height:100%;max-height:none}
#metrics-dialog .metrics-heading{padding:14px 14px 0 22px;border:0}
#metrics-dialog .metrics-heading h2{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
#metrics-dialog .metrics-heading button{width:32px;height:32px;border:0;background:color-mix(in srgb,var(--ink) 7%,transparent)}
#metrics-dialog .metrics-heading button svg{width:16px;height:16px}
#metrics-dialog .metrics-body{padding:10px 22px 24px}
#metrics-dialog .metric-intro{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;margin:0 0 14px}
#metrics-dialog .metric-thumb{width:64px;height:64px;padding:6px;border-radius:16px;background:#f2f2f5;overflow:hidden}
#metrics-dialog .metric-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#metrics-dialog .metric-intro h3{margin:0 0 4px;font-size:18px;line-height:1.35}
#metrics-dialog .metric-intro p{margin:0;font-size:12px;color:var(--muted)}
#metrics-dialog .metric-status{display:inline-block;margin:0 0 6px;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,var(--bg));font-size:12px;font-weight:600;line-height:1.5;color:var(--ink)}
#metrics-dialog .metric-status.positive{background:#e8f6ec;color:#1e7a3c}
#metrics-dialog .metric-status.risk{background:#fff1e6;color:#b4530b}
:root[data-theme=dark] #metrics-dialog .metric-status.positive{background:#12301d;color:#5ad27f}
:root[data-theme=dark] #metrics-dialog .metric-status.risk{background:#3a2210;color:#ffb066}
#metrics-dialog .metric-reason{margin:0 0 18px;font-size:13px;line-height:1.6}
#metrics-dialog .metric-details-label{margin:26px 0 2px;font-size:12px;font-weight:600}
#metrics-dialog .metric-expand{border-top:1px solid color-mix(in srgb,var(--ink) 8%,var(--bg))}
#metrics-dialog .metric-expand>summary{min-height:50px;padding:0;font-size:15px;font-weight:500}
#metrics-dialog .metric-preferences{margin:18px 0 0;padding:0;border:0}
#metrics-dialog .metric-preferences>summary{font-size:13px}
@media(max-width:760px){#metrics-dialog[open]{inset:auto 0 0 0;width:100%;max-height:86dvh;border-radius:24px 24px 0 0;animation-name:sheet-up}}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}}
@media(prefers-reduced-motion:reduce){#metrics-dialog[open]{animation:none}}