/* ═══════════════════════════════════════════════════════════
   Factory Builder — tile-based visual factory (Phase 1)
   ═══════════════════════════════════════════════════════════ */

html {
    --accent:      #ff9433;
    --accent-dim:  rgba(255,148,51,.18);
    --accent-glow: rgba(255,148,51,.55);
    --bg:          #080808;
    --bg2:         #0f0f0f;
    --bg3:         #141414;
    --bg4:         #1c1c1c;
    --border:      rgba(255,255,255,.09);
    --border2:     rgba(255,255,255,.05);
    --text:        #f0ebe4;
    --text-dim:    #b0a898;
    --text-muted:  #706860;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Inter',sans-serif;
    background:var(--bg); color:var(--text);
    overflow:hidden; height:100vh;
    display:flex; flex-direction:column;
    user-select:none;
}

#fb-app { flex:1; display:flex; overflow:hidden; min-height:0; }

/* ── SIDEBAR / PALETTE ──────────────────────────────────────── */
.fb-sidebar {
    width:230px; flex-shrink:0;
    background:var(--bg2);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow:hidden;
}
.fb-sidebar-head {
    padding:12px 12px 10px;
    border-bottom:1px solid var(--border);
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:var(--text-muted);
}
.fb-sidebar-body { flex:1; overflow-y:auto; padding:8px; }
.fb-sidebar-body::-webkit-scrollbar { width:3px; }
.fb-sidebar-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.fb-cat {
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:8px;
    margin-bottom:6px;
    overflow:hidden;
}
.fb-cat-head {
    padding:8px 10px;
    display:flex; align-items:center; gap:7px;
    cursor:pointer;
    font-size:11.5px; font-weight:600; color:var(--text-dim);
}
.fb-cat-head i.fb-cat-icon { width:14px; text-align:center; }
.fb-cat-head .fb-cat-chev { margin-left:auto; font-size:9px; color:var(--text-muted); transition:transform .15s; }
.fb-cat.open .fb-cat-chev { transform:rotate(90deg); }
.fb-cat-body { display:none; padding:4px 6px 8px; }
.fb-cat.open .fb-cat-body { display:block; }

.fb-pal-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:6px;
    cursor:pointer;
    font-size:12px; color:var(--text-dim);
    transition:background .12s, color .12s;
}
.fb-pal-item:hover { background:var(--bg4); color:var(--text); }
.fb-pal-item.active { background:var(--accent-dim); color:var(--accent); }
.fb-pal-item img { width:22px; height:22px; object-fit:contain; image-rendering:-webkit-optimize-contrast; flex-shrink:0; }
.fb-pal-item .fb-pal-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pal-item .fb-pal-size { font-size:9.5px; color:var(--text-muted); flex-shrink:0; }

