.puzzle-shell { max-width: 1040px; margin: 0 auto; padding: 28px 20px; }
.puzzle-shell nav, .puzzle-shell footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.puzzle-shell a { color: var(--text); text-decoration: none; }
.puzzle-shell a:hover { color: var(--red); }
.puzzle-shell header { padding: 40px 0 24px; }
.puzzle-shell h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.3; margin: 8px 0; }
#puzzleForm { display: flex; gap: 12px; align-items: end; }
#puzzleForm .field { flex: 1; min-width: 0; }
#accountId { width: 100%; min-height: 46px; font-family: Consolas, monospace; }
.privacy { margin-top: 14px; }
.preview-panel { min-height: 340px; display: grid; place-items: center; padding: 20px; background: var(--bg-deep); border: 1px dashed var(--line); color: var(--muted); }
.preview-panel img { display: block; max-width: 100%; max-height: 65vh; object-fit: contain; }
.puzzle-shell footer { margin-top: 20px; color: var(--muted); font-size: .88rem; }
.downloads { display: flex; gap: 8px; }
#puzzleStatus.error { color: var(--warning); }
@media(max-width: 600px) { #puzzleForm { flex-direction: column; align-items: stretch; } .preview-panel { min-height: 240px; } .puzzle-shell { padding: 20px 14px; } }