/* Global add-on styles for all PDF tools — pairs with Tailwind */
  :root {
    --primary:	#274c77;
    --primary-light: #eef2ff;
    --secondary: #6096ba;
    --accent: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #22c55e;
    --dark: #1e293b;
    --gray-800: #334155;
    --gray-600: #64748b;
    --gray-400: #94a3b8;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50: #f8fafc;
    --shadow-sm: 0 1px 3px rgba(2,6,23,.05);
    --shadow-md: 0 4px 6px -1px rgba(2,6,23,.1), 0 2px 4px -2px rgba(2,6,23,.1);
    --shadow-lg: 0 10px 15px -3px rgba(2,6,23,.1), 0 4px 6px -4px rgba(2,6,23,.1);
    --shadow-xl: 0 20px 25px -5px rgba(2,6,23,.1), 0 8px 10px -6px rgba(2,6,23,.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --transition: all 0.3s ease;
  }
  
 body {
	background: url('/theme/image/background.svg') no-repeat center center fixed;
    background-size: cover;
    background-color: #f0f3fb;
    padding-top: 70px;
  }
	  
/* Buttons */
.tw-btn {
  @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-100 text-slate-800 hover:bg-slate-200 active:scale-[0.98] transition shadow-sm;
}
.tw-btn-primary {
  @apply inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-600 text-white hover:bg-brand-700 active:scale-[0.98] transition shadow;
}
.tw-btn-secondary {
  @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white border border-slate-200 hover:bg-slate-50 active:scale-[0.98] transition shadow-sm;
}

/* Page cards */
.page-card {
  @apply relative overflow-hidden rounded-2xl bg-white border border-slate-200 shadow-soft;
}
.page-header {
  @apply absolute top-0 inset-x-0 z-10 flex items-center justify-between gap-2 px-3 py-2 bg-gradient-to-b from-white/90 to-white/0;
}
.page-actions {
  @apply flex items-center gap-2;
}
.page-index {
  @apply inline-flex items-center justify-center text-xs font-semibold px-2 py-1 rounded-lg bg-slate-900/80 text-white shadow;
}
.canvas-wrap {
  @apply relative block w-full overflow-auto bg-slate-50;
}

/* Floating action row at bottom of card */
.page-footer {
  @apply absolute bottom-0 inset-x-0 z-10 flex items-center justify-between gap-2 px-3 py-2 bg-gradient-to-t from-white/90 to-white/0;
}

/* Toast */
.toast {
  @apply fixed bottom-6 right-6 z-[60] max-w-sm px-4 py-3 rounded-xl bg-slate-900 text-white shadow-xl;
}

/* Nice scrollbar for preview areas */
.canvas-wrap::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.canvas-wrap::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.35);
  border-radius: 9999px;
}
.canvas-wrap::-webkit-scrollbar-track {
  background: transparent;
}

/* Utility */
.badge {
  @apply inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-lg bg-brand-100 text-brand-800;
}

/* Fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-card { animation: fadeInUp .25s ease both; }