/* ── CANVAS AREA ────────────────────────────────────────────── */
.fb-canvas-area { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.fb-toolbar {
    height:46px; flex-shrink:0;
    display:flex; align-items:center; gap:6px;
    padding:0 10px;
    background:var(--bg2);
    border-bottom:1px solid var(--border);
}
.fb-btn {
    display:flex; align-items:center; gap:6px;
    height:30px; padding:0 11px;
    background:var(--bg3); border:1px solid var(--border);
    border-radius:7px; color:var(--text-dim);
    font-size:12px; font-family:inherit; font-weight:500;
    cursor:pointer; transition:background .12s,border-color .12s,color .12s;
}
.fb-btn:hover { background:var(--bg4); border-color:rgba(255,255,255,.16); color:var(--text); }
.fb-btn:active { transform:scale(.97); }
.fb-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.fb-btn-danger:hover { border-color:rgba(239,68,68,.4); color:#f87171; background:rgba(239,68,68,.07); }
.fb-btn-testrun { border-color:rgba(74,222,128,.35); color:#4ade80; }
.fb-btn-testrun:hover { border-color:rgba(74,222,128,.6); background:rgba(74,222,128,.1); color:#4ade80; }
.fb-btn-testrun.active { background:rgba(74,222,128,.18); border-color:#4ade80; color:#4ade80; }
.fb-sep { width:1px; height:22px; background:var(--border); flex-shrink:0; margin:0 4px; }
.fb-tier-select {
    height:30px; padding:0 8px;
    background:var(--bg3); border:1px solid var(--border); border-radius:7px;
    color:var(--text-dim); font-size:12px; font-family:inherit; cursor:pointer;
}
.fb-stats-bar {
    margin-left:auto;
    display:flex; align-items:center; gap:14px;
    font-size:11.5px; color:var(--text-muted);
    flex-shrink:0;
}
.fb-stats-bar span { display:flex; align-items:center; gap:5px; }
.fb-stats-bar i { color:var(--accent); font-size:10px; }
.fb-stats-bar b { color:var(--text-dim); font-weight:600; }
.fb-zoom-badge {
    font-size:11px; color:var(--text-muted);
    background:var(--bg3); border:1px solid var(--border);
    border-radius:6px; padding:5px 9px; flex-shrink:0;
}

.fb-canvas-wrap {
    flex:1; position:relative; overflow:hidden;
    background:#aeb4b9;
    cursor:default;
    touch-action:none;
}
.fb-canvas-wrap.panning { cursor:grabbing; }
.fb-canvas-wrap.placing { cursor:cell; }
.fb-canvas-wrap.drawing-belt { cursor:crosshair; }

#fb-viewport {
    position:absolute; top:0; left:0;
    width:12000px; height:12000px;
    transform-origin:0 0;
}
/* Grid cell (0,0) is the centre of the floor, not its corner — the panel
   is sized/positioned symmetrically around #fb-viewport's own local origin
   (the offset is a multiple of both the 32px and 160px tile sizes so the
   line pattern still falls exactly on real grid cells). Purely decorative:
   has no children of its own, so this doesn't touch any building/belt
   coordinate math. */
#fb-grid {
    position:absolute; left:-9600px; top:-9600px; width:19200px; height:19200px;
    background:#c9cdd1;
    background-image:
        radial-gradient(circle at center, rgba(0,0,0,.22) 1.5px, transparent 1.7px),
        linear-gradient(to right, rgba(0,0,0,.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.10) 1px, transparent 1px),
        linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
    background-size:160px 160px, 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}
#fb-grid-labels { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.fb-grid-label { font-size:10px; font-family:'Inter',sans-serif; fill:rgba(0,0,0,.3); user-select:none; }
.fb-testrun-item { filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#fb-decor { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
#fb-power-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2; }
#fb-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
#fb-testrun-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:4; }
#fb-buildings { position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; }

/* ── BUILDINGS ──────────────────────────────────────────────── */
.fb-building {
    position:absolute;
    border:2px solid var(--cat-color, #707060);
    border-radius:6px;
    background:#1b1e21;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.3);
    display:flex; align-items:center; justify-content:center;
    cursor:grab;
}
.fb-building:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.18); }
.fb-building.fb-selected {
    border-color:#22d3ee !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 10px rgba(34,211,238,.5) !important;
}
.fb-building.fb-invalid { background:rgba(80,20,20,.85) !important; }
.fb-building img.fb-icon {
    max-width:56%; max-height:56%; object-fit:contain;
    image-rendering:-webkit-optimize-contrast;
    pointer-events:none;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
    margin-bottom:9px;
}
.fb-building .fb-label {
    position:absolute; bottom:0; left:0; right:0;
    display:flex; align-items:center; justify-content:center; gap:4px;
    background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
    border-radius:0 0 5px 5px;
    padding:3px 4px 2px;
    font-size:9px; font-weight:500; color:rgba(255,255,255,.75);
    white-space:nowrap; overflow:hidden;
    pointer-events:none;
}
.fb-building .fb-label-icon { width:11px; height:11px; object-fit:contain; flex-shrink:0; }
.fb-building .fb-label-text { overflow:hidden; text-overflow:ellipsis; }

/* ── RESOURCE CIRCLE — the dominant, centered visual on every
   recipe-capable building: what it's making, not what it is. Empty/dashed
   until a recipe is chosen; click it (or the Selected panel) to pick one. ──*/
.fb-building .fb-resource-circle {
    border-radius:50%;
    background:var(--bg2);
    border:2.5px solid var(--circle-color, rgba(255,255,255,.35));
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:5; flex-shrink:0;
    box-shadow:0 3px 9px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
    transition:transform .12s, border-color .12s;
}
.fb-building .fb-resource-circle:hover { transform:scale(1.08); border-color:#22d3ee; }
.fb-building .fb-resource-circle img { width:70%; height:70%; object-fit:contain; pointer-events:none; }
.fb-building .fb-resource-circle.fb-circle-empty {
    border-style:dashed; border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.35); font-size:15px;
}
.fb-building .fb-front-arrow {
    position:absolute; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-top:8px solid var(--cat-color, #707060);
    pointer-events:none;
}
.fb-building .fb-del {
    position:absolute; top:-8px; right:-8px;
    width:18px; height:18px; border-radius:50%;
    background:#ef4444; color:#fff;
    display:none; align-items:center; justify-content:center;
    font-size:10px; cursor:pointer; z-index:2;
}
.fb-building:hover .fb-del { display:flex; }
.fb-building .fb-port {
    position:absolute; width:10px; height:10px; border-radius:50%;
    background:var(--bg4); border:2px solid var(--text-muted);
    cursor:crosshair; z-index:3;
}
.fb-building .fb-port-out { border-color:#4ade80; }
.fb-building .fb-port-in  { border-color:#60a5fa; }
.fb-building .fb-port:hover { transform:scale(1.3); }
.fb-building .fb-port[data-balance="deficit"] { background:#7f1d1d; border-color:#f87171; }
.fb-building .fb-port[data-balance="surplus"] { background:#78350f; border-color:#fbbf24; }

/* ── RESOURCE PATCH DECORATION (cosmetic, under extraction buildings) ──*/
.fb-ore-patch { position:absolute; pointer-events:none; }
.fb-ore-dot {
    position:absolute; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #8a8378, #5c564c 70%);
    box-shadow:0 1px 2px rgba(0,0,0,.3);
}

.fb-ghost {
    position:absolute;
    border:2px dashed #4ade80;
    background:rgba(74,222,128,.12);
    border-radius:4px;
    pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    z-index:5;
}
.fb-ghost.fb-ghost-invalid { border-color:#ef4444; background:rgba(239,68,68,.14); }
.fb-ghost img { max-width:55%; max-height:55%; object-fit:contain; opacity:.85; }

#fb-stamp-ghost { position:absolute; pointer-events:none; z-index:5; display:none; }
.fb-stamp-item img { transform-origin:center; }

/* ── SELECTION OVERLAY (Shapez 2-style) ────────────────────────*/
.fb-selection-overlay {
    position:absolute;
    border:1.5px solid #22d3ee;
    background:rgba(34,211,238,.10);
    border-radius:6px;
    pointer-events:none;
    z-index:4;
    box-shadow:0 0 0 1px rgba(34,211,238,.2), 0 0 22px rgba(34,211,238,.25);
}
.fb-sel-corner { position:absolute; width:14px; height:14px; border:2px solid #67e8f9; }
.fb-sel-tl { top:-2px;    left:-2px;  border-right:none;  border-bottom:none; }
.fb-sel-tr { top:-2px;    right:-2px; border-left:none;   border-bottom:none; }
.fb-sel-bl { bottom:-2px; left:-2px;  border-right:none;  border-top:none; }
.fb-sel-br { bottom:-2px; right:-2px; border-left:none;   border-top:none; }

/* ── CONTEXTUAL TOOLBAR (appears while something is selected) ──*/
#fb-context-bar {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:4px;
    background:var(--bg2); border:1px solid var(--border); border-radius:14px;
    padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.55);
    z-index:20;
}
.fb-ctx-btn {
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:10px;
    background:var(--bg3); border:1px solid var(--border); color:var(--text-dim);
    cursor:pointer; font-size:15px;
}
.fb-ctx-btn:hover { background:var(--bg4); color:var(--text); border-color:rgba(255,255,255,.18); }
.fb-ctx-btn.fb-ctx-danger:hover { color:#f87171; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.fb-ctx-btn .fb-ctx-num {
    position:absolute; bottom:2px; right:4px;
    font-size:8px; color:var(--text-muted);
}
.fb-ctx-sep { width:1px; height:30px; background:var(--border); margin:0 2px; }

/* ── BELTS (SVG) — flat slab with a crisp outline, like a printed panel,
   not a glowing wire. Left-click deletes (hit path turns red on hover as
   a "this will delete it" warning); right-click opens the tier popup. ──*/
.fb-belt-hit { stroke:transparent; stroke-width:16; fill:none; cursor:pointer; pointer-events:stroke; }
.fb-belt-outline { fill:none; stroke:#23262b; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.fb-belt-body { fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; transition:filter .12s; }
.fb-belt-hit:hover ~ .fb-belt-body { filter:brightness(0.55) saturate(1.4); }
.fb-belt-hit:hover ~ .fb-belt-outline { stroke:#7a1d1d; }
.fb-belt-chevron { fill:none; stroke:#23262b; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.6; pointer-events:none; }
.fb-belt-chip {
    pointer-events:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.fb-belt-chip rect { fill:#15171a; stroke-width:1.5; }
.fb-belt-preview { stroke:#4ade80; stroke-width:3; stroke-dasharray:6 5; fill:none; pointer-events:none; }
.fb-belt-preview.fb-belt-preview-bad { stroke:#ef4444; }

#fb-route-mode-label {
    position:fixed; display:none; z-index:500; pointer-events:none;
    background:#0f1a12; border:1px solid #4ade80; color:#bdf6c8;
    font-size:11px; font-weight:600; padding:5px 10px; border-radius:7px;
    box-shadow:0 4px 14px rgba(0,0,0,.5); white-space:nowrap;
}

/* ── POWER WIRES (visual-only, Power Pole/Substation) ──────────*/
.fb-power-wire { fill:none; stroke:#e8983c; stroke-width:2; opacity:.85; pointer-events:none; }
.fb-power-wire-glow { fill:none; stroke:#ffb35c; stroke-width:5; opacity:.18; pointer-events:none; }

/* ── MINIMAP ────────────────────────────────────────────────── */
#fb-minimap {
    position:absolute; bottom:14px; left:14px;
    width:140px; height:90px;
    background:rgba(10,10,10,.85); border:1px solid rgba(255,255,255,.1);
    border-radius:8px; overflow:hidden;
    backdrop-filter:blur(8px);
    cursor:crosshair;
}
.fb-minimap-viewport {
    position:absolute; border:1px solid var(--accent);
    background:var(--accent-dim); border-radius:2px;
    transition:all .1s; pointer-events:none;
}
.fb-minimap-node { position:absolute; border-radius:2px; opacity:.6; pointer-events:none; }

/* ── FACTORY TABS — lives inline in the top toolbar, right of Fit View ──*/
#fb-factory-tabs {
    display:flex; align-items:center; gap:3px;
    max-width:300px; overflow-x:auto; flex-shrink:0;
}
#fb-factory-tabs::-webkit-scrollbar { height:3px; }
#fb-factory-tabs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.fb-tab {
    display:flex; align-items:center; gap:6px;
    height:30px; max-width:100px;
    background:var(--bg3); border:1px solid var(--border); border-radius:7px;
    padding:0 9px; font-size:11.5px; color:var(--text-dim);
    cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.fb-tab span { overflow:hidden; text-overflow:ellipsis; }
.fb-tab:hover { background:var(--bg4); border-color:rgba(255,255,255,.16); }
.fb-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.fb-tab .fb-tab-close { color:var(--text-muted); font-size:10px; padding:1px; flex-shrink:0; }
.fb-tab .fb-tab-close:hover { color:#f87171; }
.fb-tab-add {
    width:30px; height:30px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg3); border:1px solid var(--border); border-radius:7px;
    color:var(--text-dim); cursor:pointer;
}
.fb-tab-add:hover { background:var(--bg4); color:var(--text); }

/* ── EMPTY STATE / HINT ─────────────────────────────────────── */
.fb-empty-state {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; pointer-events:none; transition:opacity .2s;
}
.fb-empty-state.hidden { opacity:0; }
.fb-empty-icon { font-size:40px; color:rgba(0,0,0,.18); margin-bottom:14px; }
.fb-empty-title { font-size:15px; font-weight:600; color:rgba(0,0,0,.45); margin-bottom:6px; }
.fb-empty-sub { font-size:12px; color:rgba(0,0,0,.32); line-height:1.5; }

/* ── CONTEXTUAL HINT — only appears while a mode is active or something is
   selected; says what's relevant right now instead of one static sentence
   that's always on screen regardless of what you're doing ──────────── */
.fb-hint {
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    display:none;
    font-size:11px; color:var(--text-dim);
    background:rgba(15,15,15,.88); border:1px solid var(--border);
    border-radius:20px; padding:6px 16px;
    pointer-events:none; white-space:nowrap;
    z-index:10;
}
.fb-hint.visible { display:block; }
.fb-hint kbd {
    background:var(--bg4); border:1px solid var(--border); border-radius:4px;
    padding:1px 5px; font-size:10px; color:var(--text); margin:0 1px;
}

.fb-zoom-controls {
    position:absolute; bottom:14px; right:14px;
    display:flex; flex-direction:column; align-items:center;
    background:var(--bg2); border:1px solid var(--border); border-radius:10px;
    overflow:hidden;
}
.fb-zoom-controls button {
    width:32px; height:30px; background:none; border:none; color:var(--text-dim);
    cursor:pointer; font-size:11px;
}
.fb-zoom-controls button:hover { background:var(--bg4); color:var(--text); }
.fb-zoom-controls #fb-zoom-pct { font-size:9.5px; color:var(--text-muted); padding:2px 0; }

/* ── HOME / WAYPOINTS / LAYERS — sits just left of zoom controls ───────*/
.fb-view-controls {
    position:absolute; bottom:14px; right:60px;
    display:flex; flex-direction:column; align-items:center;
    background:var(--bg2); border:1px solid var(--border); border-radius:10px;
    overflow:hidden;
}
.fb-view-controls button {
    width:32px; height:32px; background:none; border:none; color:var(--text-dim);
    cursor:pointer; font-size:13px; border-bottom:1px solid var(--border);
}
.fb-view-controls button:last-child { border-bottom:none; }
.fb-view-controls button:hover { background:var(--bg4); color:var(--text); }
.fb-view-controls button.active { color:var(--accent); background:var(--accent-dim); }

.fb-layer-row, .fb-wp-row {
    display:flex; align-items:center; gap:9px;
    padding:8px 10px; font-size:12px; color:var(--text-dim);
    cursor:pointer; border-radius:6px;
}
.fb-layer-row:hover, .fb-wp-row:hover { background:var(--bg4); color:var(--text); }
.fb-layer-row i.fb-layer-check { width:14px; color:var(--text-muted); }
.fb-layer-row.on i.fb-layer-check { color:var(--accent); }
.fb-wp-row span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-wp-row .fb-wp-del { color:var(--text-muted); flex-shrink:0; }
.fb-wp-row .fb-wp-del:hover { color:#f87171; }
.fb-wp-add-row {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; font-size:12px; color:var(--accent);
    cursor:pointer; border-radius:6px;
}
.fb-wp-add-row:hover { background:var(--accent-dim); }
.fb-wp-empty { padding:10px 10px 4px; font-size:11.5px; color:var(--text-muted); text-align:center; }

/* ── RIGHT PANEL ────────────────────────────────────────────── */
.fb-panel {
    width:272px; flex-shrink:0;
    background:var(--bg2); border-left:1px solid var(--border);
    overflow-y:auto; padding:14px;
    display:flex; flex-direction:column; gap:18px;
}
.fb-panel::-webkit-scrollbar { width:3px; }
.fb-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.fb-panel-title { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
.fb-panel-empty {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:24px 6px; color:var(--text-muted); text-align:center; font-size:12px;
}
.fb-panel-empty i { font-size:20px; }

.fb-ov-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px solid var(--border2);
    font-size:12px;
}
.fb-ov-row:last-child { border-bottom:none; }
.fb-ov-row .fb-ov-label { color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.fb-ov-row .fb-ov-val { color:var(--text); font-weight:600; }

.fb-sel-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:10px; margin-bottom:10px;
}
.fb-sel-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fb-sel-head img { width:26px; height:26px; object-fit:contain; }
.fb-sel-head .fb-sel-name { font-size:13px; font-weight:600; }
.fb-sel-head .fb-sel-recipe { font-size:11px; color:var(--text-muted); }
.fb-field { margin-bottom:10px; }
.fb-field label { display:block; font-size:10.5px; color:var(--text-muted); margin-bottom:4px; }
.fb-field input[type=range] { width:100%; }
.fb-field input[type=number], .fb-field input[type=text] {
    width:100%; background:var(--bg4); border:1px solid var(--border); border-radius:6px;
    color:var(--text); padding:6px 8px; font-size:12px; font-family:inherit;
}
.fb-row-flows { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.fb-flow-chip {
    display:flex; align-items:center; gap:6px;
    font-size:11px; color:var(--text-dim);
    background:var(--bg4); border-radius:6px; padding:4px 7px;
}
.fb-flow-chip img { width:14px; height:14px; object-fit:contain; }
.fb-flow-chip.fb-deficit { color:#f87171; }
.fb-flow-chip.fb-surplus { color:#fbbf24; }

/* ── RECIPE PICKER MODAL ───────────────────────────────────────*/
.fb-modal-bg {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,.6);
    align-items:center; justify-content:center;
}
.fb-modal-bg.open { display:flex; }
.fb-modal {
    width:560px; max-height:72vh;
    background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    display:flex; flex-direction:column; overflow:hidden;
}
.fb-modal-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; border-bottom:1px solid var(--border);
    font-size:13px; font-weight:600;
}
.fb-modal-head button {
    background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer;
    width:28px; height:28px; border-radius:6px;
}
.fb-modal-head button:hover { color:var(--text); background:var(--bg4); }
.fb-recipe-list { flex:1; overflow-y:auto; padding:10px 14px; }
.fb-rp-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:10px 12px; margin-bottom:8px; cursor:pointer;
}
.fb-rp-card:hover { border-color:var(--accent); background:var(--bg4); }
.fb-rp-name { font-size:12.5px; font-weight:600; margin-bottom:2px; }
.fb-rp-machine { font-size:10.5px; color:var(--text-muted); margin-bottom:6px; }
.fb-rp-flows { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:10.5px; }
.fb-rp-chip { display:flex; align-items:center; gap:3px; background:var(--bg4); border-radius:5px; padding:2px 6px; }
.fb-rp-arrow { color:var(--text-muted); }
.fb-alt-badge { background:var(--accent-dim); color:var(--accent); font-size:8.5px; padding:1px 5px; border-radius:4px; margin-left:4px; }

/* ── TOAST ──────────────────────────────────────────────────── */
#fb-toast-wrap {
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:8px; z-index:400; align-items:center;
}
.fb-toast {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:9px 16px; font-size:12.5px; color:var(--text);
    box-shadow:0 4px 18px rgba(0,0,0,.4);
    animation:fbToastIn .18s ease-out;
}
.fb-toast.fb-toast-ok   { border-color:rgba(74,222,128,.4); color:#4ade80; }
.fb-toast.fb-toast-warn { border-color:rgba(239,68,68,.4);  color:#f87171; }
@keyframes fbToastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── QUICK-ADD POPUP — dropping a dragged belt on empty grid space
   suggests a compatible producer/consumer instead of just cancelling ──*/
.fb-quickadd {
    position:fixed; z-index:800; width:240px;
    background:var(--bg3); border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
    animation:fbQaIn .16s cubic-bezier(.34,1.3,.64,1);
}
@keyframes fbQaIn { from { opacity:0; transform:scale(.93) translateY(-6px); } to { opacity:1; transform:scale(1) translateY(0); } }
.fb-qa-title {
    display:flex; align-items:center; gap:7px;
    padding:9px 12px 8px;
    font-size:10.5px; font-weight:700; color:var(--text-dim);
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.03);
}
.fb-qa-part-icon { width:18px; height:18px; object-fit:contain; }
.fb-qa-arrow { margin-left:auto; color:var(--accent); font-size:13px; }
.fb-qa-search {
    display:block; width:100%;
    background:rgba(255,255,255,.04); border:none; border-bottom:1px solid var(--border);
    color:var(--text); font-size:11px; font-family:inherit;
    padding:7px 12px; outline:none;
}
.fb-qa-search::placeholder { color:var(--text-muted); }
.fb-qa-list { overflow-y:auto; max-height:280px; padding:4px; }
.fb-qa-list::-webkit-scrollbar { width:3px; }
.fb-qa-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.fb-qa-row {
    display:flex; align-items:center; gap:9px;
    padding:7px 10px; border-radius:8px; cursor:pointer;
    transition:background .1s;
}
.fb-qa-row:hover { background:rgba(255,255,255,.07); }
.fb-qa-row:hover .fb-qa-name { color:var(--accent); }
.fb-qa-icon { width:26px; height:26px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.fb-qa-info { flex:1; min-width:0; }
.fb-qa-name { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .1s; }
.fb-qa-alt { font-size:8px; font-weight:800; color:#a78bfa; margin-left:4px; }
.fb-qa-machine { font-size:9px; color:var(--text-muted); margin-top:1px; }
.fb-qa-sep { height:1px; background:rgba(255,255,255,.05); margin:3px 8px; }

/* ── BELT TIER POPUP ────────────────────────────────────────── */
.fb-belt-tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:6px; }
.fb-belt-tier-opt {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:8px; cursor:pointer;
    border:1px solid transparent;
}
.fb-belt-tier-opt:hover { background:rgba(255,255,255,.07); }
.fb-belt-tier-opt.active { background:var(--accent-dim); border-color:var(--accent); }
.fb-belt-tier-opt img { width:22px; height:22px; object-fit:contain; }

/* ════ INTERACTIVE GUIDE (mirrors the Production Planner's tour) ════ */
.pg-overlay{position:fixed;inset:0;z-index:11000;display:none;pointer-events:none}
.pg-overlay.active{display:block}
.pg-spotlight{
    position:fixed;border-radius:10px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 2px var(--accent);
    transition:all .35s cubic-bezier(.4,0,.2,1);
    pointer-events:none;z-index:11001
}
.pg-tooltip{
    position:fixed;width:310px;z-index:11002;
    background:var(--bg2);border:1px solid var(--accent-dim);border-radius:14px;
    padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.95);
    transition:all .3s cubic-bezier(.4,0,.2,1);
    pointer-events:auto
}
.pg-progress{display:flex;gap:3px;margin-bottom:12px}
.pg-dot{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .25s}
.pg-dot.pg-done{background:var(--accent)}
.pg-dot.pg-cur{background:var(--accent);opacity:.55}
.pg-step-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);margin-bottom:5px}
.pg-ttl{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pg-body{font-size:12px;color:var(--text-dim);line-height:1.65;margin-bottom:16px}
.pg-body kbd{background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;color:var(--text-dim)}
.pg-body b{color:var(--text)}
.pg-actions{display:flex;align-items:center;gap:6px}
.pg-btn{padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text-dim);transition:all .15s;font-family:inherit;white-space:nowrap}
.pg-btn:hover{border-color:var(--accent);color:var(--text)}
.pg-btn-primary{background:var(--accent);border-color:var(--accent);color:#000;flex:1}
.pg-btn-primary:hover{filter:brightness(1.1);border-color:var(--accent)}
.pg-btn-skip{margin-left:auto;opacity:.55;font-size:10px}
.pg-btn-skip:hover{opacity:1}
.pg-float-btn{
    position:fixed;bottom:24px;right:24px;z-index:5000;
    width:40px;height:40px;border-radius:50%;
    background:var(--bg3);border:1px solid var(--border);
    color:var(--text-muted);font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(0,0,0,.6);transition:all .2s;
}
.pg-float-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:scale(1.1)}
.fb-belt-tier-opt span { font-size:9px; color:var(--text-dim); }