* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, sans-serif; background: #1e1f24; color: #e8eaed; }
button, input, select { font: inherit; }
button { cursor: pointer; background: #2d3142; color: #fff; border: 1px solid #4a5068; border-radius: 4px; padding: 4px 8px; }
button:hover { background: #3a4058; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #15171d; border-bottom: 1px solid #333; }
.brand { font-weight: 700; white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; }

.main { display: grid; grid-template-columns: 260px 1fr 300px; height: calc(100vh - 88px); min-height: 500px; }
.left-panel, .right-panel { overflow: auto; padding: 10px; background: #23252d; border-right: 1px solid #333; }
.right-panel { border-right: none; border-left: 1px solid #333; }
.left-panel section, .right-panel section { margin-bottom: 14px; }
h3 { margin: 0 0 8px; font-size: 13px; color: #aab; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool.active { background: #4caf87; border-color: #6fd4a8; }

.layer-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; }
.layer-item { display: flex; justify-content: space-between; padding: 4px 6px; border-radius: 4px; background: #2a2d38; cursor: pointer; }
.layer-item.active { outline: 1px solid #6fd4a8; }

.face-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 220px; overflow: auto; }
.face-grid img { width: 100%; border-radius: 3px; border: 1px solid #444; background: #111; }
.face-grid .odd { outline: 2px solid #e55; }

.canvas-wrap { position: relative; overflow: hidden; background: #12141a; }
#boardCanvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

.hover-tip { position: absolute; pointer-events: none; background: rgba(0,0,0,0.85); padding: 6px 8px; border-radius: 4px; font-size: 12px; white-space: pre; z-index: 5; }
.hidden { display: none !important; }

.props-panel, .metrics-panel, .issues-panel, .solve-panel, .special-panel { font-size: 12px; line-height: 1.5; }
.special-item { padding: 6px; margin-bottom: 6px; border-radius: 4px; background: #2a2d38; cursor: pointer; border: 1px solid #444; }
.special-item.active { outline: 1px solid #f90; }
.special-item small { color: #9ab; }
.issue { padding: 4px 6px; margin-bottom: 4px; border-radius: 4px; cursor: pointer; }
.issue.ERROR { background: #4a1f1f; color: #ffb4b4; }
.issue.WARNING { background: #4a3f1f; color: #ffe6a8; }
.issue.INFO { background: #1f3a4a; color: #a8e6ff; }

.bottom-bar { height: 88px; border-top: 1px solid #333; background: #15171d; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
#statusBar { font-size: 12px; color: #9ab; }
.log-panel { flex: 1; overflow: auto; font-size: 11px; color: #8a8; font-family: Consolas, monospace; }

.replay-bar { position: fixed; left: 260px; right: 300px; bottom: 88px; background: rgba(20,30,40,0.95); border-top: 1px solid #456; padding: 8px; display: flex; gap: 8px; align-items: center; z-index: 10; }