/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --bg:       #0c0b09;
  --sf1:      #131109;
  --sf2:      #1a1610;
  --sf3:      #232018;
  --border:   #2e2016;
  --border2:  #48301c;
  --accent:   #c44b26;
  --accent-d: #8a2e15;
  --blue:     #4a8878;
  --gold:     #c8951a;
  --danger:   #a02818;
  --text:     #ded0b0;
  --muted:    #7a6848;
  --muted2:   #483828;
  --discord:  #5865f2;
  --sidebar-w: 390px;
  --info-w:   240px;
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:13px; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; }
input  { font-family:inherit; outline:none; }
select { font-family:inherit; background:var(--sf2); color:var(--text); border:1px solid var(--border); }
select option { background:var(--sf2); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ═══════════════════════════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════════════════════════ */
.screen { position:fixed; inset:0; z-index:10; display:none; }
.screen.active { display:flex; }

/* ═══════════════════════════════════════════════════
   SCREEN: AUTH
═══════════════════════════════════════════════════ */
#screen-auth {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}

.auth-bg {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.auth-bg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(196,75,38,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,75,38,.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.auth-bg-glow {
  position:absolute;
  width:600px; height:600px;
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-60%);
  background:radial-gradient(circle, rgba(200,149,26,.07) 0%, transparent 70%);
  animation:glowPulse 6s ease-in-out infinite alternate;
}
@keyframes glowPulse { to { transform:translate(-50%,-60%) scale(1.3); opacity:.6; } }

.auth-card {
  position:relative; z-index:1;
  width:460px;
  animation:cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(24px); } }

.auth-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:40px;
}
.auth-logo-mark {
  width:36px; height:36px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.alm { border-radius:2px; }
.alm:nth-child(1){background:var(--accent)}
.alm:nth-child(2){background:var(--blue)}
.alm:nth-child(3){background:#a98fff}
.alm:nth-child(4){background:var(--blue)}
.alm:nth-child(5){background:var(--accent)}
.alm:nth-child(6){background:var(--gold)}
.alm:nth-child(7){background:#a98fff}
.alm:nth-child(8){background:var(--gold)}
.alm:nth-child(9){background:var(--blue)}
.auth-logo-name {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:22px; letter-spacing:-0.5px;
}
.auth-logo-name span { color:var(--accent); }
.auth-logo-tag {
  font-size:9px; letter-spacing:2px; color:var(--muted);
  text-transform:uppercase; margin-top:2px;
}

.auth-heading {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:38px; line-height:1.05;
  letter-spacing:-1.5px; margin-bottom:12px;
}
.auth-heading em { color:var(--accent); font-style:normal; }
.auth-sub {
  color:var(--muted); line-height:1.7; margin-bottom:36px;
  font-size:12px;
}

/* Discord button */
.btn-discord {
  width:100%;
  background:var(--discord);
  color:#fff;
  padding:15px 24px;
  border-radius:10px;
  font-size:14px; font-weight:700; letter-spacing:.3px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .2s;
  margin-bottom:12px;
}
.btn-discord:hover { background:#6875f5; transform:translateY(-1px); box-shadow:0 6px 24px rgba(88,101,242,.35); }
.btn-discord svg { width:22px; height:22px; }

.btn-ghost {
  width:100%;
  background:transparent;
  color:var(--muted);
  padding:11px 24px;
  border-radius:10px;
  font-size:12px;
  border:1px solid var(--border);
  transition:all .2s;
  margin-bottom:24px;
}
.btn-ghost:hover { color:var(--text); border-color:var(--border2); }

/* Setup accordion */
.setup-toggle {
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:11px; letter-spacing:1px;
  text-transform:uppercase; cursor:pointer;
  background:none; border:none; padding:0; margin-bottom:0;
  transition:color .2s;
}
.setup-toggle:hover { color:var(--text); }
.setup-toggle .arr { transition:transform .2s; }
.setup-toggle.open .arr { transform:rotate(90deg); }

.setup-body {
  display:none; margin-top:16px;
  background:var(--sf1); border:1px solid var(--border); border-radius:10px;
  padding:20px;
}
.setup-body.open { display:block; }

.setup-steps { list-style:none; margin-bottom:16px; }
.setup-steps li {
  display:flex; gap:12px; margin-bottom:10px;
  font-size:11px; color:var(--muted); line-height:1.6;
}
.setup-step-n {
  width:20px; height:20px; border-radius:50%;
  background:var(--sf3); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:10px; color:var(--accent);
  font-weight:700;
}
.setup-steps li span a { color:var(--accent); }
.setup-steps li span code {
  background:var(--sf3); padding:1px 5px; border-radius:3px;
  color:var(--text); font-size:10px;
}

.setup-input-row { display:flex; gap:8px; }
.setup-input {
  flex:1; background:var(--sf2); border:1px solid var(--border);
  border-radius:7px; padding:9px 12px; color:var(--text); font-size:12px;
  transition:border-color .2s;
}
.setup-input:focus { border-color:var(--accent); }
.setup-input::placeholder { color:var(--muted); }
.btn-sm {
  padding:9px 16px; border-radius:7px; font-size:12px; font-weight:700;
  background:var(--accent); color:#000; transition:all .2s;
}
.btn-sm:hover { background:var(--accent-d); }

.setup-note {
  margin-top:12px; font-size:10px; color:var(--muted); line-height:1.6;
  border-top:1px solid var(--border); padding-top:12px;
}
.setup-note strong { color:var(--gold); }

/* ═══════════════════════════════════════════════════
   SCREEN: APP (DROP + 3D)
═══════════════════════════════════════════════════ */
#screen-app {
  flex-direction:column;
}

/* 3D canvas */
#three-canvas {
  position:absolute; inset:0;
  display:block; z-index:0; width:100%; height:100%;
  background: radial-gradient(circle at top left, rgba(223, 151, 61, .04), transparent 20%),
              radial-gradient(circle at bottom right, rgba(125, 153, 164, .08), transparent 20%);
}

/* ─── OVERLAY: drop zone ─── */
#overlay {
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg);
}
.ov-bg { position:absolute; inset:0; overflow:hidden; }
.ov-bg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(196,75,38,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,75,38,.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.ov-content { position:relative; z-index:1; text-align:center; max-width:500px; }

.ov-logo {
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-bottom:36px;
}
.ov-logo-mark {
  width:32px; height:32px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.ov-logo-mark .alm { border-radius:2px; }

.ov-title {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:clamp(28px,4vw,42px);
  letter-spacing:-1px; line-height:1.1; margin-bottom:10px;
}
.ov-title span { color:var(--accent); }
.ov-sub { color:var(--muted); font-size:12px; margin-bottom:40px; line-height:1.8; }

.folder-controls {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:18px;
}
.schematic-list {
  display:grid; gap:10px; text-align:left; max-height:320px;
  overflow:auto; padding:0; margin:0;
}
.schematic-item {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:8px; align-items:center; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
}
.schematic-info { min-width:0; flex:1 1 220px; }
.schematic-name {
  font-size:14px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.schematic-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.schematic-badge {
  font-size:10px; text-transform:uppercase; letter-spacing:.7px;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--muted);
}
.schematic-badge.priority { background:rgba(196,75,38,.14); color:var(--accent); }
.schematic-badge.reserved { background:rgba(58,180,255,.12); color:var(--blue); }
.schematic-badge.done { background:rgba(245,166,35,.16); color:var(--gold); }
.schematic-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.schematic-empty { color:var(--muted); font-size:12px; text-align:center; padding:22px 0; }

/* ─── OVERLAY LAYOUT (content + admin panel side by side) ─── */
#overlay { flex-direction:row !important; align-items:stretch !important; justify-content:center !important; padding:0 40px; gap:32px; }
.ov-content { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 0; }

/* ─── ADMIN OVERLAY PANEL ─── */
#ov-admin-panel {
  display:none;
  flex-direction:column;
  width:360px; flex-shrink:0;
  background:rgba(19,17,9,.97);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  overflow:hidden;
  position:relative; z-index:2;
  pointer-events:auto;
}
#ov-admin-panel.visible { display:flex; }
.oap-head {
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.oap-head-title {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:14px; letter-spacing:-.2px;
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.oap-head-title::before {
  content:''; width:3px; height:16px; border-radius:2px;
  background:var(--accent); display:inline-block; flex-shrink:0;
}
.oap-head-sub { font-size:10px; color:var(--muted); letter-spacing:.3px; }

.oap-tabs {
  display:flex; border-bottom:1px solid var(--border); flex-shrink:0;
}
.oap-tab {
  flex:1; padding:11px 0; font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); background:none;
  border:none; border-bottom:2px solid transparent;
  transition:all .15s; cursor:pointer; font-family:inherit;
  margin-bottom:-1px;
}
.oap-tab:hover { color:var(--text); }
.oap-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.oap-body { flex:1; overflow-y:auto; }
.oap-tab-pane { display:none; }
.oap-tab-pane.active { display:block; }

/* Users tab */
.oap-search {
  padding:12px 14px 0;
}
.oap-search input {
  width:100%; background:var(--sf2); border:1px solid var(--border);
  border-radius:7px; padding:7px 11px; color:var(--text); font-size:11px;
  font-family:inherit; transition:border-color .2s;
}
.oap-search input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(196,75,38,.1); }
.oap-search input::placeholder { color:var(--muted2); }

.oap-user-list { padding:8px 10px; }
.oap-user-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  border:1px solid transparent; margin-bottom:3px;
  transition:all .15s;
}
.oap-user-item:hover { background:var(--sf2); border-color:var(--border); }
.oap-user-item img {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:1px solid rgba(255,255,255,.08);
}
.oap-user-ph {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--sf3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.oap-user-info { flex:1; min-width:0; }
.oap-user-name { font-size:11px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oap-user-id { font-size:9px; color:var(--muted2); margin-top:1px; }
.oap-role-select {
  background:var(--sf2); border:1px solid var(--border);
  color:var(--text); padding:4px 8px; border-radius:6px;
  font-size:10px; font-weight:700; cursor:pointer; flex-shrink:0;
  font-family:inherit; transition:border-color .15s;
}
.oap-role-select:focus { border-color:var(--accent); outline:none; }
.oap-role-select option { background:var(--sf2); color:var(--text); }
.oap-role-none { color:var(--muted); font-style:italic; }
.oap-empty { padding:24px 16px; text-align:center; font-size:11px; color:var(--muted); font-style:italic; }

/* Footer actions */
.oap-footer {
  padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex; gap:8px; flex-shrink:0;
}
.oap-btn {
  flex:1; padding:9px 0; border-radius:7px; font-size:10px; font-weight:700;
  letter-spacing:.3px; font-family:inherit; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.oap-btn-save {
  background:var(--accent); color:#000; border:none;
}
.oap-btn-save:hover { background:#d85a30; }
.oap-btn-import {
  background:var(--sf2); border:1px solid var(--border); color:var(--muted);
}
.oap-btn-import:hover { border-color:var(--border2); color:var(--text); }
.oap-save-status { font-size:9px; color:var(--blue); text-align:center; padding:4px 0 0; letter-spacing:.3px; min-height:16px; flex-shrink:0; }

.btn-upload {
  background:var(--accent); color:#000;
  padding:10px 24px; border-radius:7px;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:7px;
  transition:all .2s;
}
.btn-upload:hover { background:#e05e30; transform:translateY(-1px); box-shadow:0 4px 18px rgba(196,75,38,.35); }

/* ─── HUD TOP BAR ─── */
#hud {
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:none;
  height:52px;
  background:rgba(10,12,18,.92);
  border-bottom:1px solid rgba(207,166,79,.2);
  backdrop-filter:blur(14px);
  padding:0 16px;
  align-items:center; gap:12px;
  pointer-events:auto;
}

.hud-logo {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:15px; letter-spacing:-.3px;
  display:flex; align-items:center; gap:7px;
  margin-right:6px; flex-shrink:0;
}
.hud-logo-mark {
  width:20px; height:20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
}
.hud-logo-mark .alm { border-radius:1px; }
.hud-logo-name { color:var(--text); }
.hud-logo-name span { color:var(--accent); }

.hud-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }

.stat {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0; padding:0 8px;
}
.stat-label { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:1px; }
.stat-val { font-size:12px; font-weight:700; color:var(--text); }
.stat-val.green { color:var(--accent); }

.hud-spacer { flex:1; }
.hud-role {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.hud-role-label { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.hud-role select {
  background:var(--sf2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); padding:4px 8px; font-size:11px; cursor:pointer;
}

.hud-btn {
  padding:5px 10px; border-radius:6px;
  background:var(--sf2); border:1px solid var(--border);
  color:var(--muted); font-size:11px; font-weight:500;
  display:inline-flex; align-items:center; gap:5px;
  transition:all .15s; flex-shrink:0;
}
.hud-btn:hover { border-color:var(--border2); color:var(--text); }
.hud-btn.on { border-color:var(--accent); color:var(--accent); background:rgba(196,75,38,.08); }
.hud-btn.danger:hover { border-color:var(--danger); color:var(--danger); }

/* ─── CANVAS FRAME ─── */
.canvas-frame {
  position:absolute; pointer-events:none; z-index:3;
  inset:0;
}
.canvas-frame::before,
.canvas-frame::after {
  content:''; position:absolute;
  width:24px; height:24px;
  border-color:rgba(200,149,26,.35);
  border-style:solid;
}
.canvas-frame::before {
  bottom:16px; left:16px;
  border-width:0 0 2px 2px;
  border-radius:0 0 0 4px;
}
.canvas-frame::after {
  top:68px; left:16px;
  border-width:2px 0 0 2px;
  border-radius:4px 0 0 0;
}

/* User chip */
.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:4px 10px 4px 4px;
  background:var(--sf2); border:1px solid var(--border);
  border-radius:24px; flex-shrink:0;
}
.user-chip img {
  width:28px; height:28px; border-radius:50%;
  object-fit:cover;
}
.role-chip {
  display:flex; align-items:center; gap:8px;
  padding:4px 10px;
  background:var(--sf2); border:1px solid var(--border);
  border-radius:24px; flex-shrink:0;
}
.role-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.role-chip select {
  background:transparent; border:1px solid var(--border);
  color:var(--text); padding:5px 8px; border-radius:6px;
  font-size:11px; min-width:96px;
}
.user-chip .uname {
  font-size:11px; font-weight:700; color:var(--text);
}
.user-chip .utag {
  font-size:9px; color:var(--muted);
}
.user-chip-btn {
  background:none; border:none; color:var(--muted);
  font-size:10px; padding:3px 6px; border-radius:4px;
  transition:all .15s; margin-left:4px;
}
.user-chip-btn:hover { background:rgba(255,61,85,.12); color:var(--danger); }

/* ─── SIDEBAR ─── */
#sidebar {
  flex:1; min-height:0;
  display:flex;
  flex-direction:column;
  background:rgba(17,27,40,.96);
  border-left:1px solid rgba(207,166,79,.18);
  z-index:20;
}

#infoPanel .info-head {
  font-family:'Epilogue',sans-serif;
  font-weight:800; font-size:12px; letter-spacing:.35px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
#infoPanel .info-name {
  font-size:18px; font-weight:800; line-height:1.2;
  margin-bottom:12px; color:#f8f0e7;
}
#infoPanel .info-entry {
  display:flex; flex-direction:column; gap:5px;
  margin-bottom:16px;
  font-size:11px; color:var(--muted);
}
#infoPanel .info-entry strong {
  font-size:14px; color:var(--text);
  word-break:break-word;
}
#infoPanel .info-note {
  font-size:10px; line-height:1.6; color:var(--muted2);
  margin-top:18px; border-top:1px solid rgba(207,166,79,.1); padding-top:14px;
}

