/* ==========================================================================
   STYLE SHEET CORE CONFIGURATION & THEMING VARIABLES
   ========================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-panel: inset 0 0 26px rgba(0,0,0,0.25), 0 18px 40px rgba(0,0,0,0.45);
  --shadow-soft: 0 8px 20px rgba(0,0,0,0.2);
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #050505;
}

* { box-sizing: border-box; }

body {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: var(--lcd-text);
  transition: background-color .2s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.14) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,0,0.01), rgba(0,0,255,0.02));
  background-size: 100% 4px, 6px 100%;
  z-index: 30;
}

/* ==========================================================================
   GAME CARTRIDGE THEME SCREEN DEPLOYMENTS
   ========================================================================== */
body.theme-pocket {
  --lcd-bg: #e5e8e1;
  --lcd-text: #0e120c;
  --lcd-dark: #030502;
  --panel-border: #1b2118;
  --pager-body: #242b20;
  --sub-screen: #d0d6cb;
  --glow: none;
  --profit-color: #005f00;
  --loss-color: #8f0000;
  --accent-bg: rgba(0,0,0,0.04);
  --stat-card-border: rgba(0,0,0,0.22);
}

body.theme-pokemon {
  --lcd-bg: #8ba36b;
  --lcd-text: #0f1c05;
  --lcd-dark: #050a02;
  --panel-border: #cc1111;
  --pager-body: #eedd00;
  --sub-screen: #9cb57b;
  --glow: 0 0 5px rgba(15, 28, 5, 0.4);
  --profit-color: #005500;
  --loss-color: #aa0000;
  --accent-bg: rgba(0,0,0,0.06);
  --stat-card-border: rgba(15, 28, 5, 0.25);
}

body.theme-amber {
  --lcd-bg: #0d0700;
  --lcd-text: #ff9900;
  --lcd-dark: #4d2600;
  --panel-border: #261300;
  --pager-body: #331a00;
  --sub-screen: #1a0f00;
  --glow: 0 0 8px rgba(255, 153, 0, 0.7);
  --profit-color: #33ff33;
  --loss-color: #ff3333;
  --accent-bg: rgba(255,153,0,0.06);
  --stat-card-border: rgba(255, 153, 0, 0.3);
}

body.theme-cyberpunk {
  --lcd-bg: #090019;
  --lcd-text: #00f5ff;
  --lcd-dark: #03000a;
  --panel-border: #ff2bd6;
  --pager-body: linear-gradient(135deg, rgba(255,43,214,0.72), rgba(0,245,255,0.35));
  --sub-screen: #12002b;
  --glow: 0 0 9px rgba(0,245,255,0.95), 0 0 18px rgba(255,43,214,0.55);
  --profit-color: #39ff14;
  --loss-color: #ff3864;
  --accent-bg: rgba(255,43,214,0.08);
  --stat-card-border: rgba(0,245,255,0.38);
}

body.theme-cyberpunk::before {
  background:
    linear-gradient(rgba(0,245,255,0.02) 50%, rgba(255,43,214,0.10) 50%),
    linear-gradient(90deg, rgba(255,43,214,0.04), rgba(0,245,255,0.03), rgba(255,221,0,0.02));
  background-size: 100% 4px, 6px 100%;
}

body.theme-virtual-red {
  --lcd-bg: #1a0000;
  --lcd-text: #ff1a1a;
  --lcd-dark: #0f0000;
  --panel-border: #660000;
  --pager-body: #2a0000;
  --sub-screen: #220000;
  --glow: 0 0 12px rgba(255, 26, 26, 0.8);
  --profit-color: #00ff66;
  --loss-color: #ff0033;
  --accent-bg: rgba(255, 26, 26, 0.06);
  --stat-card-border: rgba(255, 26, 26, 0.35);
}

body.theme-solarized {
  --lcd-bg: #002b36;
  --lcd-text: #839496;
  --lcd-dark: #001f27;
  --panel-border: #073642;
  --pager-body: #073642;
  --sub-screen: #073642;
  --glow: 0 0 5px rgba(42, 161, 152, 0.3);
  --profit-color: #859900;
  --loss-color: #dc322f;
  --accent-bg: rgba(42, 161, 152, 0.06);
  --stat-card-border: #586e75;
}

