/* ======= LAB ROOM WORLD ======= */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--wall);
  transition: background var(--transition);
}

/* Back wall */
.room-back-wall {
  position: absolute;
  inset: 0 0 30% 0;
  background: var(--wall);
  transition: background var(--transition);
}

/* Floor */
.room-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: repeating-linear-gradient(
    90deg,
    var(--floor-tile-1) 0px,
    var(--floor-tile-1) 79px,
    var(--floor-tile-2) 79px,
    var(--floor-tile-2) 80px
  );
  box-shadow: inset 0 8px 20px rgba(0,0,0,0.1);
  transition: background var(--transition);
}

/* Floor perspective line */
.room-floor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
}

/* ===== WINDOW ===== */
.window {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 200px;
  height: 160px;
  border: 8px solid var(--window-frame);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--desk-color), inset 0 0 0 3px rgba(0,0,0,0.2);
  z-index: 2;
  transition: border-color var(--transition);
}

.window-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  transition: background var(--transition);
}

/* Sun */
.window-sky::before {
  content: '';
  position: absolute;
  top: 18px; right: 30px;
  width: 36px; height: 36px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255,215,0,0.4);
  transition: opacity var(--transition);
}

[data-theme="dark"] .window-sky::before {
  background: #c0c0e0;
  box-shadow: 0 0 15px #c0c0e0, 0 0 30px rgba(192,192,224,0.3);
  right: 20px;
  top: 15px;
  width: 28px; height: 28px;
}

/* Stars */
.window-sky::after {
  content: '✦ ✧ ✦ ✧ ✦';
  position: absolute;
  top: 8px; left: 5px;
  font-size: 8px;
  color: rgba(255,255,255,0);
  letter-spacing: 8px;
  transition: color 0.5s;
}

[data-theme="dark"] .window-sky::after {
  color: rgba(255,255,255,0.8);
  animation: twinkle 2s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Cloud 1 */
.cloud-1 {
  position: absolute;
  top: 30px; left: -60px;
  animation: cloudMove 18s linear infinite;
}
.cloud-1::before, .cloud-1::after,
.cloud-2::before, .cloud-2::after {
  content: '';
  position: absolute;
  background: var(--cloud);
  border-radius: 50%;
  transition: background var(--transition);
}
.cloud-1 { width: 60px; height: 20px; background: var(--cloud); border-radius: 20px; }
.cloud-1::before { width: 25px; height: 25px; top: -12px; left: 8px; }
.cloud-1::after  { width: 18px; height: 18px; top: -8px; left: 28px; }
.cloud-2 {
  position: absolute;
  top: 55px; left: -40px;
  width: 40px; height: 14px;
  background: var(--cloud);
  border-radius: 14px;
  animation: cloudMove 25s linear infinite 8s;
}
.cloud-2::before { width: 18px; height: 18px; top: -8px; left: 6px; }
.cloud-2::after  { width: 13px; height: 13px; top: -5px; left: 20px; }

@keyframes cloudMove {
  from { transform: translateX(0); }
  to   { transform: translateX(280px); }
}

[data-theme="dark"] .cloud-1,
[data-theme="dark"] .cloud-2 { opacity: 0.05; }

/* Crossbars */
.window-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.window-cross::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 8px;
  background: var(--window-frame);
  transform: translateY(-50%);
}
.window-cross::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 8px;
  background: var(--window-frame);
  transform: translateX(-50%);
}

/* ===== BOOKSHELF ===== */
.bookshelf {
  position: absolute;
  top: 12%;
  right: 4%;
  width: 130px;
  z-index: 3;
}

.shelf-board {
  width: 100%;
  height: 10px;
  background: var(--shelf-color);
  border-radius: 2px;
  margin-bottom: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.shelf-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 4px 6px 0;
  height: 50px;
}

