.hl-shell { max-width: 1120px; padding: 2rem 1rem; }
.host-workspace.hl-shell { margin-inline: auto; }
.host-workspace.hl-shell .host-workspace-grid { grid-template-columns: minmax(0, 1fr); }
.hl-shell .host-setup-card { margin-block: 1rem; padding: 1.5rem; }
.hl-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.hl-choices button { padding: 1.2rem; text-align: left; border: 2px solid #d9d6e9; border-radius: 16px; background: white; color: #281847; }
.hl-choices button[aria-pressed="true"] { border-color: #764dc2; background: #f6f1ff; }
.hl-choices span { display: block; margin-top: .7rem; }
.hl-roster { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: .75rem; margin-block: 1rem; }
.hl-person { padding: 1rem; border: 1px solid #d9d6e9; border-radius: 12px; }
.hl-shell label { display: grid; gap: .3rem; margin-block: .8rem; }
.hl-shell input:not([type="checkbox"]), .hl-shell select { max-width: 100%; width: 100%; padding: .7rem; border: 1px solid #aea6bd; border-radius: 8px; color: #281847; background: white; }
.hl-shell fieldset { min-width: 0; border: 0; padding: 0; }
.hl-shell details { margin-block: 1rem; }
.hl-shell summary { cursor: pointer; font-weight: 700; }
.hl-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.hl-secret { display: block; font-size: clamp(2rem,6vw,4rem); overflow-wrap: anywhere; }
.hl-presenter > p { text-align: center; margin: 0; padding: .7rem; background: #281847; color: white; }
.hl-ready { text-align: center; padding: 5rem 1rem; }
@media (max-width: 650px) { .hl-choices { grid-template-columns: 1fr; } .hl-shell .host-setup-card { padding: 1rem; } }
.hl-shell .host-room-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.hl-room-setup { padding-top: 1.25rem; }
.hl-shell .hl-choices strong { font-size: 1.1rem; }
.hl-choices small { margin-left: .25rem; border-radius: 999px; padding: .22rem .48rem; background: #fde9a1; color: #281847; }
.hl-shell .hl-roster-heading { margin-top: 1.5rem; }
.hl-roster-heading p { margin: .35rem 0; }
.hl-team, .hl-import { padding: 1rem; border-radius: 16px; background: #f5f2ff; }
.hl-team { display: grid; align-content: start; gap: .55rem; min-width: 0; }
.hl-team p, .hl-import p { margin: .35rem 0; }
.hl-team .hl-name-row label, .hl-name-row label { margin: 0; }
.hl-name-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; align-items: end; }
.hl-name-row label { min-width: 0; }
.hl-shell .hl-player-menu { position: relative; margin: 0; }
.hl-player-menu summary { list-style: none; display: grid; place-items: center; border-radius: 50%; background: white; min-width: 2.5rem; min-height: 2.5rem; }
.hl-player-menu summary::-webkit-details-marker { display: none; }
.hl-player-menu > div { position: absolute; z-index: 2; right: 0; min-width: 10rem; max-width: min(17rem, 70vw); padding: .4rem; border-radius: 12px; box-shadow: 0 8px 24px #28184730; background: white; display: grid; gap: .15rem; }
.hl-player-menu > div > * { padding: .4rem; text-align: left; overflow-wrap: anywhere; }
.hl-player-menu button { border: 0; background: #f5f2ff; color: #281847; border-radius: 6px; cursor: pointer; }
.hl-import textarea { width: 100%; border: 1px solid #aea6bd; border-radius: 8px; padding: .65rem; background: white; color: #281847; }
.hl-import .hl-actions { align-items: end; }
.hl-import .hl-actions label { margin: 0; }
.hl-upgrade { margin: auto; width: min(42rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); border: 0; border-radius: 24px; padding: 1.5rem; color: #281847; }
.hl-upgrade::backdrop { background: #28184799; }
.hl-upgrade form { float: right; }
.hl-header-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: flex-end; }
.hl-header-actions svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hl-shell .host-workspace-toolbar:has(> p[role="alert"]:empty):not(:has(a, button, p[role="status"])) { display: none; }
.hl-shell p[role="alert"]:empty { display: none; }
.hl-shell .hl-actions .button-small { min-height: 2.5rem; }
@media (max-width: 650px) { .hl-header-actions { justify-content: flex-start; } }
.hl-shell [data-hl-clock]:empty { display: none; }
