/* UtilKit custom styles — complements Tailwind CDN */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* SPA view transitions */
.view { animation: viewIn .35s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Dashboard tool cards */
.tool-card { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 1.25rem; padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dark .tool-card { background: #0f172a; border-color: #1e293b; }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(99,102,241,.45); border-color: #6366f1; }
.tool-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }

.badge { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; font-weight: 600; background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; }
.dark .badge { background: #1e1b4b; color: #c7d2fe; border-color: #3730a3; }

/* Generic card */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem; }
.dark .card { background: #0f172a; border-color: #1e293b; }

/* Dropzone */
.dropzone { border: 2px dashed #c7d2fe; border-radius: 1rem; padding: 2.5rem 1rem; text-align: center; cursor: pointer; transition: all .2s ease; background: #f8faff; }
.dark .dropzone { border-color: #3730a3; background: #0b1120; }
.dropzone:hover, .dropzone.dragover { border-color: #6366f1; background: #eef2ff; transform: scale(1.01); }
.dark .dropzone:hover, .dark .dropzone.dragover { background: #141b34; }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 700; padding: .8rem 1.6rem; border-radius: .75rem; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 10px 25px -10px rgba(99,102,241,.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(99,102,241,.8); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; padding: .8rem 1.2rem; border-radius: .75rem; border: 1px solid #e2e8f0; transition: background .15s ease; }
.dark .btn-ghost { border-color: #334155; }
.btn-ghost:hover { background: #f1f5f9; }
.dark .btn-ghost:hover { background: #1e293b; }

.preset-btn { padding: .55rem 1rem; border-radius: .65rem; font-size: .85rem; font-weight: 600; border: 1px solid #e2e8f0; background: #f8fafc; transition: all .15s ease; }
.dark .preset-btn { border-color: #334155; background: #1e293b; }
.preset-btn:hover { border-color: #6366f1; }
.preset-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.checker { background-color: #ffffff; background-image: linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }

.num-input { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .65rem; padding: .55rem .8rem; font-weight: 600; width: 7rem; }
.dark .num-input { background: #1e293b; border-color: #334155; }
.num-input:focus { outline: 2px solid #6366f1; border-color: #6366f1; }
select.num-input { width: auto; }

input[type="range"] { accent-color: #6366f1; cursor: pointer; }

.preview-box { position: relative; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0/24px 24px; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1rem; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.dark .preview-box { background: repeating-conic-gradient(#1e293b 0 25%, #0f172a 0 50%) 0 0/24px 24px; border-color: #334155; }

/* FAQ accordions */
.faq { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem; padding: .9rem 1.1rem; }
.dark .faq { background: #0f172a; border-color: #1e293b; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::before { content: '› '; color: #6366f1; font-weight: 800; }
.faq p { margin-top: .5rem; color: #64748b; }
.dark .faq p { color: #94a3b8; }

.prose-custom h2, .prose-custom h3 { letter-spacing: -0.01em; }

/* Ad slots — invisible until ad code is pasted */
.ad-slot { min-height: 90px; }
.ad-slot:empty { display: none !important; }
.ad-leaderboard { max-width: 970px; }

/* Tables */
#pdfTable th, #pdfTable td { border-bottom: 1px solid #e2e8f0; padding: .45rem .6rem; text-align: left; white-space: nowrap; }
.dark #pdfTable th, .dark #pdfTable td { border-color: #1e293b; }
#pdfTable thead th { background: #f1f5f9; font-weight: 700; position: sticky; top: 0; }
.dark #pdfTable thead th { background: #1e293b; }
#pdfTable tbody tr:nth-child(even) { background: rgba(148,163,184,.06); }

canvas { touch-action: none; }
#ppCanvas { cursor: grab; }
#ppCanvas:active { cursor: grabbing; }

/* Passport wizard step pills (pi7-style) */
.pp-step { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: .85rem; font-weight: 600; transition: all .15s; cursor: pointer; }
.dark .pp-step { background: #0f172a; border-color: #334155; color: #94a3b8; }
.pp-step:hover { border-color: #6366f1; color: #6366f1; }
.pp-step-num { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #475569; font-size: .75rem; font-weight: 700; }
.dark .pp-step-num { background: #1e293b; color: #94a3b8; }
.pp-step.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.pp-step.active .pp-step-num { background: rgba(255,255,255,.28); color: #fff; }
.pp-step.done .pp-step-num { background: #22c55e; color: #fff; }
.pp-step-sep { color: #cbd5e1; font-weight: 700; }
.dark .pp-step-sep { color: #475569; }

@media (max-width: 640px) {
  .tool-card { padding: 1.25rem; }
  .card { padding: 1rem; }
  .dropzone { padding: 1.75rem .75rem; }
}