#ev-segments{grid-column:1/-1;width:100%;margin:18px 0;padding:18px;background:var(--ev-secondary);border:1px solid var(--ev-border);border-radius:16px;color:var(--ev-text);font-family:'Open Sans',Arial,sans-serif}#ev-segments .ev-picker-title{display:block;font-size:16px;line-height:1.35;font-weight:700;color:var(--ev-text);margin:0 0 var(--edu-preview-heading-gap,16px)}#ev-segments .ev-picker-hint{font-size:13px;color:var(--ev-muted);font-weight:400;line-height:1.5;margin:10px 0}#ev-segments button{cursor:pointer;font:inherit}#ev-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}#ev-tabs button,#ev-blocks button{padding:10px;border:2px solid var(--ev-border);background:var(--ev-surface);border-radius:10px;color:var(--ev-text);font-weight:400}#ev-tabs button.active,#ev-blocks button.active{border-color:var(--ev-accent);background:var(--ev-secondary);color:var(--ev-text)}#ev-segments #ev-blocks button{font-weight:400!important}#ev-segments #ev-blocks button.active{font-weight:700!important}#ev-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-items:start}#ev-cards button{background:var(--ev-surface);border:2px solid var(--ev-border);border-radius:12px;padding:10px;text-align:left;color:var(--ev-text);font-weight:700;min-width:0}#ev-cards button.active{border-color:var(--ev-accent);background:var(--ev-secondary)}.ev-mini{position:relative;aspect-ratio:16/9;margin-top:8px;border:1px solid #a9c4d3;border-radius:5px;background:var(--ev-bg);overflow:hidden}.ev-mini.portrait{aspect-ratio:9/16;max-height:125px;width:70px;margin:8px auto 0}.ev-box{position:absolute;background:linear-gradient(135deg,var(--ev-primary),var(--ev-accent));color:var(--ev-surface);display:grid;place-items:center;border:1px solid var(--ev-surface);font-weight:800;font-size:13px}.ev-box.active{outline:3px solid #ffce45;outline-offset:-4px;z-index:2}.ev-box.disabled{background:#bcc9d2;color:var(--ev-surface)}#ev-block-title{margin:17px 0 8px;font-size:15px;font-weight:700;color:var(--ev-text)}#ev-blocks{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}#ev-blocks button{font-size:13px}#ev-blocks button:disabled{opacity:.4;cursor:not-allowed}#ev-preview-wrap{width:100%;display:flex;justify-content:center;overflow:auto;background:var(--ev-bg);border-radius:14px;padding:14px;min-height:190px}#ev-preview{position:relative;aspect-ratio:16/9;width:100%;max-width:1000px;background:var(--ev-surface);overflow:hidden;box-shadow:0 0 0 1px #b9ceda}#ev-preview.portrait{aspect-ratio:9/16;width:min(100%,360px)}#ev-preview>.ev-box{border:1px solid #b6ceda}#ev-preview>.ev-box.active{outline:3px solid #ffce45;outline-offset:-4px}#ev-preview iframe{border:0}#ev-preview iframe:not(.ev-interactive-preview){pointer-events:none}#ev-preview.web-preview{aspect-ratio:auto!important;overflow:visible;box-shadow:none;border-radius:14px}#ev-preview-wrap:has(.web-preview){display:block;overflow:visible}#ev-segments h3{margin:18px 0 10px;font-size:18px}
#ev-segments #ev-cards>button:disabled{opacity:.5;cursor:not-allowed}
/* Shared NSP picker: isolated from application-wide button styling. */
#ev-segments :is(#ev-tabs,#ev-blocks) button{background:var(--ev-surface);color:var(--ev-text);border:2px solid var(--ev-border);font-weight:700;min-height:var(--ev-control-height);border-radius:var(--ev-control-radius)}
#ev-segments :is(#ev-tabs,#ev-blocks) button.active{background:var(--ev-primary);color:var(--ev-primary-text);border-color:var(--ev-accent)}
#ev-segments #ev-cards button{background:var(--ev-surface);color:var(--ev-text);border-color:var(--ev-border);border-radius:var(--ev-control-radius);display:block;width:100%;text-align:left}
#ev-segments #ev-cards button.active{background:var(--ev-secondary);color:var(--ev-text);border-color:var(--ev-accent)}
#ev-segments .ev-mini{display:block;width:100%}
#ev-segments .ev-box{color:var(--ev-primary-text)}

/* Canonical visual template cards shared with Design System preview */
#ev-segments #ev-cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
#ev-segments #ev-cards>button{padding:12px;min-height:0;text-align:left;border:2px solid var(--ev-border);border-radius:var(--ev-control-radius);font-weight:700}
#ev-segments #ev-cards .ev-mini{aspect-ratio:16/9;max-height:none;width:100%;margin-top:10px;border-radius:3px}
#ev-segments #ev-cards .ev-mini.portrait{aspect-ratio:9/16;width:70px;max-height:125px;margin:10px auto 0}
#ev-segments #ev-cards .ev-box{background:linear-gradient(135deg,var(--ev-primary),var(--ev-accent));color:var(--ev-primary-text);font-size:13px}

