@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ui-bg-1: #f5f9ff;
  --ui-bg-2: #ecf3fb;
  --ui-ink: #0f172a;
  --ui-muted: #475569;
  --ui-border: #d9e3ef;
  --ui-card: rgba(255, 255, 255, 0.86);
  --ui-cyan: #0891b2;
  --ui-blue: #2563eb;
}

html,
body {
  font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ui-ink);
}

body {
  background:
    radial-gradient(circle at 8% 7%, rgba(37, 99, 235, 0.11), transparent 32%),
    radial-gradient(circle at 86% 11%, rgba(8, 145, 178, 0.12), transparent 30%),
    linear-gradient(180deg, var(--ui-bg-1) 0%, var(--ui-bg-2) 60%, #e9f1fb 100%);
}

header {
  backdrop-filter: blur(12px);
}

a,
button {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a:hover,
button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(8, 145, 178, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

section.rounded-xl.border.bg-white,
section.rounded-2xl.border.bg-slate-900\/80,
div.rounded-3xl.border.border-slate-800.bg-slate-900\/70,
div.glass {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

section.rounded-xl.border.bg-white,
section.rounded-2xl.border.bg-slate-900\/80 {
  border-color: var(--ui-border);
}

table thead tr {
  background: linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
}

table tbody tr:hover {
  background: rgba(37, 99, 235, 0.05);
}

canvas {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
}

.page-enter {
  animation: pageEnter 0.6s ease both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}