body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      background: #1e1e1e; /* Dark background */
      color: #f1f1f1;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      background: #2c2c2c;
      color: #fff;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      flex-shrink: 0;
    }

    header button {
      background: #c0392b; /* mellow red */
      border: none;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
    }

    /* Two column layout */
    main {
      display: flex;
      flex: 1;
      overflow: hidden;
      gap: 1.5rem;
      padding: 1rem 2rem;
      box-sizing: border-box;
    }

    /* Left column: file tree */
    .left-column {
      flex: 2;
      display: flex;
      flex-direction: column;
      background: #2a2a2a;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      overflow-y: auto;
    }

    .left-column h2 {
      margin-top: 0;
      margin-bottom: 1rem;
      color: #c0392b; /* same mellow red */
    }

    .file-tree ul {
      list-style: none;
      padding-left: 1rem;
    }

    .file-tree li {
      cursor: pointer;
      margin: 0.25rem 0;
    }

    .file-tree li span.name {
      display: flex;
      align-items: center;
    }

    .file-tree li span.icon {
      margin-right: 0.5rem;
    }

    .file-tree li ul {
      display: none;
      padding-left: 1.5rem;
    }

    .file-tree li.open > ul {
      display: block;
    }

    /* File tree hover styles */
    .file-tree li span.name {
      display: flex;
      align-items: center;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background 0.2s ease;
    }

    /* Hover over any element (file or folder) */
    .file-tree li span.name:hover {
      background-color: rgba(192, 57, 43, 0.2); /* dim red highlight */
    }

    /* Specific hover for files */
    .file-tree li span.name.file:hover {
      text-decoration: underline; /* underline file names */
      background-color: rgba(192, 57, 43, 0.2); /* keep highlight consistent */
    }

    /* Right column: instructions */
    .right-column {
      flex: 3;
      background: #2a2a2a;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      overflow-y: auto;
    }

    /* Scrollbars (optional) */
    .left-column::-webkit-scrollbar,
    .right-column::-webkit-scrollbar {
      width: 8px;
    }
    .left-column::-webkit-scrollbar-thumb,
    .right-column::-webkit-scrollbar-thumb {
      background-color: #555;
      border-radius: 4px;
    }

    @media (max-width: 900px) {
      main {
        flex-direction: column;
      }
      .left-column, .right-column {
        flex: unset;
        margin-bottom: 1rem;
      }
    }

    /* Drag-and-drop area inside right-column */
    .right-column .drop-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px dashed #c0392b; /* mellow red */
      border-radius: 12px;
      padding: 2rem;
      text-align: center;
      width: 100%;
      height: 100%; /* take full vertical space of right-column */
      box-sizing: border-box;
      background: #2a2a2a; /* match right-column background */
      color: #f1f1f1;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .right-column .drop-zone:hover {
      background: rgba(192, 57, 43, 0.1); /* subtle hover */
      border-color: #e74c3c; /* slightly brighter red on hover */
      cursor: pointer;
    }

    .right-column .drop-zone .folder-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 1rem;
    }

    .right-column .drop-zone p {
      margin: 0;
      font-size: 1rem;
      color: #f1f1f1;
    }

    /* Stack drop zones vertically */
    .right-column {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Each drop zone takes equal height */
    .right-column .drop-zone {
      flex: 1;
    }

    /* Optional: differentiate slightly */
    #fileDropZone {
      border-color: #c0392b;
    }

    #folderDropZone {
      border-color: #8e44ad; /* subtle purple for distinction */
    }

    #folderDropZone:hover {
      border-color: #9b59b6;
      background: rgba(155, 89, 182, 0.1);
    }