.sb-head {
  padding:0 14px;
  height:52px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; gap:10px;
}
.sb-head-title {
  font-family:'Epilogue',sans-serif;
  font-weight:800; font-size:13px; letter-spacing:-.2px;
  display:flex; align-items:center; gap:7px;
}
.sb-head-title::before {
  content:''; width:3px; height:14px; border-radius:2px;
  background:var(--accent); display:inline-block;
}
.sb-head-count {
  font-size:10px; color:var(--muted); font-weight:600;
  background:var(--sf2); border:1px solid var(--border);
  padding:2px 8px; border-radius:20px;
}

.sb-search {
  padding:10px 10px 0;
  flex-shrink:0; position:relative;
}
.sb-search input {
  width:100%; background:var(--sf2); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; color:var(--text); font-size:11px;
  transition:border-color .2s, box-shadow .2s;
}
.sb-search input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(196,75,38,.12);
  outline:none;
}
.sb-search input::placeholder { color:var(--muted2); }

.sb-controls {
  padding:8px 10px 6px;
  display:flex; gap:6px; flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.sb-ctrl {
  flex:1; padding:6px 0; border-radius:6px;
  background:var(--sf2); border:1px solid var(--border);
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.2px;
  transition:all .15s;
}
.sb-ctrl:hover { color:var(--text); border-color:var(--border2); background:var(--sf3); }

.sb-list { flex:1; overflow-y:auto; padding:6px 8px; }

.mat-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 10px; border-radius:9px; cursor:pointer;
  transition:background .15s, border-color .15s; margin-bottom:3px;
  border:1px solid transparent;
  user-select:none; flex-wrap:wrap;
}
.mat-item:hover { background:var(--sf2); border-color:rgba(207,166,79,.15); }
.mat-item.selected { background:rgba(196,75,38,.06); border-color:rgba(196,75,38,.2); }
.mat-item.hidden-block { opacity:.35; }
.mat-item.hidden-block .mat-name { text-decoration:line-through; }

