html, body { max-width: 100%; overflow-x: hidden; }
.mahjong-page-header { align-items: flex-start; }
.mahjong-page-header .subtle { margin: 0.35rem 0 0; max-width: 52rem; }
.admin-password { width: 10.5rem; min-height: 38px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.45rem 0.6rem; }
.mahjong-layout { display: grid; grid-template-columns: minmax(20rem, .85fr) minmax(24rem, 1.15fr); gap: 1rem; min-width: 0; }
.mahjong-layout .panel { min-width: 0; min-height: 0; }
.mahjong-review-panel { grid-column: 1 / -1; }
.mahjong-source-panel .body, .mahjong-review-panel .body { display: grid; gap: 0.85rem; }
.mahjong-notice { padding: 0.7rem 0.8rem; border: 1px solid rgba(45,212,191,.35); border-radius: 8px; color: var(--text); background: rgba(45,212,191,.08); font-size: .78rem; }
.mahjong-account { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.mahjong-account summary { padding: .7rem .8rem; color: var(--text); cursor: pointer; font-size: .82rem; font-weight: 600; }
.mahjong-account[open] summary { border-bottom: 1px solid var(--border); }
.mahjong-account-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .7rem; padding: .8rem; }
.mahjong-auth-field { display: grid; gap: .35rem; min-width: 0; }
.mahjong-auth-field label { color: var(--muted); font-size: .78rem; }
.mahjong-auth-field input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 8px; background: #0f1521; color: var(--text); padding: .65rem .7rem; font: inherit; }
.mahjong-account-body .btn { min-height: 40px; white-space: nowrap; }
.mahjong-auth-check, .mahjong-account-body .mahjong-status { grid-column: 1 / -1; }
.mahjong-auth-check { width: 100%; }
.mahjong-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.mahjong-tab { min-height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--muted); cursor: pointer; font: inherit; }
.mahjong-tab.is-active { border-color: rgba(255,120,75,.55); background: rgba(255,120,75,.12); color: var(--text); }
.mahjong-tab:focus-visible, .file-button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.mahjong-tab-panel { display: grid; gap: .55rem; }
.mahjong-tab-panel[hidden], .mahjong-review-output[hidden] { display: none !important; }
.mahjong-tab-panel label, .mahjong-field label { color: var(--muted); font-size: .78rem; }
.mahjong-tab-panel input[type="text"], .mahjong-tab-panel textarea, .mahjong-field select { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #0f1521; color: var(--text); padding: .65rem .7rem; font: inherit; }
.mahjong-tab-panel textarea { min-height: 11rem; resize: vertical; line-height: 1.45; }
.field-help { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.mahjong-file-row { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.mahjong-file-row input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.file-button { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text) !important; cursor: pointer; }
.mahjong-check-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; }
.mahjong-check-row input { margin-top: .15rem; }
.mahjong-status { min-height: 1.25rem; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.mahjong-status.is-error { color: var(--error); }
.mahjong-status.is-success { color: var(--success); }
.mahjong-status.is-busy { color: var(--accent-2); }
.mahjong-output-panel h3 { justify-content: space-between; }
.mahjong-output-actions { display: flex; gap: .4rem; margin-left: auto; }
.mahjong-output-actions .btn { padding: .35rem .6rem; }
.mahjong-output-panel .body { display: grid; gap: .65rem; }
.mahjong-perspective { max-width: 28rem; }
.mahjong-json-preview, .mahjong-review-output { margin: .65rem 0 0; width: 100%; max-width: 100%; max-height: 34rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 8px; background: #0b1018; color: var(--text); padding: .8rem; font: .76rem/1.5 "IBM Plex Mono", "Consolas", monospace; }
.mahjong-review-copy { margin: 0; color: var(--muted); font-size: .8rem; }
.mahjong-review-controls { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
.mahjong-field { display: grid; gap: .35rem; min-width: 10rem; }
.mahjong-field select { min-height: 38px; }
.mahjong-review-output { margin-top: 0; max-height: 24rem; }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; }
@media (max-width: 68rem) { .mahjong-layout { grid-template-columns: minmax(0,1fr); } .mahjong-review-panel { grid-column: auto; } }
@media (max-width: 44rem) { .mahjong-page-header .admin-password { width: 100%; } .mahjong-account-body { grid-template-columns: minmax(0, 1fr); } .mahjong-account-body .btn, .mahjong-auth-check, .mahjong-account-body .mahjong-status { grid-column: auto; width: 100%; } .mahjong-tabs { grid-template-columns: 1fr; } .mahjong-review-controls { display: grid; grid-template-columns: 1fr; } .mahjong-field { min-width: 0; } .mahjong-review-controls .btn { width: 100%; } .mahjong-output-panel h3 { align-items: center; flex-wrap: wrap; } .mahjong-output-actions { width: 100%; margin-left: 0; } .mahjong-output-actions .btn { flex: 1; } }