/* e-Shared-31 — Visual Configurator V2 */
.configurator-v2 { display: grid; gap: var(--s5); }
.configurator-v2-intro { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s5); border:var(--border-small) solid var(--color-mellentaane-light); border-radius:var(--radius-large); background:linear-gradient(118deg,var(--color-mellentaane-pale),var(--color-white)); }
.configurator-v2-intro h2 { margin:.2rem 0 .5rem; }
.configurator-v2-intro p { margin:0; max-width:780px; }
.configurator-v2-badge { flex:0 0 auto; padding:.7rem 1rem; border-radius:var(--radius-medium); background:var(--color-white); color:var(--color-mellentaane-dark); font-weight:850; }
.configurator-v2-form { display:grid; gap:var(--s4); }
.configurator-v2-group { margin:0; padding:var(--s4); border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-large); background:var(--color-white); }
.configurator-v2-group legend { padding:0 .35rem; color:var(--color-mellentaane-dark); font-weight:900; }
.configurator-v2-row { display:grid; gap:var(--s3); align-items:end; }
.configurator-v2-row.identity { grid-template-columns:minmax(160px,.75fr) minmax(130px,.55fr) minmax(220px,1fr); }
.configurator-v2-row.colors { grid-template-columns:1fr 1fr; }
.configurator-v2-row.border { grid-template-columns:minmax(220px,1.15fr) minmax(160px,.8fr) repeat(3,minmax(145px,.75fr)); }
.configurator-v2-row.spacing { grid-template-columns:repeat(4,minmax(155px,1fr)); }
.configurator-v2-field { display:grid; gap:.45rem; min-width:0; }
.configurator-v2-field > span,.configurator-v2-label { color:var(--color-gray-dark); font-size:.8rem; font-weight:850; }
.configurator-v2-field select,.configurator-v2-field input { width:100%; min-height:46px; padding:.65rem .75rem; border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-small); background:var(--color-white); color:var(--color-gray-dark); font:inherit; }
.configurator-v2-field select:focus,.configurator-v2-field input:focus { outline:3px solid var(--color-mellentaane-pale); border-color:var(--color-mellentaane-normal); }
.configurator-v2-color-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.55fr); gap:var(--s2); align-items:end; }
.configurator-v2-reference { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:.65rem .8rem; border:var(--border-small) solid var(--color-mellentaane-light); border-radius:var(--radius-small); background:var(--color-mellentaane-pale); }
.configurator-v2-reference code { color:var(--color-mellentaane-dark); font-size:1rem; font-weight:900; }
.visual-picker { position:relative; }
.visual-picker summary { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:.55rem .7rem; border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-small); background:var(--color-white); cursor:pointer; list-style:none; }
.visual-picker summary::-webkit-details-marker { display:none; }
.visual-picker summary::after { content:"⌄"; color:var(--color-mellentaane-normal); font-weight:900; }
.visual-picker[open] summary { border-color:var(--color-mellentaane-normal); box-shadow:0 0 0 3px var(--color-mellentaane-pale); }
.visual-picker-grid { position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:min(430px,calc(100vw - 48px)); display:grid; grid-template-columns:repeat(4,minmax(72px,1fr)); gap:var(--s2); padding:var(--s3); border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); background:var(--color-white); box-shadow:var(--shadow-lg); }
.visual-choice { position:relative; min-width:0; }
.visual-choice input { position:absolute; opacity:0; pointer-events:none; }
.visual-choice-body { min-height:78px; display:grid; place-items:center; gap:.35rem; padding:.45rem; border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-small); background:var(--color-white); cursor:pointer; text-align:center; }
.visual-choice input:checked + .visual-choice-body { border-color:var(--color-mellentaane-normal); background:var(--color-mellentaane-pale); color:var(--color-mellentaane-dark); box-shadow:inset 0 0 0 1px var(--color-mellentaane-normal); }
.visual-choice input:focus-visible + .visual-choice-body { outline:3px solid var(--color-mellentaane-pale); outline-offset:2px; }
.visual-choice-label { font-size:.7rem; font-weight:800; }
.scope-icon,.radius-icon,.thickness-icon,.spacing-icon { width:34px; height:28px; display:block; position:relative; border:1px solid var(--color-gray-light); background:var(--color-gray-pale); }
.scope-icon::before,.scope-icon::after { content:""; position:absolute; background:var(--color-mellentaane-normal); }
.scope-none { border-style:dashed; background:transparent; }
.scope-left::before { inset:0 auto 0 0; width:4px; }.scope-right::before { inset:0 0 0 auto; width:4px; }.scope-top::before { inset:0 0 auto; height:4px; }.scope-bottom::before { inset:auto 0 0; height:4px; }
.scope-horizontal::before { inset:0 auto 0 0; width:4px; }.scope-horizontal::after { inset:0 0 0 auto; width:4px; }.scope-vertical::before { inset:0 0 auto; height:4px; }.scope-vertical::after { inset:auto 0 0; height:4px; }.scope-all { border:4px solid var(--color-mellentaane-normal); }
.radius-none { border-radius:0; }.radius-small { border-radius:6px; }.radius-medium { border-radius:12px; }.radius-large { border-radius:20px; }
.thickness-icon { height:24px; border:0; background:transparent; }.thickness-icon::before { content:""; position:absolute; left:0; right:0; top:50%; background:var(--color-mellentaane-normal); transform:translateY(-50%); }.thickness-small::before { height:1px; }.thickness-medium::before { height:3px; }.thickness-large::before { height:6px; }.thickness-default::before { height:2px; background:var(--color-gray-normal); }
.spacing-icon { border:0; background:transparent; }.spacing-icon::before { content:""; position:absolute; inset:7px; border:2px solid var(--color-mellentaane-normal); background:var(--color-white); }.spacing-small::before { inset:8px; }.spacing-medium::before { inset:5px; }.spacing-large::before { inset:2px; }.spacing-none::before { inset:10px; }
.configurator-v2-preview { display:grid; gap:var(--s4); padding:var(--s4); border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-large); background:var(--color-white); }
.configurator-v2-preview-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.configurator-v2-preview-head h2 { margin:0; }
.preview-width-switcher { display:flex; gap:var(--s1); padding:4px; border-radius:var(--radius-pill); background:var(--color-gray-pale); }
.preview-width-switcher button { min-height:36px; padding:.35rem .65rem; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--color-gray-dark); font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.preview-width-switcher button.is-active { background:var(--color-white); color:var(--color-mellentaane-dark); box-shadow:var(--shadow-sm); }
.configurator-v2-stage { width:100%; min-height:360px; display:grid; place-items:center; margin:auto; padding:var(--s6); overflow:auto; border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); background-color:#fff; background-image:linear-gradient(var(--color-gray-pale) 1px,transparent 1px),linear-gradient(90deg,var(--color-gray-pale) 1px,transparent 1px); background-size:22px 22px; transition:max-width .18s ease; }
.configurator-v2-stage[data-viewport="tablet"] { max-width:760px; }.configurator-v2-stage[data-viewport="mobile"] { max-width:390px; padding:var(--s3); }
.configurator-v2-preview-surface { width:min(100%,520px); }
.configurator-v2-preview-surface.page-hero { color:#fff; }
.configurator-v2-preview-surface form,.configurator-v2-preview-surface label { display:grid; gap:.45rem; }
.configurator-v2-preview-surface input { width:100%; min-height:42px; padding:.55rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-small); }
.configurator-v2-meta { display:grid; grid-template-columns:1fr 1fr minmax(190px,.7fr); gap:var(--s3); }
.configurator-v2-meta-block { padding:var(--s3); border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); background:var(--color-gray-pale); }
.configurator-v2-meta-block h3 { margin:0 0 .65rem; font-size:.92rem; }
.configurator-v2-chips { display:flex; flex-wrap:wrap; gap:.4rem; }.configurator-v2-chips span { padding:.3rem .5rem; border-radius:var(--radius-pill); background:var(--color-white); color:var(--color-gray-dark); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.7rem; }
.configurator-v2-contrast { display:grid; gap:.25rem; }.configurator-v2-contrast strong { font-size:1.35rem; }.configurator-v2-contrast[data-status="pass"] strong { color:var(--color-green-dark); }.configurator-v2-contrast[data-status="warning"] strong { color:var(--color-orange-dark); }.configurator-v2-contrast[data-status="fail"] strong { color:var(--color-red-dark); }
.configurator-v2-outputs { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.configurator-output { min-width:0; border:var(--border-small) solid var(--color-gray-light); border-radius:var(--radius-medium); overflow:hidden; background:var(--color-white); }
.configurator-output-head { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); padding:.7rem .85rem; border-bottom:var(--border-small) solid var(--color-gray-light); background:var(--color-gray-pale); }
.configurator-output-head h3 { margin:0; font-size:.9rem; }.configurator-output-head button { min-height:34px; padding:.3rem .55rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-small); background:var(--color-white); color:var(--color-mellentaane-dark); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.configurator-output pre { min-height:110px; max-height:280px; margin:0; padding:var(--s3); overflow:auto; background:var(--color-mellentaane-dark); color:#fff; white-space:pre-wrap; word-break:break-word; font-size:.78rem; }
.configurator-v2-actions { display:flex; justify-content:flex-end; gap:var(--s2); }.configurator-v2-feedback { min-height:1.4em; margin:0; color:var(--color-green-dark); font-weight:800; text-align:right; }
@media(max-width:1180px){.configurator-v2-row.border{grid-template-columns:1fr 1fr 1fr}.configurator-v2-row.border>.configurator-v2-color-control{grid-column:span 2}.configurator-v2-meta{grid-template-columns:1fr 1fr}.configurator-v2-meta-block:last-child{grid-column:1/-1}}
@media(max-width:900px){.configurator-v2-row.identity,.configurator-v2-row.colors,.configurator-v2-row.spacing,.configurator-v2-row.border,.configurator-v2-outputs,.configurator-v2-meta{grid-template-columns:1fr}.configurator-v2-row.border>.configurator-v2-color-control,.configurator-v2-meta-block:last-child{grid-column:auto}.configurator-v2-intro{align-items:flex-start;flex-direction:column}.configurator-v2-stage{padding:var(--s4)}.visual-picker-grid{position:fixed;inset:auto var(--s3) var(--s3);width:auto;max-height:60dvh;overflow:auto;grid-template-columns:repeat(4,1fr);z-index:1700}}
@media(max-width:520px){.configurator-v2-color-pair{grid-template-columns:1fr}.visual-picker-grid{grid-template-columns:repeat(2,1fr)}.configurator-v2-preview-head{align-items:flex-start;flex-direction:column}.preview-width-switcher{width:100%;justify-content:space-between}.configurator-v2-stage{min-height:300px}}