.mat-swatch {
  width:18px; height:18px; border-radius:5px; flex-shrink:0; margin-top:1px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.mat-info { flex:1; overflow:hidden; min-width:0; }
.mat-name {
  font-size:11px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mat-count { font-size:10px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.mat-units {
  font-size:9px; color:var(--muted2); margin-top:3px;
  letter-spacing:.2px; display:none;
}
.mat-item:hover .mat-units { display:block; }
.mat-eye {
  font-size:13px; opacity:0; transition:opacity .12s; flex-shrink:0; margin-top:2px;
}
.mat-item:hover .mat-eye { opacity:.7; }
.mat-item.hidden-block .mat-eye { opacity:1; color:var(--danger); }

.sb-footer {
  padding:10px 12px;
  border-top:1px solid var(--border);
  flex-shrink:0; display:flex; flex-direction:column; gap:6px;
}
.btn-export {
  width:100%; padding:10px 12px; border-radius:8px;
  background:var(--sf2); border:1px solid var(--border);
  color:var(--muted); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .2s; letter-spacing:.2px;
}
.btn-export:hover { border-color:var(--accent); color:var(--accent); background:rgba(196,75,38,.06); }
.btn-export.join { border-color:rgba(196,75,38,.4); color:var(--accent); }
.btn-export.join:hover { background:rgba(196,75,38,.12); }
.btn-export.leave { border-color:rgba(160,40,24,.25); color:var(--muted); }
.btn-export.leave:hover { border-color:var(--danger); color:var(--danger); background:rgba(160,40,24,.08); }

/* ─── WS DOT ─── */
.ws-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  transition:background .4s, box-shadow .4s;
}
.ws-dot-connected { background:#4caf50; box-shadow:0 0 6px rgba(76,175,80,.55); }
.ws-dot-reconnecting { background:var(--gold); box-shadow:0 0 6px rgba(245,166,35,.5); animation:ws-pulse .7s ease-in-out infinite alternate; }
.ws-dot-off { background:rgba(255,255,255,.18); }
@keyframes ws-pulse { from { opacity:.3; } to { opacity:1; } }

/* ─── SCHEMATIC FILTER BAR ─── */
.schematic-filter {
  width:100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;
}
.schematic-filter input {
  flex:1 1 130px; min-width:100px;
  background:var(--sf1); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:6px 10px; font-size:11px; outline:none; font-family:inherit;
}
.schematic-filter input:focus { border-color:var(--accent); }
.sch-sort-btns { display:flex; gap:4px; flex-wrap:wrap; }

/* opacity slider */
.sb-opacity {
  padding:6px 10px 0; flex-shrink:0;
}
.sb-opacity-row {
  display:flex; align-items:center; gap:8px;
}
.sb-opacity-row label { font-size:9px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; width:44px; flex-shrink:0; }
input[type=range] {
  flex:1; -webkit-appearance:none; height:2px;
  background:var(--border2); border-radius:2px; outline:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--accent); cursor:pointer;
  box-shadow:0 0 6px rgba(196,75,38,.5);
}
.sb-opacity-val { font-size:10px; color:var(--text); width:28px; text-align:right; flex-shrink:0; }
.slice-active label { color:var(--accent); }

/* ─── PROGRESS ─── */
#progress {
  position:absolute; inset:0; z-index:30;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg);
}
.prog-pre { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.prog-title { font-family:'Epilogue',sans-serif; font-weight:800; font-size:24px; letter-spacing:-0.5px; margin-bottom:28px; }
.prog-track { width:280px; height:2px; background:var(--border2); border-radius:2px; overflow:hidden; }
.prog-bar { height:100%; width:0%; background:var(--accent); transition:width .35s ease; box-shadow:0 0 12px var(--accent); }
.prog-sub { margin-top:14px; font-size:10px; color:var(--muted); }

/* ─── HINT ─── */
#hint {
  position:absolute; bottom:12px; left:50%;
  transform:translateX(-50%);
  z-index:15; display:none;
  font-size:10px; color:var(--muted2); pointer-events:none;
  letter-spacing:.5px;
}

