.breakout-bar { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ui-border); color:var(--ui-text); background:var(--ui-surface); font-size:12px; }
.breakout-bar[hidden] { display:none; }
.breakout-bar strong,.breakout-countdown { display:block; }
.breakout-countdown { margin-top:3px; color:var(--ui-text-muted); }
.breakout-bar.has-help { border-color:var(--ui-warning-border); }
.breakout-bar button,.breakout-dialog button { min-height:40px; padding:8px 12px; border:1px solid var(--ui-control-border); border-radius:7px; background:var(--ui-input-bg); color:var(--ui-text); font:inherit; font-size:13px; cursor:pointer; }
.breakout-dialog { width:min(820px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; overflow:hidden; border:1px solid var(--ui-border); border-radius:8px; color:var(--ui-text); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); font-family:var(--font-ui); }
.breakout-dialog[open] { display:flex; flex-direction:column; }
.breakout-dialog::backdrop { background:var(--ui-modal-backdrop); }
.breakout-dialog-head { display:flex; flex-shrink:0; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px; border-bottom:1px solid var(--ui-border); }
.breakout-dialog-head h2 { margin:0; font-size:20px; }
.breakout-dialog p { margin:6px 0; color:var(--ui-text-muted); font-size:13px; line-height:1.5; }
.breakout-dialog-head button { width:44px; flex-shrink:0; font-size:24px; }
.breakout-dialog-body { overflow:auto; min-height:0; padding:0 18px 16px; }
.breakout-dialog .breakout-error { color:var(--ui-danger-text); margin:0; padding:0 18px; }
.breakout-error:not(:empty) { padding:12px 18px; }
.breakout-setup,.breakout-names { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.breakout-dialog label { display:grid; gap:6px; min-width:0; font-size:13px; color:var(--ui-text-muted); }
.breakout-dialog input,.breakout-dialog select { box-sizing:border-box; width:100%; min-width:0; min-height:44px; margin:0; padding:8px 10px; border:1px solid var(--ui-control-border); border-radius:7px; background:var(--ui-input-bg); color:var(--ui-text); font:inherit; }
.breakout-roster label,.breakout-member-row { grid-template-columns:minmax(0,1fr) minmax(140px,45%); align-items:center; padding:10px 0; border-bottom:1px solid var(--ui-border); }
.breakout-roster label span,.breakout-member-row span { overflow-wrap:anywhere; color:var(--ui-text); }
.breakout-dialog-footer { display:flex; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; padding:14px 18px; border-top:1px solid var(--ui-border); font-size:12px; }
.breakout-dialog-footer>span { margin-right:auto; color:var(--ui-text-muted); }
.breakout-dialog .breakout-primary { border-color:var(--ui-accent); color:var(--ui-accent); background:var(--ui-accent-soft); }
.breakout-room-cards { display:grid; gap:12px; padding-top:12px; }
.breakout-room-cards article { padding:12px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-input-bg); }
.breakout-room-cards header { display:flex; gap:8px; justify-content:space-between; align-items:center; }
.breakout-room-cards h3 { margin:0; font-size:15px; }
.breakout-room-cards h3 span { color:var(--ui-accent); margin-left:6px; }
.breakout-help { display:block; color:var(--ui-warning-text); font-size:11px; }
.breakout-dialog button:disabled { opacity:.55; cursor:default; }
.breakout-dialog :focus-visible,.breakout-bar :focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
@media(max-width:600px) { .breakout-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); } .breakout-dialog-head { padding:14px; } .breakout-dialog-body { padding:0 12px 12px; } .breakout-dialog-footer { padding:12px; } .breakout-dialog-footer button { flex:1 1 140px; min-height:44px; } .breakout-bar button { min-height:44px; } .breakout-setup { grid-template-columns:1fr 1fr; } }