/* ==================== WORK DETAIL MODAL ==================== */
    .cyber-modal {
      position: fixed; inset: 0; z-index: 100000;
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-md);
      background: color-mix(in srgb, var(--cyber-void-900) 76%, transparent);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      backdrop-filter: blur(8px) saturate(120%);
      opacity: 0; visibility: hidden;
      transition: opacity var(--transition-base), visibility 0s linear var(--duration-normal);
    }
    .cyber-modal.is-open {
      opacity: 1; visibility: visible;
      transition: opacity var(--transition-base), visibility 0s;
    }
    .cyber-modal__panel {
      position: relative; width: min(640px, 100%);
      display: flex; flex-direction: column;
      max-height: min(86vh, 760px);
      background: color-mix(in srgb, var(--cyber-void-300) 88%, transparent);
      border: 1px solid var(--cyber-red-500);
      clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
      box-shadow: 0 0 50px color-mix(in srgb, var(--cyber-red-500) 35%, transparent), inset 0 0 40px color-mix(in srgb, var(--cyber-red-500) 6%, transparent);
      transform: translateY(14px) scale(0.985);
      transition: transform var(--transition-base);
    }
    .cyber-modal.is-open .cyber-modal__panel { transform: none; }
    .cyber-modal__panel::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgb(0 0 0 / 14%) 2px, rgb(0 0 0 / 14%) 4px);
    }
    .cyber-modal__chrome {
      display: flex; align-items: center; gap: var(--space-3xs);
      padding: var(--space-xs) var(--space-sm);
      background: var(--cyber-void-200);
      border-bottom: 1px solid var(--cyber-red-500);
      flex-shrink: 0;
    }
    .cyber-modal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyber-red-500); }
    .cyber-modal__dot:nth-child(2) { background: var(--cyber-red-600); }
    .cyber-modal__dot:nth-child(3) { background: var(--cyber-red-700); }
    .cyber-modal__label {
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--cyber-red-500); margin-left: var(--space-xs);
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .cyber-modal__close {
      margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--cyber-red-500); background: transparent;
      color: var(--cyber-red-500); font-family: var(--font-mono); font-size: var(--text-sm);
      cursor: pointer; transition: all var(--transition-fast); line-height: 1;
    }
    .cyber-modal__close:hover { background: var(--cyber-red-500); color: var(--cyber-void-900); box-shadow: var(--glow-text-cyan); }
    .cyber-modal__body { padding: var(--space-md); overflow-y: auto; }
    .cyber-modal__body::-webkit-scrollbar { width: 8px; }
    .cyber-modal__body::-webkit-scrollbar-track { background: var(--cyber-void-500); }
    .cyber-modal__body::-webkit-scrollbar-thumb { background: var(--cyber-red-700); }
    .cyber-modal__body::-webkit-scrollbar-thumb:hover { background: var(--cyber-red-500); }
    .cyber-modal__title {
      font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--cyber-red-500); text-shadow: var(--glow-text-cyan);
      margin-bottom: var(--space-3xs); overflow-wrap: anywhere;
    }
    .cyber-modal__meta {
      display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center;
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--cyber-chrome-400); margin-bottom: var(--space-sm);
    }
    .cyber-modal__tag {
      border: 1px solid var(--cyber-red-700); padding: 0 var(--space-3xs);
      color: var(--cyber-red-500);
    }
    .cyber-modal__media {
      margin-bottom: var(--space-sm);
      border: 1px solid var(--color-border-default);
      background: var(--cyber-void-500);
    }
    .cyber-modal__media img { width: 100%; height: auto; display: block; }
    .audio-track-item.is-playing {
      border-color: var(--cyber-red-500);
      box-shadow: 0 0 16px color-mix(in srgb, var(--cyber-red-500) 45%, transparent);
    }
    .cyber-modal__desc { border-top: 1px solid var(--cyber-void-100); padding-top: var(--space-sm); }
    .cyber-modal .md-content { padding-left: 0; }
    body.is-modal-open { overflow: hidden; }