.live-view { width: 100%; max-width: 1400px; margin: auto; padding-bottom: var(--live-apply-space,0px); font-size: 16px; }
.live-view .subtle { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.live-view .button,.live-apply-panel .button { min-height: 48px; font-size: 16px; padding: 12px 18px; line-height: 1.4; white-space: normal; }
.live-view .text-button,.live-apply-panel .text-button { min-height: 44px; font-size: 15px; padding: 8px 4px; line-height: 1.4; white-space: normal; }
.live-heading { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 28px; }
.live-heading > div { min-width: 0; }
.live-heading .page-title { margin-bottom: 12px; }
.live-health { display: grid; justify-items: end; gap: 6px; flex: none; max-width: 42%; text-align: right; }
.live-status { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; line-height: 1.5; }
.live-status::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--muted); border-radius: 50%; }
.live-status[data-state="online"]::before { background: #71b78a; box-shadow: 0 0 0 4px #71b78a16; }
.live-status[data-state="error"]::before { background: var(--accent); }
.live-connection { background: var(--side); border: 1px solid var(--soft-line); border-radius: 16px; margin-bottom: 24px; }
.live-connection > summary { cursor: pointer; padding: 20px 24px; min-height: 48px; font-size: 17px; line-height: 1.5; }
.live-connection > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.live-connection-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.85fr); gap: 36px; padding: 0 24px 24px; }
.live-guide,.live-pairing { min-width: 0; }
.live-steps { padding-left: 22px; margin: 0 0 18px; font-size: 16px; line-height: 1.65; }
.live-steps li { padding-left: 4px; margin-bottom: 12px; }
.live-code-area { display: grid; grid-template-columns: minmax(0,1fr); justify-items: start; align-items: center; gap: 6px; margin-top: 4px; }
.live-pair-code { display: block; width: 100%; padding: 14px 12px; border: 1px solid var(--soft-line); border-radius: 12px; background: var(--page); color: var(--text); font: 700 clamp(24px,2.5vw,34px)/1.4 Consolas,monospace; letter-spacing: 2px; text-align: center; user-select: all; overflow-wrap: anywhere; }
.live-code-area > .text-button { color: var(--text); }
.live-connection-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.live-connection-actions .button { flex: 1 1 180px; }
.live-message { color: var(--muted); padding: 16px 20px; background: var(--side); border: 1px solid var(--soft-line); border-radius: 12px; margin-bottom: 24px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.live-message[data-tone="error"],.live-field-error,.live-draft-line[data-tone="error"],.live-apply-panel [data-tone="error"] { color: var(--accent); }
.live-message[data-tone="success"] { color: var(--text); border-left: 3px solid #71b78a; }
.live-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 0; text-align: center; }
.live-empty h2 { font-size: clamp(24px,2.6vw,32px); line-height: 1.2; }
.live-empty .subtle { max-width: 540px; }
.live-data-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 22px; }
.live-tabs { min-width: 0; flex-wrap: wrap; gap: 8px; }
.live-tabs button { min-height: 48px; padding: 10px 18px; font-size: 16px; line-height: 1.4; }
.live-character-picker { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-bottom: 24px; padding: 22px; background: var(--side); border: 1px solid var(--soft-line); border-radius: 16px; }
.live-character-picker > div { min-width: 0; }
.live-character-picker label { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.live-character-picker input,.live-character-picker select { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; line-height: 1.4; background: var(--page); }
.live-paused { border-left: 3px solid var(--accent); padding: 14px 18px; margin: 0 0 20px; background: var(--side); border-radius: 0 10px 10px 0; }
.live-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }
.live-field-group { min-width: 0; padding: 22px; border: 1px solid var(--soft-line); border-radius: 16px; background: var(--side); }
.live-group-title { font-size: 22px; line-height: 1.3; margin-bottom: 6px; overflow-wrap: anywhere; }
.live-field { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.9fr); align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--soft-line); min-width: 0; }
.live-field:last-child { border-bottom: 0; padding-bottom: 0; }
.live-field-copy { min-width: 0; }
.live-field-label { display: block; font-size: 16px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.live-field-description { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.live-field-side { display: grid; justify-items: end; min-width: 0; width: 100%; gap: 6px; }
.live-input { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--page); font-size: 20px; line-height: 1.4; text-align: right; font-weight: 700; scroll-margin-bottom: calc(var(--live-apply-space,140px) + 18px); }
.live-field[data-kind="string"] .live-input { text-align: left; font-size: 18px; }
select.live-input { font-size: 16px; text-align: left; font-weight: 400; }
.live-checkbox { appearance: none; position: relative; width: 52px; height: 44px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.live-checkbox::before { content: ""; position: absolute; inset: 8px 0; border: 1px solid var(--muted); border-radius: 20px; background: var(--surface); transition: background .18s,border-color .18s; }
.live-checkbox::after { content: ""; position: absolute; top: 12px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .18s,background .18s; }
.live-checkbox:checked::before { background: var(--accent); border-color: var(--accent); }
.live-checkbox:checked::after { transform: translateX(24px); background: var(--on-accent); }
.live-checkbox:disabled { opacity: .55; cursor: default; }
.live-readonly { max-width: 100%; font-size: 20px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.live-current { color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; text-align: right; }
.live-field-error { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; text-align: right; }
.live-field-actions { display: none; justify-items: end; gap: 2px; width: 100%; }
.live-field-actions:has(button:not([hidden])) { display: grid; }
.live-field-actions .text-button { max-width: 100%; font-size: 14px; text-align: right; }
.live-field[data-state="draft"] .live-input { border-color: var(--accent); }
.live-field[data-state="invalid"] .live-input,.live-field[data-state="conflict"] .live-input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.live-field[data-state="readonly"] .live-input { opacity: .65; }
.live-apply-panel { position: fixed; z-index: 25; right: max(var(--page-gutter),env(safe-area-inset-right,0px)); bottom: calc(max(10px,env(safe-area-inset-bottom,0px)) + var(--live-screen-bottom,0px)); left: max(var(--page-gutter),env(safe-area-inset-left,0px)); max-width: 1400px; margin: 0 auto; padding: 12px 16px; border: 1px solid var(--soft-line); border-radius: 16px; background: var(--side); color: var(--text); box-shadow: 0 8px 32px #00000040; font-size: 16px; }
.live-apply-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; min-width: 0; }
.live-apply-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-width: 0; }
.live-apply-status { color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.live-review-toggle { color: var(--text); font-weight: 700; }
.live-review-toggle::after { content: "⌃"; margin-left: 8px; }
.live-review-toggle[aria-expanded="true"]::after { content: "⌄"; }
.live-review { position: absolute; right: 0; bottom: calc(100% + 10px); left: 0; padding: 20px; max-height: min(420px,max(80px,calc(var(--live-screen-height,100dvh) - var(--header-height) - var(--live-bar-height,112px) - 32px))); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; border: 1px solid var(--soft-line); border-radius: 16px; background: var(--side); box-shadow: 0 8px 32px #00000040; }
.live-review-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; top: -20px; z-index: 1; margin-top: -10px; padding: 10px 0; background: var(--side); }
.live-review-heading h2 { font-size: 22px; line-height: 1.3; }
.live-review-close { flex: none; width: 44px; font-size: 28px !important; }
.live-review .subtle,.live-review-feedback { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.live-review-feedback { margin-top: 12px; }
.live-drafts { list-style: none; margin: 16px 0 0; padding: 0; }
.live-draft-line { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; font-size: 16px; line-height: 1.5; border-bottom: 1px solid var(--soft-line); overflow-wrap: anywhere; }
.live-draft-line > span { min-width: 0; }
.live-draft-values { text-align: right; flex: none; max-width: 55%; font-weight: 700; }
.live-apply-actions { display: flex; justify-content: flex-end; gap: 12px; flex: none; }
.live-apply-actions .button { flex: 0 1 auto; }
.live-apply-actions .button.primary { min-width: 208px; }
.live-apply-label-short { display: none; }
.live-save-note { margin-top: 16px; }
@media (max-width: 1023px) {
  .live-fields { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .live-connection-body { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .live-code-area { max-width: 420px; }
  .live-connection-actions { max-width: 560px; }
}
@media (max-width: 700px) {
  .live-heading { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
  .live-health { justify-items: start; max-width: 100%; text-align: left; }
  .live-connection > summary { padding: 18px; font-size: 16px; }
  .live-connection-body { padding: 0 18px 20px; }
  .live-character-picker { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 18px; }
  .live-field-group { padding: 18px; }
  .live-group-title { font-size: 21px; }
  .live-empty { min-height: 210px; }
  .live-apply-panel { padding: 8px 12px 12px; border-radius: 14px; }
  .live-apply-bar { flex-direction: column; align-items: stretch; gap: 4px; }
  .live-apply-info { justify-content: space-between; gap: 4px 8px; }
  .live-apply-panel .live-review-toggle { min-height: 32px; padding: 2px 0; font-size: 14px; }
  .live-apply-status { font-size: 12px; }
  .live-apply-actions { gap: 8px; }
  .live-apply-actions .button { flex: 0 1 auto; padding-inline: 12px; }
  .live-apply-actions .button.primary { flex: 1; min-width: 0; }
  .live-apply-label-wide { display: none; }
  .live-apply-label-short { display: inline; }
}
@media (max-width: 540px) {
  .live-field { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .live-field-side { justify-items: stretch; }
  .live-field-side:has(.live-checkbox) { justify-items: start; }
  .live-current,.live-field-error,.live-readonly { text-align: left; }
  .live-field-actions { justify-items: start; }
  .live-field-actions .text-button { text-align: left; }
  .live-connection-actions .button { flex-basis: 100%; }
  .live-review { padding: 16px; }
  .live-review-heading { top: -16px; }
  .live-draft-line { flex-direction: column; align-items: flex-start; gap: 4px; }
  .live-draft-values { max-width: 100%; text-align: left; }
  .live-pair-code { font-size: clamp(23px,6.6vw,30px); letter-spacing: 1px; padding: 14px 8px; }
  .live-tabs { flex: 1; }
  .live-tabs button { flex: 1; padding-inline: 12px; }
  .live-data-toolbar > .text-button { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .live-checkbox::before,.live-checkbox::after { transition: none; }
}