.phyto-scoop-card {
    scroll-margin-top: calc(var(--header-height, 72px) + 16px);
    grid-column:1 / -1;
    position:relative;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background:radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 37%),linear-gradient(145deg, color-mix(in srgb, var(--surface-card) 93%, #071a32), var(--surface-card) 66%);
    box-shadow:0 18px 55px rgb(0 0 0 / 13%),inset 0 1px 0 rgb(255 255 255 / 4%);
}
.phyto-holder-addon { grid-column:1 / -1; display:grid; gap:10px; padding:12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-raised) 88%, var(--accent)); }
.phyto-holder-heading, .phyto-holder-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.phyto-holder-heading > div { display:grid; gap:2px; }
.phyto-holder-heading .workflow-eyebrow { font-size:.62rem; }
.phyto-holder-heading h4 { margin:0; font-size:.94rem; }
.phyto-holder-dimensions { color:var(--text-secondary); font-size:.72rem; white-space:nowrap; }
.phyto-holder-config { display:grid; grid-template-columns:minmax(0, 1fr) minmax(105px, 150px); align-items:center; gap:4px 12px; }
.phyto-holder-config label { font-size:.83rem; font-weight:700; }
.phyto-holder-config .phyto-scoop-input-wrap { min-height:40px; }
.phyto-holder-config .phyto-scoop-input-wrap input { min-width:0; width:100%; margin:0; text-align:center; }
.phyto-holder-config small { grid-column:1 / -1; color:var(--text-secondary); font-size:.72rem; }
.phyto-holder-preview { position:relative; height:190px; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border-color)); border-radius:var(--radius-sm); background:radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 95%, #070d10), color-mix(in srgb, var(--app-bg) 80%, var(--surface-raised))); touch-action:none; }
.phyto-holder-preview::before { position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px); background-size:24px 24px; content:""; pointer-events:none; }
.phyto-holder-preview canvas { position:relative; z-index:1; display:block; width:100%; height:100%; cursor:grab; }
.phyto-holder-preview canvas:active { cursor:grabbing; }
.phyto-holder-footer { color:var(--text-secondary); font-size:.7rem; }
.phyto-holder-footer .btn-secondary { padding:9px 12px; border:1px solid color-mix(in srgb, var(--accent) 58%, white); background:linear-gradient(105deg, color-mix(in srgb, var(--accent) 84%, #03989f), color-mix(in srgb, var(--accent) 96%, white)); color:#062b31; font-size:.76rem; font-weight:800; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 19%, transparent); }
.phyto-holder-footer .btn-secondary:hover { border-color:var(--accent); background:linear-gradient(105deg, var(--accent), color-mix(in srgb, var(--accent) 88%, white)); color:#062b31; box-shadow:0 9px 20px color-mix(in srgb, var(--accent) 29%, transparent); transform:translateY(-1px); }
.phyto-holder-footer .btn-secondary:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 46%, white); outline-offset:3px; }
.phyto-holder-footer .btn-secondary:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }
.phyto-scoop-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:-2px -2px 20px; padding:3px 2px 18px; border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, var(--border-color)); }
.phyto-scoop-header .workflow-eyebrow { color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.phyto-scoop-header h3 { margin:5px 0 6px; color:var(--text-primary); font-size:clamp(1.8rem, 4vw, 2.55rem); font-weight:850; letter-spacing:-.045em; line-height:1; }
.phyto-scoop-header .hint { margin:0; max-width:680px; font-size:.92rem; line-height:1.55; }
.phyto-scoop-badge { flex:0 0 auto; padding:8px 12px; border:1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color)); border-radius:999px; background:color-mix(in srgb, var(--accent) 10%, var(--surface-card)); color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.phyto-scoop-layout { display:grid; grid-template-columns:minmax(270px, .84fr) minmax(320px, 1.16fr); gap:22px; align-items:start; }
.phyto-scoop-controls { display:flex; flex-direction:column; gap:13px; min-width:0; }
.phyto-scoop-controls .input-group { margin:0; }
.phyto-scoop-volume-input { display:grid; gap:6px; }
.phyto-scoop-input-wrap { display:flex; align-items:center; min-height:52px; padding:0 14px; border:1px solid color-mix(in srgb, var(--accent) 27%, var(--border-color)); border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-raised) 92%, #071a32); transition:border-color .18s ease,box-shadow .18s ease; }
.phyto-scoop-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.phyto-scoop-input-wrap input { flex:1; min-width:0; width:100%; padding:11px 0; border:0; outline:0; background:transparent; color:var(--text-primary); font:inherit; font-size:1.15rem; font-weight:750; }
.phyto-scoop-volume-input .phyto-scoop-input-wrap input { margin:0; text-align:center; }
.liquid-scoop-name-field { box-sizing:border-box; width:100%; min-height:48px; margin:0; padding:11px 14px; border:1px solid color-mix(in srgb, var(--accent) 27%, var(--border-color)); border-radius:var(--radius-md); outline:0; background:color-mix(in srgb, var(--surface-raised) 92%, #071a32); color:var(--text-primary); font:inherit; font-size:1rem; transition:border-color .18s ease,box-shadow .18s ease; }
.liquid-scoop-name-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.phyto-scoop-input-wrap input:focus { box-shadow:none; }
.phyto-scoop-input-wrap > span { padding-left:10px; color:var(--text-secondary); font-size:.88rem; font-weight:700; }
.phyto-scoop-volume-input > small { color:var(--text-secondary); font-size:.72rem; }
.phyto-scoop-result { padding:15px; border:1px solid color-mix(in srgb, var(--accent) 27%, var(--border-color)); border-radius:var(--radius-md); background:linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 94%, var(--accent)), var(--surface-raised)); box-shadow:inset 0 1px 0 rgb(255 255 255 / 3%); }
.phyto-scoop-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.phyto-scoop-metrics div { display:grid; gap:4px; }
.phyto-scoop-metrics span, .phyto-scoop-detail { color:var(--text-secondary); font-size:.8rem; }
.phyto-scoop-metrics strong { font-size:1.4rem; color:var(--text-primary); letter-spacing:-.025em; }
.phyto-scoop-split { display:flex; align-items:center; gap:12px; margin:14px 0 4px; padding:13px 15px; border:1px solid var(--accent); border-radius:var(--radius-md); background:color-mix(in srgb, var(--accent) 14%, var(--surface-card)); color:var(--text-primary); }
.phyto-scoop-split--multiple { border-width:2px; background:color-mix(in srgb, var(--accent) 23%, var(--surface-card)); box-shadow:inset 4px 0 0 var(--accent); }
.phyto-scoop-split-count { flex:0 0 auto; color:var(--accent); font-size:1.75rem; font-weight:850; line-height:1; }
.phyto-scoop-split strong, .phyto-scoop-split small { display:block; }
.phyto-scoop-split strong { font-size:1rem; }
.phyto-scoop-split small { margin-top:3px; color:var(--text-secondary); font-size:.78rem; }
.phyto-scoop-detail { margin:6px 0 0; }
.phyto-scoop-error { margin:0; color:var(--status-danger); }
.phyto-scoop-specs { display:grid; gap:5px; padding:12px 14px; border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--surface-card)); font-size:.8rem; }
.phyto-scoop-specs strong { margin-bottom:2px; }
.phyto-scoop-download { width:100%; min-height:50px; border:1px solid color-mix(in srgb, var(--accent) 60%, white); border-radius:var(--radius-md); background:linear-gradient(105deg, color-mix(in srgb, var(--accent) 88%, #03989f), var(--accent)); color:#062b31; font-size:.96rem; font-weight:850; letter-spacing:.01em; box-shadow:0 9px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.phyto-scoop-download:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 32%, transparent); }
.phyto-scoop-download:disabled { opacity:.55; cursor:not-allowed; }
.phyto-scoop-note { grid-column:1 / -1; margin:0; color:var(--text-secondary); font-size:.76rem; line-height:1.5; }
.phyto-scoop-preview-wrap { display:flex; flex-direction:column; min-width:0; padding:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color)); border-radius:var(--radius-lg); background:linear-gradient(155deg, color-mix(in srgb, var(--surface-raised) 92%, var(--accent)), var(--surface-card) 74%); box-shadow:inset 0 1px 0 rgb(255 255 255 / 4%); }
.phyto-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 10px; }
.phyto-preview-toolbar > div { display:grid; gap:2px; }
.phyto-preview-kicker { color:var(--accent); font-size:.66rem; font-weight:800; letter-spacing:.14em; }
.phyto-preview-toolbar strong { font-size:1rem; }
.phyto-preview-reset { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border-color); border-radius:50%; background:var(--surface-card); color:var(--text-primary); font-size:1.35rem; cursor:pointer; }
.phyto-preview-reset:hover { border-color:var(--accent); color:var(--accent); }
.phyto-scoop-preview { position:relative; width:100%; height:360px; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border-color)); border-radius:var(--radius-md); background:radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 95%, #070d10), color-mix(in srgb, var(--app-bg) 80%, var(--surface-raised))); touch-action:none; }
.phyto-scoop-preview::before { position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px); background-size:28px 28px; content:""; mask-image:linear-gradient(transparent,#000 18%,#000 86%,transparent); pointer-events:none; }
.phyto-scoop-preview canvas { position:relative; z-index:1; display:block; width:100%; height:100%; cursor:grab; }
.phyto-scoop-preview canvas:active { cursor:grabbing; }
.phyto-preview-bed-label { position:absolute; z-index:2; right:10px; bottom:9px; display:flex; align-items:center; gap:5px; color:var(--text-secondary); font-size:.68rem; pointer-events:none; }
.phyto-preview-bed-label span { color:var(--accent); font-size:1rem; }
.phyto-preview-legend { position:absolute; z-index:2; top:10px; left:10px; display:grid; gap:5px; color:var(--text-secondary); font-size:.66rem; pointer-events:none; }
.phyto-preview-legend span { display:flex; align-items:center; gap:6px; }
.phyto-preview-legend i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.phyto-preview-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 12px; padding:10px 2px 1px; color:var(--text-secondary); font-size:.68rem; }
.phyto-preview-footer span { display:flex; align-items:center; gap:5px; }
.phyto-preview-footer kbd { display:inline-grid; place-items:center; min-width:20px; height:19px; padding:0 4px; border:1px solid var(--border-color); border-radius:4px; background:var(--surface-raised); color:var(--text-primary); font:inherit; }
.phyto-preview-fallback { position:absolute; z-index:3; inset:0; display:grid; place-items:center; padding:28px; background:var(--surface-raised); color:var(--text-secondary); text-align:center; font-size:.84rem; }
.phyto-preview-fallback[hidden] { display:none; }
@media (max-width:720px) {
    .phyto-scoop-card { padding:16px; }
    .phyto-scoop-layout { grid-template-columns:minmax(0, 1fr); gap:14px; }
    .phyto-scoop-header { display:block; }
    .phyto-scoop-header .hint { font-size:.85rem; }
    .phyto-scoop-badge { display:inline-block; margin-top:10px; }
    .phyto-scoop-preview { height:min(78vw, 340px); min-height:270px; }
    .phyto-scoop-preview-wrap { padding:10px; }
    .phyto-preview-footer { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); justify-content:start; gap:8px; font-size:.63rem; }
    .phyto-preview-footer span { min-width:0; align-items:flex-start; }
    .phyto-preview-footer span:last-child { grid-column:1 / -1; }
    .phyto-preview-footer kbd { flex:0 0 auto; }
    .phyto-holder-heading, .phyto-holder-footer { align-items:flex-start; flex-direction:column; }
    .phyto-holder-config { grid-template-columns:minmax(0, 1fr); justify-items:center; }
    .phyto-holder-config label, .phyto-holder-config small { text-align:center; }
    .phyto-holder-config .phyto-scoop-input-wrap { width:min(100%, 240px); justify-self:center; }
    .phyto-holder-preview { height:min(48vw, 210px); min-height:155px; }
    .phyto-holder-footer .btn-secondary { width:100%; text-align:center; }
}