body.theme-ghost {
  --lcd-bg: #1a1a1a;
  --lcd-text: #c0c0c0;
  --lcd-dark: #000000;
  --panel-border: #444444;
  --pager-body: #222222;
  --sub-screen: #111111;
  --glow: 0 0 8px rgba(255, 255, 255, 0.4);
  --profit-color: #ffffff;
  --loss-color: #999999;
  --accent-bg: rgba(255,255,255,0.03);
  --stat-card-border: #666666;
}

/* Monokai Pro Dark — charcoal + pink accent + neon green/yellow */
body.theme-monokai-dark {
  --lcd-bg: #2d2a2e;
  --lcd-text: #fcfcfa;
  --lcd-dark: #1a181a;
  --panel-border: #ff6188;
  --pager-body: #3d393f;
  --sub-screen: #221f22;
  --glow: 0 0 6px rgba(255, 97, 136, 0.45), 0 0 12px rgba(169, 220, 118, 0.2);
  --profit-color: #a9dc76;
  --loss-color: #ff6188;
  --warning-color: #ffd866;
  --accent-bg: rgba(255, 97, 136, 0.06);
  --stat-card-border: rgba(252, 252, 250, 0.18);
}

/* Scanline overlay tinted with Monokai pink/green */
body.theme-monokai-dark::before {
  background:
    linear-gradient(rgba(255,97,136,0.015) 50%, rgba(169,220,118,0.015) 50%),
    linear-gradient(90deg, rgba(255,97,136,0.02), rgba(120,220,232,0.01), rgba(255,216,102,0.01));
  background-size: 100% 4px, 6px 100%;
}

/* Subtle idle flicker to simulate an aging terminal */
@keyframes monokai-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55%                            { opacity: 0.88; }
}
body.theme-monokai-dark .app-shell {
  animation: monokai-flicker 8s infinite linear;
}

/* Monokai Pro Light — warm paper + dark ink + vivid accents */
body.theme-monokai-light {
  --lcd-bg: #fdf9f3;
  --lcd-text: #2d2a2e;
  --lcd-dark: #1a181a;
  --panel-border: #dc3176;
  --pager-body: #ede9e0;
  --sub-screen: #f5f1e8;
  --glow: none;
  --profit-color: #5b8a00;
  --loss-color: #dc3176;
  --warning-color: #c77b00;
  --accent-bg: rgba(0, 0, 0, 0.03);
  --stat-card-border: rgba(45, 42, 46, 0.20);
}

/* ==========================================================================
   CONSOLE INTERNAL SOFTWARE WRAPPERS
   ========================================================================== */
.screen-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.23);
  z-index: 10;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 3px solid var(--lcd-text);
  background: var(--accent-bg);
  padding: 4px 10px;
  margin-bottom: 4px;
  text-shadow: var(--glow);
  min-height: 38px;
}

.header h1 { font-size: 24px; line-height: 1; }

.subline {
  font-size: 15px;
  opacity: 0.9;
  margin-top: 1px;
}

.location-art {
  white-space: pre;
  font-size: 11px;
  text-shadow: none;
  min-width: 120px;
  text-align: right;
  line-height: 0.95;
}

/* ==========================================================================
   ULTRA-TIGHT TELEMETRY MATRIX HUD
   ========================================================================== */
.stats-bar {
  border-bottom: 3px double var(--lcd-text);
  padding-bottom: 4px;
  margin-bottom: 4px;
  text-shadow: var(--glow);
}

.stat-chip {
  border: 2px solid var(--stat-card-border);
  background: rgba(0, 0, 0, 0.03);
  padding: 2px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.stat-label {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
  width: 100%;
}

.stat-value {
  display: block;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  width: 100%;
}

/* ==========================================================================
   CORE WORKSPACE FUNCTIONAL UI INTERFACES
   ========================================================================== */
.panel-title {
  text-align: center;
  padding: 2px 0;
  margin-bottom: 4px;
  font-size: 16px;
  border-bottom: 2px solid var(--lcd-text);
  background: rgba(0,0,0,0.04);
  text-shadow: var(--glow);
  line-height: 1;
}

.ticker-log {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end; /* v3.3.16: Ensures log entries start from the visual top */
  gap: 4px;
  padding-right: 4px;
  min-height: 0;
}

.ticker-entry {
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(0,0,0,0.14);
  font-size: 15px;
  text-shadow: var(--glow);
  line-height: 1.1;
}

.anim-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sub-screen);
  border: 3px solid var(--lcd-text);
  padding: 4px;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 2px 2px;
  min-height: 200px;
}

