.live-body { min-height: 100vh; padding: 32px 20px; }
.live-shell { width: min(720px, 100%); margin: 0 auto; }
.sign-in { width: min(430px, 100%); margin: max(24px, 12vh) auto 0; }
.live-card { background: var(--white); padding: clamp(18px, 4vw, 30px); border: 1px solid var(--line); border-radius: 14px; }
.live-title { font: 400 clamp(2.1rem, 6vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.04em; margin: 8px 0; }
.live-copy { color: var(--muted); margin-bottom: 16px; }
.live-form { display: grid; gap: 10px; }
.live-form label { font-size: .85rem; font-weight: 700; }
.live-input { min-height: 40px; min-width: 0; width: 100%; border: 1px solid #aab8a9; padding: 8px 10px; border-radius: 7px; font: inherit; color: var(--ink); background: var(--white); }
.live-input:focus-visible { outline: 2px solid #208360; outline-offset: 2px; }
.live-message { min-height: 1.5em; color: #674323; overflow-wrap: anywhere; }
.live-join-title { margin-bottom: 16px; }
#live-join-link { font-size: .75rem; }
.live-panel { margin-top: 16px; }
.live-panel .live-card { padding: 14px; }
.live-panel h2 { font-size: 1rem; }
.live-panel .live-copy { margin: 4px 0 10px; font-size: .79rem; }
.live-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.live-participants { list-style: none; padding: 0; margin: 0; overflow-wrap: anywhere; }
.live-participants li { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; font-size: .8rem; }
.live-participants li span { display: block; color: var(--muted); }
.cafe-preview { min-width: 0; }
.live-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.live-preview-bar h2 { font-size: .95rem; margin-right: auto; }
.live-preview-bar label, .live-preview-bar select { font: inherit; font-size: .82rem; }
.live-preview-bar select { max-width: 12rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 5px; }
.cafe-counter { overflow: hidden; color: #35271e; background: #fff7e5; border: 1px solid #d9c7ad; border-radius: 14px; }
.cafe-banner { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #5a2b21; color: #fff6dc; padding: 18px clamp(14px, 4vw, 27px); border-bottom: 5px solid #d8a655; }
.cafe-banner span { font: 400 clamp(1.8rem, 5vw, 2.65rem)/1 var(--serif); letter-spacing: -.035em; }
.cafe-step { border: 1px solid #c38e67; border-radius: 18px; padding: 4px 10px; font-size: .78rem; }
.cafe-content { padding: clamp(12px, 3vw, 24px); }
.cafe-dialogue { color: #693526; background: #f2e1be; border-left: 3px solid #ad6642; margin: 0 0 10px; padding: 6px 8px; font-size: .87rem; font-weight: 700; }
.cafe-title { font: 400 clamp(1.55rem, 4vw, 2.15rem)/1.13 var(--serif); }
.cafe-prompt { margin: 5px 0 12px; font-size: .9rem; }
.cafe-audio { width: min(100%, 320px); height: 37px; margin: 0 0 8px; }
.cafe-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.cafe-menu button { min-width: 0; display: grid; gap: 2px; justify-items: center; align-content: center; padding: 7px 2px; border: 1px solid #d8c7a7; border-radius: 7px; color: #35271e; background: #fffdf4; line-height: 1.2; }
.cafe-menu button:not(:disabled):hover { background: #fff0cc; border-color: #ad6642; }
.cafe-menu button:disabled { opacity: .74; }
.cafe-preview .cafe-menu button:disabled, .cafe-preview .cafe-submit:disabled { opacity: 1; }
.cafe-menu button[aria-pressed="true"] { color: #fff6dc; background: #5a2b21; border-color: #5a2b21; opacity: 1; }
.cafe-item-icon { font-size: 1.55rem; line-height: 1.1; }
.cafe-item-price { font-size: .72rem; }
.cafe-ticket { display: grid; gap: 3px; background: #fffdf4; border: 1px dashed #ac8d66; border-radius: 8px; padding: 8px 10px; font-size: .82rem; margin-bottom: 9px; }
.cafe-budget { font-weight: 700; color: #39553b; }
.cafe-over .cafe-budget { color: #912c21; }
.cafe-speak, .cafe-feedback { font-size: .82rem; margin: 7px 0; }
.cafe-speak:empty, .cafe-feedback:empty { display: none; }
.cafe-speak { font-weight: 700; }
.live-join-title:has(+ #join-card[hidden]) { display: none; }
@media (max-width: 400px) {
  .cafe-item-icon { font-size: 1.35rem; }
  .cafe-menu button { font-size: .82rem; }
}