/* Shared NSP layout selector aliases used by Kiosk and other modules. */
.layout-tabs{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.layout-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.layout-card{border:2px solid var(--ev-border);border-radius:var(--ev-control-radius);background:var(--ev-surface);padding:12px;cursor:pointer;color:var(--ev-text);text-align:left;font-weight:700}
.layout-card.active,.layout-tab.active{border-color:var(--ev-accent);background:var(--ev-secondary)}
.layout-mini{position:relative;aspect-ratio:16/9;background:var(--ev-secondary);border:2px solid var(--ev-border);border-radius:var(--ev-control-radius);margin-top:10px;overflow:hidden}
.layout-mini.portrait{aspect-ratio:9/16;width:75px;margin:10px auto}
.layout-mini span,.template-preview span{position:absolute;background:linear-gradient(135deg,var(--ev-primary),var(--ev-accent));color:var(--ev-primary-text);border:1px solid var(--ev-surface);display:grid;place-items:center;font-size:13px;font-weight:800;cursor:pointer}
.layout-mini span.active,.template-preview span.active{outline:3px solid var(--ev-accent);outline-offset:-3px}
.layout-mini span.disabled,.template-preview span.disabled{background:var(--ev-muted);cursor:not-allowed;opacity:.7}
.layout-blocks{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.layout-dimension,.layout-tab{border:2px solid var(--ev-border);border-radius:var(--ev-control-radius);padding:9px 12px;background:var(--ev-surface);color:var(--ev-text);cursor:pointer;font-weight:700}
.layout-dimension.active{border-color:var(--ev-accent);background:var(--ev-primary);color:var(--ev-primary-text)}
.layout-dimension:disabled{opacity:.5;cursor:not-allowed}
.template-preview{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;background:var(--ev-secondary);border:2px solid var(--ev-border);margin:auto;overflow:hidden}
.template-preview.portrait{max-width:350px;aspect-ratio:9/16}
.layout-card:focus-visible,.layout-mini span:focus-visible{outline:3px solid var(--ev-accent)}

/* Canonical selector appearance for consumers using the layout-* markup. */
.layout-tabs .layout-tab{font:inherit;font-size:14px;font-weight:700;line-height:1.3;min-height:var(--ev-control-height,40px);padding:10px 14px;border:2px solid var(--ev-border);border-radius:var(--ev-control-radius,10px);background:var(--ev-surface);color:var(--ev-text);cursor:pointer}
.layout-tabs .layout-tab.active{background:var(--ev-primary);color:var(--ev-primary-text);border-color:var(--ev-accent)}
.layout-cards .layout-card{display:flex;flex-direction:column;gap:8px;min-height:0;padding:12px;background:var(--ev-surface);border:2px solid var(--ev-border);border-radius:var(--ev-control-radius,10px);color:var(--ev-text);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.layout-cards .layout-card.active{background:var(--ev-secondary);border-color:var(--ev-accent)}
.layout-cards .layout-mini{display:block;width:100%;aspect-ratio:16/9;min-height:80px;margin:0;position:relative;border:1px solid var(--ev-border);border-radius:4px;overflow:hidden;background:var(--ev-bg)}
.layout-cards .layout-mini.portrait{aspect-ratio:9/16;width:72px;max-height:130px;margin:0 auto}
.layout-cards .layout-mini span,.template-preview>span{position:absolute;display:grid;place-items:center;background:linear-gradient(135deg,var(--ev-primary),var(--ev-accent));color:var(--ev-primary-text);border:1px solid var(--ev-surface);font-weight:800}
.layout-cards .layout-mini span.disabled,.template-preview>span.disabled{background:var(--ev-muted);opacity:.5;cursor:not-allowed}
.layout-cards .layout-mini span.active,.template-preview>span.active{outline:3px solid var(--ev-accent);outline-offset:-3px}
.layout-blocks .layout-dimension{font:inherit;font-size:13px;font-weight:700;min-height:var(--ev-control-height,40px);padding:10px 12px;border:2px solid var(--ev-border);border-radius:var(--ev-control-radius,10px);background:var(--ev-surface);color:var(--ev-text);cursor:pointer}
.layout-blocks .layout-dimension.active{background:var(--ev-primary);color:var(--ev-primary-text);border-color:var(--ev-accent)}
.layout-blocks .layout-dimension:disabled{opacity:.45;cursor:not-allowed}

/* Live embedded app preview must not inherit the NSP selection outline. */
.template-preview>span.active:has(iframe),
#ev-preview>.ev-box.active:has(iframe){
 outline:none!important;
 border:0!important;
 box-shadow:none!important;
}
.template-preview>span:has(iframe),
#ev-preview>.ev-box:has(iframe){padding:0!important;overflow:hidden}

/* Unavailable Newline segments stay visibly grey in every template and preview. */
#ev-segments .ev-mini .ev-box.disabled,
#ev-segments #ev-cards .ev-mini .ev-box.disabled,
#ev-segments #ev-preview .ev-box.disabled,
#ev-segments .layout-mini span.disabled,
#ev-segments .template-preview span.disabled{
 background:#aeb8c2!important;
 color:#44515d!important;
 opacity:1!important;
 cursor:not-allowed!important;
}
#ev-segments .ev-box.disabled.active{outline:none!important}

/* Hidden selector controls must stay hidden even when their layout uses flex/grid. */
#ev-segments [hidden]{display:none!important}

/* Orientation remains visible on every theme, including secondary-colored panels. */
#ev-segments .edu-web-preview-controls button{font-weight:700;background:var(--ev-surface);color:var(--ev-text);border:2px solid var(--ev-border);padding:10px 16px;border-radius:var(--ev-control-radius)}
#ev-segments .edu-web-preview-controls button[aria-pressed="true"]{background:var(--ev-primary)!important;color:var(--ev-primary-text)!important;border-color:var(--ev-primary)!important;box-shadow:0 0 0 2px var(--ev-surface)}
#ev-preview.web-preview{min-height:1px;aspect-ratio:var(--edu-web-preview-ratio,auto)}

/* Orientation controls own their spacing independently of the removed standalone preview. */
#ev-segments .edu-web-preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block:16px 20px}