:root {
      --desk-bg: #07090d;
      --paper-bg: #e3d3b6;
      --paper-texture: #ebe0ca;
      --paper-line: #c8b593;
      --ink-dark: #1b1915;
      --ink-red: #8f1d1d;
      --ink-blue: #1c3d5a;
      --ink-pencil: #44413c;
      --accent: #38bdf8;
      --font-hand: 'Caveat', cursive, sans-serif;
      --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background-color: var(--desk-bg);
      background-image:
        linear-gradient(rgba(6, 8, 12, 0.86), rgba(6, 8, 12, 0.94)),
        radial-gradient(circle at 50% 25%, rgba(26, 38, 57, 0.5) 0%, rgba(7, 9, 13, 0.85) 85%),
        url("../assets/bg.jpg");
      background-size: cover, cover, cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 10px 40px;
      font-family: var(--font-body);
      color: var(--ink-dark);
      overflow-x: hidden;
      user-select: none;
    }

    .screen-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      box-shadow: inset 0 0 120px rgba(0,0,0,0.85);
      pointer-events: none;
      z-index: 100;
    }

    /* SVG ICON UTILITY */
    .svg-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* ==============================================================
       ★ TOP DASHBOARD BAR: INTEGRATED COMPACT CONTROL CLUSTER ★
       ============================================================== */
    .truck-dashboard {
      width: 100%;
      max-width: 1140px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 14px;
      padding: 12px 14px;
      background: linear-gradient(180deg, rgba(19, 26, 37, 0.94) 0%, rgba(12, 17, 24, 0.94) 100%);
      border: 1px solid rgba(43, 62, 86, 0.65);
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      position: relative;
      z-index: 50;
    }

    .top-bar-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 12px;
      flex-wrap: wrap;
    }

    .truck-title {
      color: #94a3b8;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .truck-title span.rec-dot {
      width: 9px; height: 9px;
      background: #ef4444;
      border-radius: 50%;
      display: inline-block;
      animation: blink 1.2s infinite;
    }

    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }