/* Flow Web Panel */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.nav-item { transition: all .15s ease; }
.nav-item.active { background: linear-gradient(90deg, rgba(91,108,255,.18), rgba(91,108,255,.06)); color: #fff; border-left: 3px solid #5b6cff; }
.nav-item:not(.active):hover { background: rgba(255,255,255,.06); }

.card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); }
.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.spinner { border: 3px solid #e2e8f0; border-top-color: #5b6cff; border-radius: 50%; width: 22px; height: 22px; animation: spin .7s linear infinite; }
.spinner-lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.modal-backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #5b6cff !important; box-shadow: 0 0 0 3px rgba(91,108,255,.15); }

.toast-enter { animation: toastIn .3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

pre.code-view { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: 12px; line-height: 1.5; }