:root { font-family: system-ui, sans-serif; color: #292e33; background: #eef1f2; letter-spacing: 0; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; border: 1px solid #d7dce0; border-radius: 6px; background: white; color: inherit; padding: 9px 15px; font-size: 14px; min-height: 40px; }
button:hover { background: #eef2f4; }
button:focus-visible, input:focus-visible { outline: 3px solid #4b9bb0; outline-offset: 3px; }
button:disabled { opacity: .35; cursor: default; }
header { min-height: 76px; padding: 16px max(24px, calc((100vw - 1100px) / 2)); background: white; border-bottom: 1px solid #dfe4e7; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 23px; font-weight: 750; color: #ed744d; white-space: nowrap; }
.brand span { color: #333b42; font-size: 17px; margin-left: 12px; font-weight: 600; }
.primary { background: #277d88; border-color: #277d88; color: white; font-weight: 600; }
.primary:hover { background: #206975; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.modes, .actions { display: flex; align-items: center; gap: 8px; }
.modes { flex-wrap: wrap; }
.mode { display: flex; align-items: center; gap: 9px; padding: 7px 14px; height: 48px; flex-shrink: 0; white-space: nowrap; }
.mode img { width: 30px; height: 30px; }
.mode.selected { border-color: #277d88; background: #e4f1f1; box-shadow: inset 0 0 0 1px #277d88; }
.icon { width: 40px; padding: 0; font-size: 26px; line-height: 1; }
.canvas-area { width: 100%; }
.theme-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; }
.theme-bar label { font-weight: 600; }
select { font: inherit; color: inherit; padding: 9px 34px 9px 12px; border: 1px solid #cbd3d8; border-radius: 6px; background: white; min-width: 180px; }
select:focus-visible { outline: 3px solid #4b9bb0; outline-offset: 2px; }
#board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 8 / 6; box-shadow: 0 4px 20px #263b4212; touch-action: none; user-select: none; }
.cell { position: relative; border: 0; border-radius: 0; padding: 0; min-height: 0; width: 100%; height: 100%; aspect-ratio: 1; background: var(--floor-image) center / 100% 100%; }
.cell:hover { background: var(--floor-image) center / 100% 100%; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cell::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.cell:hover::after { background: #277d8819; box-shadow: inset 0 0 0 2px #277d88; }
.cell:focus-visible { outline-offset: -4px; z-index: 1; }
.cell.locked { cursor: not-allowed; }
.cell.locked:hover::after { background: none; box-shadow: none; }
footer { display: flex; justify-content: space-between; color: #78818a; font-size: 13px; padding: 14px 0; }
@media (max-width: 600px) { header { padding: 14px 16px; } main { padding: 18px 12px; } .brand { font-size: 20px; } .brand span { margin-left: 5px; font-size: 14px; } .toolbar { gap: 12px; } .actions { margin-left: auto; } button { padding: 8px 11px; } }
@media (max-width: 480px) { header { flex-wrap: wrap; } header .primary { margin-left: auto; } }