.book {
  border-radius: 2px 4px 4px 2px;
  flex-shrink: 0;
  position: relative;
  box-shadow: 1px 0 3px rgba(0,0,0,0.3);
  animation: bookBreath 3s ease-in-out infinite;
}
.book:nth-child(1) { width: 14px; height: 40px; background: #e74c3c; animation-delay: 0s; }
.book:nth-child(2) { width: 12px; height: 35px; background: #3498db; animation-delay: 0.3s; }
.book:nth-child(3) { width: 16px; height: 42px; background: #2ecc71; animation-delay: 0.6s; }
.book:nth-child(4) { width: 10px; height: 38px; background: #f39c12; animation-delay: 0.9s; }
.book:nth-child(5) { width: 14px; height: 36px; background: #9b59b6; animation-delay: 1.2s; }
.book:nth-child(6) { width: 12px; height: 44px; background: #1abc9c; animation-delay: 1.5s; }
.book:nth-child(7) { width: 15px; height: 38px; background: #e67e22; animation-delay: 1.8s; }

@keyframes bookBreath {
  0%,100% { transform: scaleY(1); }
  50% { transform: scaleY(1.015); }
}

/* ===== DESK + DUAL SCREEN ===== */
.desk-area {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.dual-screens {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  justify-content: center;
}

/* Main large monitor */
.main-monitor-wrap { display: flex; flex-direction: column; align-items: center; }

.monitor-screen {
  width: 180px; height: 114px;
  background: #06060f;
  border: 4px solid #444;
  border-radius: 6px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px var(--screen-glow), inset 0 0 12px rgba(0,150,255,0.08);
}
.main-screen {
  width: 180px; height: 114px;
}

/* DOM-based monitor text lines */
.monitor-line {
  position: absolute;
  left: 8px; right: 8px;
  font-family: 'Courier New', monospace;
  font-size: 8.5px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
  transition: width 0.6s ease, opacity 0.3s ease;
}

.monitor-stand {
  width: 10px; height: 38px;
  background: linear-gradient(90deg, #444, #666, #444);
  margin: 0 auto;
}
.monitor-base {
  width: 54px; height: 8px;
  background: #444;
  border-radius: 4px;
  margin: 0 auto;
}

/* Screen graph */
.screen-graph {
  position: absolute;
  bottom: 6px; left: 6px; right: 6px;
  height: 36px;
  overflow: hidden;
  border-top: 1px solid rgba(0,255,136,0.15);
}
.screen-graph::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 200%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 35'%3E%3Cpolyline points='0,30 10,25 20,28 30,15 40,18 50,8 60,12 70,5 80,9 90,3 100,6 110,2 120,4 130,1 140,3' fill='none' stroke='%2300ff88' stroke-width='1.5'/%3E%3Cpolyline points='0,30 10,25 20,28 30,15 40,18 50,8 60,12 70,5 80,9 90,3 100,6 110,2 120,4 130,1 140,3 140,35 0,35' fill='rgba(0,255,136,0.06)' stroke='none'/%3E%3C/svg%3E") repeat-x;
  animation: scrollGraph 4s linear infinite;
}
@keyframes scrollGraph { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== SIDE LAPTOP ===== */
.side-laptop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
}
.laptop-lid {
  width: 110px; height: 72px;
  background: #111;
  border: 3px solid #333;
  border-radius: 5px 5px 2px 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(160,120,255,0.25);
}
.laptop-inner-screen {
  position: absolute;
  inset: 4px;
  background: #06060f;
  border-radius: 3px;
  overflow: hidden;
}
.laptop-hinge {
  width: 60px; height: 4px;
  background: #333;
  border-radius: 0 0 3px 3px;
}
.laptop-body {
  width: 120px; height: 18px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 2px 2px 4px 4px;
  position: relative;
  border: 1px solid #333;
}
.laptop-keyboard {
  position: absolute;
  top: 3px; left: 8px; right: 8px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #333 0, #333 4px, #222 4px, #222 8px);
  border-radius: 2px;
}
.laptop-trackpad {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 6px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 2px;
}

/* ===== DESK ===== */
.desk {
  width: 320px; height: 20px;
  background: linear-gradient(180deg, var(--desk-top), var(--desk-color));
  border-radius: 3px 3px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  margin-top: 2px;
  position: relative;
}
.desk::before {
  content: '';
  position: absolute;
  bottom: 100%; left: 20px;
  width: 60px; height: 10px;
  background: #333;
  border-radius: 3px;
  margin-bottom: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ===== SERVER STATION (replaces test tubes) ===== */
.server-station {
  position: absolute;
  bottom: 28%;
  left: 20%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 5px;
}

/* Rack enclosure — contains all 1U units in a clean column */
.rack-enclosure {
  width: 118px;
  background: linear-gradient(180deg, #222, #111);
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  padding: 4px;
  box-shadow: 3px 4px 14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rack-top-bar, .rack-bottom-bar {
  height: 5px;
  background: linear-gradient(90deg, #444, #555, #444);
  border-radius: 2px;
  border: 1px solid #555;
}
.rack-label-strip {
  font-family: monospace;
  font-size: 5.5px;
  color: #555;
  letter-spacing: 2px;
  text-align: center;
}

.server-1u {
  width: 100%; height: 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #252525, #111);
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.server-1u-2 { background: linear-gradient(180deg, #1e1e1e, #0e0e0e); }
.server-drive-bay {
  width: 18px; height: 12px;
  background: linear-gradient(180deg, #333, #1a1a1a);
  border: 1px solid #444;
  border-radius: 1px;
  position: relative;
}
/* Drive bay slot line */
.server-drive-bay::after {
  content: '';
  position: absolute;
  top: 50%; left: 2px; right: 2px;
  height: 1px;
  background: #555;
}
.server-status-lights {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.srv-led {
  width: 4px; height: 4px;
  border-radius: 50%;
}
.srv-led-green  { background: #00e676; box-shadow: 0 0 4px #00e676; animation: ledBlink 2s ease-in-out infinite; }
.srv-led-blue   { background: #00aaff; box-shadow: 0 0 4px #00aaff; animation: ledBlink 3s ease-in-out infinite 0.5s; }
.srv-led-orange { background: #ff9800; box-shadow: 0 0 4px #ff9800; animation: ledBlink 1.5s ease-in-out infinite 1s; }
@keyframes ledBlink {
  0%,85%,100% { opacity: 1; }
  90%          { opacity: 0.2; }
}
.server-power-btn {
  width: 6px; height: 6px;
  background: #333;
  border-radius: 50%;
  border: 1px solid #555;
  margin-left: 2px;
}
.server-port-row {
  display: flex;
  gap: 3px;
  margin-left: 4px;
}
.srv-port {
  width: 7px; height: 5px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 1px;
}
/* NAS unit — sits beside rack, aligned to bottom */
.nas-unit {
  width: 52px; height: 70px;
  background: linear-gradient(135deg, #1e1e1e, #141414);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.nas-label {
  font-family: monospace;
  font-size: 6px;
  color: #555;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 2px;
}
.nas-drives {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.nas-drive {
  height: 10px;
  background: linear-gradient(90deg, #2a2a2a, #1a1a1a);
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.nas-drive-led {
  width: 4px; height: 4px;
  background: #333;
  border-radius: 50%;
}
.nas-drive-led.nas-led-active {
  background: #00e676;
  box-shadow: 0 0 4px #00e676;
  animation: ledBlink 1.8s ease-in-out infinite;
}
.nas-status {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding-top: 2px;
}
.nas-stat-led {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #444;
}
.nas-stat-led.active {
  background: #00aaff;
  box-shadow: 0 0 5px #00aaff;
  animation: ledBlink 2.5s ease-in-out infinite;
}

/* Network switch — inside rack, fills full width */
.network-switch {
  width: 100%; height: 14px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
  border: 1px solid #333;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
}
.sw-port {
  width: 8px; height: 6px;
  background: #222;
  border: 1px solid #3a3a3a;
  border-radius: 1px;
}
.sw-port.active {
  border-color: #00e676;
  box-shadow: 0 0 3px #00e676;
  animation: ledBlink 2s ease-in-out infinite;
}

/* ===== PUNCHING BAG ZONE ===== */
.punch-zone {
  position: absolute;
  bottom: 28%;
  left: 12%;
  z-index: 4;
}

/* Wall mount bar */
.bag-wall-mount {
  position: absolute;
  top: -30px; left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mount-bar {
  width: 40px; height: 8px;
  background: linear-gradient(180deg, #777, #555);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.mount-hook {
  width: 6px; height: 10px;
  background: #888;
  border-radius: 0 0 3px 3px;
  margin: 0 auto;
}

/* Heavy bag */
.punch-bag-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bag-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.chain-link {
  width: 6px; height: 7px;
  border: 2px solid #888;
  border-radius: 3px;
}
.chain-link:nth-child(even) { transform: rotate(90deg); }

.bag-body {
  width: 36px; height: 68px;
  background:
    linear-gradient(160deg, #dd1a1a 0%, #961010 30%, #c01515 55%, #7a0a0a 80%, #9c1212 100%);
  border-radius: 16px 16px 12px 12px;
  position: relative;
  overflow: hidden;
  animation: bagSwing 2.5s ease-in-out infinite;
  transform-origin: top center;
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.6),
    inset -4px 0 8px rgba(0,0,0,0.4),
    inset 3px 0 6px rgba(255,255,255,0.06);
}
.bag-shine {
  position: absolute;
  top: 8px; left: 6px;
  width: 7px; height: 26px;
  background: rgba(255,255,255,0.14);
  border-radius: 3px;
  transform: rotate(-8deg);
}
.bag-tape {
  position: absolute;
  left: -2px; right: -2px;
  height: 5px;
  background: #0a0a0a;
  opacity: 0.55;
}
.bag-tape:nth-child(1) { top: 14px; }
.bag-tape:nth-child(2) { top: 32px; }
.bag-tape:nth-child(3) { top: 50px; }
/* Impact wear marks */
.bag-body::before {
  content: '';
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 14px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
}
.bag-bottom-cap {
  width: 18px; height: 12px;
  background: linear-gradient(180deg, #6a0a0a, #3a0404);
  border-radius: 0 0 9px 9px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
@keyframes bagSwing {
  0%   { transform: rotate(-4deg); }
  30%  { transform: rotate(4deg); }
  55%  { transform: rotate(-3deg); }
  80%  { transform: rotate(3.5deg); }
  100% { transform: rotate(-4deg); }
}

/* Speed bag */
.speed-bag-pole {
  position: absolute;
  top: -24px; right: -38px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.speed-bag-platform {
  width: 28px; height: 8px;
  background: linear-gradient(180deg, #888, #555);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.speed-bag-swivel {
  width: 4px; height: 6px;
  background: #888;
  border-radius: 2px;
}
.speed-bag {
  width: 16px; height: 22px;
  background: radial-gradient(circle at 35% 30%, #ff7755, #cc3311 60%, #881100);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5), inset 2px 0 4px rgba(255,255,255,0.08);
  animation: speedBagBounce 0.35s ease-in-out infinite alternate;
}
@keyframes speedBagBounce {
  from { transform: rotate(-8deg) scaleX(1); }
  to   { transform: rotate(8deg) scaleX(0.92); }
}

/* Training mat */
.training-mat {
  position: absolute;
  bottom: -4px; left: -16px;
  width: 90px; height: 8px;
  background: repeating-linear-gradient(90deg, #2a2a50 0, #2a2a50 8px, #1e1e3a 8px, #1e1e3a 16px);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  overflow: hidden;
}
.mat-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.mat-line:nth-child(1) { left: 0; right: 0; }
.mat-line:nth-child(2) { left: 45px; width: 1px; height: 100%; top: 0; transform: none; }

/* Boxing gloves */
.glove-pair {
  position: absolute;
  bottom: -12px; left: -8px;
  display: flex;
  gap: 4px;
}
.boxing-glove {
  width: 24px; height: 28px;
  position: relative;
}
.boxing-glove::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 35% 25%, #ff5555, #bb0000 55%, #780000);
  border-radius: 9px 9px 5px 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5), inset 1px 0 3px rgba(255,255,255,0.06);
}
.boxing-glove::after {
  content: '';
  position: absolute;
  top: 5px; left: 3px; right: 3px;
  height: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.glove-thumb {
  position: absolute;
  top: 5px; right: -5px;
  width: 10px; height: 13px;
  background: radial-gradient(circle at 40% 30%, #ff4444, #990000);
  border-radius: 5px 5px 4px 3px;
  z-index: 1;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.glove-strap {
  position: absolute;
  bottom: 0; left: 2px; right: 2px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 0 0 3px 3px;
}
.glove-l { transform: rotate(12deg) translateY(2px); }
.glove-r { transform: rotate(-14deg) scaleX(-1) translateY(4px); }
.desk-mug {
  position: absolute;
  bottom: 100%; right: 25px;
  width: 18px; height: 20px;
  background: #cc3300;
  border-radius: 3px 3px 5px 5px;
  border: 2px solid #aa2200;
}
.desk-mug::before {
  content: '';
  position: absolute;
  top: 3px; right: -8px;
  width: 8px; height: 12px;
  border: 3px solid #aa2200;
  border-left: none;
  border-radius: 0 5px 5px 0;
}
/* Steam */
.desk-mug::after {
  content: '';
  position: absolute;
  bottom: 100%; left: 3px;
  width: 2px; height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  animation: steam 1.5s ease-in-out infinite;
}
@keyframes steam {
  0%   { transform: translateY(0) scaleX(1); opacity: 0.6; }
  50%  { transform: translateY(-8px) scaleX(1.5); opacity: 0.3; }
  100% { transform: translateY(-14px) scaleX(0.5); opacity: 0; }
}

/* Desk legs */
.desk-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.desk-leg {
  width: 8px;
  height: 50px;
  background: var(--desk-color);
  border-radius: 0 0 3px 3px;
}

/* ===== TEST TUBES ===== */
.test-tubes {
  position: absolute;
  bottom: 28%;
  left: 22%;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.tube {
  width: 16px;
  height: 50px;
  border-radius: 0 0 8px 8px;
  border: 2px solid rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.tube::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  animation: tubeBubble 2s ease-in-out infinite;
}
.tube:nth-child(1) { background: rgba(0,200,100,0.4); height: 55px; }
.tube:nth-child(1)::before { height: 30px; background: rgba(0,255,100,0.6); animation-delay: 0s; }
.tube:nth-child(2) { background: rgba(200,50,200,0.4); height: 45px; }
.tube:nth-child(2)::before { height: 22px; background: rgba(220,50,220,0.6); animation-delay: 0.5s; }
.tube:nth-child(3) { background: rgba(50,100,255,0.4); height: 60px; }
.tube:nth-child(3)::before { height: 35px; background: rgba(50,150,255,0.6); animation-delay: 1s; }

@keyframes tubeBubble {
  0%,100% { height: var(--h, 30px); }
  50% { height: calc(var(--h, 30px) + 5px); }
}

/* Tube rack */
.tube-rack {
  position: absolute;
  bottom: -2px; left: -5px; right: -5px;
  height: 8px;
  background: #888;
  border-radius: 2px;
}

/* ===== CEILING LIGHTS ===== */
.ceiling-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--desk-color);
  z-index: 4;
}
.ceiling-lights::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg,
    rgba(255,255,200,0.15) 0%,
    transparent 100%);
  pointer-events: none;
}

[data-theme="dark"] .ceiling-lights::after {
  background: linear-gradient(180deg,
    rgba(255,200,0,0.06) 0%,
    transparent 100%);
}

/* Neon light strip */
.neon-strip {
  display: none;
  position: absolute;
  top: 8px; left: 0; right: 0;
  height: 3px;
  border-radius: 2px;
}
[data-theme="dark"] .neon-strip {
  display: block;
  background: var(--neon-blue);
  box-shadow: 0 0 10px var(--neon-blue), 0 0 25px var(--neon-blue), 0 0 50px rgba(var(--accent-rgb),0.3);
  animation: neonFlicker 5s ease-in-out infinite;
}
@keyframes neonFlicker {
  0%,95%,100% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
  98% { opacity: 0.4; }
  99% { opacity: 0.9; }
}

/* ===== POTTED CACTUS ===== */
.cactus {
  position: absolute;
  bottom: 28.5%;
  right: 20%;
  z-index: 3;
}
.cactus-pot {
  width: 30px; height: 25px;
  background: #c0703a;
  border-radius: 0 0 8px 8px;
  position: relative;
  margin: 0 auto;
}
.cactus-pot::before {
  content: '';
  position: absolute;
  top: -4px; left: -3px; right: -3px;
  height: 6px;
  background: #a86030;
  border-radius: 2px;
}
.cactus-body {
  width: 12px; height: 35px;
  background: #3a8c40;
  border-radius: 6px 6px 0 0;
  margin: 0 auto;
  position: relative;
}
.cactus-arm-left {
  position: absolute;
  left: -14px; top: 10px;
  width: 14px; height: 8px;
  background: #3a8c40;
  border-radius: 6px 0 0 6px;
}
.cactus-arm-left::before {
  content: '';
  position: absolute;
  top: -12px; right: 0;
  width: 8px; height: 14px;
  background: #3a8c40;
  border-radius: 4px 4px 0 0;
}
.cactus-arm-right {
  position: absolute;
  right: -14px; top: 16px;
  width: 14px; height: 8px;
  background: #3a8c40;
  border-radius: 0 6px 6px 0;
}
.cactus-arm-right::before {
  content: '';
  position: absolute;
  top: -10px; left: 0;
  width: 8px; height: 12px;
  background: #3a8c40;
  border-radius: 4px 4px 0 0;
}