.anim-canvas {
  white-space: pre;
  font-size: 12px;
  line-height: 0.95;
  text-align: center;
  text-shadow: var(--glow);
  max-width: 100%;
}

/* ==========================================================================
   CUSTOM SCROLLBARS FOR INTERNAL PANELS
   ========================================================================== */
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--lcd-text) rgba(0,0,0,0.08);
}
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.08); }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--lcd-text); border-radius: 3px; }

/* ==========================================================================
   MARKET DATA EXCHANGE SHELL DEFINITIONS
   ========================================================================== */
.market-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  text-shadow: var(--glow);
  font-size: 14px;
  line-height: 1.1;
  border-bottom: 1px dashed rgba(0,0,0,0.1);
  padding-bottom: 4px;
}

table.market-table {
  width: 100%;
  border-collapse: collapse;
  text-shadow: var(--glow);
  font-size: 16px;
  line-height: 1.1;
}

.market-table th {
  border-bottom: 2px dashed var(--lcd-text);
  font-size: 13px;
  opacity: 0.8;
  text-transform: uppercase;
  padding: 4px 4px;
  text-align: left;
}

.market-table td {
  padding: 6px 4px;
  vertical-align: middle;
}

.market-table tr:not(:last-child) td {
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 2px solid var(--lcd-text);
  padding: 1px;
  background: rgba(0,0,0,0.03);
  border-radius: var(--radius-sm);
}

.qty-pill {
  min-width: 30px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.action-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.market-mobile-label {
  display: none;
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: normal;
}

/* ==========================================================================
   HUD SYSTEM PERIPHERAL SECTIONS
   ========================================================================== */
.btn, .pager-btn {
  background: transparent;
  border: 2px solid var(--lcd-text);
  color: var(--lcd-text);
  cursor: pointer;
  text-transform: uppercase;
  min-height: 26px;
  padding: 2px 8px;
  line-height: 1;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:hover, .btn:focus-visible, .pager-btn:hover, .pager-btn:focus-visible, .difficulty-card:hover, .difficulty-card:focus-visible {
  background: var(--lcd-text);
  color: var(--lcd-bg);
  outline: none;
}

.btn:active, .pager-btn:active, .difficulty-card:active { transform: translateY(2px); }
.btn[disabled], .pager-btn[disabled], .disabled { opacity: 0.35; pointer-events: none; }
.btn-tight { min-height: 22px; padding: 1px 6px; font-size: 14px; }

.avatar-box {
  text-align: center;
  padding: 4px;
  text-shadow: var(--glow);
}

.heart-frame {
  position: relative;
  border: 2px dashed var(--lcd-text);
  background: var(--sub-screen);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heartbeat 1.2s infinite ease-in-out;
  transform-origin: center;
}

.heart-frame.health-warning { color: var(--loss-color); border-color: var(--loss-color); }
.heart-frame.health-critical { color: var(--loss-color); border-color: var(--loss-color); animation-duration: 0.6s; }

.avatar-art-container { position: relative; width: 100%; height: 100%; }

.avatar-art {
  position: absolute;
  inset: 0;
  white-space: pre;
  line-height: 0.95;
  text-shadow: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-art.heart-bg { opacity: 0.25; }
.avatar-art.heart-fill {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

.health-bar-fill {
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pager {
  background: var(--pager-body);
  padding: 6px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.18), 0 4px 8px rgba(0,0,0,0.3);
}

.pager-screen {
  background: var(--sub-screen);
  border: 2px solid var(--lcd-text);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.25);
}

.pager-screen-header { border-color: var(--lcd-text); opacity: 0.8; }
.pager-message { white-space: pre-wrap; text-shadow: var(--glow); line-height: 1.1; }

/* Unified Pager Multimedia Array Expansion */
.audio-screen-readout {
  color: var(--lcd-text);
  opacity: 0.95;
}

#mp3TrackDisplay {
  letter-spacing: 0.5px;
  text-shadow: var(--glow);
}

#mp3Visualizer {
  width: 100%;
  height: 64px;
  display: block;
}

.pager-btn { width: 20px; background: var(--lcd-text); color: var(--sub-screen); border-color: var(--lcd-bg); }

.travel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.travel-btn { width: 100%; }

.floating-dock { position: fixed; top: 20px; left: 20px; z-index: 10005; display: flex; flex-direction: column; gap: 6px; }
.floating-toggle, .floating-panel { color: var(--lcd-text); background: var(--lcd-bg); border: 3px solid var(--lcd-text); box-shadow: var(--shadow-soft); }
.floating-toggle { width: 46px; height: 46px; border-radius: 8px; font-size: 0; min-height: 46px; font-weight: bold; }

.floating-toggle::before {
  content: "⚙";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 24px; /* Re-apply font size for the pseudo-element */
}

.floating-panel { 
  display: none; 
  width: min(300px, calc(100vw - 16px)); 
  max-height: min(70vh, 460px); 
  overflow: auto; 
  padding: 8px; 
  background-size: 3px 3px; 
  touch-action: pan-y;
}
.floating-panel.visible { display: block; z-index: 10006; }
.floating-panel { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }
.menu-section { border: 2px solid var(--lcd-text); background: rgba(0,0,0,0.03); padding: 6px; margin-top: 6px; }
.menu-title { text-align: center; border-bottom: 2px dashed var(--lcd-text); padding-bottom: 3px; margin-bottom: 6px; text-transform: uppercase; font-size: 15px; line-height: 1; }
.menu-label { text-transform: uppercase; font-size: 12px; margin-bottom: 4px; opacity: 0.8; line-height: 1; }
.menu-grid { display: flex; flex-wrap: wrap; gap: 4px; }

/* ==========================================================================
   MODAL DIALOG LAYERING (Z-INDEX OVERLAYS)
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: 9999;
  background: var(--lcd-bg);
  padding: 14px;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: auto;
  /* Ensure no workstation transforms leak into the overlay stacking context */
  opacity: 0; /* Start invisible */
  visibility: hidden; /* Start hidden */
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Add transition */
  transform: none !important;
  filter: none !important;
}

.overlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
}

.overlay-box {
  position: relative;
  z-index: 10001;
  /* Ensure overlay-box also fades with the overlay */
  opacity: 0;
  transition: opacity 0.5s ease-out;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
  border: 4px dashed var(--lcd-text);
  background: rgba(0,0,0,0.025);
  padding: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,0.12);
  text-shadow: var(--glow);
}

.overlay.visible .overlay-box {
  opacity: 1;
}

.overlay-title { font-size: 28px; margin-bottom: 6px; line-height: 1; }
.overlay-art { white-space: pre; font-size: 12px; line-height: 1; text-shadow: none; margin: 8px 0; }
.overlay-copy { font-size: 20px; line-height: 1.15; margin-bottom: 10px; white-space: pre-wrap; }

.boot-overlay { z-index: 10000; }
.boot-panel { 
  position: relative;
  z-index: 10001;
  width: min(780px, 100%); 
  text-align: center; 
  touch-action: pan-y; /* Allows scrolling the panel but captures taps */
}
.boot-title { font-size: 36px; margin-bottom: 6px; line-height: 1; }
.boot-subtitle { font-size: 18px; opacity: 0.82; margin-bottom: 14px; line-height: 1; }
.save-panel { display: none; border: 3px solid var(--lcd-text); padding: 10px; margin-bottom: 12px; background: rgba(0,0,0,0.03); font-size: 16px; }
.save-panel.visible { display: block; }
.difficulty-list { display: grid; gap: 10px; }
.difficulty-card { 
  border: 3px dashed var(--lcd-text); 
  background: rgba(0,0,0,0.03); 
  text-align: left; 
  padding: 12px; 
  cursor: pointer; 
  color: inherit; 
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.difficulty-card:active {
  border-style: solid;
  background: var(--lcd-text);
  color: var(--lcd-bg);
}

.difficulty-name { font-size: 24px; margin-bottom: 6px; text-transform: uppercase; line-height: 1; }
.difficulty-copy { font-size: 19px; line-height: 1.02; }

.shake { animation: consoleShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
.alert-flash { animation: redAlertFlash 0.3s ease-in-out 2 alternate; }
.pager-alert { animation: hardwareFlash 0.3s infinite alternate; }
.police-siren-flash { animation: copSirenAnimation 0.22s infinite steps(1, end); }

/* v3.5.8: Police Intercept Global Pulse */
body.police-alert {
  animation: police-emergency-pulse 0.6s infinite alternate;
}

@keyframes police-emergency-pulse {
  0% { background-color: #2a0000; } /* Dark Emergency Red */
  100% { background-color: #00002a; } /* Dark Emergency Blue */
}

@keyframes pockets-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pockets-warning-flash { animation: pockets-warn 0.6s infinite ease-in-out; }

@keyframes copSirenAnimation {
  0%, 100% { background-color: rgba(255, 0, 60, 0.32); filter: invert(0); }
  50% { background-color: rgba(0, 110, 255, 0.32); filter: invert(0.85); }
}

@keyframes consoleShake {
  10%, 90% { transform: translate3d(-5px, 0, 0) rotate(-0.5deg); }
  20%, 80% { transform: translate3d(6px, 0, 0) rotate(1deg); }
  30%, 50%, 70% { transform: translate3d(-8px, 0, 0) rotate(-1.5deg); }
  40%, 60% { transform: translate3d(8px, 0, 0) rotate(1.5deg); }
}

@keyframes redAlertFlash {
  from { filter: invert(0); }
  to { filter: invert(1); background-color: #ff2222; }
}

@keyframes hardwareFlash {
  from { background: var(--pager-body); }
  to { background: #55ff55; box-shadow: 0 0 15px #55ff55; }
}

.property-list { display: grid; gap: 4px; margin-top: 5px; }
.property-card { border: 1px dashed var(--lcd-text); padding: 4px; background: rgba(0,0,0,0.025); font-size: 14px; line-height: 1.05; }
.profit { color: var(--profit-color) !important; }
.loss { color: var(--loss-color) !important; }

/* ==========================================================================
   IMMERSIVE TACTICAL DESKTOP WORKSTATION CHASSIS GEOMETRY DESIGN HOUSING
   ========================================================================== */
:root {
  --pc-beige-main: #242921;
  --pc-beige-bright: #343b30;
  --pc-beige-shadow: #121610;
  --crt-bezel-matte: #0e110c;
  --led-green: #39ff14;
  --led-red: #ff3333;
}

.pc-workstation-container {
  width: 100%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 1. Ultra-Slimmed CRT Monitor Box */
.hardware-monitor-case {
  width: 100%;
  background: linear-gradient(135deg, var(--pc-beige-main) 0%, var(--pc-beige-shadow) 100%);
  padding: 12px 16px 0px 16px; 
  border-top: 4px solid var(--pc-beige-bright);
  border-left: 3px solid var(--pc-beige-bright);
  border-right: 4px solid var(--pc-beige-shadow);
  border-bottom: 2px solid var(--pc-beige-shadow);
  border-radius: 20px 20px 12px 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ultra-Tight CRT Screen Housing Inner Bezel */
.app-shell {
  background: var(--lcd-bg) !important;
  border: 8px solid var(--crt-bezel-matte); 
  border-radius: 12px;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.4),
    0 4px 0px rgba(255,255,255,0.08);
  padding: 8px; 
  width: 100%;
  position: relative;
}

/* Thinnest Monitor Column Support Neck */
.desktop-monitor-stand {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

.stand-neck {
  width: 110px;
  height: 20px; 
  background: linear-gradient(90deg, var(--pc-beige-shadow) 0%, var(--pc-beige-main) 50%, #080a06 100%);
  border-left: 3px solid var(--pc-beige-bright);
  border-right: 3px solid var(--pc-beige-shadow);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.6);
}

/* 2. MAIN HORIZONTAL UNIT ("HARD DRIVE DESKTOP CASE") */
.pc-horizontal-base {
  width: 100%;
  height: 60px; 
  background: linear-gradient(180deg, var(--pc-beige-main) 0%, #171b15 100%);
  border-top: 4px solid var(--pc-beige-bright);
  border-left: 5px solid var(--pc-beige-bright);
  border-right: 5px solid var(--pc-beige-shadow);
  border-bottom: 6px solid #060805;
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.85);
  position: relative;
  z-index: 5;
}

.floppy-drive-slot {
  width: 110px;
  height: 14px; 
  background: #090b08;
  border-bottom: 2px solid var(--pc-beige-bright);
  border-right: 2px solid var(--pc-beige-bright);
  position: relative;
  border-radius: 2px;
}

.floppy-latch {
  position: absolute;
  top: 4px;
  left: 35px;
  width: 30px;
  height: 4px;
  background: #1c2119;
  border: 1px solid #000;
}

.pc-brand-logo {
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 1px 1px 2px #000;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

.pc-brand-logo.hard-mode-active {
  color: #ff3333;
  text-shadow: 0 0 15px rgba(255, 51, 51, 0.6), 1px 1px 2px #000;
}

@keyframes brand-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: brightness(1); }
  20%, 24%, 55% { opacity: 0.3; filter: brightness(0.5); }
}

.heat-flicker {
  animation: brand-flicker 2s infinite linear;
}

.led-indicator {
  width: 18px; 
  height: 18px;
  background: #0d0f0c;
  border: 2px solid var(--pc-beige-shadow);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turbo-led span {
  color: var(--led-green);
  font-family: 'VT323', monospace;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 6px var(--led-green);
}

.power-led {
  background: var(--led-red);
  box-shadow: 0 0 8px var(--led-red);
}

.power-button-switch {
  width: 20px; 
  height: 20px;
  background: linear-gradient(135deg, #cc1111 0%, #770000 100%);
  border: 2px solid #330000;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
.power-button-switch:active {
  transform: translateY(1px);
  background: #770000;
}

/* 3. HARDWARE PERIPHERALS RAYS (KEYBOARD & MOUSE TRAY) */
.pc-peripherals-tray {
  width: 100%;
  pointer-events: auto;
}

.pc-keyboard-hardware {
  background: #161a13;
  border: 3px solid var(--pc-beige-bright);
  border-bottom: 5px solid var(--pc-beige-shadow);
  border-radius: 6px;
  padding: 2px 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.keyboard-ascii-frame {
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-shadow: 0px 0px 4px rgba(255,255,255,0.4); 
}

.pc-mouse-hardware {
  background: #1c2119;
  border: 3px solid var(--pc-beige-bright);
  border-bottom: 5px solid var(--pc-beige-shadow);
  width: 58px;
  height: 74px; 
  border-radius: 18px 18px 6px 6px;
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.1;
  box-shadow: 5px 10px 20px rgba(0,0,0,0.5);
  opacity: 0.9;
  text-shadow: 0px 0px 4px rgba(255,255,255,0.4);
}

/* ==========================================================================
   MOBILE AUTO-COLLAPSE FALLBACK TRIGGER OVERRIDES
   ========================================================================== */
@media (max-width: 991px) {
  .pc-workstation-container {
    padding: 0;
  }
  
  .hardware-monitor-case {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell {
    border: 6px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 8px;
    height: auto !important;
    max-height: none !important;
  }

  .desktop-monitor-stand,
  .pc-horizontal-base,
  .pc-peripherals-tray {
    display: none !important;
  }

  /* Mobile Item Card Table Transformation Matrix */
  .market-table thead { display: none; }

  .market-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px 8px;
    border: 2px solid var(--lcd-text) !important;
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.015);
    margin-bottom: 10px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.04);
  }

  .market-table td {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 0;
    border: none !important;
  }

  .market-table td:first-child, .market-table td:last-child { grid-column: span 2; }

  .market-table td:first-child {
    font-size: 20px;
    border-bottom: 1px dashed var(--lcd-text) !important;
    padding-bottom: 6px;
    margin-bottom: 2px;
  }

  .market-table td:last-child {
    border-top: 1px dashed rgba(0,0,0,0.1) !important;
    padding-top: 8px;
    margin-top: 2px;
  }

  .market-table td:last-child .action-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .market-table td:last-child .btn {
    width: 100%;
    min-height: 34px;
    font-size: 17px;
  }

  .qty-stepper { width: 100%; display: flex; justify-content: space-between; }
  .qty-stepper .btn { flex: 1; min-height: 26px; }
  .qty-pill { flex: 1.5; }
  .market-mobile-label { display: block; margin-bottom: 1px; }
}