body { font-family: Arial, sans-serif; margin:0; padding:0; }
    .top-buttons { display:flex; background:#f4f4f4; border-bottom:2px solid #ddd; }
    .top-buttons button { flex:1; padding:12px; border:none; background:#f4f4f4; cursor:pointer; font-size:16px; }
    .top-buttons button.active { background:#0078d7; color:#fff; font-weight:bold; }
    .container { display:flex; height:calc(100vh - 50px); }
    .left, .right { flex:1; padding:20px; border-right:1px solid #ddd; }
    .right { border-right:none; background:#fafafa; }
    .dropzone { margin-top:20px; padding:150px; border:2px dashed #aaa; text-align:center; color:#666; cursor:pointer; }
    .step { display:flex; align-items:center; margin:87px 0; opacity:0.4; transition: opacity 0.3s; }
    .step span { margin-left:10px; font-size:18px; }
    .loader { border:3px solid #f3f3f3; border-top:3px solid #0078d7; border-radius:50%; width:18px; height:18px; animation:spin 1s linear infinite; }
    .tick { color:green; font-size:20px; }
    @keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} }

    .output-btn {
      margin-top: 20px;
      padding: 12px 20px;
      background: #aad4f5; /* light blue initial */
      color: white;
      border: none;
      cursor: not-allowed;
      font-size: 16px;
      border-radius: 5px;
      transition: background 0.3s, opacity 0.3s;
    }

    .output-btn.active-btn {
      background: #0078d7; /* dark blue when clickable */
      cursor: pointer;
      opacity: 1;
    }

    #filePreview { margin-top:10px; color:#333; }
    .message { margin-top:10px; color:green; }