/* Vibeio — light theme. Matches Scorelens design system exactly.
   Primary #2563eb blue · Accent #0ea5e9 sky · Same fonts, same patterns. */

html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; scroll-behavior: smooth; }
body {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 600px);
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ──────────────────────────────────────────────────────────────────────────
   BRAND BACKGROUNDS  (identical to Scorelens)
   ──────────────────────────────────────────────────────────────────────── */
.bg-grid {
    background-image:
        linear-gradient(rgba(37, 99, 235, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    pointer-events: none;
}
.blob-brand   { background: #2563eb; }
.blob-sky     { background: #0ea5e9; }
.blob-accent  { background: #1d4ed8; }
.blob-cyan    { background: #06b6d4; }
.blob-emerald { background: #10b981; }
.blob-rose    { background: #f43f5e; }
.blob-amber   { background: #f59e0b; }

/* ──────────────────────────────────────────────────────────────────────────
   TEXT EFFECTS
   ──────────────────────────────────────────────────────────────────────── */
.grad-text {
    background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 60%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   CARDS / PANELS
   ──────────────────────────────────────────────────────────────────────── */
.panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .08);
}
.panel-tinted {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid #dbeafe;
    border-radius: 1rem;
}

.card-lift {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 30px 60px -25px rgba(37, 99, 235, .25), 0 8px 16px -8px rgba(15, 23, 42, .08);
}

/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    background: #2563eb;
    color: #ffffff;
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, .55);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -8px rgba(37, 99, 235, .65);
}

.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    font-weight: 500;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { background: #f8fafc; border-color: #2563eb; color: #1d4ed8; }

.shadow-glow { box-shadow: 0 10px 40px -10px rgba(37, 99, 235, .5); }
.shadow-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .08); }

/* ──────────────────────────────────────────────────────────────────────────
   CHIPS / BADGES / PILLS
   ──────────────────────────────────────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.75rem;
    border-radius: 999px;
    font-weight: 500;
}
.chip-sky    { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.chip-emerald{ background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.chip-amber  { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.chip-rose   { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.chip-slate  { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

/* Status dots */
.sev-ok   { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.sev-warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .12); }
.sev-bad  { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.sev-info { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }

/* ──────────────────────────────────────────────────────────────────────────
   FORM INPUTS
   ──────────────────────────────────────────────────────────────────────── */
.input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.625rem;
    padding: 0.7rem 0.9rem;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.input::placeholder { color: #94a3b8; }

.label { display: block; font-size: 0.85rem; font-weight: 500; color: #475569; margin-bottom: 0.35rem; }

/* ──────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.fade-up    { animation: fadeUp .6s ease both; }
.fade-up.d1 { animation-delay: .08s; }
.fade-up.d2 { animation-delay: .16s; }
.fade-up.d3 { animation-delay: .24s; }
.fade-up.d4 { animation-delay: .32s; }
.fade-up.d5 { animation-delay: .40s; }
.fade-up.d6 { animation-delay: .48s; }

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.shimmer {
    background: linear-gradient(90deg, rgba(15, 23, 42, .04) 0%, rgba(15, 23, 42, .08) 50%, rgba(15, 23, 42, .04) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.5s linear infinite;
}

@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ──────────────────────────────────────────────────────────────────────────
   UTILITY
   ──────────────────────────────────────────────────────────────────────── */
.divide-soft > * + * { border-top: 1px solid #f1f5f9; }
.ring-track { stroke: rgba(15, 23, 42, .08); }
.ring-fill  { transition: stroke-dashoffset 1.2s cubic-bezier(.4, 0, .2, 1); }
.pbar-track { background: rgba(15, 23, 42, .07); }
.pbar-fill  { transition: width .8s cubic-bezier(.4, 0, .2, 1); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Premium image wrapper — adds subtle rounded frame + soft shadow */
.img-frame {
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .25);
    overflow: hidden;
    background: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   PRINT STYLESHEET (workflow outputs → branded PDF)
   ──────────────────────────────────────────────────────────────────────── */
@media print {
    @page {
        size: A4;
        margin: 18mm 14mm 22mm 14mm;
        @bottom-left {
            content: "Vibeio · ai.riocloudsolutions.com";
            font-family: 'Inter', sans-serif; font-size: 9pt; color: #64748b;
        }
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-family: 'Inter', sans-serif; font-size: 9pt; color: #64748b;
        }
    }
    @page :first { margin-top: 14mm; }

    html, body { background: #fff !important; color: #0f172a !important; }
    body { font-size: 10pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    header, footer, nav, .print-hidden, .blob, .bg-grid, button { display: none !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }

    .panel, .shadow-card, [class*="rounded-2xl"], [class*="rounded-xl"] {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        color: #0f172a !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
    a { color: #1d4ed8 !important; text-decoration: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #64748b; }
}