:root {
      --bg-primary: #0d0f1a;
      --bg-secondary: #141729;
      --bg-card: rgba(22, 27, 58, 0.65);
      --cyan: #00f0ff;
      --cyan-dim: rgba(0, 240, 255, 0.15);
      --pink: #ff2d95;
      --pink-dim: rgba(255, 45, 149, 0.15);
      --green: #10b981;
      --green-bright: #0fffab;
      --yellow: #f1fa8c;
      --purple: #bd93f9;
      --red: #ff5555;
      --text: #e2e8f0;
      --text-dim: #8892b0;
      --border: rgba(0, 240, 255, 0.12);
    }

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

    body {
      background: var(--bg-primary);
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 1rem; /* 16px base size */
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* === BACKGROUND EFFECTS === */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 240, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255, 45, 149, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 10% 80%, rgba(189, 147, 249, 0.04) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    /* Scanlines */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 240, 255, 0.008) 2px,
        rgba(0, 240, 255, 0.008) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* Grid background */
    .grid-bg {
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }

    .main-container {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
      padding: 40px 20px 60px;
    }

    /* === GLITCH TITLE === */
    .cyberpunk-title {
      font-family: var(--font-primary), sans-serif;
      font-size: clamp(2rem, 5vw, 3rem); /* H1: 32-48px */
      font-weight: 900;
      text-align: center;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      position: relative;
      text-shadow:
        0 0 10px var(--cyan),
        0 0 40px rgba(0, 240, 255, 0.3),
        0 0 80px rgba(0, 240, 255, 0.1);
      animation: title-flicker 4s infinite;
    }

    .cyberpunk-title::before,
    .cyberpunk-title::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }

    .cyberpunk-title::before {
      color: var(--cyan);
      text-shadow: -2px 0 var(--pink);
      animation: glitch-1 3s infinite linear alternate-reverse;
      clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    }

    .cyberpunk-title::after {
      color: var(--pink);
      text-shadow: 2px 0 var(--cyan);
      animation: glitch-2 2.5s infinite linear alternate-reverse;
      clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    }

    @keyframes glitch-1 {
      0%, 85% { transform: translate(0); opacity: 1; }
      86% { transform: translate(-3px, 1px); }
      87% { transform: translate(3px, -1px); }
      88% { transform: translate(-1px, 2px); }
      89%, 100% { transform: translate(0); }
    }

    @keyframes glitch-2 {
      0%, 80% { transform: translate(0); }
      81% { transform: translate(2px, -1px); }
      82% { transform: translate(-3px, 2px); }
      83% { transform: translate(1px, -2px); }
      84%, 100% { transform: translate(0); }
    }

    @keyframes title-flicker {
      0%, 95%, 100% { opacity: 1; }
      96% { opacity: 0.85; }
      97% { opacity: 1; }
      98% { opacity: 0.9; }
    }

    .subtitle {
      text-align: center;
      color: var(--text-dim);
      font-size: 0.875rem; /* Small text: 14px */
      margin-top: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }

    .subtitle span {
      color: var(--cyan);
      text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
    }

    /* === STATUS BAR === */
    .status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1em 2em;
      margin: 4em 0 2em;
      background: rgba(0, 240, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 0.875rem; /* Small text: 14px */
      color: var(--text-dim);
      letter-spacing: 0.1em;
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green-bright);
      box-shadow: 0 0 8px var(--green-bright);
      animation: pulse-dot 2s infinite;
      display: inline-block;
      margin-right: 8px;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* === UPLOAD ZONE === */
    .upload-zone {
      position: relative;
      margin-bottom: 24px;
    }

    .drop-area {
      position: relative;
      border: 2px dashed rgba(0, 240, 255, 0.25);
      border-radius: 16px;
      padding: 50px 30px;
      text-align: center;
      background: var(--bg-card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      cursor: pointer;
      overflow: hidden;
    }

    .drop-area::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(0, 240, 255, 0.02), rgba(255, 45, 149, 0.02));
      opacity: 0;
      transition: opacity 0.4s;
    }

    .drop-area:hover {
      border-color: rgba(0, 240, 255, 0.5);
      box-shadow:
        0 0 30px rgba(0, 240, 255, 0.08),
        inset 0 0 30px rgba(0, 240, 255, 0.03);
    }

    .drop-area:hover::before { opacity: 1; }

    .drop-area.drag-over {
      border-color: var(--cyan);
      background: rgba(0, 240, 255, 0.06);
      box-shadow:
        0 0 60px rgba(0, 240, 255, 0.15),
        inset 0 0 60px rgba(0, 240, 255, 0.05);
      transform: scale(1.01);
    }

    .drop-area.drag-over .upload-icon {
      transform: translateY(-8px) scale(1.15);
      filter: drop-shadow(0 0 20px var(--cyan));
    }

    .upload-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      color: var(--cyan);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
    }

    .drop-text {
      color: var(--text-dim);
      font-size: 1rem; /* Base text: 16px */
      margin-bottom: 16px;
    }

    .drop-text strong {
      color: var(--text);
    }

    /* === CYBERPUNK BUTTON === */
    .cyberpunk-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      font-family: var(--font-primary), sans-serif;
      font-size: 1.125rem; /* Improved readability: 18px */
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border: 1px solid var(--cyan);
      color: var(--cyan);
      background: rgba(0, 240, 255, 0.06);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      overflow: hidden;
    }

    .cyberpunk-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.15), transparent);
      transition: left 0.5s;
    }

    .cyberpunk-btn:hover::before { left: 100%; }

    .cyberpunk-btn:hover {
      background: rgba(0, 240, 255, 0.12);
      box-shadow: 0 0 25px rgba(0, 240, 255, 0.2), inset 0 0 25px rgba(0, 240, 255, 0.05);
      text-shadow: 0 0 8px var(--cyan);
    }

    .cyberpunk-btn:active { transform: scale(0.97); }

    .cyberpunk-btn.pink {
      border-color: var(--pink);
      color: var(--pink);
      background: rgba(255, 45, 149, 0.06);
    }
    .cyberpunk-btn.pink:hover {
      background: rgba(255, 45, 149, 0.12);
      box-shadow: 0 0 25px rgba(255, 45, 149, 0.2);
      text-shadow: 0 0 8px var(--pink);
    }
    .cyberpunk-btn.pink::before {
      background: linear-gradient(90deg, transparent, rgba(255, 45, 149, 0.15), transparent);
    }

    .cyberpunk-btn.neon-green {
      border-color: var(--green-bright);
      color: var(--green-bright);
      background: rgba(15, 255, 171, 0.08);
    }
    .cyberpunk-btn.neon-green:hover {
      background: rgba(15, 255, 171, 0.15);
      box-shadow: 0 0 30px rgba(15, 255, 171, 0.25), inset 0 0 30px rgba(15, 255, 171, 0.05);
      text-shadow: 0 0 8px var(--green-bright);
    }
    .cyberpunk-btn.neon-green::before {
      background: linear-gradient(90deg, transparent, rgba(15, 255, 171, 0.15), transparent);
    }

    .cyberpunk-btn.neon-green.uploading {
      pointer-events: none;
      animation: btn-pulse 1.5s infinite;
    }

    @keyframes btn-pulse {
      0%, 100% { box-shadow: 0 0 15px rgba(15, 255, 171, 0.2); }
      50% { box-shadow: 0 0 40px rgba(15, 255, 171, 0.4); }
    }

    .cyberpunk-btn svg {
      width: 16px;
      height: 16px;
    }

    /* === FILE CONSTRAINTS === */
    .file-constraints {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
      justify-content: center;
    }

    .constraint-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px;
      font-size: 0.875rem; /* Small text: 14px */
      letter-spacing: 0.08em;
      color: var(--text-dim);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 20px;
    }

    .constraint-tag svg {
      width: 12px;
      height: 12px;
      color: var(--purple);
    }

    /* === FILE LIST === */
    .file-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding: 0 4px;
    }

    .file-list-header h3 {
      font-family: var(--font-primary), sans-serif;
      font-size: 1.25rem; /* H3: 20px */
      font-weight: 600;
      color: var(--cyan);
      letter-spacing: 0.15em;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    }

    .file-count {
      font-size: 0.875rem; /* Small text: 14px */
      color: var(--text-dim);
    }

    .file-count span {
      color: var(--yellow);
    }

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;
      min-height: 60px;
    }

    .file-list-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: var(--text-dim);
      font-size: 1rem; /* Base text: 16px */
      border: 1px dashed rgba(255, 255, 255, 0.06);
      border-radius: 12px;
    }

    .file-list-empty svg {
      width: 32px;
      height: 32px;
      margin-bottom: 10px;
      opacity: 0.3;
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--bg-card);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: all 0.3s;
      animation: file-slide-in 0.35s cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      overflow: hidden;
    }

    .file-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, var(--cyan), var(--green-bright));
      box-shadow: 0 0 10px var(--cyan);
      transition: width 0.3s;
    }

    .file-item.uploading::after {
      animation: progress-glow 1.5s infinite;
    }

    .file-item.completed {
      border-color: rgba(15, 255, 171, 0.25);
    }

    .file-item.completed::after {
      width: 100%;
      background: var(--green-bright);
      box-shadow: 0 0 10px var(--green-bright);
    }

    .file-item.error {
      border-color: rgba(255, 85, 85, 0.3);
    }

    .file-item.error::after {
      background: var(--red);
      box-shadow: 0 0 10px var(--red);
    }

    @keyframes progress-glow {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.5); }
    }

    .file-item:hover {
      border-color: rgba(0, 240, 255, 0.2);
      background: rgba(22, 27, 58, 0.8);
    }

    @keyframes file-slide-in {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .file-item.removing {
      animation: file-slide-out 0.3s forwards;
    }

    @keyframes file-slide-out {
      to {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
        height: 0;
        padding: 0 16px;
        margin: 0;
        border-width: 0;
      }
    }

    .file-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.875rem; /* Small text: 14px */
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-family: var(--font-primary), sans-serif;
    }

    .file-icon.img { background: rgba(255, 45, 149, 0.12); color: var(--pink); border: 1px solid rgba(255, 45, 149, 0.2); }
    .file-icon.pdf { background: rgba(255, 85, 85, 0.12); color: var(--red); border: 1px solid rgba(255, 85, 85, 0.2); }
    .file-icon.doc { background: rgba(0, 240, 255, 0.12); color: var(--cyan); border: 1px solid rgba(0, 240, 255, 0.2); }
    .file-icon.zip { background: rgba(241, 250, 140, 0.12); color: var(--yellow); border: 1px solid rgba(241, 250, 140, 0.2); }
    .file-icon.vid { background: rgba(189, 147, 249, 0.12); color: var(--purple); border: 1px solid rgba(189, 147, 249, 0.2); }
    .file-icon.other { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); border: 1px solid rgba(255, 255, 255, 0.1); }

    .file-icon svg {
      width: 18px;
      height: 18px;
    }

    .file-info {
      flex: 1;
      min-width: 0;
    }

    .file-name {
      font-size: 1rem; /* Base text: 16px */
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }

    .file-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 3px;
      font-size: 0.875rem; /* Small text: 14px */
      color: var(--text-dim);
    }

    .file-status {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .file-status.ready { color: var(--yellow); }
    .file-status.uploading { color: var(--cyan); }
    .file-status.completed { color: var(--green-bright); }
    .file-status.error { color: var(--red); }

    .file-status svg {
      width: 10px;
      height: 10px;
    }

    .close-btn {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid rgba(255, 85, 85, 0.15);
      background: rgba(255, 85, 85, 0.06);
      color: var(--red);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .close-btn:hover {
      background: rgba(255, 85, 85, 0.15);
      border-color: rgba(255, 85, 85, 0.3);
      box-shadow: 0 0 15px rgba(255, 85, 85, 0.2);
    }

    .close-btn svg {
      width: 14px;
      height: 14px;
    }

    /* === CONTROL BUTTONS === */
    .control-buttons {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    /* === TOAST NOTIFICATIONS === */
    .toast-container {
      position: fixed;
      bottom: 2em;
      right: 2em;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      pointer-events: none;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      border-radius: 8px;
      font-size: 1rem; /* Base text: 16px */
      backdrop-filter: blur(20px);
      border: 1px solid;
      animation: toast-in 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      pointer-events: auto;
      min-width: 280px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }

    .toast.hiding {
      animation: toast-out 0.3s forwards;
    }

    .toast.success {
      background: rgba(15, 255, 171, 0.1);
      border-color: rgba(15, 255, 171, 0.25);
      color: var(--green-bright);
    }

    .toast.error {
      background: rgba(255, 85, 85, 0.1);
      border-color: rgba(255, 85, 85, 0.25);
      color: var(--red);
    }

    .toast.info {
      background: rgba(0, 240, 255, 0.1);
      border-color: rgba(0, 240, 255, 0.25);
      color: var(--cyan);
    }

    .toast svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    @keyframes toast-in {
      from { opacity: 0; transform: translateX(40px) scale(0.95); }
      to { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes toast-out {
      to { opacity: 0; transform: translateX(40px) scale(0.95); }
    }

    /* === CORNER DECORATIONS === */
    .corner-deco {
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: rgba(0, 240, 255, 0.3);
      border-style: solid;
      border-width: 0;
      pointer-events: none;
    }
    .corner-deco.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
    .corner-deco.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
    .corner-deco.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
    .corner-deco.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

    /* === TERMINAL FOOTER === */
    .terminal-footer {
      margin-top: 40px;
      padding: 16px 20px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.875rem; /* Small text: 14px */
      color: var(--text-dim);
      font-family: var(--font-mono);
    }

    .terminal-footer .prompt {
      color: var(--green-bright);
    }

    .terminal-footer .path {
      color: var(--cyan);
    }

    .terminal-footer .cmd {
      color: var(--yellow);
    }

    .terminal-cursor {
      display: inline-block;
      width: 7px;
      height: 13px;
      background: var(--green-bright);
      animation: blink 1s step-end infinite;
      vertical-align: text-bottom;
      margin-left: 2px;
    }

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

    /* === RESPONSIVE === */
    @media (max-width: 640px) {
      .main-container {
        padding: 24px 14px 40px;
      }

      .drop-area {
        padding: 36px 20px;
      }

      .control-buttons {
        flex-direction: column;
      }

      .control-buttons .cyberpunk-btn {
        width: 100%;
        justify-content: center;
      }

      .status-bar {
        flex-direction: column;
        gap: 6px;
        text-align: center;
      }

      .file-item {
        padding: 12px;
      }

      .file-name {
        font-size: 0.73rem;
      }

      .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
      }

      .toast {
        min-width: unset;
      }
    }

    /* Mobile font size adjustments */
    @media (max-width: 640px) {
      .cyberpunk-title {
        font-size: 2rem; /* Adjusted for mobile */
      }
      
      .drop-text {
        font-size: 0.9375rem; /* 15px for mobile */
      }
      
      .cyberpunk-btn {
        font-size: 1rem; /* 16px for mobile */
      }
      
      .file-name {
        font-size: 0.9375rem; /* 15px for mobile */
      }
      
      .file-meta {
        font-size: 0.75rem; /* 12px for mobile */
      }
      
      .constraint-tag {
        font-size: 0.75rem; /* 12px for mobile */
      }
      
      .file-list-header h3 {
        font-size: 1.125rem; /* H4: 18px for mobile */
      }
    }

    /* === FLOATING PARTICLES === */
    .particle {
      position: fixed;
      width: 2px;
      height: 2px;
      background: var(--cyan);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      animation: float-particle linear infinite;
    }

    @keyframes float-particle {
      0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
      }
      10% {
        opacity: 0.6;
        transform: scale(1);
      }
      90% {
        opacity: 0.3;
      }
      100% {
        opacity: 0;
        transform: translateY(-20vh) scale(0);
      }
    }

    /* === IMAGE PREVIEW === */
    .file-preview {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid rgba(0, 240, 255, 0.15);
      flex-shrink: 0;
    }

    /* Glitch overlay for drag state */
    .glitch-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 2;
      background:
        linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.03) 50%, transparent 100%);
      background-size: 200% 100%;
      animation: scan 2s linear infinite;
    }

    .drag-over .glitch-overlay {
      opacity: 1;
    }

    @keyframes scan {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }

    /* Hexagon pattern for drop area */
    .hex-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 20V40L30 55L5 40V20L30 5Z' fill='none' stroke='%2300f0ff' stroke-width='0.5'/%3E%3C/svg%3E");
      background-size: 40px 40px;
      pointer-events: none;
      border-radius: 16px;
    }
    /* === COVER IMAGE === */
    .cover-image-container {
      margin: 20px 0;
      text-align: center;
    }
    
    .cover-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      border: 1px solid var(--border);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }