/* --- General Page Styles --- */
    .bgbg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.2;
      background-color: #ffffffff;
      background-image: radial-gradient(circle at center, #ffffffff 0%, #ffffffff 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      overflow: hidden;
      z-index: 1;
    }

    /* --- 3D Scene Wrapper --- */
    .scene {
      perspective: 1400px;
      /* Reduced scale to make laptop smaller */
      transform: scale(0.9);
    }

    /* --- Laptop Container --- */
    .laptop-container {
      width: 600px;
      height: 40px;
      transform-style: preserve-3d;
      /* Rotated to view from an angle */
      transform: translateY(100px) rotateX(60deg) rotateY(0deg) rotateZ(-30deg);
      position: relative;
    }

    /* =========================================
       COMPONENT: THE BASE (KEYBOARD)
       ========================================= */
    .laptop-base-group {
      width: 600px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
      transform-origin: center;
    }

    /* 1. Top Face (Keyboard Surface) */
    .base-face-top {
      position: absolute;
      width: 600px;
      height: 400px;
      background: linear-gradient(to bottom, #d6d6d6 0%, #e6e6e6 5%, #d0d0d0 100%);
      transform: translateZ(10px);
      border-radius: 6px;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* 2. Side Faces (Thickness) */
    .base-face-left {
      position: absolute;
      width: 20px;
      height: 400px;
      background: #a0a0a0;
      transform: rotateY(-90deg) translateZ(10px);
      left: 0;
      top: 0;
    }

    .base-face-right {
      position: absolute;
      width: 20px;
      height: 400px;
      background: #bfbfbf;
      transform: rotateY(90deg) translateZ(590px);
      left: 0;
      top: 0;
    }

    .base-face-front {
      position: absolute;
      width: 600px;
      height: 20px;
      background: #b0b0b0;
      transform: rotateX(-90deg) translateZ(390px);
      top: 0;
      left: 0;
      border-radius: 0 0 4px 4px;
    }

    .base-face-back {
      position: absolute;
      width: 600px;
      height: 20px;
      background: #333;
      transform: rotateX(90deg) translateZ(10px);
      top: 0;
      left: 0;
    }

    /* 3. Bottom Face */
    .base-face-bottom {
      position: absolute;
      width: 600px;
      height: 400px;
      background: #888;
      transform: translateZ(-10px) rotateX(180deg);
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    }

    /* 4. Drop Shadow */
    .laptop-shadow {
      position: absolute;
      width: 640px;
      height: 440px;
      background: rgba(0, 0, 0, 0.4);
      top: -20px;
      left: -20px;
      transform: translateZ(-11px);
      filter: blur(25px);
      border-radius: 20px;
    }

    /* Internal Base Details */
    .keyboard-area {
      position: absolute;
      top: 40px;
      left: 30px;
      width: 540px;
      height: 190px;
      background-color: #c4c4c4;
      border-radius: 6px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5);
      padding: 8px;
      box-sizing: border-box;
      transform: translateZ(1px);
    }

    .keys {
      width: 100%;
      height: 100%;
      background-color: #222;
      background-image:
        linear-gradient(90deg, #c4c4c4 2px, transparent 2px),
        linear-gradient(#c4c4c4 2px, transparent 2px);
      background-size: 35px 35px;
      border-radius: 3px;
      opacity: 0.9;
    }

    .laptop-trackpad {
      width: 220px;
      height: 120px;
      background: #ccc;
      border-radius: 6px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateZ(1px);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    /* =========================================
       COMPONENT: THE LID (MONITOR)
       ========================================= */
    .laptop-lid-group {
      width: 600px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
      transform-origin: bottom center;

      /* OPENING ANGLE - Fixed positioning */
      transform: translateY(-400px) translateZ(5px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
      transition: transform 0.8s ease-in-out;
    }

    /* Interaction */
    .laptop-container:hover .laptop-lid-group {
      transform: translateY(-400px) translateZ(5px) rotateX(-80deg) rotateY(0deg) rotateZ(0deg);
    }

    /* 1. Screen Face (Inner) - NOW ROTATED 180deg to be Upright */
    .lid-face-front {
      position: absolute;
      width: 600px;
      height: 400px;
      background: #111;
      /* Rotate 180deg so the content flows Top->Bottom relative to the viewer */
      /* transform: translateZ(5px) rotate(180deg); */
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      backface-visibility: hidden;
      box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2);
    }

    /* 2. Lid Back (Outer Shell) */
    .lid-face-back {
      position: absolute;
      width: 600px;
      height: 400px;
      background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
      transform: translateZ(-5px) rotateY(180deg);
      border-radius: 8px;
      backface-visibility: hidden;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }

    /* Apple Logo approximation */
    .lid-face-back::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      background: #fff;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      opacity: 0.7;
      box-shadow: 0 0 10px #fff;
    }

    /* 3. Lid Sides */
    .lid-face-top {
      position: absolute;
      width: 600px;
      height: 10px;
      background: #ccc;
      transform: rotateX(90deg) translateZ(5px);
      bottom: 0;
      left: 0;
    }

    .lid-face-left {
      position: absolute;
      width: 10px;
      height: 400px;
      background: #bbb;
      transform: rotateY(-90deg) translateZ(5px);
      left: 0;
      top: 0;
    }

    .lid-face-right {
      position: absolute;
      width: 10px;
      height: 400px;
      background: #d4d4d4;
      transform: rotateY(90deg) translateZ(595px);
      left: 0;
      top: 0;
    }

    /* Screen Area */
    .screen-display {
      width: 560px;
      height: 360px;
      background-color: #f0f2f5;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      align-content: flex-start;
      padding: 15px;
      box-sizing: border-box;
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
    }

    /* Screen Gloss */
    .screen-display::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.05) 100%);
      pointer-events: none;
    }

    /* Webcam - Positioned relative to the ROTATED face */
    /* Since we rotated 180deg, 'bottom' in CSS is visually the TOP of the laptop */
    .webcam {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background: #222;
      border: 1px solid #444;
      border-radius: 50%;
      z-index: 20;
    }

    /* --- Content Styles --- */
    h2 {
      color: #333;
      font-size: 0.8em;
      margin: 0 0 5px 0;
      border-bottom: 1px solid #eee;
    }

    .dashboard-card {
      background-color: #fff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      flex: 1 1 180px;
      max-width: 48%;
      box-sizing: border-box;
    }

    .bar-chart {
      display: flex;
      align-items: flex-end;
      height: 80px;
      gap: 5px;
    }

    .bar-container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bar {
      width: 100%;
      max-width: 15px;
      border-radius: 2px 2px 0 0;
    }

    .bar-label {
      font-size: 0.5em;
      color: #888;
      margin-top: 4px;
    }

    .bar-blue {
      background-color: #748ffc;
    }

    .bar-teal {
      background-color: #4dd4d0;
    }

    .bar-green {
      background-color: #8ce99a;
    }

    .bar-yellow {
      background-color: #ffd43b;
    }

    .bar-red {
      background-color: #ff6b6b;
    }

    .pie-chart-container {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 80px;
    }

    .pie-chart {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: conic-gradient(#ff6b6b 0deg 108deg, #748ffc 108deg 165.6deg, #4dd4d0 165.6deg 237.6deg, #8ce99a 237.6deg 284.4deg, #ffd43b 284.4deg 360deg);
    }

    .pie-legend {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      font-size: 0.6em;
      color: #555;
    }

    .legend-color {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .table-container {
      width: 100%;
      overflow: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.6em;
    }

    th,
    td {
      text-align: left;
      padding: 5px;
      border-bottom: 1px solid #f0f0f0;
    }

    th {
      color: #888;
      font-weight: 700;
      text-transform: uppercase;
    }