/* v1.3 - Refined dropdown UI + success state */
:root {
  --vir-bg: #0b1220;
  --vir-panel: rgba(16, 24, 40, 0.96);
  --vir-primary: #2563eb;
  --vir-primary-2: #22d3ee;
  --vir-text: #e5e7eb;
  --vir-muted: #9ca3af;
  --vir-border: #1f2937;
  --vir-ring: rgba(34, 211, 238, 0.6);
}

.vir-btn {
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--vir-primary), var(--vir-primary-2));
  color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:700; border:0; cursor:pointer;
  box-shadow:0 10px 30px rgba(37, 99, 235, .35);
  transition:transform .12s ease, filter .2s ease;
}
.vir-btn:hover { filter:brightness(1.07); transform:translateY(-1px); }

.vir-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:99999; }
.vir-modal {
  position:fixed; inset:0; margin:auto; max-width:720px; width:calc(100% - 24px);
  background: var(--vir-panel);
  color:var(--vir-text); border-radius:18px; overflow:hidden;
  padding:0; z-index:100000; display:none;
  backdrop-filter: blur(12px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.vir-modal header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--vir-border); }
.vir-modal h3 { margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; }
.vir-close { background:transparent; border:0; color:var(--vir-muted); font-size:22px; cursor:pointer; }
.vir-close:focus { outline:2px solid var(--vir-ring); border-radius:8px; }

.vir-body { padding:16px; }
.vir-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vir-field { display:flex; flex-direction:column; gap:6px; }
.vir-label { font-size:12px; color:var(--vir-muted); }

.vir-input, .vir-textarea, .vir-select {
  background:#0f172a; border:1px solid var(--vir-border); color:var(--vir-text);
  border-radius:12px; padding:10px 12px; width:100%; transition: box-shadow .15s, border-color .15s;
}
.vir-textarea { min-height:120px; resize:vertical; }
.vir-input:focus, .vir-textarea:focus, .vir-select:focus {
  outline:none; border-color: var(--vir-primary);
  box-shadow: 0 0 0 3px var(--vir-ring);
}

/* Dropzone */
.vir-drop { border:1px dashed var(--vir-border); border-radius:12px; padding:14px; text-align:center; background:#0f172a; color:var(--vir-muted); }
.vir-drop.drag { border-color: var(--vir-primary); box-shadow: 0 0 0 3px var(--vir-ring); }
.vir-preview { margin-top:8px; }
.vir-preview img { max-width:100%; height:auto; border-radius:8px; }

.vir-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px; border-top:1px solid var(--vir-border); }
.vir-actions .button-primary { background:linear-gradient(135deg, var(--vir-primary), var(--vir-primary-2)); color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700; }
.vir-actions .button-secondary { background:#111827; color:#e5e7eb; border:0; padding:10px 14px; border-radius:12px; cursor:pointer; }

.vir-hint { font-size:12px; color:var(--vir-muted); margin-top:4px; }

/* Success state */
.vir-success { display:none; text-align:center; padding:24px 16px 28px 16px; }
.vir-success .icon { width:64px; height:64px; margin:8px auto 12px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(34, 211, 238,.25) 0%, rgba(37,99,235,.25) 60%, transparent 60%); display:flex; align-items:center; justify-content:center; }
.vir-success .icon svg { width:28px; height:28px; color:#34d399; }
.vir-success h4 { margin:6px 0 6px; font-size:18px; }
.vir-success p { margin:0; color:var(--vir-muted); }

/* Spinner on submit */
.vir-loading { opacity:.7; pointer-events:none; }
.vir-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: vir-spin .8s linear infinite; margin-left:8px; }
@keyframes vir-spin { to { transform: rotate(360deg);} }

@media (max-width: 640px) { .vir-grid { grid-template-columns:1fr; } }