/* UI layout only. All color values are injected from js/palette.js. Extend with editor panels in Stage 3. */
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--background);color:var(--ink);font:14px system-ui,sans-serif}#viewport{position:fixed;inset:0}canvas{display:block;touch-action:none}.panel{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 40px var(--shadow);backdrop-filter:blur(16px)}header{top:24px;left:24px;right:24px;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}.brand{color:inherit;text-decoration:none;font-size:15px;letter-spacing:3px;font-weight:700}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1px;margin-top:5px}.tools{display:flex;gap:8px}button{border:1px solid var(--border);background:var(--cream);color:var(--ink);border-radius:12px;padding:10px 16px;cursor:pointer;font:inherit}button:hover{background:var(--honey)}button:focus-visible,a:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}.study{top:135px;left:24px;padding:26px;width:268px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}h1{font:normal 33px Georgia,serif;line-height:1.15;margin:18px 0}p{line-height:1.8;color:var(--muted);font-size:12px}.swatches{display:flex;gap:7px;margin:23px 0}.swatches i{width:21px;height:21px;border-radius:50%;border:1px solid var(--border)}.check{font-size:11px;display:flex;align-items:center;gap:8px}.workshop-link{display:inline-block;margin-top:14px;font-size:12px;color:var(--terracotta);text-decoration:none}.workshop-link:hover{text-decoration:underline}#status{font-size:10px;margin-top:18px;color:var(--muted);line-height:1.6}footer{bottom:22px;left:24px;right:24px;padding:13px 20px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between}#restore{position:fixed;right:20px;bottom:20px}body.clean .panel{display:none}@media(max-width:760px){header{top:12px;left:12px;right:12px;padding:12px}.brand{font-size:11px;letter-spacing:1px}.brand small{display:none}button{padding:8px;font-size:11px}.study{left:12px;top:auto;bottom:72px;width:220px;padding:16px}h1{font-size:24px;margin:10px 0}.study p{display:none}.swatches{margin:12px 0}footer{left:12px;right:12px;bottom:12px;font-size:9px}footer span{display:none}}
/* Build mode: catalog bar along the bottom, properties card on the right. */
button.primary{background:var(--terracotta);color:var(--cream);border-color:transparent}button.primary:hover{background:var(--brick)}button:disabled{opacity:.45;cursor:default}
.catalog{left:24px;right:24px;bottom:22px;padding:12px 14px;display:none;gap:10px 14px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'cats tools' 'tiles tools'}body.build .catalog{display:grid}.categories{grid-area:cats}.tiles{grid-area:tiles}.catalog-tools{grid-area:tools}body.build footer,body.build .study{display:none}
.categories{display:flex;gap:4px;overflow-x:auto}.categories button{padding:6px 12px;font-size:12px;border-radius:10px;white-space:nowrap}.categories button.active{background:var(--honey);color:var(--cream)}
.tiles{display:flex;gap:8px;overflow-x:auto;flex:1;padding-bottom:4px;align-items:flex-start}.tile{flex:0 0 100px;display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:14px}.tile img{width:84px;height:84px;object-fit:contain}.tile span{font-size:10px;margin-top:2px;text-align:center;line-height:1.3}
.catalog-tools{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:8px;min-width:110px}.catalog-tools small{font-size:10px;color:var(--muted);text-align:right;line-height:1.6}
.props{right:24px;top:120px;width:250px;padding:18px}.props[hidden]{display:none}.props h2{font:normal 20px Georgia,serif;margin:0 0 12px}.props .swatches{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.swatch{width:26px;height:26px;border-radius:50%;padding:0;border:2px solid var(--cream);box-shadow:0 0 0 1px var(--border)}.swatch.active{box-shadow:0 0 0 2px var(--ink)}.swatch.none{background:linear-gradient(135deg,transparent 44%,var(--brick) 44% 56%,transparent 56%),var(--cream)}.swatch:hover{transform:scale(1.1)}
.actions{display:flex;gap:6px}.actions button{padding:8px 10px;font-size:12px}
@media(max-width:760px){.catalog{left:8px;right:8px;bottom:8px;gap:8px;padding:10px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'cats tools' 'tiles tiles'}.catalog-tools{flex-direction:row;align-items:center;min-width:0}.catalog-tools button{padding:6px 10px;font-size:12px}.catalog-tools small{display:none}.tile{flex-basis:84px}.tile img{width:64px;height:64px}.props{right:8px;top:76px;width:200px;padding:12px}.props h2{font-size:16px;margin-bottom:8px}.props .swatches{gap:5px;margin-bottom:10px}.swatch{width:22px;height:22px}.actions{flex-wrap:wrap}.actions button{padding:6px 8px;font-size:11px}}
.modes{display:flex;background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:3px;gap:2px}.modes button{border:0;background:transparent;border-radius:11px;padding:8px 18px;font-weight:600}.modes button.active{background:var(--terracotta);color:var(--cream)}.modes button:not(.active):hover{background:var(--plaster)}
.categories button.room-tab{font-weight:700}.categories button.room-tab.active{background:var(--terracotta)}
.room-settings{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-start;padding:4px 2px}.room-sizes{display:flex;flex-direction:column;gap:8px}.stepper{display:flex;align-items:center;gap:8px}.stepper span{width:44px;font-size:12px;color:var(--muted)}.stepper button{width:32px;height:32px;padding:0;font-size:18px;line-height:1}.stepper b{min-width:42px;text-align:center;font-size:14px}
.paint span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.paint .swatches{display:flex;flex-wrap:wrap;gap:6px;max-width:260px}
@media(max-width:760px){.modes button{padding:7px 10px;font-size:11px}.room-settings{gap:10px 14px}.paint .swatches{max-width:none}}
@media(max-height:560px){.catalog{bottom:8px;padding:8px 10px;gap:6px 10px}.tile{flex-basis:76px;padding:4px}.tile img{width:52px;height:52px}.catalog-tools small{display:none}.stepper button{width:28px;height:28px}.room-settings{gap:6px 16px}.study{display:none}header{top:8px;padding:10px 14px}}
.brand-row{display:flex;align-items:center;gap:12px}.save-status{font-size:10px;letter-spacing:.5px;color:var(--muted);background:var(--cream);border:1px solid var(--border);border-radius:999px;padding:3px 9px;white-space:nowrap}.save-status.error{color:var(--cream);background:var(--brick)}
.file-menu{position:relative}.file-menu summary{list-style:none;border:1px solid var(--border);background:var(--cream);border-radius:12px;padding:10px 16px;cursor:pointer}.file-menu summary::-webkit-details-marker{display:none}.file-menu[open] summary{background:var(--honey);color:var(--cream)}
.file-menu .menu{position:absolute;right:0;top:calc(100% + 8px);width:240px;padding:10px;display:flex;flex-direction:column;gap:6px;z-index:5}.file-menu .menu button{text-align:left}.file-menu .menu small{font-size:10px;color:var(--muted);line-height:1.5;padding:4px 2px 0}
.notice{position:fixed;left:50%;top:96px;transform:translateX(-50%);max-width:min(520px,calc(100vw - 32px));padding:14px 18px;font-size:12px;line-height:1.6;white-space:pre-line;z-index:6}.notice button{margin-top:8px;padding:6px 12px;font-size:12px}
@media(max-width:760px){.save-status{display:none}.file-menu summary{padding:8px;font-size:11px}}
/* Avatar mode: editor panel on the left, the room stays visible on the right. */
.customizer{display:none;top:120px;left:24px;bottom:24px;width:330px;padding:20px;overflow-y:auto;flex-direction:column;gap:12px}body.character .customizer{display:flex}body.character .study,body.character footer{display:none}
.name-field{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.name-field input{flex:1;font:inherit;font-size:14px;color:var(--ink);background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.custom-row{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--border)}.custom-row>span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chips button{padding:5px 10px;font-size:12px;border-radius:999px}.chips button.active{background:var(--terracotta);color:var(--cream)}
.custom-row .swatches{display:flex;flex-wrap:wrap;gap:6px}.looks-title{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.looks{display:flex;flex-wrap:wrap;gap:6px}.looks small{font-size:11px;color:var(--muted)}
.look{display:inline-flex}.look button{padding:5px 10px;font-size:12px;border-radius:999px 0 0 999px}.look .remove{border-radius:0 999px 999px 0;padding:5px 8px;border-left:0}
@media(max-width:760px){.customizer{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:52vh;padding:14px}}
@media(max-height:560px){.customizer{top:70px;bottom:8px}}
/* Action menu (click furniture in View mode) and the book reader. */
.action-menu{position:fixed;z-index:8;min-width:190px;max-width:280px;padding:8px;display:flex;flex-direction:column;gap:4px}.action-menu[hidden]{display:none}
.action-title{font:normal 15px Georgia,serif;padding:4px 8px 6px;color:var(--ink)}.action-menu button{text-align:left;border-radius:10px;padding:8px 12px;font-size:13px}.action-menu button:focus-visible{background:var(--honey);color:var(--cream)}
.reader{position:fixed;inset:0;z-index:9;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px}.reader[hidden]{display:none}
.reader-card{position:relative;width:min(1000px,100%);height:min(92vh,100%);display:flex;flex-direction:column;padding:10px}.reader-bar{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}.reader-title{flex:1;font:normal 17px Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-download{color:var(--ink);font-size:13px;border:1px solid var(--border);background:var(--cream);border-radius:12px;padding:9px 14px;text-decoration:none}.reader-pages{font-size:12px;color:var(--muted)}.reader-bar button{padding:8px 13px}
.reader-scroll{flex:1;overflow:auto;border-radius:12px;background:var(--plaster);display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}.reader-page{background:var(--white);box-shadow:0 4px 18px var(--shadow);border-radius:4px;flex:none}.reader-status{margin:auto;font-size:13px;color:var(--muted)}
@media(max-width:760px){.reader{padding:6px}.reader-card{height:100%}}
/* The selected-piece card only exists in Build mode. */
body:not(.build) .props{display:none}.props-done{margin-top:12px;width:100%}