/* ─── TOAST ─── */
#toast {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%);
  z-index:100; display:none;
  padding:10px 18px; border-radius:8px;
  font-size:11px; font-weight:700;
  animation:toastIn .25s ease;
  max-width:420px; text-align:center;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} }
#toast.err { background:rgba(255,61,85,.15); border:1px solid var(--danger); color:var(--danger); }
#toast.ok  { background:rgba(196,75,38,.12); border:1px solid var(--accent-d); color:var(--accent); }

/* ─── APP MAIN LAYOUT ─── */
#app-main {
  flex:1; display:flex; flex-direction:row;
  min-height:0; overflow:hidden; position:relative;
  pointer-events:none;
}

#canvas-area {
  flex:1; position:relative; overflow:hidden;
  pointer-events:none; min-width:0;
}
#canvas-area > #three-canvas { pointer-events:auto; }
#canvas-area > #hud,
#canvas-area > #hint { pointer-events:auto; }

/* Panels hidden until file is loaded */
#right-panel, #infoPanel { visibility:hidden; }
#app-main.visible #right-panel,
#app-main.visible #infoPanel { visibility:visible; }

/* ─── RIGHT PANEL ─── */
#right-panel {
  width:var(--sidebar-w);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  pointer-events:auto;
}

/* ─── CONTRIBUTORS BAR (inside right-panel) ─── */
#contributors-bar {
  flex-shrink:0;
  background:rgba(10,12,18,.97);
  border-top:1px solid rgba(207,166,79,.2);
  padding:10px 14px;
  display:flex; gap:10px;
}

