/* Only the admin editor; spectator card styling itself is shared unchanged. */
#matchEditor .match-editor-preview{margin-top:24px;padding:20px;background:#f7f8fa;border:1px solid #e2e6ec;border-radius:14px;min-width:0}
#matchEditor .match-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#matchEditor .match-preview-heading h3{margin:0 0 8px;font-size:18px;color:#272d36}
#matchEditor .match-preview-heading p{margin:0;max-width:600px;font-size:13px;line-height:1.6;color:#566174}
#matchEditor .match-preview-modes{display:flex;gap:4px;flex-shrink:0}
#matchEditor .match-preview-modes button{min-height:44px;padding:8px 12px;background:white;color:#445063;border:1px solid #d8dfe8;border-radius:8px;font-size:13px}
#matchEditor .match-preview-modes button[aria-pressed=true]{background:#fff1f3;border-color:#edb8c0;color:#bd172c}
#matchEditor .match-preview-workflow{font-size:12px;color:#5c6676;margin:14px 0}
#matchEditor .match-preview-frame{width:min(100%,430px);margin:16px auto 20px;transition:width .15s ease;min-width:0}
#matchEditor .match-preview-frame[data-mode=mobile]{width:min(100%,320px)}
/* The public <=420px breakpoint, applied to the simulated phone width too. */
#matchEditor .match-preview-frame[data-mode=mobile] .bracket-card{padding:18px}
#matchEditor .match-preview-frame[data-mode=mobile] .bracket-heading{margin-bottom:16px}
#matchEditor .match-preview-frame[data-mode=mobile] .match-row-team{grid-template-columns:40px minmax(0,1fr) 42px;gap:10px}
#matchEditor .match-preview-frame[data-mode=mobile] .match-logo{width:40px;height:40px}
#matchEditor .match-preview-frame[data-mode=mobile] .match-team-copy strong{font-size:14px}
#matchEditor .match-preview-frame[data-mode=mobile] .match-row-score b{font-size:22px}
#matchEditor .match-preview-card .bracket-card{width:100%;box-sizing:border-box}
#matchEditor .match-preview-validation{font-size:13px;line-height:1.6;color:#536073;border-top:1px solid #e0e5ec;padding-top:12px}
#matchEditor .match-preview-validation ul{margin:8px 0 0;padding-left:20px}
#matchEditor .match-preview-validation p{margin:0}
#matchEditor .match-preview-review{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:13px;line-height:1.6;color:#8d2637}
#matchEditor .match-preview-review[hidden]{display:none}
#matchEditor .match-preview-review input{width:18px;height:18px;margin:4px 0}
#matchEditor .match-field-error{display:block;color:#ae2034;font-size:12px;line-height:1.5;margin:4px 0 0}
#matchEditor .match-field-error[hidden]{display:none}
#matchEditor [aria-invalid=true]{border-color:#dca3af}
#matchEditor .match-editor-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:16px}
#matchEditor .match-editor-actions button{width:auto;min-height:44px;padding:10px 18px}
#matchEditor #matchEditorNotice{margin-top:16px}
#matchEditor .match-preview-live-link{display:block;text-align:right;font-size:13px;padding:12px 0;min-height:44px;box-sizing:border-box}
#matchEditor .match-preview-live-link[hidden]{display:none}
.match-editor-preview-dialog .match-preview-detail{padding:0 20px 20px}
#matchEditor .match-preview-modes button:focus-visible,#matchEditor .match-editor-actions button:focus-visible{outline:3px solid #a5182c;outline-offset:3px}
@media(max-width:640px){#matchEditor .match-editor-preview{padding:12px}#matchEditor .match-preview-heading{flex-direction:column;gap:12px}#matchEditor .match-preview-frame{width:100%}#matchEditor .match-editor-actions{justify-content:stretch}#matchEditor .match-editor-actions button{flex:1 1 140px}#matchEditor .match-preview-heading h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){#matchEditor .match-preview-frame{transition:none}}