:root { --bg: #0e1222; --panel: #161b30; --panel2: #1c2240; --line: #2c3563; --text: #e6ebff; --dim: #8f9acb; --accent: #ffd24a; --good: #5fd49a; --bad: #ff6b6b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 system-ui, sans-serif; overflow: hidden; }
#app { display: grid; height: 100%; grid-template-columns: 270px 1fr 310px; grid-template-rows: 44px 1fr; grid-template-areas: "top top top" "left view right"; }
#top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; }
#left { grid-area: left; border-right: 1px solid var(--line); } #right { grid-area: right; border-left: 1px solid var(--line); }
#left, #right { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
#view { grid-area: view; position: relative; min-width: 0; min-height: 0; } #view canvas:not(.minimap) { display: block; width: 100%; height: 100%; }
#marquee { position: absolute; display: none; border: 1px dashed var(--accent); background: rgba(255, 210, 74, 0.1); pointer-events: none; z-index: 2; }
#hud { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; background: rgba(10, 13, 26, 0.75); border-radius: 6px; color: var(--dim); pointer-events: none; font-size: 12px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--panel2); }
.tabs button { flex: 1; padding: 7px 4px; background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabbody { flex: 1; min-height: 0; overflow: auto; }
.panel-body { padding: 8px; display: grid; gap: 6px; align-content: start; }
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; }
button { cursor: pointer; } button:hover { border-color: var(--accent); } button.on { background: #3a3414; border-color: var(--accent); } button.danger { border-color: #7a3a3a; } button.danger:hover { border-color: var(--bad); }
input[type=checkbox] { width: auto; } .search { width: 100%; }
.field { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; align-items: center; } .field span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; } .field.wide { grid-template-columns: 1fr; } .field code { color: var(--dim); word-break: break-all; }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .row.opts { display: grid; grid-template-columns: 1fr; } .actions button { flex: 1 1 45%; }
h4, h5 { margin: 4px 0 0; } h5 { color: var(--dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } .sub, .hint, .count { color: var(--dim); font-size: 12px; margin: 0; }
.lib-cat summary { cursor: pointer; padding: 3px 0; color: var(--dim); } .lib-items { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 8px; } .lib-item { padding: 3px 7px; font-size: 12px; }
.outline, .hist { display: grid; gap: 1px; } .row-item { padding: 3px 6px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-item:hover { background: var(--panel2); } .row-item.on { background: #3a3414; outline: 1px solid var(--accent); }
.idx { display: inline-block; min-width: 34px; color: var(--dim); font-size: 11px; }
.hist-item { padding: 4px 6px; border-radius: 4px; background: var(--panel2); font-size: 12px; } .hist-item.undone { opacity: 0.45; text-decoration: line-through; } .hist-item.ai { border-left: 3px solid #7fe7ff; } .why { color: var(--dim); }
.prob { padding: 4px 6px; border-radius: 4px; font-size: 12px; background: var(--panel2); } .prob.err { border-left: 3px solid var(--bad); } .prob.warn { border-left: 3px solid var(--accent); } .good { color: var(--good); } .bad { color: var(--bad); }
.badge { padding: 2px 8px; border-radius: 10px; background: var(--panel2); } .badge.err { background: #5a2323; } #status { color: var(--dim); margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.sep { width: 1px; align-self: stretch; background: var(--line); margin: 6px 2px; }
@media (max-width: 900px) { #app { grid-template-columns: 200px 1fr 220px; } }
.field input, .field select { min-width: 0; width: 100%; } .field { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; } .lib-card { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px; cursor: pointer; } .lib-card:hover { border-color: var(--accent); } .lib-card.on { background: #3a3414; border-color: var(--accent); }
.thumb { aspect-ratio: 1; border-radius: 4px; background: #1c2240 center / cover no-repeat; } .lib-card .nm { display: block; font-size: 11px; line-height: 1.2; padding: 2px 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star { position: absolute; right: 2px; top: 2px; padding: 0 4px; line-height: 1.3; background: rgba(10, 13, 26, 0.6); border: 0; color: var(--dim); } .star.on { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { padding: 1px 7px; font-size: 11px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); } button.chip.on { background: #3a3414; border-color: var(--accent); color: var(--text); }
.lib-detail { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--line); }
.create-group button { font-size: 12px; padding: 3px 7px; } .create-form { display: grid; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); } .create-list h5 { margin-top: 8px; }
.layers { display: grid; gap: 2px; } .layer { display: grid; grid-template-columns: 22px 10px 1fr auto 26px; gap: 6px; align-items: center; padding: 1px 2px; border-radius: 4px; } .layer.locked .nm { opacity: 0.5; }
.layer button { border: 0; background: none; padding: 0 3px; cursor: pointer; color: var(--dim); } .layer button.on { color: var(--accent); } .layer .eye.off { color: var(--dim); text-align: center; } .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.layers-box summary { cursor: pointer; color: var(--dim); padding: 2px 0; }
.minimap { position: absolute; right: 8px; bottom: 8px; border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; z-index: 3; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.jump { width: 150px; }
.hist-actions { gap: 4px; margin-top: 3px; } .hist-actions button { font-size: 11px; padding: 1px 6px; } .diff { display: grid; gap: 2px; } .diff-added .idx { color: var(--good); } .diff-removed .idx { color: var(--bad); }
#app.bare { grid-template-columns: 0 1fr 0; grid-template-rows: 0 1fr; } #app.bare #top, #app.bare #left, #app.bare #right, #app.bare #hud, #app.bare .minimap { display: none; }
.meta-tree { display: grid; gap: 3px; } .meta-sec summary { cursor: pointer; color: var(--text); padding: 2px 0; text-transform: capitalize; } .meta-kids { display: grid; gap: 3px; padding-left: 8px; border-left: 1px solid var(--line); } input[type=color] { padding: 0 2px; height: 26px; }
.login-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #1d2550, var(--bg)); } .login-box { display: grid; gap: 10px; width: min(360px, 90vw); padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .login-box h2 { margin: 0; } .login-box input { padding: 8px 10px; } .login-msg { color: var(--bad); min-height: 1.2em; margin: 0; }
.modal-wrap { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 7, 15, 0.6); } .modal { width: min(560px, 92vw); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); } .modal-x { border: 0; background: none; } .modal-body { padding: 12px 14px; overflow: auto; } .modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line); } .modal .grid { display: grid; gap: 8px; }
textarea { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; width: 100%; resize: vertical; } textarea.key { font: 11px/1.4 monospace; } ul.pending { margin: 4px 0; padding-left: 18px; color: var(--dim); max-height: 160px; overflow: auto; }
.who { color: var(--dim); } .chantier-state { padding: 2px 8px; border-radius: 10px; background: var(--panel2); color: var(--dim); } .chantier-state.pending { background: #3a3414; color: var(--accent); } .chantier-state.sent { background: #173a2a; color: var(--good); }
.toolrail { position: absolute; left: 8px; top: 8px; z-index: 4; display: grid; gap: 4px; } .toolrail button { width: 62px; padding: 5px 2px 4px; display: grid; justify-items: center; gap: 1px; background: rgba(22, 27, 48, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.toolrail .ico, .modes .ico { font-size: 19px; line-height: 1.1; } .toolrail .lbl { font-size: 10px; line-height: 1.15; color: var(--dim); text-align: center; white-space: normal; } .toolrail button.on .lbl { color: var(--accent); }
.toolcard { position: absolute; left: 78px; top: 8px; z-index: 4; width: 250px; max-height: calc(100% - 16px); overflow: auto; display: grid; gap: 7px; align-content: start; padding: 10px; background: rgba(22, 27, 48, 0.94); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }
.toolcard h4 { margin: 0; } .toolcard .undo { border-top: 1px solid var(--line); padding-top: 6px; } .toolcard .grid, .floors { display: grid; gap: 6px; }
.slider { display: grid; gap: 2px; } .slider span { color: var(--dim); font-size: 12px; } .slider b { color: var(--text); font-weight: 600; } .slider input { width: 100%; padding: 0; accent-color: var(--accent); }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .modes button { display: grid; justify-items: center; padding: 4px 2px; font-size: 11px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: 260px; overflow: auto; } .swatch-btn { display: grid; justify-items: center; gap: 2px; padding: 3px 2px; font-size: 10px; } .swatch-btn i { width: 100%; height: 18px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.4); }
.floor-list { display: grid; gap: 1px; max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; padding: 2px; }
#app.preview { grid-template-columns: 0 1fr 0; grid-template-rows: 0 1fr; } #app.preview #top, #app.preview #left, #app.preview #right, #app.preview .minimap, #app.preview .toolrail, #app.preview .toolcard { display: none; }
.preview-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; display: flex; gap: 12px; align-items: center; padding: 6px 12px; background: rgba(10, 13, 26, 0.8); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); white-space: nowrap; } .preview-bar b { color: var(--accent); }
.help ul { margin: 2px 0; padding-left: 18px; } .help li { margin: 3px 0; } .help p { margin: 2px 0; } .help-sec h5 { margin-bottom: 2px; }
#app.bare .toolrail, #app.bare .toolcard { display: none; }
.login-msg.wait { color: var(--dim); }
.selbar { position: absolute; z-index: 5; display: none; gap: 2px; padding: 3px; background: rgba(14, 18, 34, 0.92); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55); pointer-events: auto; } .selbar button { min-width: 30px; padding: 3px 6px; font-size: 15px; line-height: 1.1; }
.chantier { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; padding: 5px 8px; background: rgba(14, 18, 34, 0.92); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); white-space: nowrap; } #app.preview .chantier, #app.bare .chantier { display: none; }