.contrib-box {
  flex:1; display:flex; flex-direction:column; gap:7px;
  background:rgba(255,255,255,.02); border-radius:8px;
  padding:8px 10px; border:1px solid rgba(207,166,79,.08);
}
.contrib-title {
  font-size:8px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-weight:700; flex-shrink:0;
}
.contrib-names { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.contrib-name {
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600; color:var(--text);
  background:var(--sf2); border:1px solid var(--border);
  padding:3px 9px 3px 4px; border-radius:999px;
  transition:border-color .15s;
}
.contrib-name:hover { border-color:var(--border2); }
.contrib-name img {
  width:18px; height:18px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.1);
}
.contrib-empty { font-size:10px; color:var(--muted2); font-style:italic; }

/* ─── MATERIAL RESERVATION ─── */
.mat-item.mat-reserved {
  background:rgba(196,75,38,.08);
  border-color:rgba(196,75,38,.3);
}
.mat-item.mat-done {
  background:rgba(74,136,120,.08);
  border-color:rgba(74,136,120,.3);
}
.mat-reserver {
  display:flex; align-items:center; gap:6px;
  width:100%; margin-top:6px; flex-basis:100%;
  background:rgba(0,0,0,.2); border-radius:6px; padding:5px 8px;
}
.mat-reserver img {
  width:20px; height:20px; border-radius:50%; object-fit:cover;
  background:var(--sf3); flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);
}
.mat-reserver-ph {
  width:20px; height:20px; border-radius:50%;
  background:var(--sf3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.mat-reserver-name {
  font-size:10px; font-weight:600; color:var(--text);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mat-done-icon {
  font-size:11px; background:rgba(74,136,120,.25);
  color:var(--blue); border-radius:50%;
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mat-action-strip {
  display:flex; gap:5px; width:100%; margin-top:5px; flex-basis:100%;
}
.mat-act {
  flex:1; font-size:10px; font-weight:700; padding:5px 0;
  border-radius:6px; cursor:pointer; text-align:center;
  border:1px solid var(--border); background:var(--sf2); color:var(--muted);
  font-family:inherit; transition:all .15s;
}
.mat-act:hover { color:var(--text); border-color:var(--border2); background:var(--sf3); }
.mat-act.reserve { border-color:rgba(196,75,38,.5); color:var(--accent); background:rgba(196,75,38,.07); }
.mat-act.reserve:hover { background:rgba(196,75,38,.14); border-color:var(--accent); }
.mat-act.validate { border-color:rgba(74,136,120,.5); color:var(--blue); background:rgba(74,136,120,.07); }
.mat-act.validate:hover { background:rgba(74,136,120,.14); border-color:var(--blue); }
.mat-act.free { border-color:rgba(176,48,32,.5); color:var(--danger); background:rgba(176,48,32,.07); }
.mat-act.free:hover { background:rgba(176,48,32,.14); border-color:var(--danger); }

/* ─── ADMIN PANEL ─── */
#infoPanel {
  width:var(--info-w);
  flex-shrink:0;
  display:none;
  flex-direction:column;
  background:rgba(18,28,42,.98);
  border-left:1px solid rgba(207,166,79,.16);
  color:var(--text);
  overflow-y:auto;
  z-index:20;
  pointer-events:auto;
}
.admin-panel-head {
  padding:16px 14px 13px;
  font-family:'Epilogue',sans-serif;
  font-weight:800; font-size:10px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid var(--border);
  flex-shrink:0; display:flex; align-items:center; gap:7px;
}
.admin-panel-head::before {
  content:''; width:3px; height:12px; border-radius:2px;
  background:var(--gold); opacity:.6; display:inline-block;
}
.admin-member {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid rgba(207,166,79,.06);
  transition:background .15s;
}
.admin-member:hover { background:rgba(255,255,255,.02); }
.admin-member img {
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  background:var(--sf3); flex-shrink:0;
  border:2px solid rgba(207,166,79,.2);
}
.admin-member-ph {
  width:32px; height:32px; border-radius:50%;
  background:var(--sf3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.admin-member-info { flex:1; min-width:0; }
.admin-member-name { font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-member-role {
  display:inline-block; margin-top:3px;
  font-size:8px; font-weight:700; color:var(--sf1);
  text-transform:uppercase; letter-spacing:.6px;
  padding:1px 6px; border-radius:4px;
}
.admin-member-role.role-admin { background:var(--accent); }
.admin-member-role.role-builder { background:var(--blue); }
.admin-member-role.role-farmer { background:var(--gold); }
.admin-member-count {
  font-size:9px; color:var(--muted); margin-top:4px;
  display:flex; align-items:center; gap:5px;
}
.admin-member-prog {
  flex:1; height:3px; background:var(--border2); border-radius:2px; overflow:hidden;
}
.admin-member-prog-fill {
  height:100%; background:var(--blue); border-radius:2px; transition:width .3s;
}
.admin-empty {
  padding:24px 14px; font-size:11px; color:var(--muted); text-align:center;
  font-style:italic;
}
/* ─── SCREEN: NO ROLE ─── */
#screen-norole {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
.norole-card {
  text-align:center; max-width:420px;
  animation:cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
.norole-icon {
  font-size:48px; margin-bottom:24px; opacity:.7;
}
.norole-title {
  font-family:'Epilogue',sans-serif;
  font-weight:900; font-size:28px; letter-spacing:-1px;
  margin-bottom:12px; color:var(--text);
}
.norole-title span { color:var(--accent); }
.norole-sub {
  color:var(--muted); font-size:12px; line-height:1.8;
  margin-bottom:32px;
}
.norole-tag {
  display:inline-block;
  background:rgba(196,75,38,.12); border:1px solid rgba(196,75,38,.3);
  color:var(--accent); font-size:13px; font-weight:700;
  padding:10px 24px; border-radius:8px; margin-bottom:24px;
  letter-spacing:.5px;
}
.norole-user {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--sf1); border:1px solid var(--border); border-radius:12px;
  padding:12px 20px; margin-bottom:20px;
}
.norole-user img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.norole-user-name { font-size:13px; font-weight:700; color:var(--text); }
.norole-user-tag { font-size:10px; color:var(--muted); margin-top:2px; }
.norole-actions { display:flex; flex-direction:column; gap:8px; }
.norole-retry {
  background:var(--sf2); border:1px solid var(--border); color:var(--muted);
  padding:10px 20px; border-radius:8px; font-size:11px; font-weight:700;
  transition:all .2s; cursor:pointer; font-family:inherit;
}
.norole-retry:hover { border-color:var(--border2); color:var(--text); }

/* ─── ADMIN ROLE MANAGEMENT ─── */
.role-mgmt-head {
  padding:14px 14px 10px;
  font-family:'Epilogue',sans-serif;
  font-weight:800; font-size:10px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--accent);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:7px;
  flex-shrink:0; margin-top:8px;
}
.role-mgmt-head::before {
  content:''; width:3px; height:12px; border-radius:2px;
  background:var(--accent); opacity:.6; display:inline-block;
}
.role-mgmt-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-bottom:1px solid rgba(207,166,79,.05);
}
.role-mgmt-item img { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.role-mgmt-name { flex:1; font-size:10px; font-weight:700; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-mgmt-select {
  background:var(--sf2); border:1px solid var(--border);
  color:var(--text); padding:3px 6px; border-radius:5px;
  font-size:9px; cursor:pointer; flex-shrink:0;
}
.role-mgmt-select option { background:var(--sf2); color:var(--text); }
.role-pending { font-size:9px; color:var(--gold); font-style:italic; }