/* Wonda AI — design tokens + baseline + admin shell */
:root {
    --primary:     #1c1c3c;
    --accent:      #FF007E;
    --text:        #0f172a;
    --muted:       #64748b;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --border:      #e5e7eb;
    --success:     #15803d;
    --warning:     #b45309;
    --danger:      #b91c1c;
    --radius:      14px;
    --radius-sm:   8px;
    --shadow:      0 1px 3px rgba(0,0,0,.06);
    --shadow-lg:   0 10px 30px -12px rgba(0,0,0,.15);
    --font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:   ui-monospace, Menlo, Monaco, Consolas, monospace;
    --sidebar-w:   240px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
}

/* ---------- Landing ---------- */
.wonda-landing {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.wonda-landing__card {
    max-width: 560px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}
.wonda-landing__card h1 {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary);
}
.wonda-landing__lead { margin: 0 0 24px; color: var(--muted); }
.wonda-landing__meta {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
}
.wonda-landing__meta dt { color: var(--muted); font-weight: 500; }
.wonda-landing__meta dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }

/* ---------- Buttons ---------- */
.wonda-btn {
    display: inline-block;
    padding: 9px 18px;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease;
    text-decoration: none;
}
.wonda-btn:hover { background: #0d0d1f; text-decoration: none; color: #fff; }
.wonda-btn--secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.wonda-btn--secondary:hover { background: #eef2f7; color: var(--text); }
.wonda-btn--accent { background: var(--accent); }
.wonda-btn--accent:hover { background: #E00070; }
.wonda-btn--block { display: block; width: 100%; text-align: center; }
.wonda-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Form controls ---------- */
.wonda-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.wonda-field label { font-size: 13px; font-weight: 500; color: var(--text); }
.wonda-field input,
.wonda-field select,
.wonda-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
}
.wonda-field input:focus,
.wonda-field select:focus,
.wonda-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,0,126,.12);
}
.wonda-field small { color: var(--muted); font-size: 12px; }

/* ---------- Notices ---------- */
.wonda-notice { padding: 12px 16px; border-radius: var(--radius-sm); margin: 12px 0; font-size: 14px; }
.wonda-notice--info  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.wonda-notice--warn  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.wonda-notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wonda-notice--ok    { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ---------- App shell ---------- */
.wonda-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
.wonda-sidebar {
    background: var(--primary);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}
.wonda-sidebar__brand {
    padding: 0 20px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
    letter-spacing: .3px;
}
.wonda-sidebar__brand a { color: #fff; text-decoration: none; }
.wonda-sidebar__nav { flex: 1; display: flex; flex-direction: column; }
.wonda-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.wonda-sidebar__link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.wonda-sidebar__link.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--accent); }
.wonda-sidebar__link small { color: #94a3b8; font-size: 11px; margin-left: auto; text-transform: uppercase; letter-spacing: .5px; }
.wonda-sidebar__foot {
    padding: 16px 20px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    color: #94a3b8;
}
.wonda-sidebar__foot strong { display: block; color: #e2e8f0; font-size: 13px; margin-bottom: 4px; }
.wonda-sidebar__foot a { color: #cbd5e1; }
.wonda-sidebar__foot a:hover { color: #fff; }

.wonda-shell__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wonda-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wonda-topbar__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}
.wonda-topbar__meta { font-size: 13px; color: var(--muted); }
.wonda-topbar__actions { display: flex; align-items: center; gap: 12px; }

.wonda-content {
    flex: 1;
    padding: 28px;
    max-width: 1280px;
    width: 100%;
}

/* ---------- Cards ---------- */
.wonda-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.wonda-card h1,
.wonda-card h2 {
    margin-top: 0;
    color: var(--primary);
}
.wonda-card h2 { font-size: 17px; font-weight: 600; }
.wonda-card p { color: var(--text); }

.wonda-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.wonda-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.wonda-stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.wonda-stat__value { font-size: 28px; font-weight: 700; color: var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .wonda-shell { grid-template-columns: 1fr; }
    .wonda-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding: 10px;
        align-items: center;
    }
    .wonda-sidebar__brand { border: 0; padding: 0 14px 0 0; margin: 0; }
    .wonda-sidebar__nav { flex-direction: row; }
    .wonda-sidebar__link { padding: 8px 12px; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
    .wonda-sidebar__link.active { border-left: 0; border-bottom-color: var(--accent); }
    .wonda-sidebar__foot { display: none; }
    .wonda-content { padding: 20px; }
}

/* ==========================================================================
   Phase 10 additions — components used by the admin and client dashboards
   ========================================================================== */

/* ---------- Form grid ----------
   Two-up grid used inside admin and client forms. Collapses to a single
   column below 700px. */
.wonda-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}
@media (max-width: 700px) {
    .wonda-form-grid { grid-template-columns: 1fr; }
}

/* ---------- Form section ----------
   A visual subdivision inside a large card. Heading + horizontal rule. */
.wonda-form-section {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    margin-top: 18px;
}
.wonda-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.wonda-form-section > h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
}

/* ---------- Toggle ----------
   A checkbox row that reads as a two-line option with a title and a hint. */
.wonda-toggle {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.wonda-toggle:hover { border-color: #cbd5e1; background: #fbfcfe; }
.wonda-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.wonda-toggle__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    min-width: 0;
}
.wonda-toggle__label strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: block;
}
.wonda-toggle__label small {
    font-size: 12px;
    color: var(--muted);
    display: block;
}

/* ---------- Upload widget ----------
   Square preview + actions row + status line. Used in admin site-edit for
   the header logo and the launcher icon. */
.wonda-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.wonda-upload__preview {
    width: 128px;
    height: 128px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.wonda-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.wonda-upload__placeholder {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 8px;
}
.wonda-upload__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.wonda-upload__actions label.wonda-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.wonda-upload__actions input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 200px;
}
.wonda-upload__status {
    font-size: 12px;
    margin: 0;
    min-height: 16px;
    color: var(--muted);
}
.wonda-upload__status--ok    { color: var(--success); }
.wonda-upload__status--error { color: var(--danger); }
.wonda-upload__status--info  { color: var(--muted); }

/* ---------- Pills ----------
   Small status chips used on the client dashboard header. */
.wonda-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.wonda-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.wonda-pill--ok   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.wonda-pill--bad  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.wonda-pill--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.wonda-pill--info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ---------- Split layout ----------
   Two-column content area used on the client dashboard. First column is
   wider; second is a narrower sidebar-ish panel. Collapses below 900px. */
.wonda-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .wonda-split { grid-template-columns: 1fr; }
}

/* ---------- Empty state ----------
   Friendly "nothing here yet" panel used inside cards. */
.wonda-empty {
    text-align: center;
    padding: 32px 20px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
}
.wonda-empty h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.wonda-empty p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Activity feed ----------
   Compact list of recent items with a dot, title, time and action. */
.wonda-activity {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wonda-activity__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.wonda-activity__item:last-child { border-bottom: 0; }
.wonda-activity__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.wonda-activity__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wonda-activity__body code {
    font-size: 12px;
    background: transparent;
    border: 0;
    padding: 0;
}
.wonda-activity__body small {
    font-size: 12px;
    color: var(--muted);
}
.wonda-activity__time {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------- Stat trend indicators ----------
   Small ▲ / ▼ / — lines under a stat value. */
.wonda-stat__trend {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}
.wonda-stat__trend--up   { color: var(--success); }
.wonda-stat__trend--down { color: var(--danger); }
.wonda-stat__trend--flat { color: var(--muted); }

/* ---------- Feature grid (admin plan editor) ----------
   Multi-column grid of feature checkboxes. */
.wonda-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.wonda-feature-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.wonda-feature-check:hover { border-color: #cbd5e1; background: #fbfcfe; }
.wonda-feature-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.wonda-feature-check span {
    line-height: 1.3;
    min-width: 0;
}

/* ---------- Large textarea ----------
   Used on the knowledge base editor. */
textarea.large-text {
    width: 100%;
    min-height: 400px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}
/* ---------- Sidebar section headers + scroll ---------- */
.wonda-sidebar__nav {
    overflow-y: auto;
    padding-bottom: 12px;
}
.wonda-sidebar__section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.35);
    padding: 18px 20px 6px;
    font-weight: 700;
    user-select: none;
}
.wonda-sidebar__section:first-child {
    padding-top: 6px;
}

/* ============================================================
   Plan comparison table
   ============================================================ */
.wonda-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.wonda-plan-table th,
.wonda-plan-table td {
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.wonda-plan-table thead th {
    vertical-align: top;
    padding-top: 16px;
    padding-bottom: 16px;
    background: var(--surface-2);
}
.wonda-plan-table thead th:first-child {
    background: transparent;
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}
.wonda-plan-col {
    min-width: 130px;
    border-left: 1px solid var(--border);
}
.wonda-plan-col--current {
    background: rgba(255, 0, 126, .06) !important;
}
.wonda-plan-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}
.wonda-plan-price {
    font-size: 12px;
    color: var(--muted);
}
.wonda-plan-current {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    background: var(--accent);
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.wonda-plan-row-header td {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
    background: var(--surface-2);
    padding: 8px 14px;
}
.wonda-plan-label {
    text-align: left;
    font-weight: 500;
    color: var(--text);
}
.wonda-plan-cell {
    color: var(--text);
}
.wonda-plan-cell--current {
    background: rgba(255, 0, 126, .04);
}
.wonda-plan-tick {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #15803d;
    font-weight: 700;
    font-size: 12px;
}
.wonda-plan-dash {
    color: #cbd5e1;
    font-size: 14px;
}
@media (max-width: 700px) {
    .wonda-plan-table th,
    .wonda-plan-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
    .wonda-plan-name { font-size: 13px; }
}

/* ============================================================
   Locked feature fields (settings page)
   ============================================================ */
.wonda-field--locked {
    position: relative;
    opacity: .62;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
    background: var(--surface-2);
    cursor: not-allowed;
}
.wonda-lock-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ============================================================
   Plan comparison promo + inline lock hints
   ============================================================ */

/* Hero card on plan-comparison page */
.wonda-card--hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
        #ffffff 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Sidebar promo entry — stands out from the regular links */
.wonda-sidebar__link--promo {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 35%, transparent) 0%,
        transparent 100%);
    border-left-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
    position: relative;
}
.wonda-sidebar__link--promo:hover {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 55%, transparent) 0%,
        transparent 100%);
}
.wonda-sidebar__link--promo.active {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 65%, transparent) 0%,
        transparent 100%);
}
.wonda-sidebar__promo-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    margin-left: auto;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, .25);
}

/* Inline plan badge — sits next to labels, in flex rows, everywhere */
.wonda-plan-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    vertical-align: middle;
    line-height: 1.5;
    margin-left: 6px;
    white-space: nowrap;
}

/* Lock hint block — replaces the old upgrade hint */
.wonda-lock-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
}
.wonda-lock-hint__msg {
    color: #92400e;
}
.wonda-lock-hint__link {
    margin-left: auto;
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.wonda-lock-hint__link:hover { text-decoration: none; }

/* Locked field — subtle dimming + disabled cursor */
.wonda-field--locked label {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
    background: var(--surface-2);
    cursor: not-allowed;
    opacity: .8;
}

/* Locked toggle — overrides the clickable look */
.wonda-toggle--locked {
    opacity: .68;
    cursor: not-allowed;
}
.wonda-toggle--locked .wonda-toggle__label strong::after {
    content: ' 🔒';
    font-size: 11px;
}

/* Dark mode */
.wonda-dark .wonda-lock-hint,
[data-theme="dark"] .wonda-lock-hint {
    background: rgba(180, 83, 9, .12);
    border-color: rgba(180, 83, 9, .35);
    color: #fbbf24;
}
.wonda-dark .wonda-lock-hint__msg,
[data-theme="dark"] .wonda-lock-hint__msg { color: #fbbf24; }
.wonda-dark .wonda-lock-hint__link,
[data-theme="dark"] .wonda-lock-hint__link { color: #fbbf24; }

/* ============================================================
   Plan comparison promo + inline lock hints
   ============================================================ */

/* Hero card on plan-comparison page */
.wonda-card--hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
        #ffffff 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Sidebar promo entry — stands out from the regular links */
.wonda-sidebar__link--promo {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 35%, transparent) 0%,
        transparent 100%);
    border-left-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
    position: relative;
}
.wonda-sidebar__link--promo:hover {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 55%, transparent) 0%,
        transparent 100%);
}
.wonda-sidebar__link--promo.active {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 65%, transparent) 0%,
        transparent 100%);
}
.wonda-sidebar__promo-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    margin-left: auto;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, .25);
}

/* Inline plan badge — sits next to labels, in flex rows, everywhere */
.wonda-plan-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    vertical-align: middle;
    line-height: 1.5;
    margin-left: 6px;
    white-space: nowrap;
}

/* Lock hint block — replaces the old upgrade hint */
.wonda-lock-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.4;
}
.wonda-lock-hint__msg {
    color: #92400e;
}
.wonda-lock-hint__link {
    margin-left: auto;
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.wonda-lock-hint__link:hover { text-decoration: none; }

/* Locked field — subtle dimming + disabled cursor */
.wonda-field--locked label {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
    background: var(--surface-2);
    cursor: not-allowed;
    opacity: .8;
}

/* Locked toggle — overrides the clickable look */
.wonda-toggle--locked {
    opacity: .68;
    cursor: not-allowed;
}
.wonda-toggle--locked .wonda-toggle__label strong::after {
    content: ' 🔒';
    font-size: 11px;
}

/* Dark mode */
.wonda-dark .wonda-lock-hint,
[data-theme="dark"] .wonda-lock-hint {
    background: rgba(180, 83, 9, .12);
    border-color: rgba(180, 83, 9, .35);
    color: #fbbf24;
}
.wonda-dark .wonda-lock-hint__msg,
[data-theme="dark"] .wonda-lock-hint__msg { color: #fbbf24; }
.wonda-dark .wonda-lock-hint__link,
[data-theme="dark"] .wonda-lock-hint__link { color: #fbbf24; }

/* ============================================================
   Sidebar icons (Font Awesome inline SVGs)
   ============================================================ */
.wonda-sidebar__link .wonda-sidebar__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .15s ease;
}
.wonda-sidebar__link .wonda-sidebar__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.wonda-sidebar__link:hover .wonda-sidebar__icon,
.wonda-sidebar__link.active .wonda-sidebar__icon {
    opacity: 1;
}
.wonda-sidebar__link .wonda-sidebar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lock icon inside plan badges (Font Awesome inline SVG) */
.wonda-plan-badge .wonda-plan-lock-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 2px;
}
.wonda-plan-badge .wonda-plan-lock-icon svg {
    width: 11px;
    height: 11px;
    display: block;
}

/* ============================================================
   Sticky sidebar — both consoles
   ============================================================ */
@media (min-width: 901px) {
    .wonda-shell {
        align-items: start;
    }
    .wonda-sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .wonda-sidebar__nav {
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }
}

/* ============================================================
   Thin scrollbars
   ============================================================ */
.wonda-sidebar,
.wonda-sidebar__nav,
.wonda-content,
textarea.large-text {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .4) transparent;
}

.wonda-sidebar::-webkit-scrollbar,
.wonda-sidebar__nav::-webkit-scrollbar,
.wonda-content::-webkit-scrollbar,
textarea.large-text::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.wonda-sidebar::-webkit-scrollbar-track,
.wonda-sidebar__nav::-webkit-scrollbar-track,
.wonda-content::-webkit-scrollbar-track,
textarea.large-text::-webkit-scrollbar-track {
    background: transparent;
}
.wonda-sidebar::-webkit-scrollbar-thumb,
.wonda-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 6px;
}
.wonda-sidebar::-webkit-scrollbar-thumb:hover,
.wonda-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .28);
}
.wonda-content::-webkit-scrollbar-thumb,
textarea.large-text::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .18);
    border-radius: 6px;
}
.wonda-content::-webkit-scrollbar-thumb:hover,
textarea.large-text::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, .32);
}

/* ============================================================
   Layout refinements — Phase UX
   ============================================================ */

/* Form fields inside a form-grid: toggles and textareas span both columns */
.wonda-form-grid > .wonda-toggle,
.wonda-form-grid > .wonda-field--wide,
.wonda-form-grid > textarea.large-text {
    grid-column: 1 / -1;
}

/* Compact form-grid variant — up to 3 columns on wide screens */
@media (min-width: 1100px) {
    .wonda-form-grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Tighter sidebar — fits more items without scroll */
.wonda-sidebar__link {
    padding: 7px 20px !important;
    font-size: 13px !important;
}
.wonda-sidebar__section {
    padding: 12px 20px 4px !important;
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
}
.wonda-sidebar__brand {
    padding: 16px 20px 14px !important;
    font-size: 16px !important;
    margin-bottom: 6px !important;
}
.wonda-sidebar__foot {
    padding: 12px 20px 0 !important;
    font-size: 11px !important;
}
.wonda-sidebar__link .wonda-sidebar__icon {
    margin-right: 8px !important;
}

/* ============================================================
   Brand logo + version alignment (sidebar + forms)
   ============================================================ */
.wonda-sidebar__brand-link {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    max-width: 100%;
}
.wonda-sidebar__brand-link:hover { text-decoration: none; color: #fff; }
.wonda-sidebar__brand-logo {
    max-height: 26px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
}
.wonda-sidebar__brand-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    color: #fff;
}
.wonda-sidebar__version {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1px;
    white-space: nowrap;
    pointer-events: none;
}

/* Auth forms brand */
.wonda-auth__brand {
    display: inline-flex !important;
    align-items: flex-end;
    gap: 6px;
    text-decoration: none;
    max-width: 100%;
}
.wonda-auth__brand-logo {
    max-height: 32px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
.wonda-auth__brand-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    letter-spacing: .3px;
}
.wonda-auth__brand-version {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1;
    margin-bottom: 1px;
    white-space: nowrap;
}

/* Mobile — smaller sidebar logo */
@media (max-width: 900px) {
    .wonda-sidebar__brand-logo {
        max-height: 22px;
        max-width: 120px;
    }
    .wonda-sidebar__brand-text { font-size: 15px; }
    .wonda-sidebar__version { font-size: 9px; }
}

/* Forms logo — bigger, centred */
.wonda-auth__card {
    text-align: center;
}
.wonda-auth__brand {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto 28px !important;
    max-width: 100% !important;
    text-decoration: none !important;
}
.wonda-auth__brand-logo {
    max-height: 64px !important;
    height: auto !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}
.wonda-auth__brand-text {
    font-size: 22px !important;
    font-weight: 700 !important;
}
.wonda-auth__brand-version {
    font-size: 12px !important;
    margin-bottom: 2px !important;
}
/* Reset the heading centering for form content below */
.wonda-auth__title,
.wonda-auth__body {
    text-align: left;
}
.wonda-auth__title {
    text-align: center;
}

/* ============================================================
   Topbar notification bell (client dashboard)
   ============================================================ */
.wonda-bell { position: relative; display: inline-block; }

.wonda-bell__btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .12s ease, border-color .12s ease;
}
.wonda-bell__btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.wonda-bell__btn svg { width: 17px; height: 17px; display: block; }

.wonda-bell__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--surface);
    line-height: 1;
}

.wonda-bell__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 460px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .25);
    z-index: 500;
}
.wonda-bell__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.wonda-bell__head small { color: var(--muted); font-weight: 500; }

.wonda-bell__empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.wonda-bell__list { list-style: none; padding: 0; margin: 0; }
.wonda-bell__item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.wonda-bell__item:last-child { border-bottom: 0; }
.wonda-bell__item--unread { background: rgba(255, 0, 126, .04); }
.wonda-bell__item-title { font-weight: 600; color: var(--text); }
.wonda-bell__item-detail { color: var(--muted); margin-top: 3px; line-height: 1.4; }
.wonda-bell__item-time { color: #94a3b8; font-size: 11px; margin-top: 4px; }

.wonda-bell__foot {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    text-align: right;
    font-size: 12px;
    background: var(--surface-2);
}

@media (max-width: 600px) {
    .wonda-bell__panel { width: 300px; right: -8px; }
}

/* ============================================================
   Colour picker — pairs <input type="color"> with a text field
   ============================================================ */
.wonda-color-picker {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.wonda-color-picker input[type="color"] {
    width: 48px;
    height: auto;
    min-height: 40px;
    padding: 3px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}
.wonda-color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wonda-color-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.wonda-color-picker input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.wonda-color-picker input[type="text"] {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: lowercase;
}

/* ============================================================
   Impersonation banner (client dashboard, admin view)
   ============================================================ */
.wonda-impersonate-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 28px;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    color: #78350f;
    font-size: 13px;
    line-height: 1.4;
    position: sticky;
    top: 0;
    z-index: 600;
    box-shadow: 0 2px 6px rgba(120, 53, 15, .08);
}
.wonda-impersonate-banner__text {
    min-width: 0;
    flex: 1;
}
.wonda-impersonate-banner__text strong {
    color: #78350f;
    font-weight: 700;
    margin-right: 4px;
}
.wonda-impersonate-banner__text em {
    font-style: normal;
    font-weight: 600;
    color: #7c2d12;
    word-break: break-all;
}
.wonda-impersonate-banner .wonda-btn {
    background: #78350f;
    color: #fff;
    border: 0;
    flex-shrink: 0;
}
.wonda-impersonate-banner .wonda-btn:hover {
    background: #5b2a0b;
    color: #fff;
}

@media (max-width: 700px) {
    .wonda-impersonate-banner {
        padding: 10px 16px;
        font-size: 12.5px;
    }
}

/* ============================================================
   Impersonation banner (client dashboard, admin view)
   ============================================================ */
.wonda-impersonate-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 28px;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    color: #78350f;
    font-size: 13px;
    line-height: 1.4;
    position: sticky;
    top: 0;
    z-index: 600;
    box-shadow: 0 2px 6px rgba(120, 53, 15, .08);
}
.wonda-impersonate-banner__text {
    min-width: 0;
    flex: 1;
}
.wonda-impersonate-banner__text strong {
    color: #78350f;
    font-weight: 700;
    margin-right: 4px;
}
.wonda-impersonate-banner__text em {
    font-style: normal;
    font-weight: 600;
    color: #7c2d12;
    word-break: break-all;
}
.wonda-impersonate-banner .wonda-btn {
    background: #78350f;
    color: #fff;
    border: 0;
    flex-shrink: 0;
}
.wonda-impersonate-banner .wonda-btn:hover {
    background: #5b2a0b;
    color: #fff;
}

@media (max-width: 700px) {
    .wonda-impersonate-banner {
        padding: 10px 16px;
        font-size: 12.5px;
    }
}

/* ============================================================
   WONDA_MOBILE_DRAWER_CSS
   Mobile-first dashboard: off-canvas sidebar, proper gutters,
   readable tables, thumb-friendly controls. Appended after all
   existing rules so it wins the cascade on small screens.
   ============================================================ */
@media (max-width: 900px) {
    .wonda-shell { grid-template-columns: 1fr !important; }

    .wonda-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 288px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        padding: 14px 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translateX(-100%);
        transition: transform .26s cubic-bezier(.4,0,.2,1);
        z-index: 1000;
        box-shadow: 0 0 40px rgba(0,0,0,.35);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .wonda-sidebar.wonda-sidebar--open { transform: translateX(0) !important; }

    .wonda-sidebar__brand {
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        padding: 6px 20px 14px !important;
        margin: 0 0 8px !important;
    }
    .wonda-sidebar__nav {
        flex-direction: column !important;
        overflow-y: auto !important;
        flex: 1;
        min-height: 0;
    }
    .wonda-sidebar__section {
        padding: 14px 20px 4px !important;
        font-size: 9.5px !important;
    }
    .wonda-sidebar__link {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-left: 3px solid transparent !important;
        border-bottom: 0 !important;
        white-space: normal !important;
        gap: 12px !important;
    }
    .wonda-sidebar__link.active { border-left-color: var(--accent) !important; }
    .wonda-sidebar__link .wonda-sidebar__icon,
    .wonda-sidebar__link .wonda-sidebar__icon svg {
        width: 18px !important; height: 18px !important;
    }
    .wonda-sidebar__foot {
        display: block !important;
        padding: 14px 20px !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }

    .wonda-sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(15,23,42,.55);
        opacity: 0; pointer-events: none;
        transition: opacity .22s ease;
        z-index: 999;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
    .wonda-sidebar-backdrop.wonda-sidebar-backdrop--open {
        opacity: 1; pointer-events: auto;
    }

    .wonda-shell__main { width: 100% !important; min-width: 0; }

    .wonda-topbar {
        padding: 10px 14px !important;
        gap: 10px !important;
        min-height: 56px;
    }
    .wonda-topbar__title {
        font-size: 15px !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }
    .wonda-topbar__meta { display: none !important; }
    .wonda-topbar__actions { gap: 8px !important; flex-shrink: 0; }

    .wonda-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        padding: 0;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 10px;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .wonda-hamburger:active { background: var(--surface-2); }
    .wonda-hamburger svg { width: 18px; height: 18px; display: block; }

    .wonda-content { padding: 14px 12px 24px !important; }

    .wonda-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    .wonda-card h1 { font-size: 19px !important; }
    .wonda-card h2 { font-size: 16px !important; margin-bottom: 10px !important; }
    .wonda-card p  { font-size: 14px; }

    .wonda-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .wonda-field { margin-bottom: 12px !important; }
    .wonda-field input,
    .wonda-field select,
    .wonda-field textarea {
        font-size: 15px !important;
        padding: 11px 13px !important;
        min-height: 44px;
    }
    .wonda-field textarea { min-height: 96px; }
    textarea.large-text { min-height: 260px !important; font-size: 13px !important; }

    .wonda-toggle { padding: 14px !important; margin: 8px 0 !important; }
    .wonda-toggle input[type="checkbox"] {
        width: 22px !important; height: 22px !important; margin-top: 0 !important;
    }
    .wonda-toggle__label strong { font-size: 14.5px !important; }
    .wonda-toggle__label small  { font-size: 12.5px !important; }

    .wonda-btn {
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wonda-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .wonda-stat { padding: 14px !important; border-radius: 12px !important; }
    .wonda-stat__label { font-size: 11px !important; }
    .wonda-stat__value { font-size: 22px !important; }
    .wonda-stat__trend { font-size: 11.5px !important; }

    .wonda-split { grid-template-columns: 1fr !important; gap: 14px !important; }

    .wonda-card > div[style*="overflow-x:auto"],
    .wonda-card > div[style*="overflow-x: auto"] {
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }
    .wonda-card table { font-size: 13px !important; min-width: 100%; }
    .wonda-card table th,
    .wonda-card table td { padding: 10px 10px !important; white-space: nowrap; }
    .wonda-card table th:first-child,
    .wonda-card table td:first-child { padding-left: 4px !important; }
    .wonda-card table th:last-child,
    .wonda-card table td:last-child  { padding-right: 4px !important; }
    .wonda-card table td[style*="max-width"] {
        white-space: normal !important;
        max-width: 220px !important;
    }
    .wonda-card table td form { display: inline-block; margin: 2px 2px 2px 0; }
    .wonda-card table td .wonda-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }

    .wonda-notice { padding: 12px 14px !important; font-size: 13.5px !important; }
    .wonda-upload { padding: 12px !important; }
    .wonda-upload__preview { width: 110px !important; height: 110px !important; }
    .wonda-card pre, .wonda-card code { word-break: break-all; white-space: pre-wrap; }

    .wonda-bell__btn { width: 38px !important; height: 38px !important; }
    .wonda-bell__panel {
        position: fixed !important;
        top: 64px !important; left: 12px !important; right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 84px) !important;
        border-radius: 14px !important;
    }

    .wonda-impersonate-banner {
        position: static !important;
        padding: 10px 14px !important;
        font-size: 12.5px !important;
        flex-wrap: wrap;
    }

    .wonda-plan-table th,
    .wonda-plan-table td { padding: 8px 10px !important; font-size: 12px !important; }

    .wonda-feature-grid { grid-template-columns: 1fr !important; }
    .wonda-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
    .wonda-grid { grid-template-columns: 1fr !important; }
    .wonda-stat__value { font-size: 20px !important; }
    .wonda-content { padding: 12px 10px 24px !important; }
    .wonda-card { padding: 14px !important; }
    .wonda-topbar { padding: 8px 10px !important; }
    .wonda-topbar__title { font-size: 14px !important; }
    .wonda-hamburger { width: 38px; height: 38px; }
    .wonda-sidebar { width: 260px; max-width: 88vw; }
    .wonda-bell__panel { top: 58px !important; left: 8px !important; right: 8px !important; }
    .wonda-card[style*="display:flex"] {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .wonda-color-picker { flex-direction: row; }
    .wonda-color-picker input[type="color"] { width: 44px; }
    .wonda-card table { min-width: 520px; }
}

@media (min-width: 901px) {
    .wonda-hamburger { display: none !important; }
    .wonda-sidebar-backdrop { display: none !important; }
}
/* ==== END WONDA_MOBILE_DRAWER_CSS ==== */
/* ============================================================
   WONDA_BRANDED_CONSOLE_CSS
   Carries the sidebar's identity into the page canvas.
   Everything is additive — nothing here removes an existing rule.
   ============================================================ */

/* ---------- Design tokens for the console ---------- */
:root {
    --wonda-navy-1: #1c1c3c;
    --wonda-navy-2: #2a2a52;
    --wonda-navy-3: #141433;
    --wonda-canvas-top:    #f5f7fc;
    --wonda-canvas-bottom: #fbfcff;
    --wonda-card-border:   rgba(28, 28, 60, .07);
    --wonda-card-border-2: rgba(28, 28, 60, .12);
    --wonda-tint-accent:   rgba(255, 0, 126, .04);
    --wonda-tint-navy:     rgba(28, 28, 60, .035);
    --wonda-shadow-rest:
        0 1px 2px rgba(15, 23, 42, .035),
        0 8px 24px -14px rgba(15, 23, 42, .10);
    --wonda-shadow-hover:
        0 1px 2px rgba(15, 23, 42, .04),
        0 14px 32px -16px rgba(15, 23, 42, .14);
}

/* ---------- Page canvas ---------- */
body.wonda-body,
body {
    background:
        radial-gradient(900px 480px at 100% 0%,   rgba(255, 0, 126, .05), transparent 60%),
        radial-gradient(700px 420px at 0%   0%,   rgba(28, 28, 60, .045), transparent 55%),
        linear-gradient(180deg, var(--wonda-canvas-top) 0%, var(--wonda-canvas-bottom) 55%, var(--wonda-canvas-top) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Keep the auth pages on their existing gradient */
body.wonda-body--auth {
    background:
        radial-gradient(900px 480px at 50% 0%, rgba(255, 0, 126, .10), transparent 60%),
        linear-gradient(135deg, #FFE5F2 0%, #f8fafc 100%);
}

/* ============================================================
   Desktop treatment — the console look
   ============================================================ */
@media (min-width: 901px) {

    /* ---------- Cards ---------- */
    .wonda-card {
        background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
        border: 1px solid var(--wonda-card-border);
        border-radius: 16px;
        box-shadow: var(--wonda-shadow-rest);
        transition: box-shadow .18s ease, border-color .18s ease;
    }
    .wonda-card:hover {
        border-color: var(--wonda-card-border-2);
        box-shadow: var(--wonda-shadow-hover);
    }

    /* Section headers inside cards get an accent bar */
    .wonda-card > h2 {
        position: relative;
        padding-left: 14px;
        font-size: 17px;
        font-weight: 600;
        color: var(--wonda-navy-1);
        letter-spacing: -0.005em;
        margin-top: 0;
    }
    .wonda-card > h2::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        border-radius: 2px;
        background: linear-gradient(180deg,
            var(--accent) 0%,
            color-mix(in srgb, var(--accent) 45%, transparent) 100%);
    }

    /* ---------- Stats become hero elements ---------- */
    .wonda-stat {
        background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
        border: 1px solid var(--wonda-card-border);
        border-radius: 16px;
        padding: 22px 22px 20px;
        box-shadow: var(--wonda-shadow-rest);
        position: relative;
        overflow: hidden;
        transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    }
    .wonda-stat:hover {
        border-color: var(--wonda-card-border-2);
        box-shadow: var(--wonda-shadow-hover);
        transform: translateY(-1px);
    }

    /* Small accent tick in the top-left corner */
    .wonda-stat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 22px;
        width: 30px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg,
            var(--accent) 0%,
            rgba(255, 0, 126, .18) 100%);
    }
    /* Soft brand glow in the top-right corner */
    .wonda-stat::after {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 0, 126, .07) 0%, transparent 70%);
        pointer-events: none;
    }

    .wonda-stat__label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: var(--muted);
        margin-bottom: 10px;
    }
    .wonda-stat__value {
        font-size: 32px;
        font-weight: 700;
        color: var(--wonda-navy-1);
        letter-spacing: -0.025em;
        line-height: 1.05;
        position: relative;
        z-index: 1;
    }
    .wonda-stat__trend {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 500;
        position: relative;
        z-index: 1;
    }

    /* ---------- Tables get tinted headers ---------- */
    .wonda-card table thead th {
        background: linear-gradient(180deg, #f3f5fa 0%, #eef1f8 100%);
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        border-bottom: 1px solid var(--wonda-card-border-2) !important;
    }
    /* Nudge the base table padding up a touch */
    .wonda-card table thead th,
    .wonda-card table tbody td {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .wonda-card table tbody tr {
        transition: background-color .12s ease;
    }
    .wonda-card table tbody tr:hover {
        background: var(--wonda-tint-accent);
    }

    /* ---------- Buttons ---------- */
    .wonda-btn {
        background: linear-gradient(180deg, var(--wonda-navy-2) 0%, var(--wonda-navy-1) 100%);
        border: 0;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .10),
            inset 0 1px 0 rgba(255, 255, 255, .06);
        transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
    }
    .wonda-btn:hover {
        background: linear-gradient(180deg, var(--wonda-navy-1) 0%, var(--wonda-navy-3) 100%);
        box-shadow:
            0 4px 10px -2px rgba(15, 23, 42, .18),
            inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    .wonda-btn:active { transform: translateY(1px); }

    .wonda-btn--accent {
        background: linear-gradient(180deg, #ff2a92 0%, #e60072 100%);
        box-shadow:
            0 1px 2px rgba(255, 0, 126, .22),
            0 4px 12px -4px rgba(255, 0, 126, .28),
            inset 0 1px 0 rgba(255, 255, 255, .14);
    }
    .wonda-btn--accent:hover {
        background: linear-gradient(180deg, #e8006f 0%, #c8005f 100%);
        box-shadow:
            0 4px 14px -2px rgba(255, 0, 126, .34),
            inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .wonda-btn--secondary {
        background: #ffffff;
        color: var(--text);
        border: 1px solid var(--wonda-card-border-2);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }
    .wonda-btn--secondary:hover {
        background: #f8fafc;
        border-color: rgba(28, 28, 60, .22);
    }

    .wonda-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* ---------- Form fields ---------- */
    .wonda-field input,
    .wonda-field select,
    .wonda-field textarea {
        background: #fbfcff;
        border: 1px solid var(--wonda-card-border-2);
        transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
    }
    .wonda-field input:hover,
    .wonda-field select:hover,
    .wonda-field textarea:hover {
        border-color: rgba(28, 28, 60, .22);
    }
    .wonda-field input:focus,
    .wonda-field select:focus,
    .wonda-field textarea:focus {
        background: #ffffff;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
    }

    /* Form section headers get a small accent tick */
    .wonda-form-section > h3 {
        position: relative;
        padding-left: 12px;
        font-size: 11.5px;
        letter-spacing: .09em;
        color: #475569;
    }
    .wonda-form-section > h3::before {
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px;
        width: 3px;
        border-radius: 2px;
        background: var(--accent);
        opacity: .75;
    }

    /* ---------- Notices ---------- */
    .wonda-notice {
        border-radius: 12px;
        padding: 14px 18px;
        line-height: 1.55;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
    }

    /* ---------- Empty states ---------- */
    .wonda-empty {
        background: linear-gradient(180deg, #fbfcff 0%, #f4f6fb 100%);
        border: 1px dashed rgba(28, 28, 60, .14);
        border-radius: 14px;
        padding: 40px 24px;
        color: var(--muted);
    }
    .wonda-empty h3 {
        color: var(--wonda-navy-1);
        font-size: 16px;
        font-weight: 600;
    }

    /* ---------- Topbar refinement ---------- */
    .wonda-topbar {
        background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
        border-bottom: 1px solid var(--wonda-card-border);
        box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    }
    .wonda-topbar__title {
        letter-spacing: -0.01em;
        color: var(--wonda-navy-1);
    }
    .wonda-topbar__meta code {
        background: #f3f5fa;
        border-color: var(--wonda-card-border);
        color: #475569;
    }

    /* ---------- Sidebar footer nudge ---------- */
    .wonda-sidebar__link .wonda-sidebar__label {
        letter-spacing: .005em;
    }

    /* ---------- Toggle switches ---------- */
    .wonda-toggle {
        transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
    }
    .wonda-toggle:hover {
        border-color: var(--wonda-card-border-2);
        background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }
    .wonda-toggle input[type="checkbox"]:checked + .wonda-toggle__label strong {
        color: var(--wonda-navy-1);
    }

    /* ---------- Feature checklist ---------- */
    .wonda-feature-check {
        transition: border-color .14s ease, background .14s ease;
    }
    .wonda-feature-check:hover {
        border-color: var(--wonda-card-border-2);
        background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    }
    .wonda-feature-check input[type="checkbox"]:checked {
        filter: drop-shadow(0 0 4px rgba(255, 0, 126, .35));
    }

    /* ---------- Plan badges get a soft halo ---------- */
    .wonda-plan-badge {
        box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
    }
    .wonda-plan-tick {
        background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
        box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .14);
    }

    /* ---------- Activity feed ---------- */
    .wonda-activity__dot {
        box-shadow: 0 0 0 3px rgba(255, 0, 126, .10);
    }
    .wonda-activity__item:hover {
        background: var(--wonda-tint-accent);
    }
    .wonda-activity__item {
        transition: background-color .12s ease;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 8px;
    }

    /* ---------- Pill refinement ---------- */
    .wonda-pill {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    /* ---------- Impersonation banner ---------- */
    .wonda-impersonate-banner {
        background: linear-gradient(90deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
        box-shadow: 0 2px 8px rgba(120, 53, 15, .10);
    }
}

/* ============================================================
   Mobile polish — keep the tight layout, add the brand touches
   that work at small sizes.
   ============================================================ */
@media (max-width: 900px) {
    /* Accent tick on card headings */
    .wonda-card > h2 {
        position: relative;
        padding-left: 12px;
        color: var(--wonda-navy-1);
    }
    .wonda-card > h2::before {
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px;
        width: 3px;
        border-radius: 2px;
        background: var(--accent);
        opacity: .85;
    }

    /* Small accent tick on stats */
    .wonda-stat {
        position: relative;
        overflow: hidden;
    }
    .wonda-stat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 14px;
        width: 22px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg,
            var(--accent) 0%,
            rgba(255, 0, 126, .18) 100%);
    }

    .wonda-stat__value { color: var(--wonda-navy-1); }

    /* Section headers in forms */
    .wonda-form-section > h3 {
        position: relative;
        padding-left: 12px;
    }
    .wonda-form-section > h3::before {
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px;
        width: 3px;
        border-radius: 2px;
        background: var(--accent);
        opacity: .75;
    }

    /* Tinted table headers on mobile too */
    .wonda-card table thead th {
        background: #f3f5fa;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
}

/* ==== END WONDA_BRANDED_CONSOLE_CSS ==== */

/* ============================================================
   WONDA_ACTIVITY_DETAIL_CSS
   Rich activity reports — the kb.rules_filtered card.
   ============================================================ */

.wonda-act-text {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 4px;
}

.wonda-kb-report {
    margin-top: 10px;
    border: 1px solid #fde68a;
    background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #78350f;
}

.wonda-kb-report__lead {
    font-size: 14px;
    color: #78350f;
    line-height: 1.5;
    margin-bottom: 14px;
}

.wonda-kb-report__count {
    display: inline-block;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    vertical-align: -6px;
    margin-right: 4px;
    box-shadow: 0 2px 6px -1px rgba(245, 158, 11, .35);
}

.wonda-kb-report__sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: #92400e;
    opacity: .85;
    line-height: 1.5;
}

.wonda-kb-report__list {
    list-style: none;
    counter-reset: kb;
    margin: 0;
    padding: 0;
}

.wonda-kb-report__item {
    counter-increment: kb;
    position: relative;
    padding: 12px 14px 12px 40px;
    background: #fff;
    border: 1px solid rgba(120, 53, 15, .10);
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(120, 53, 15, .04);
}
.wonda-kb-report__item::before {
    content: counter(kb);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}

.wonda-kb-report__reason {
    font-size: 11.5px;
    font-weight: 600;
    color: #92400e;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
    line-height: 1.4;
}
.wonda-kb-report__reason-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: #b45309;
    margin-right: 4px;
}
.wonda-kb-report__line {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #b45309;
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.wonda-kb-report__quote {
    margin: 0;
    padding: 8px 12px;
    background: #fdfbf5;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #1c1c3c;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.wonda-kb-report__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(120, 53, 15, .20);
    font-size: 12.5px;
    color: #78350f;
    line-height: 1.55;
}
.wonda-kb-report__foot strong { color: #7c2d12; }
.wonda-kb-report__foot a {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.wonda-kb-report__foot a:hover { text-decoration: none; }

.wonda-kb-report__meta {
    margin-top: 10px;
    font-size: 11px;
    color: #b45309;
    opacity: .8;
    font-family: var(--font-mono);
}

/* Dark mode (the widget sets .wonda-dark on its own root — the
   console follows it if the body ever gets a [data-theme="dark"]). */
[data-theme="dark"] .wonda-kb-report,
.wonda-dark .wonda-kb-report {
    border-color: rgba(180, 83, 9, .35);
    background: rgba(180, 83, 9, .12);
    color: #fbbf24;
}
[data-theme="dark"] .wonda-kb-report__sub,
.wonda-dark .wonda-kb-report__sub { color: #fbbf24; }
[data-theme="dark"] .wonda-kb-report__item,
.wonda-dark .wonda-kb-report__item {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .wonda-kb-report__quote,
.wonda-dark .wonda-kb-report__quote {
    background: rgba(15, 23, 42, .55);
    color: #e2e8f0;
}

/* ---------- Bell: items become clickable links ---------- */
.wonda-bell__item-inner {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: -12px -16px;
    padding: 12px 16px;
    transition: background .12s ease;
}
.wonda-bell__item-inner:hover {
    background: rgba(255, 0, 126, .05);
    text-decoration: none;
    color: inherit;
}
.wonda-bell__item--link { padding: 0 !important; }
.wonda-bell__item--link.wonda-bell__item--unread .wonda-bell__item-inner {
    background: rgba(255, 0, 126, .04);
}

/* Mobile */
@media (max-width: 900px) {
    .wonda-kb-report {
        padding: 12px 12px;
        font-size: 12.5px;
    }
    .wonda-kb-report__item {
        padding: 10px 12px 10px 34px;
    }
    .wonda-kb-report__item::before {
        left: 10px;
        top: 10px;
    }
    .wonda-kb-report__quote {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* ==== END WONDA_ACTIVITY_DETAIL_CSS ==== */

/* ============================================================
   WONDA_MOBILE_FIXES_2_CSS
   Targeted fixes for the two issues reported on mobile:
     - Chat-logs table overflowing instead of scrolling
     - Activity timestamps sitting beside the content
   ============================================================ */

/* ---------- Table scroll wrapper (applies on any viewport) ---------- */
.wonda-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .5) transparent;
    margin: 0;
    padding: 0;
}
.wonda-table-scroll::-webkit-scrollbar { height: 6px; }
.wonda-table-scroll::-webkit-scrollbar-track { background: transparent; }
.wonda-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .4);
    border-radius: 3px;
}
.wonda-table-scroll > table { margin: 0; }

/* Edge-bleed so the scroll area touches the card border on mobile */
@media (max-width: 900px) {
    .wonda-card > .wonda-table-scroll {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ---------- Mobile: force tables to scroll, not overflow ---------- */
@media (max-width: 900px) {
    .wonda-card table {
        min-width: 0;
    }
    /* Tables that are wide because of content get a min-width
       so the scrollbar is meaningful and columns stay readable. */
    .wonda-table-scroll > table {
        min-width: 640px;
    }
    /* But tables that only have 2-3 columns stay narrow */
    .wonda-table-scroll > table.wonda-table--narrow {
        min-width: 100%;
    }
    .wonda-card table th,
    .wonda-card table td {
        white-space: nowrap;
    }
    /* Let max-width cells wrap */
    .wonda-card table td[style*="max-width"] {
        white-space: normal !important;
    }
}

/* ---------- Mobile: activity timeline stacking ---------- */
@media (max-width: 900px) {

    /* Item becomes a wrap container — dot + body on row 1,
       time drops to row 2, indented under the body. */
    .wonda-activity__item {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 4px;
        column-gap: 12px;
        padding: 14px 0 14px 2px !important;
    }

    .wonda-activity__dot {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .wonda-activity__body {
        flex: 1 1 calc(100% - 26px);
        min-width: 0;
    }

    .wonda-activity__time {
        /* Full-width row under the body — but indented past the dot
           so it visually belongs to the entry above. */
        flex: 1 1 100%;
        margin-left: 26px;
        margin-top: 4px;
        padding: 0;
        text-align: left;
        color: #94a3b8;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 480px) {
    .wonda-activity__time {
        margin-left: 24px;
    }
    .wonda-table-scroll > table { min-width: 560px; }
}

/* ---------- Mobile: chat-logs hero stats stack cleanly ---------- */
@media (max-width: 900px) {
    .wonda-convo-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .wonda-convo-hero__stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
    }
    .wonda-convo-hero__stat {
        align-items: flex-start;
        padding: 8px 10px;
        background: rgba(255, 255, 255, .5);
        border-radius: 8px;
    }
    .wonda-convo-hero__stat-value {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .wonda-convo-hero__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Mobile: chat-logs transcript rows ---------- */
@media (max-width: 900px) {
    .wonda-transcript__row {
        max-width: 100% !important;
    }
    .wonda-transcript__row--user {
        margin-left: 0 !important;
    }
}

/* ==== END WONDA_MOBILE_FIXES_2_CSS ==== */

/* ============================================================
   WONDA_KB_EDITOR_CSS
   Meta bar + flagged panel + editor jump highlight.
   ============================================================ */

/* ---------- Meta bar ---------- */
.wonda-kb-meta {
    margin: 0 0 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(28, 28, 60, .07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    position: relative;
    overflow: hidden;
}
.wonda-kb-meta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wonda-navy-2) 0%, var(--wonda-navy-1) 100%);
    opacity: .85;
}
.wonda-kb-meta--info::before  { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.wonda-kb-meta--warn::before  { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
.wonda-kb-meta--error::before { background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%); }

.wonda-kb-meta__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 10px;
}
.wonda-kb-meta__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wonda-kb-meta__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--wonda-navy-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wonda-kb-meta--warn  .wonda-kb-meta__value { color: #b45309; }
.wonda-kb-meta--error .wonda-kb-meta__value { color: #b91c1c; }
.wonda-kb-meta__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--muted);
}
.wonda-kb-meta__note {
    font-size: 12.5px;
    line-height: 1.55;
    color: #475569;
    padding-top: 10px;
    border-top: 1px solid rgba(28, 28, 60, .06);
    position: relative;
}
.wonda-kb-meta--info  .wonda-kb-meta__note { color: #1e40af; }
.wonda-kb-meta--warn  .wonda-kb-meta__note { color: #92400e; }
.wonda-kb-meta--error .wonda-kb-meta__note { color: #991b1b; font-weight: 500; }

.wonda-kb-meta__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(28, 28, 60, .08);
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    cursor: help;
    vertical-align: -3px;
}

/* ---------- Flagged panel ---------- */
.wonda-kb-flags {
    margin: 0 0 18px;
    border: 1px solid #fcd34d;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%);
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(120, 53, 15, .05);
}
.wonda-kb-flags__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.wonda-kb-flags__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .45);
}
.wonda-kb-flags__icon svg { width: 18px; height: 18px; display: block; }
.wonda-kb-flags__headtext { flex: 1; min-width: 200px; }
.wonda-kb-flags__title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #78350f;
    line-height: 1.3;
    margin-bottom: 3px;
}
.wonda-kb-flags__sub {
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.5;
}
.wonda-kb-flags__next {
    padding: 8px 14px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    box-shadow: 0 4px 10px -4px rgba(180, 83, 9, .40);
    transition: transform .1s ease, box-shadow .15s ease;
}
.wonda-kb-flags__next:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(180, 83, 9, .48);
}

.wonda-kb-flags__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: kbf;
}
.wonda-kb-flags__item {
    counter-increment: kbf;
    position: relative;
    padding: 12px 14px 12px 42px;
    background: #fff;
    border: 1px solid rgba(120, 53, 15, .10);
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(120, 53, 15, .04);
}
.wonda-kb-flags__item:last-child { margin-bottom: 0; }
.wonda-kb-flags__item::before {
    content: counter(kbf);
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}
.wonda-kb-flags__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.wonda-kb-flags__line {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: .02em;
}
.wonda-kb-flags__line--unknown {
    background: #f1f5f9;
    color: #64748b;
}
.wonda-kb-flags__reason {
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}
.wonda-kb-flags__quote {
    margin: 0 0 8px;
    padding: 8px 12px;
    background: #fdfbf5;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #1c1c3c;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.wonda-kb-flags__actions { display: flex; gap: 6px; }
.wonda-kb-flags__jump {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(120, 53, 15, .22);
    background: #fff;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease, border-color .12s ease;
}
.wonda-kb-flags__jump:hover {
    background: #fef3c7;
    border-color: rgba(120, 53, 15, .40);
}

/* ---------- Editor flash when jumping ---------- */
.wonda-kb-editor--flash {
    border-color: #f59e0b !important;
    animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
    55%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ---------- Activity report: per-item fix button ---------- */
.wonda-kb-report__actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.wonda-kb-report__fix {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(120, 53, 15, .25);
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.wonda-kb-report__fix:hover {
    background: #fef3c7;
    border-color: rgba(120, 53, 15, .40);
    text-decoration: none;
    color: #78350f;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-meta { padding: 12px 14px; }
    .wonda-kb-meta__row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
        margin-bottom: 8px;
    }
    .wonda-kb-meta__value { font-size: 19px; }
    .wonda-kb-meta__note { font-size: 12px; }

    .wonda-kb-flags { padding: 12px 14px; }
    .wonda-kb-flags__head { gap: 10px; }
    .wonda-kb-flags__icon { width: 30px; height: 30px; }
    .wonda-kb-flags__icon svg { width: 16px; height: 16px; }
    .wonda-kb-flags__title { font-size: 13.5px; }
    .wonda-kb-flags__sub  { font-size: 12px; }
    .wonda-kb-flags__next {
        width: 100%;
        margin-top: 4px;
        justify-content: center;
    }
    .wonda-kb-flags__item { padding: 10px 12px 10px 38px; }
    .wonda-kb-flags__item::before { left: 12px; top: 12px; }
    .wonda-kb-flags__quote { font-size: 12px; padding: 7px 10px; }
    .wonda-kb-flags__jump { width: 100%; justify-content: center; }
}

/* ==== END WONDA_KB_EDITOR_CSS ==== */

/* ============================================================
   WONDA_KB_LINENUM_CSS
   Line-number gutter next to the KB editor.
   ============================================================ */

.wonda-kb-editor-wrap {
    display: flex;
    border: 1px solid rgba(28, 28, 60, .14);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wonda-kb-editor-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}

.wonda-kb-editor-gutter {
    flex-shrink: 0;
    min-width: 56px;
    padding: 12px 8px 12px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f5fa 100%);
    border-right: 1px solid rgba(28, 28, 60, .07);
    color: #94a3b8;
    text-align: right;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    overflow: hidden;
    scrollbar-width: none;
}
.wonda-kb-editor-gutter::-webkit-scrollbar { display: none; }

.wonda-kb-editor-gutter__line {
    padding: 0 2px;
    color: #94a3b8;
    line-height: 1.6;
    height: 1.6em;
}
.wonda-kb-editor-gutter__line--flagged {
    color: #b45309;
    font-weight: 700;
    background: rgba(245, 158, 11, .18);
    margin: 0 -8px 0 -12px;
    padding: 0 8px 0 10px;
    border-left: 2px solid #f59e0b;
}

/* Textarea inside the wrapper */
.wonda-kb-editor-wrap textarea {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 16px !important;
    resize: none !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    outline: 0 !important;
    box-shadow: none !important;
    min-height: 400px;
    overflow-y: auto;
    color: var(--text);
    display: block;
}

/* Flash highlight when jumping */
.wonda-kb-editor-wrap:has(.wonda-kb-editor--flash) {
    border-color: #f59e0b !important;
    animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
    55%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
    .wonda-kb-editor-wrap { font-size: 12px; }
    .wonda-kb-editor-gutter {
        min-width: 42px;
        padding: 10px 6px 10px 8px;
        font-size: 11px;
    }
    .wonda-kb-editor-gutter__line--flagged {
        margin: 0 -6px 0 -8px;
        padding: 0 6px 0 6px;
    }
    .wonda-kb-editor-wrap textarea {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        min-height: 320px;
    }
}

/* ==== END WONDA_KB_LINENUM_CSS ==== */

/* ============================================================
   WONDA_KB_INFO_PANEL_CSS
   KB stats panel in sidebar-navy. Matches the console's brand.
   ============================================================ */

.wonda-kb-info {
    position: relative;
    margin: 0 0 18px;
    padding: 18px 20px 16px;
    border-radius: 16px;
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(255, 0, 126, .10), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
    color: #e2e8f0;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .12),
        0 18px 36px -18px rgba(28, 28, 60, .55);
    overflow: hidden;
}
.wonda-kb-info::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255, 0, 126, .85) 0%,
        rgba(255, 0, 126, .20) 55%,
        transparent 100%);
}

.wonda-kb-info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wonda-kb-info__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.wonda-kb-info__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff2a92;
    box-shadow: 0 0 0 3px rgba(255, 0, 126, .22);
}
.wonda-kb-info__status {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
    white-space: nowrap;
}
.wonda-kb-info__status--dirty {
    color: #fbbf24;
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .30);
}

.wonda-kb-info__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.wonda-kb-info__stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    min-width: 0;
    transition: background .15s ease, border-color .15s ease;
}
.wonda-kb-info__stat:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .10);
}
.wonda-kb-info__value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wonda-kb-info__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Value-colour variants */
.wonda-kb-info__stat--warn .wonda-kb-info__value { color: #fbbf24; }
.wonda-kb-info__stat--danger .wonda-kb-info__value { color: #fb7185; }
.wonda-kb-info__stat--flag {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .25);
}
.wonda-kb-info__stat--flag .wonda-kb-info__value { color: #fbbf24; }

.wonda-kb-info__note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(226, 232, 240, .78);
}
.wonda-kb-info__note--info  { color: #93c5fd; }
.wonda-kb-info__note--warn  { color: #fbbf24; font-weight: 500; }
.wonda-kb-info__note--error { color: #fb7185; font-weight: 500; }

/* ============================================================
   Flag panel — match the new tone (darker card, amber accents)
   ============================================================ */
.wonda-kb-flags {
    border-color: rgba(245, 158, 11, .30) !important;
    background: linear-gradient(180deg, rgba(28, 28, 60, .04) 0%, rgba(28, 28, 60, .02) 100%) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 30px -18px rgba(120, 53, 15, .18) !important;
}
.wonda-kb-flags__title { color: #7c2d12 !important; }
.wonda-kb-flags__sub   { color: #92400e !important; }

.wonda-kb-flags__next {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
    box-shadow:
        0 1px 2px rgba(180, 83, 9, .28),
        0 4px 10px -4px rgba(180, 83, 9, .45) !important;
}

/* ============================================================
   Editor gutter — refine to feel like a code editor
   ============================================================ */
.wonda-kb-editor-wrap {
    border-color: rgba(28, 28, 60, .14) !important;
    border-radius: 12px !important;
    background: #fbfcff !important;
}
.wonda-kb-editor-gutter {
    background: linear-gradient(180deg, #eef1f8 0%, #e6eaf4 100%) !important;
    border-right: 1px solid rgba(28, 28, 60, .08) !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.wonda-kb-editor-gutter__line--flagged {
    color: #78350f !important;
    background: linear-gradient(90deg, rgba(251, 191, 36, .28) 0%, rgba(251, 191, 36, .10) 100%) !important;
    border-left: 2px solid #f59e0b !important;
    font-weight: 700 !important;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
    .wonda-kb-info {
        padding: 14px 16px 12px;
        border-radius: 14px;
    }
    .wonda-kb-info__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .wonda-kb-info__stat { padding: 9px 10px; }
    .wonda-kb-info__value { font-size: 17px; }
    .wonda-kb-info__label { font-size: 9.5px; }
    .wonda-kb-info__head { margin-bottom: 12px; padding-bottom: 10px; }
    .wonda-kb-info__note { font-size: 12px; margin-top: 12px; padding-top: 10px; }

    .wonda-kb-editor-gutter {
        min-width: 40px !important;
        padding-left: 6px !important;
        padding-right: 4px !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 480px) {
    .wonda-kb-info__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .wonda-kb-info__value { font-size: 16px; }
}

/* ==== END WONDA_KB_INFO_PANEL_CSS ==== */

/* ============================================================
   WONDA_KB_GUTTER_SYNC_CSS
   Forces gutter and textarea to share exact pixel line metrics
   so the numbers stay glued to their lines, and switches the
   gutter to transform-based scroll sync.
   ============================================================ */

/* ---------- Container ---------- */
.wonda-kb-editor-wrap {
    display: flex !important;
    align-items: stretch !important;
    height: 480px !important;          /* fixed height — both children fill */
    border: 1px solid rgba(28, 28, 60, .14) !important;
    border-radius: 12px !important;
    background: #fbfcff !important;
    overflow: hidden !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 21px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wonda-kb-editor-wrap:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(255, 0, 126, .10) !important;
}

/* ---------- Gutter ---------- */
.wonda-kb-editor-gutter {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 100% !important;           /* fill the wrap */
    overflow: hidden !important;       /* clips content; inner moves via transform */
    background: linear-gradient(180deg, #eef1f8 0%, #e6eaf4 100%) !important;
    border-right: 1px solid rgba(28, 28, 60, .08) !important;
    color: #94a3b8 !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 21px !important;
    font-variant-numeric: tabular-nums !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    scrollbar-width: none !important;
}
.wonda-kb-editor-gutter::-webkit-scrollbar { display: none !important; }

/* Inner list — moved with translateY(-scrollTop). */
.wonda-kb-editor-gutter__inner {
    position: absolute !important;
    top: 12px !important;              /* matches textarea padding-top */
    left: 0 !important;
    right: 0 !important;
    will-change: transform !important;
    transition: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each line — pixel line-height so it aligns with the textarea */
.wonda-kb-editor-gutter__line {
    height: 21px !important;
    line-height: 21px !important;
    padding: 0 10px 0 8px !important;
    text-align: right !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    box-sizing: border-box !important;
}

.wonda-kb-editor-gutter__line--flagged {
    color: #78350f !important;
    background: linear-gradient(90deg, rgba(251, 191, 36, .32) 0%, rgba(251, 191, 36, .12) 100%) !important;
    font-weight: 700 !important;
    border-left: 2px solid #f59e0b !important;
    padding-left: 6px !important;
}

/* ---------- Textarea — same font / line-height / padding as gutter ---------- */
.wonda-kb-editor-wrap textarea {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;          /* override the 400px min-height */
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 12px 16px !important;     /* top matches gutter inner */
    margin: 0 !important;
    resize: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 21px !important;
    color: var(--text) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: pre !important;
    tab-size: 4 !important;
}
.wonda-kb-editor-wrap textarea::placeholder { color: #94a3b8; }

/* Flash */
.wonda-kb-editor-wrap:has(.wonda-kb-editor--flash) {
    border-color: #f59e0b !important;
    animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
    55%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
    .wonda-kb-editor-wrap {
        height: 360px !important;
    }
    .wonda-kb-editor-gutter {
        width: 44px !important;
        min-width: 44px !important;
        font-size: 12px !important;
        line-height: 20px !important;
    }
    .wonda-kb-editor-gutter__inner {
        top: 10px !important;          /* matches mobile textarea padding-top */
    }
    .wonda-kb-editor-gutter__line {
        height: 20px !important;
        line-height: 20px !important;
        font-size: 12px !important;
        padding: 0 8px 0 6px !important;
    }
    .wonda-kb-editor-gutter__line--flagged {
        padding-left: 4px !important;
    }
    .wonda-kb-editor-wrap textarea {
        padding: 10px 12px !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }
}

/* ==== END WONDA_KB_GUTTER_SYNC_CSS ==== */

/* ============================================================
   WONDA_KB_HIGHLIGHT_CSS
   Persistent current-line highlight for the KB editor.
   The band sits ABOVE the textarea but has pointer-events: none
   so all clicks and typing pass through untouched.
   ============================================================ */

.wonda-kb-editor-wrap {
    position: relative !important;
}

.wonda-kb-editor-highlight {
    position: absolute !important;
    left: 56px !important;              /* = gutter width */
    right: 0 !important;
    top: 0 !important;
    height: 21px !important;            /* one line, matches CSS line-height */
    background:
        linear-gradient(90deg,
            rgba(251, 191, 36, .30) 0%,
            rgba(251, 191, 36, .14) 60%,
            rgba(251, 191, 36, .04) 100%) !important;
    border-left: 3px solid #f59e0b !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0;
    transition: opacity .18s ease, transform .05s linear !important;
    will-change: transform !important;
    box-sizing: border-box !important;
}

/* Blinking indicator dot at the left edge for extra visibility */
.wonda-kb-editor-highlight::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f59e0b;
    transform: translateY(-50%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}

/* ---------- Gutter active-line state ---------- */
.wonda-kb-editor-gutter__line--active {
    background: linear-gradient(90deg,
        rgba(245, 158, 11, .35) 0%,
        rgba(245, 158, 11, .10) 100%) !important;
    color: #78350f !important;
    font-weight: 700 !important;
    border-left: 2px solid #d97706 !important;
}

/* If the line is both flagged AND active, make active win */
.wonda-kb-editor-gutter__line--active.wonda-kb-editor-gutter__line--flagged {
    background: linear-gradient(90deg,
        rgba(245, 158, 11, .45) 0%,
        rgba(245, 158, 11, .18) 100%) !important;
    border-left: 3px solid #b45309 !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-editor-highlight {
        left: 44px !important;          /* matches mobile gutter width */
        height: 20px !important;
    }
}

/* ==== END WONDA_KB_HIGHLIGHT_CSS ==== */

/* ============================================================
   WONDA_KB_REPORT_V2_CSS
   Activity KB report — brand navy + pink, FontAwesome warning
   triangle in red. Overrides earlier amber styling.
   ============================================================ */

/* Nuke the old palette by scoping strong overrides with high specificity. */

.wonda-kb-report {
    margin-top: 10px;
    border: 1px solid rgba(28, 28, 60, .10) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 12px 30px -18px rgba(28, 28, 60, .22);
}

/* ---------- Header row — navy band ---------- */
.wonda-kb-report__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
    color: #ffffff;
    position: relative;
}
.wonda-kb-report__head::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255, 0, 126, .85) 0%,
        rgba(255, 0, 126, .20) 55%,
        transparent 100%);
}

.wonda-kb-report__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(185, 28, 28, .18);
    border: 1px solid rgba(185, 28, 28, .35);
    color: #f87171;   /* red triangle */
    flex-shrink: 0;
    margin-top: 2px;
}
.wonda-kb-report__icon svg { width: 20px; height: 20px; display: block; }

.wonda-kb-report__headtext { flex: 1; min-width: 0; }

.wonda-kb-report__title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.wonda-kb-report__title--ok { color: #86efac; }

.wonda-kb-report__sub {
    font-size: 12.5px;
    color: rgba(226, 232, 240, .78);
    line-height: 1.55;
}

/* ---------- List of conflicts ---------- */
.wonda-kb-report__list {
    list-style: none;
    counter-reset: kbr;
    margin: 0;
    padding: 16px 18px 4px;
}

.wonda-kb-report__item {
    counter-increment: kbr;
    position: relative;
    padding: 14px 16px 14px 44px;
    background: #ffffff;
    border: 1px solid rgba(28, 28, 60, .08);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.wonda-kb-report__item:last-child { margin-bottom: 0; }
.wonda-kb-report__item:hover {
    border-color: rgba(28, 28, 60, .16);
    box-shadow: 0 4px 12px -6px rgba(28, 28, 60, .14);
}
.wonda-kb-report__item::before {
    content: counter(kbr);
    position: absolute;
    left: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF007E 0%, #C8005F 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
    box-shadow: 0 2px 6px -2px rgba(255, 0, 126, .45);
}

/* ---------- Meta row — reason + line number ---------- */
.wonda-kb-report__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.wonda-kb-report__reason {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #b91c1c;   /* red — because it's a warning */
    background: rgba(185, 28, 28, .08);
    border: 1px solid rgba(185, 28, 28, .14);
    padding: 3px 10px;
    border-radius: 6px;
}

.wonda-kb-report__line {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wonda-navy-1, #1c1c3c);
    background: #f3f5fa;
    border: 1px solid rgba(28, 28, 60, .08);
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: .01em;
}
.wonda-kb-report__line-was {
    font-weight: 500;
    color: #94a3b8;
    font-size: 10.5px;
    margin-left: 4px;
    letter-spacing: 0;
}

/* ---------- Quote ---------- */
.wonda-kb-report__quote {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #fbfcff;
    border-left: 3px solid #FF007E;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #0f172a;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

/* ---------- Fix button ---------- */
.wonda-kb-report__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
}
.wonda-kb-report__fix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow:
        0 1px 2px rgba(255, 0, 126, .22),
        0 4px 12px -4px rgba(255, 0, 126, .28);
    transition: transform .1s ease, box-shadow .15s ease;
    border: 0;
}
.wonda-kb-report__fix:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 14px -2px rgba(255, 0, 126, .34),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    color: #ffffff !important;
    text-decoration: none !important;
}
.wonda-kb-report__fix:active {
    transform: translateY(0);
}

/* ---------- Foot ---------- */
.wonda-kb-report__foot {
    padding: 14px 18px 16px;
    background: #f8fafc;
    border-top: 1px solid rgba(28, 28, 60, .06);
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
}
.wonda-kb-report__foot strong { color: var(--wonda-navy-1, #1c1c3c); }
.wonda-kb-report__foot a {
    color: var(--accent, #FF007E);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.wonda-kb-report__foot a:hover { text-decoration: none; }

.wonda-kb-report__meta-foot {
    padding: 10px 18px 14px;
    font-size: 11.5px;
    color: #94a3b8;
    border-top: 1px dashed rgba(28, 28, 60, .06);
    background: #ffffff;
}

/* Legacy amber classes — force-remove their influence */
.wonda-kb-report .wonda-kb-report__lead,
.wonda-kb-report .wonda-kb-report__count,
.wonda-kb-report .wonda-kb-report__reason-label { display: none !important; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-report { border-radius: 12px; }
    .wonda-kb-report__head { padding: 13px 14px; gap: 10px; }
    .wonda-kb-report__icon { width: 32px; height: 32px; border-radius: 9px; }
    .wonda-kb-report__icon svg { width: 17px; height: 17px; }
    .wonda-kb-report__title { font-size: 13.5px; }
    .wonda-kb-report__sub { font-size: 12px; }
    .wonda-kb-report__list { padding: 14px 14px 4px; }
    .wonda-kb-report__item { padding: 12px 12px 12px 38px; }
    .wonda-kb-report__item::before { left: 12px; top: 12px; width: 18px; height: 18px; line-height: 18px; }
    .wonda-kb-report__quote { font-size: 12px; padding: 8px 12px; }
    .wonda-kb-report__fix { width: 100%; justify-content: center; padding: 9px 14px; }
    .wonda-kb-report__foot { padding: 12px 14px; font-size: 12px; }
}

/* ==== END WONDA_KB_REPORT_V2_CSS ==== */

/* ============================================================
   WONDA_KB_TEMP_CSS
   KB info panel — temperature colouring (cool → critical).
   Works alongside the base panel from WONDA_KB_INFO_PANEL_CSS.
   ============================================================ */

/* ---------- Zone-specific top accent + dot ---------- */
.wonda-kb-info--cool::before {
    background: linear-gradient(90deg, #10b981 0%, rgba(16,185,129,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--cool .wonda-kb-info__dot { background: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.25) !important; }

.wonda-kb-info--mild::before {
    background: linear-gradient(90deg, #14b8a6 0%, rgba(20,184,166,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--mild .wonda-kb-info__dot { background: #2dd4bf !important; box-shadow: 0 0 0 3px rgba(45,212,191,.25) !important; }

.wonda-kb-info--warm::before {
    background: linear-gradient(90deg, #f59e0b 0%, rgba(245,158,11,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--warm .wonda-kb-info__dot { background: #fbbf24 !important; box-shadow: 0 0 0 3px rgba(251,191,36,.28) !important; }

.wonda-kb-info--hot::before {
    background: linear-gradient(90deg, #ea580c 0%, rgba(234,88,12,.28) 55%, transparent 100%) !important;
}
.wonda-kb-info--hot .wonda-kb-info__dot { background: #fb923c !important; box-shadow: 0 0 0 3px rgba(251,146,60,.30) !important; }

.wonda-kb-info--critical::before {
    background: linear-gradient(90deg, #dc2626 0%, rgba(220,38,38,.30) 55%, transparent 100%) !important;
}
.wonda-kb-info--critical .wonda-kb-info__dot {
    background: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,.30) !important;
    animation: wonda-kb-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes wonda-kb-dot-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);  }
    50%      { opacity: .55; transform: scale(.9); }
}

/* ---------- Note tones ---------- */
.wonda-kb-info__note strong { color: #ffffff; font-weight: 600; }
.wonda-kb-info__note--cool     { color: #86efac !important; }
.wonda-kb-info__note--mild     { color: #5eead4 !important; }
.wonda-kb-info__note--warm     { color: #fcd34d !important; }
.wonda-kb-info__note--hot      { color: #fdba74 !important; }
.wonda-kb-info__note--critical { color: #fca5a5 !important; font-weight: 500; }
.wonda-kb-info__note--cool strong,
.wonda-kb-info__note--mild strong,
.wonda-kb-info__note--warm strong,
.wonda-kb-info__note--hot strong,
.wonda-kb-info__note--critical strong { color: inherit; }

/* ---------- Zone stat card (right-most, shows "Critical" etc.) ---------- */
.wonda-kb-info__stat--zone {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}
.wonda-kb-info--cool     .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #34d399 !important; }
.wonda-kb-info--mild     .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #2dd4bf !important; }
.wonda-kb-info--warm     .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #fbbf24 !important; }
.wonda-kb-info--hot      .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #fb923c !important; }
.wonda-kb-info--critical .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #f87171 !important; }

/* ---------- Temperature meter ---------- */
.wonda-kb-temp {
    margin-top: 16px;
    padding: 12px 0 4px;
}
.wonda-kb-temp__track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
    opacity: .35;
    overflow: visible;
}
.wonda-kb-temp__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
    transition: width .25s ease;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.wonda-kb-temp__marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #141433;
    box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.35);
    transform: translate(-50%, -50%);
    transition: left .25s ease;
    z-index: 2;
}
.wonda-kb-temp__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: rgba(255,255,255,.45);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.wonda-kb-temp__label-red { color: #f87171 !important; font-weight: 700; }

/* ---------- Advice block (warm, hot, critical) ---------- */
.wonda-kb-info__advice {
    margin-top: 16px;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
}
.wonda-kb-info__advice-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 13px;
}
.wonda-kb-info__advice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(185, 28, 28, .25);
    border: 1px solid rgba(185, 28, 28, .40);
    color: #f87171;
    flex-shrink: 0;
}
.wonda-kb-info__advice-icon svg { width: 12px; height: 12px; display: block; }
.wonda-kb-info__advice-head strong { font-size: 13px; font-weight: 600; }

.wonda-kb-info__advice-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(226, 232, 240, .82);
}
.wonda-kb-info__advice-list li { margin-bottom: 6px; }
.wonda-kb-info__advice-list strong { color: #ffffff; }

.wonda-kb-info__advice-foot {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, .12);
    font-size: 12px;
    color: rgba(226, 232, 240, .72);
}
.wonda-kb-info__advice-foot strong { color: #fbbf24; }

.wonda-kb-info--warm .wonda-kb-info__advice {
    border-color: rgba(245, 158, 11, .30);
    background: linear-gradient(180deg, rgba(245,158,11,.08) 0%, rgba(245,158,11,.03) 100%);
}
.wonda-kb-info--hot .wonda-kb-info__advice {
    border-color: rgba(234, 88, 12, .35);
    background: linear-gradient(180deg, rgba(234,88,12,.10) 0%, rgba(234,88,12,.04) 100%);
}
.wonda-kb-info--critical .wonda-kb-info__advice {
    border-color: rgba(220, 38, 38, .40);
    background: linear-gradient(180deg, rgba(220,38,38,.12) 0%, rgba(220,38,38,.04) 100%);
}
.wonda-kb-info--critical .wonda-kb-info__advice-head strong { color: #fca5a5; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-temp        { margin-top: 14px; }
    .wonda-kb-temp__labels { font-size: 9.5px; }
    .wonda-kb-info__advice { padding: 12px 14px 10px; }
    .wonda-kb-info__advice-list { font-size: 12px; padding-left: 16px; }
}

/* ==== END WONDA_KB_TEMP_CSS ==== */

/* ============================================================
   WONDA_KB_COLORED_TILES_CSS
   Tint the KB info panel and its stat tiles with the current
   temperature zone colour so the whole card reads as cool / warm
   / hot / critical instead of only the top accent strip.
   ============================================================ */

/* ---------- Panel background — zone-coloured radial wash ---------- */
.wonda-kb-info--cool {
    background:
        radial-gradient(600px 220px at 100% 0%, rgba(16,185,129,.18), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--mild {
    background:
        radial-gradient(600px 220px at 100% 0%, rgba(20,184,166,.18), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--warm {
    background:
        radial-gradient(600px 220px at 100% 0%, rgba(245,158,11,.20), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--hot {
    background:
        radial-gradient(600px 220px at 100% 0%, rgba(234,88,12,.24), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--critical {
    background:
        radial-gradient(600px 220px at 100% 0%, rgba(220,38,38,.28), transparent 60%),
        linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}

/* ---------- Tiles — tinted by zone ---------- */
.wonda-kb-info--cool .wonda-kb-info__stat {
    background: linear-gradient(180deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.05) 100%) !important;
    border-color: rgba(16,185,129,.32) !important;
}
.wonda-kb-info--mild .wonda-kb-info__stat {
    background: linear-gradient(180deg, rgba(20,184,166,.14) 0%, rgba(20,184,166,.05) 100%) !important;
    border-color: rgba(20,184,166,.32) !important;
}
.wonda-kb-info--warm .wonda-kb-info__stat {
    background: linear-gradient(180deg, rgba(245,158,11,.16) 0%, rgba(245,158,11,.06) 100%) !important;
    border-color: rgba(245,158,11,.36) !important;
}
.wonda-kb-info--hot .wonda-kb-info__stat {
    background: linear-gradient(180deg, rgba(234,88,12,.18) 0%, rgba(234,88,12,.07) 100%) !important;
    border-color: rgba(234,88,12,.38) !important;
}
.wonda-kb-info--critical .wonda-kb-info__stat {
    background: linear-gradient(180deg, rgba(220,38,38,.20) 0%, rgba(220,38,38,.07) 100%) !important;
    border-color: rgba(220,38,38,.42) !important;
}

/* Tile values — white but with a soft zone-coloured glow */
.wonda-kb-info--cool     .wonda-kb-info__value { text-shadow: 0 0 14px rgba(52,211,153,.45); }
.wonda-kb-info--mild     .wonda-kb-info__value { text-shadow: 0 0 14px rgba(45,212,191,.45); }
.wonda-kb-info--warm     .wonda-kb-info__value { text-shadow: 0 0 14px rgba(251,191,36,.45); }
.wonda-kb-info--hot      .wonda-kb-info__value { text-shadow: 0 0 14px rgba(251,146,60,.50); }
.wonda-kb-info--critical .wonda-kb-info__value { text-shadow: 0 0 14px rgba(248,113,113,.55); }

/* Tile labels — soften with the zone hue */
.wonda-kb-info--cool     .wonda-kb-info__label { color: rgba(110, 231, 183, .80) !important; }
.wonda-kb-info--mild     .wonda-kb-info__label { color: rgba(94, 234, 212, .80)  !important; }
.wonda-kb-info--warm     .wonda-kb-info__label { color: rgba(252, 211, 77, .85)  !important; }
.wonda-kb-info--hot      .wonda-kb-info__label { color: rgba(253, 186, 116, .85) !important; }
.wonda-kb-info--critical .wonda-kb-info__label { color: rgba(252, 165, 165, .90) !important; }

/* Hover — brighten the tinted tile slightly */
.wonda-kb-info__stat {
    transition: filter .15s ease, background .15s ease, border-color .15s ease !important;
}
.wonda-kb-info__stat:hover {
    filter: brightness(1.12);
}

/* ---------- Zone tile (KB size) — stronger so it reads as summary ---------- */
.wonda-kb-info--cool .wonda-kb-info__stat--zone {
    background: linear-gradient(180deg, rgba(16,185,129,.28) 0%, rgba(16,185,129,.12) 100%) !important;
    border-color: rgba(16,185,129,.55) !important;
}
.wonda-kb-info--mild .wonda-kb-info__stat--zone {
    background: linear-gradient(180deg, rgba(20,184,166,.28) 0%, rgba(20,184,166,.12) 100%) !important;
    border-color: rgba(20,184,166,.55) !important;
}
.wonda-kb-info--warm .wonda-kb-info__stat--zone {
    background: linear-gradient(180deg, rgba(245,158,11,.34) 0%, rgba(245,158,11,.14) 100%) !important;
    border-color: rgba(245,158,11,.62) !important;
}
.wonda-kb-info--hot .wonda-kb-info__stat--zone {
    background: linear-gradient(180deg, rgba(234,88,12,.38) 0%, rgba(234,88,12,.16) 100%) !important;
    border-color: rgba(234,88,12,.68) !important;
}
.wonda-kb-info--critical .wonda-kb-info__stat--zone {
    background: linear-gradient(180deg, rgba(220,38,38,.42) 0%, rgba(220,38,38,.18) 100%) !important;
    border-color: rgba(220,38,38,.72) !important;
}
/* Zone tile value keeps the zone colour it already had (from the
   earlier CSS), just ensure it stays bold against the stronger tint */
.wonda-kb-info__stat--zone .wonda-kb-info__value {
    font-weight: 700 !important;
}

/* ---------- Mobile — same colours, tighter padding ---------- */
@media (max-width: 900px) {
    .wonda-kb-info--critical { background: radial-gradient(340px 180px at 100% 0%, rgba(220,38,38,.28), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
    .wonda-kb-info--hot      { background: radial-gradient(340px 180px at 100% 0%, rgba(234,88,12,.24), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
    .wonda-kb-info--warm     { background: radial-gradient(340px 180px at 100% 0%, rgba(245,158,11,.20), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
    .wonda-kb-info--mild     { background: radial-gradient(340px 180px at 100% 0%, rgba(20,184,166,.18), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
    .wonda-kb-info--cool     { background: radial-gradient(340px 180px at 100% 0%, rgba(16,185,129,.18), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
}

/* ==== END WONDA_KB_COLORED_TILES_CSS ==== */

/* ============================================================
   WONDA_KB_ADVICE_FOOT_FIX
   The "Target: keep the KB under 30,000 characters" line was
   rendering at ~72% opacity pale grey on a dark red background.
   This forces a proper callout: bright text, amber accent border,
   subtle amber background so it reads as an actionable target.
   ============================================================ */

.wonda-kb-info__advice-foot {
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, rgba(251, 191, 36, .14) 0%, rgba(251, 191, 36, .05) 100%) !important;
    border: 1px solid rgba(251, 191, 36, .35) !important;
    border-left: 3px solid #fbbf24 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #fef3c7 !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.wonda-kb-info__advice-foot strong {
    color: #fbbf24 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.40) !important;
}

/* Critical zone gets a slightly stronger contrast so it survives the
   red-tinted background */
.wonda-kb-info--critical .wonda-kb-info__advice-foot {
    background: linear-gradient(180deg, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, .08) 100%) !important;
    border-color: rgba(251, 191, 36, .50) !important;
    border-left-color: #fbbf24 !important;
    color: #fffbeb !important;
}

.wonda-kb-info--critical .wonda-kb-info__advice-foot strong {
    color: #fde68a !important;
}

/* Hot zone — same idea, amber-orange flavour */
.wonda-kb-info--hot .wonda-kb-info__advice-foot {
    background: linear-gradient(180deg, rgba(251, 146, 60, .18) 0%, rgba(251, 146, 60, .06) 100%) !important;
    border-color: rgba(251, 146, 60, .45) !important;
    border-left-color: #fb923c !important;
    color: #fff7ed !important;
}

/* Warm zone — softer */
.wonda-kb-info--warm .wonda-kb-info__advice-foot {
    background: linear-gradient(180deg, rgba(245, 158, 11, .14) 0%, rgba(245, 158, 11, .04) 100%) !important;
    border-color: rgba(245, 158, 11, .38) !important;
    border-left-color: #f59e0b !important;
    color: #fffbeb !important;
}

/* Mobile — slightly tighter padding */
@media (max-width: 900px) {
    .wonda-kb-info__advice-foot {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
    }
}

/* ==== END WONDA_KB_ADVICE_FOOT_FIX ==== */

/* ============================================================
   WONDA_KB_CLEAN_PANEL_CSS
   Quieter KB info panel. Four stats, one sentence, one accent.
   Supersedes the earlier .wonda-kb-info* styling — those rules
   are left in place but nothing in this panel uses them.
   ============================================================ */

.wonda-kb-panel {
    margin: 0 0 18px;
    padding: 18px 20px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
    color: #e2e8f0;
    box-shadow: 0 14px 30px -18px rgba(20, 20, 51, .60);
    position: relative;
    overflow: hidden;
}
/* A single accent line — width tracks the KB's position on the 0→50K scale. */
.wonda-kb-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background:
        linear-gradient(90deg,
            currentColor 0%,
            currentColor var(--wonda-kb-accent, 100%),
            rgba(255,255,255,.05) var(--wonda-kb-accent, 100%),
            rgba(255,255,255,.05) 100%);
    opacity: .75;
}

/* Zone colour is applied as the panel's "currentColor" for the accent. */
.wonda-kb-panel--cool     { color: #34d399; --wonda-kb-accent: 0%;   }
.wonda-kb-panel--mild     { color: #2dd4bf; --wonda-kb-accent: 0%;   }
.wonda-kb-panel--warm     { color: #fbbf24; --wonda-kb-accent: 0%;   }
.wonda-kb-panel--hot      { color: #fb923c; --wonda-kb-accent: 0%;   }
.wonda-kb-panel--critical { color: #f87171; --wonda-kb-accent: 0%;   }

/* Because CSS custom props can't be set per-element from PHP without
   inline style, we override the accent width inline via a data
   attribute selector below. If the value is missing, full width. */

/* Head row */
.wonda-kb-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.wonda-kb-panel__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.wonda-kb-panel__saved {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .48);
    white-space: nowrap;
}
.wonda-kb-panel__saved--dirty {
    color: #fbbf24;
}

/* Stats — four values on one line */
.wonda-kb-panel__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.wonda-kb-panel__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wonda-kb-panel__value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wonda-kb-panel__unit {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zone tile — the only element that carries the temperature colour */
.wonda-kb-panel__stat--zone {
    align-items: flex-end;
    text-align: right;
}
.wonda-kb-panel__zone {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    color: #1c1c3c;
    background: currentColor;
    box-shadow: 0 2px 8px -2px currentColor;
    margin-bottom: 6px;
}
.wonda-kb-panel--cool     .wonda-kb-panel__zone { background: #34d399; }
.wonda-kb-panel--mild     .wonda-kb-panel__zone { background: #2dd4bf; }
.wonda-kb-panel--warm     .wonda-kb-panel__zone { background: #fbbf24; }
.wonda-kb-panel--hot      .wonda-kb-panel__zone { background: #fb923c; }
.wonda-kb-panel--critical .wonda-kb-panel__zone { background: #f87171; color: #2b0a0a; }

/* Note */
.wonda-kb-panel__note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(226, 232, 240, .68);
    max-width: 62ch;
}
.wonda-kb-panel--critical .wonda-kb-panel__note { color: rgba(254, 226, 226, .82); }
.wonda-kb-panel--hot      .wonda-kb-panel__note { color: rgba(255, 237, 213, .82); }
.wonda-kb-panel--warm     .wonda-kb-panel__note { color: rgba(254, 243, 199, .82); }

/* Mobile */
@media (max-width: 900px) {
    .wonda-kb-panel {
        padding: 14px 16px 12px;
        border-radius: 12px;
    }
    .wonda-kb-panel__head {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .wonda-kb-panel__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }
    .wonda-kb-panel__stat--zone {
        align-items: flex-start;
        text-align: left;
        grid-column: 1 / -1;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, .06);
        margin-top: 4px;
    }
    .wonda-kb-panel__value { font-size: 18px; }
    .wonda-kb-panel__note { font-size: 12px; max-width: none; }
}

/* ==== END WONDA_KB_CLEAN_PANEL_CSS ==== */

/* ============================================================
   WONDA_KB_LIGHT_TILES_CSS
   KB size + impact panel — LIGHT theme.
   Panel is a normal white card. Each stat tile is a coloured card
   tinted by the KB's current temperature zone. The zone colour
   flows through the whole panel via CSS variables set per zone.
   ============================================================ */

/* ---------- Zone colour variables ---------- */
.wonda-kb-tiles {
    --kb-tint-bg:     rgba(15, 23, 42, .04);
    --kb-tint-border: rgba(15, 23, 42, .12);
    --kb-tint-text:   #0f172a;
    --kb-tint-accent: #64748b;
    --kb-tint-soft:   #f8fafc;
}

.wonda-kb-tiles--cool {
    --kb-tint-bg:     rgba(16, 185, 129, .10);
    --kb-tint-border: rgba(16, 185, 129, .30);
    --kb-tint-text:   #065f46;
    --kb-tint-accent: #10b981;
    --kb-tint-soft:   #ecfdf5;
}
.wonda-kb-tiles--mild {
    --kb-tint-bg:     rgba(20, 184, 166, .10);
    --kb-tint-border: rgba(20, 184, 166, .30);
    --kb-tint-text:   #115e59;
    --kb-tint-accent: #14b8a6;
    --kb-tint-soft:   #f0fdfa;
}
.wonda-kb-tiles--warm {
    --kb-tint-bg:     rgba(245, 158, 11, .12);
    --kb-tint-border: rgba(245, 158, 11, .35);
    --kb-tint-text:   #78350f;
    --kb-tint-accent: #f59e0b;
    --kb-tint-soft:   #fffbeb;
}
.wonda-kb-tiles--hot {
    --kb-tint-bg:     rgba(234, 88, 12, .12);
    --kb-tint-border: rgba(234, 88, 12, .38);
    --kb-tint-text:   #7c2d12;
    --kb-tint-accent: #ea580c;
    --kb-tint-soft:   #fff7ed;
}
.wonda-kb-tiles--critical {
    --kb-tint-bg:     rgba(220, 38, 38, .10);
    --kb-tint-border: rgba(220, 38, 38, .35);
    --kb-tint-text:   #7f1d1d;
    --kb-tint-accent: #dc2626;
    --kb-tint-soft:   #fef2f2;
}

/* ---------- Panel container — light card ---------- */
.wonda-kb-tiles {
    margin: 0 0 18px;
    padding: 18px 20px 16px;
    background: #ffffff;
    border: 1px solid var(--kb-tint-border);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 12px 28px -22px rgba(15, 23, 42, .22);
    position: relative;
    overflow: hidden;
}
/* Top accent strip in zone colour */
.wonda-kb-tiles::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--kb-tint-accent) 0%,
        color-mix(in srgb, var(--kb-tint-accent) 30%, transparent) 60%,
        transparent 100%);
}

/* Head */
.wonda-kb-tiles__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.wonda-kb-tiles__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--kb-tint-text);
}
.wonda-kb-tiles__title-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kb-tint-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-tint-accent) 25%, transparent);
}
.wonda-kb-tiles__status {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 10px;
    white-space: nowrap;
}
.wonda-kb-tiles__status.wonda-kb-tiles__status--dirty {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

/* ---------- Stat tiles — each carries the zone tint ---------- */
.wonda-kb-tiles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.wonda-kb-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--kb-tint-bg);
    border: 1px solid var(--kb-tint-border);
    border-radius: 10px;
    min-width: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.wonda-kb-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--kb-tint-accent) 60%, transparent);
}
.wonda-kb-tile__value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--kb-tint-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wonda-kb-tile__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--kb-tint-text) 70%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zone tile — a touch stronger than the rest so it reads as summary */
.wonda-kb-tile--zone {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kb-tint-accent) 18%, #ffffff) 0%,
        var(--kb-tint-bg) 100%);
    border-color: color-mix(in srgb, var(--kb-tint-accent) 45%, transparent);
}
.wonda-kb-tile--zone .wonda-kb-tile__value {
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 800;
}

/* ---------- Temperature meter ---------- */
.wonda-kb-tiles__meter {
    padding: 4px 0 12px;
    margin-bottom: 14px;
}
.wonda-kb-tiles__meter-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
    opacity: .30;
    overflow: visible;
}
.wonda-kb-tiles__meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
    transition: width .25s ease;
}
.wonda-kb-tiles__meter-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--kb-tint-accent);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transform: translate(-50%, -50%);
    transition: left .25s ease;
    z-index: 2;
}
.wonda-kb-tiles__meter-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.wonda-kb-tiles__meter-red { color: #dc2626 !important; font-weight: 700; }

/* ---------- Note ---------- */
.wonda-kb-tiles__note {
    padding: 14px 16px;
    background: var(--kb-tint-soft);
    border: 1px solid color-mix(in srgb, var(--kb-tint-accent) 20%, transparent);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #334155;
}
.wonda-kb-tiles__note strong {
    color: var(--kb-tint-text);
    font-weight: 700;
}

/* ---------- Advice block ---------- */
.wonda-kb-tiles__advice {
    margin-top: 14px;
    padding: 14px 16px 12px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--kb-tint-accent) 30%, transparent);
    border-left: 3px solid var(--kb-tint-accent);
    border-radius: 10px;
}
.wonda-kb-tiles__advice-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--kb-tint-text);
    font-size: 13.5px;
}
.wonda-kb-tiles__advice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--kb-tint-accent) 18%, transparent);
    color: var(--kb-tint-accent);
    flex-shrink: 0;
}
.wonda-kb-tiles__advice-icon svg { width: 13px; height: 13px; display: block; }
.wonda-kb-tiles__advice-head strong { font-weight: 700; }

.wonda-kb-tiles__advice-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #334155;
}
.wonda-kb-tiles__advice-list li { margin-bottom: 6px; }
.wonda-kb-tiles__advice-list strong {
    color: var(--kb-tint-text);
    font-weight: 700;
}

.wonda-kb-tiles__advice-target {
    display: block;
    margin: 12px 0 0;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--kb-tint-accent) 10%, #ffffff);
    border: 1px dashed color-mix(in srgb, var(--kb-tint-accent) 40%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kb-tint-text);
    font-weight: 500;
}
.wonda-kb-tiles__advice-target strong {
    color: var(--kb-tint-accent);
    font-weight: 700;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-tiles {
        padding: 14px 16px 12px;
        border-radius: 12px;
    }
    .wonda-kb-tiles__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .wonda-kb-tile {
        padding: 10px 12px;
    }
    .wonda-kb-tile__value { font-size: 17px; }
    .wonda-kb-tile--zone .wonda-kb-tile__value { font-size: 14px; }
    .wonda-kb-tile__label { font-size: 9.5px; }
    .wonda-kb-tiles__note { font-size: 12px; padding: 12px 14px; }
    .wonda-kb-tiles__advice { padding: 12px 14px 10px; }
    .wonda-kb-tiles__advice-list { font-size: 12px; padding-left: 16px; }
    .wonda-kb-tiles__advice-target { font-size: 12px; }
}

/* ==== END WONDA_KB_LIGHT_TILES_CSS ==== */

/* ============================================================
   WONDA_KB_SOLID_TILES_CSS
   KB stat tiles — SOLID saturated zone colour with white text.
   Overrides the earlier tinted-tile rules. Load order in the file
   ensures these win because they're appended last.
   ============================================================ */

/* ---------- Zone variables: solid fill + matching border + shadow ---------- */
.wonda-kb-tiles {
    --kb-fill:        #475569;                  /* slate — fallback */
    --kb-fill-2:      #334155;                  /* gradient bottom */
    --kb-border:      rgba(0, 0, 0, .10);
    --kb-accent:      #475569;
    --kb-soft:        #f8fafc;
    --kb-text-on-fill: #ffffff;
    --kb-glow:        rgba(15, 23, 42, .18);
}

.wonda-kb-tiles--cool {
    --kb-fill:        #059669;
    --kb-fill-2:      #047857;
    --kb-border:      rgba(4, 120, 87, .55);
    --kb-accent:      #10b981;
    --kb-soft:        #ecfdf5;
    --kb-glow:        rgba(5, 150, 105, .35);
}
.wonda-kb-tiles--mild {
    --kb-fill:        #0d9488;
    --kb-fill-2:      #0f766e;
    --kb-border:      rgba(15, 118, 110, .55);
    --kb-accent:      #14b8a6;
    --kb-soft:        #f0fdfa;
    --kb-glow:        rgba(13, 148, 136, .35);
}
.wonda-kb-tiles--warm {
    --kb-fill:        #d97706;
    --kb-fill-2:      #b45309;
    --kb-border:      rgba(180, 83, 9, .55);
    --kb-accent:      #f59e0b;
    --kb-soft:        #fffbeb;
    --kb-glow:        rgba(217, 119, 6, .38);
}
.wonda-kb-tiles--hot {
    --kb-fill:        #ea580c;
    --kb-fill-2:      #c2410c;
    --kb-border:      rgba(194, 65, 12, .55);
    --kb-accent:      #fb923c;
    --kb-soft:        #fff7ed;
    --kb-glow:        rgba(234, 88, 12, .40);
}
.wonda-kb-tiles--critical {
    --kb-fill:        #991b1b;   /* deep maroon */
    --kb-fill-2:      #7f1d1d;   /* darker maroon */
    --kb-border:      rgba(127, 29, 29, .65);
    --kb-accent:      #dc2626;
    --kb-soft:        #fef2f2;
    --kb-glow:        rgba(153, 27, 27, .45);
}

/* ---------- Panel container — stays light, uses accent for border ---------- */
.wonda-kb-tiles {
    border: 1px solid var(--kb-border) !important;
    background: #ffffff !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 12px 28px -22px var(--kb-glow) !important;
}
.wonda-kb-tiles::before {
    background: linear-gradient(90deg,
        var(--kb-fill) 0%,
        color-mix(in srgb, var(--kb-fill) 40%, transparent) 60%,
        transparent 100%) !important;
    height: 4px !important;
    opacity: 1 !important;
}

/* ---------- Head ---------- */
.wonda-kb-tiles__title { color: var(--kb-fill) !important; }
.wonda-kb-tiles__title-dot {
    background: var(--kb-fill) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
}
.wonda-kb-tiles__status {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.wonda-kb-tiles__status.wonda-kb-tiles__status--dirty {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* ---------- TILES — SOLID COLOUR, WHITE TEXT ---------- */
.wonda-kb-tiles__grid {
    gap: 10px !important;
}

.wonda-kb-tile {
    background: linear-gradient(180deg, var(--kb-fill) 0%, var(--kb-fill-2) 100%) !important;
    border: 1px solid var(--kb-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .10),
        0 6px 14px -8px var(--kb-glow),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    transition: transform .12s ease, box-shadow .15s ease !important;
}

.wonda-kb-tile:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, .14),
        0 12px 22px -10px var(--kb-glow),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.wonda-kb-tile__value {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
}

.wonda-kb-tile__label {
    color: rgba(255, 255, 255, .84) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

/* ---------- Zone tile (KB size / status) — even stronger ---------- */
.wonda-kb-tile--zone {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kb-fill) 78%, black) 0%,
        var(--kb-fill-2) 100%) !important;
    border-color: var(--kb-border) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .14),
        0 8px 18px -8px var(--kb-glow),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
.wonda-kb-tile--zone .wonda-kb-tile__value {
    font-size: 16px !important;
    letter-spacing: .01em !important;
    font-weight: 800 !important;
    text-transform: none !important;
}
.wonda-kb-tile--zone .wonda-kb-tile__label {
    color: rgba(255, 255, 255, .72) !important;
}

/* Critical zone gets a subtle pulse on the KB size tile to say "act now" */
.wonda-kb-tiles--critical .wonda-kb-tile--zone {
    animation: wonda-kb-zone-pulse 2.4s ease-in-out infinite;
}
@keyframes wonda-kb-zone-pulse {
    0%, 100% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, .14),
            0 8px 18px -8px var(--kb-glow),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 0 0 0 rgba(220, 38, 38, .45);
    }
    50% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, .14),
            0 8px 18px -8px var(--kb-glow),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 0 0 6px rgba(220, 38, 38, 0);
    }
}

/* ---------- Temperature meter ---------- */
.wonda-kb-tiles__meter-track {
    height: 8px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12) !important;
}
.wonda-kb-tiles__meter-fill {
    background: linear-gradient(90deg,
        #10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%) !important;
    filter: saturate(1.2) brightness(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.wonda-kb-tiles__meter-marker {
    width: 16px !important;
    height: 16px !important;
    background: #ffffff !important;
    border: 3px solid var(--kb-fill) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .25),
        0 0 0 3px rgba(255, 255, 255, .8) !important;
}

/* ---------- Note — subtle zone tint but not overpowering ---------- */
.wonda-kb-tiles__note {
    background: var(--kb-soft) !important;
    border: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
    color: #1e293b !important;
}
.wonda-kb-tiles__note strong {
    color: var(--kb-fill-2) !important;
}

/* ---------- Advice block ---------- */
.wonda-kb-tiles__advice {
    border-left: 4px solid var(--kb-fill) !important;
    border-top: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
}
.wonda-kb-tiles__advice-head { color: var(--kb-fill-2) !important; }
.wonda-kb-tiles__advice-icon {
    background: var(--kb-fill) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px -2px var(--kb-glow);
}
.wonda-kb-tiles__advice-list strong { color: var(--kb-fill-2) !important; }

.wonda-kb-tiles__advice-target {
    background: color-mix(in srgb, var(--kb-fill) 8%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--kb-fill) 40%, transparent) !important;
    color: #1e293b !important;
}
.wonda-kb-tiles__advice-target strong {
    color: var(--kb-fill-2) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-kb-tile { padding: 12px 14px !important; }
    .wonda-kb-tile__value { font-size: 18px !important; }
    .wonda-kb-tile--zone .wonda-kb-tile__value { font-size: 15px !important; }
    .wonda-kb-tile__label { font-size: 9.5px !important; }
}

/* ==== END WONDA_KB_SOLID_TILES_CSS ==== */

/* ============================================================
   WONDA_TRANSCRIPT_NARROW_CSS
   Chat-logs transcript — narrow, centred reading column on desktop.
   Matches the mobile feel, so long conversations are easy to scan.
   ============================================================ */

@media (min-width: 901px) {

    /* The transcript becomes a centred column. Long messages stay
       readable instead of stretching to the full card width. */
    .wonda-transcript {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 6px 4px !important;
    }

    /* Bubbles cap at 78% of that column (~560px), same feel as mobile. */
    .wonda-transcript__row {
        max-width: 78% !important;
    }

    /* User rows sit flush right — reverse rows already handle this,
       but cap them so a long user message doesn't sprawl. */
    .wonda-transcript__row--user {
        max-width: 78% !important;
    }

    /* Slightly bigger bubble text on desktop now that width is
       constrained — reads better at 720px than at 1200px. */
    .wonda-transcript__bubble {
        font-size: 14.5px !important;
        padding: 13px 17px !important;
        line-height: 1.6 !important;
    }

    /* Whisper-thin divider line down the middle so the centred column
       feels intentional rather than floating. */
    .wonda-transcript {
        position: relative;
    }
    .wonda-transcript::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 50%;
        width: 1px;
        transform: translateX(-.5px);
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(15, 23, 42, .06) 15%,
            rgba(15, 23, 42, .06) 85%,
            transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    /* Rows sit above the divider line */
    .wonda-transcript__row {
        position: relative;
        z-index: 1;
    }

    /* Also constrain the convo hero above the transcript so the whole
       section reads as one column. */
    .wonda-convo-hero {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Ultra-wide desktop — nudge the column slightly wider so it doesn't
   feel cramped on 1920px+ monitors. */
@media (min-width: 1600px) {
    .wonda-transcript {
        max-width: 780px !important;
    }
    .wonda-convo-hero {
        max-width: 780px !important;
    }
}

/* ==== END WONDA_TRANSCRIPT_NARROW_CSS ==== */

/* ============================================================
   WONDA_TRANSCRIPT_NARROW_V2
   Force the chat-logs transcript into a narrow, readable column
   on every viewport. No media query — applies unconditionally.
   Mobile is already narrow so this is a no-op there; desktop gets
   the fix it needs.
   ============================================================ */

/* The wrapper column */
.wonda-card .wonda-transcript,
main .wonda-transcript,
body .wonda-transcript {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Bubbles cap at 78% of the narrow column */
.wonda-card .wonda-transcript__row,
main .wonda-transcript__row,
body .wonda-transcript__row {
    max-width: 78% !important;
}

/* User rows sit on the right — same cap */
.wonda-card .wonda-transcript__row--user,
main .wonda-transcript__row--user,
body .wonda-transcript__row--user {
    max-width: 78% !important;
    margin-left: auto !important;
}

/* Centre divider line — makes the narrow column feel intentional */
.wonda-card .wonda-transcript::before,
main .wonda-transcript::before,
body .wonda-transcript::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 1px;
    transform: translateX(-.5px);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(15, 23, 42, .06) 15%,
        rgba(15, 23, 42, .06) 85%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.wonda-card .wonda-transcript__row,
main .wonda-transcript__row,
body .wonda-transcript__row {
    position: relative !important;
    z-index: 1 !important;
}

/* Slightly bigger bubble text at the narrower width */
.wonda-card .wonda-transcript__bubble,
main .wonda-transcript__bubble,
body .wonda-transcript__bubble {
    font-size: 14.5px !important;
    padding: 13px 17px !important;
    line-height: 1.6 !important;
}

/* Hero card also constrained so the whole section reads as one column */
.wonda-card .wonda-convo-hero,
main .wonda-convo-hero,
body .wonda-convo-hero {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ultra-wide monitors get a touch more room */
@media (min-width: 1600px) {
    .wonda-card .wonda-transcript,
    main .wonda-transcript,
    body .wonda-transcript {
        max-width: 780px !important;
    }
    .wonda-card .wonda-convo-hero,
    main .wonda-convo-hero,
    body .wonda-convo-hero {
        max-width: 780px !important;
    }
}

/* ==== END WONDA_TRANSCRIPT_NARROW_V2 ==== */

/* ============================================================
   WONDA_CHATLOGS_ACTIVITY_CSS
   Base visual styling for the chat-logs transcript and hero card.
   This is what makes bubbles look like bubbles and avatars look
   like circular badges.
   ============================================================ */

/* ---------- Session hero card ---------- */
.wonda-convo-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin: 16px 0 20px;
    background: linear-gradient(135deg,
        rgba(28, 28, 60, .04) 0%,
        rgba(255, 0, 126, .04) 100%);
    border: 1px solid rgba(28, 28, 60, .08);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.wonda-convo-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        #FF007E 0%,
        rgba(255, 0, 126, .3) 100%);
}
.wonda-convo-hero__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wonda-convo-hero__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1c1c3c 0%, #2a2a52 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(28, 28, 60, .30);
}
.wonda-convo-hero__icon svg { width: 20px; height: 20px; display: block; }
.wonda-convo-hero__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 2px;
}
.wonda-convo-hero__id {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: #1c1c3c;
    letter-spacing: -0.01em;
}
.wonda-convo-hero__stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.wonda-convo-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}
.wonda-convo-hero__stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1c1c3c;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.wonda-convo-hero__stat-value small {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin-left: 2px;
}
.wonda-convo-hero__stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: #64748b;
    margin-top: 3px;
}

/* ---------- Transcript ---------- */
.wonda-transcript {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.wonda-transcript__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 82%;
}
.wonda-transcript__row--bot  { flex-direction: row; }
.wonda-transcript__row--user { flex-direction: row-reverse; margin-left: auto; }

.wonda-transcript__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.wonda-transcript__avatar svg { width: 17px; height: 17px; display: block; }

.wonda-transcript__row--bot .wonda-transcript__avatar {
    background: linear-gradient(135deg, #1c1c3c 0%, #2a2a52 100%);
    color: #fff;
}
.wonda-transcript__row--user .wonda-transcript__avatar {
    background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
    color: #fff;
}

.wonda-transcript__bubble {
    min-width: 0;
    flex: 1;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wonda-transcript__row--bot .wonda-transcript__bubble {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(28, 28, 60, .08);
    border-bottom-left-radius: 6px;
    color: #0f172a;
}
.wonda-transcript__row--user .wonda-transcript__bubble {
    background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 16px -8px rgba(255, 0, 126, .55);
}
.wonda-transcript__text { word-break: break-word; overflow-wrap: anywhere; }

.wonda-transcript__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
}
.wonda-transcript__row--bot .wonda-transcript__meta { color: #94a3b8; }
.wonda-transcript__row--user .wonda-transcript__meta { color: rgba(255, 255, 255, .78); }
.wonda-transcript__who { font-weight: 600; }
.wonda-transcript__dot { opacity: .5; }
.wonda-transcript__when { font-family: var(--font-mono); font-size: 10.5px; }
.wonda-transcript__lat {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 4px;
}
.wonda-transcript__row--bot .wonda-transcript__lat {
    background: #f1f5f9;
    color: #475569;
}
.wonda-transcript__row--user .wonda-transcript__lat {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.wonda-transcript__model {
    background: rgba(15, 23, 42, .05) !important;
    border: 0 !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    padding: 1px 6px !important;
}
.wonda-transcript__row--user .wonda-transcript__model {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .wonda-convo-hero { padding: 14px 16px; gap: 14px; }
    .wonda-convo-hero__stats { gap: 16px; width: 100%; }
    .wonda-convo-hero__stat { align-items: flex-start; flex: 1; }
    .wonda-convo-hero__stat-value { font-size: 17px; }
    .wonda-convo-hero__icon { width: 38px; height: 38px; }
    .wonda-convo-hero__icon svg { width: 18px; height: 18px; }

    .wonda-transcript { gap: 14px; }
    .wonda-transcript__row { max-width: 94%; }
    .wonda-transcript__bubble { padding: 10px 13px; font-size: 13.5px; }
    .wonda-transcript__avatar { width: 30px; height: 30px; }
    .wonda-transcript__avatar svg { width: 15px; height: 15px; }
}

/* ==== END WONDA_CHATLOGS_ACTIVITY_CSS ==== */

/* ============================================================
   WONDA_CONVO_HERO_STATS_V2
   Cleaner stat strip for the conversation hero card.
   Each stat is its own column with a soft divider. Values and
   labels align left within their block, spacing is even, and the
   whole strip reads as one unit instead of five loose numbers.
   ============================================================ */

.wonda-convo-hero__stats {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(28, 28, 60, .07);
    border-radius: 12px;
    padding: 4px 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}

.wonda-convo-hero__stat {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px;
    padding: 10px 18px !important;
    min-width: 0;
    text-align: left;
}
/* Divider between stats, skipped on the first one */
.wonda-convo-hero__stat + .wonda-convo-hero__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(28, 28, 60, .12) 50%,
        transparent 100%);
}

/* Value on top */
.wonda-convo-hero__stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1c1c3c !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wonda-convo-hero__stat-value small {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-left: 2px !important;
    letter-spacing: 0;
}

/* Label under value */
.wonda-convo-hero__stat-label {
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    margin-top: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* Accent the primary stats (Messages, Visitor, Bot) with brand colour */
.wonda-convo-hero__stat:nth-child(1) .wonda-convo-hero__stat-value { color: #1c1c3c !important; }
.wonda-convo-hero__stat:nth-child(2) .wonda-convo-hero__stat-value { color: #FF007E !important; }
.wonda-convo-hero__stat:nth-child(3) .wonda-convo-hero__stat-value { color: #1c1c3c !important; }

/* ---------- Mobile: 2-col grid, dividers removed ---------- */
@media (max-width: 900px) {
    .wonda-convo-hero__stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        width: 100%;
    }
    .wonda-convo-hero__stat {
        align-items: flex-start !important;
        padding: 10px 12px !important;
        background: rgba(255, 255, 255, .7);
        border: 1px solid rgba(28, 28, 60, .07);
        border-radius: 10px;
        text-align: left;
    }
    .wonda-convo-hero__stat + .wonda-convo-hero__stat::before {
        content: none !important;
        display: none !important;
    }
    .wonda-convo-hero__stat-value { font-size: 16px !important; }
    .wonda-convo-hero__stat-label { font-size: 9px !important; letter-spacing: .07em !important; }
}
@media (max-width: 480px) {
    .wonda-convo-hero__stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==== END WONDA_CONVO_HERO_STATS_V2 ==== */

/* ============================================================
   WONDA_BELL_PANEL_PADDING
   The panel had no inner padding, and the item-inner anchor had a
   negative margin that used to cancel parent padding which is now
   gone — pushing content 16px outside the panel on each side.
   ============================================================ */

.wonda-bell__panel {
    padding: 6px;
}

/* Head and foot hug the panel edges (their own padding is inside). */
.wonda-bell__head {
    margin: -6px -6px 6px;
    border-radius: 12px 12px 0 0;
}

.wonda-bell__foot {
    margin: 6px -6px -6px;
    border-radius: 0 0 12px 12px;
}

/* Inner anchor fills the item; no more negative margin. */
.wonda-bell__item-inner {
    margin: 0;
    padding: 12px 16px;
}

/* List items get a subtle inset from the panel edges. */
.wonda-bell__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wonda-bell__item {
    border-radius: 8px;
    overflow: hidden;
}

.wonda-bell__item:last-child {
    border-bottom: 0;
}

/* Empty state keeps its own breathing room. */
.wonda-bell__empty {
    padding: 24px 16px;
}

/* Mobile — same idea, tighter. */
@media (max-width: 600px) {
    .wonda-bell__panel {
        padding: 4px;
    }
    .wonda-bell__head {
        margin: -4px -4px 4px;
    }
    .wonda-bell__foot {
        margin: 4px -4px -4px;
    }
}

/* ============================================================
   WONDA_SHOWCASE_HEADER_RIGHT
   Pushes the button cluster hard against the RIGHT edge without
   relying on a spacer flex item. `margin-right: auto` on the
   brand absorbs every pixel of free space, so the buttons land
   flush right no matter what the spacer does.
   ============================================================ */

.wonda-showcase__header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
}

/* Brand takes its natural width and pushes EVERYTHING after it
   to the right by absorbing all the free space to its right. */
.wonda-showcase__brand {
    margin-right: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Spacer becomes a zero-width no-op — the brand's auto margin
   already does its job, and having two space-eaters fight was
   part of what made the layout unpredictable. */
.wonda-showcase__header-spacer {
    display: none !important;
}

/* Every button is a fixed-size pill on the right. */
.wonda-showcase__header > .wonda-showcase__header-btn {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

/* ============================================================
}

   WONDA_SIDEBAR_PRESCROLL_CSS
   Lock the sidebar nav to instant scroll so the pre-scroll set
   in the partial (before first paint) can never be animated.
   ============================================================ */
.wonda-sidebar__nav {
    scroll-behavior: auto !important;
}
/* ==== END WONDA_SIDEBAR_PRESCROLL_CSS ==== */
/* ============================================================
   WONDA_WELCOME_CSS
   Redesigned greeting card at the top of the client dashboard.
   Header row (greeting + status pill) over a strip of small
   info chips for domain / plan / renewal.
   ============================================================ */

.wonda-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 22px;
    background:
        radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
    border: 1px solid var(--wonda-card-border, rgba(28, 28, 60, .07));
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035),
        0 8px 24px -14px rgba(15, 23, 42, .10);
    position: relative;
    overflow: hidden;
}
.wonda-welcome::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--accent, #FF007E) 0%,
        color-mix(in srgb, var(--accent, #FF007E) 45%, transparent) 100%);
}

/* ---------- Body (left column) ---------- */
.wonda-welcome__body {
    min-width: 0;
    flex: 1 1 420px;
}

.wonda-welcome__eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted, #94a3b8);
    margin-bottom: 6px;
}

.wonda-welcome__title {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--wonda-navy-1, #1c1c3c);
    word-break: break-word;
}

/* ---------- Chips ---------- */
.wonda-welcome__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wonda-welcome__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f3f5fa;
    border: 1px solid rgba(28, 28, 60, .06);
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
    white-space: nowrap;
}
.wonda-welcome__chip code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    letter-spacing: .01em;
}
.wonda-welcome__chip strong {
    color: var(--wonda-navy-1, #1c1c3c);
    font-weight: 700;
}
.wonda-welcome__chip-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: .65;
    color: currentColor;
}

/* Tone variants */
.wonda-welcome__chip--info {
    background: rgba(59, 130, 246, .08);
    border-color: rgba(59, 130, 246, .18);
    color: #1e40af;
}
.wonda-welcome__chip--warn {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .25);
    color: #92400e;
}
.wonda-welcome__chip--warn strong { color: #92400e; }
.wonda-welcome__chip--danger {
    background: rgba(185, 28, 28, .08);
    border-color: rgba(185, 28, 28, .22);
    color: #991b1b;
}

/* ---------- Status (right column) ---------- */
.wonda-welcome__status {
    flex-shrink: 0;
    align-self: center;
}
.wonda-welcome__status .wonda-pill {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Dark mode (mirrors WONDA_CONSOLE_DARK_MODE) ---------- */

html[data-theme="dark"] .wonda-welcome {
    background:
        radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .08), transparent 60%),
        linear-gradient(180deg, #0f172a 0%, #101a2e 100%);
    border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-welcome__title { color: #f1f5f9; }
html[data-theme="dark"] .wonda-welcome__chip {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    color: #cbd5e1;
}
html[data-theme="dark"] .wonda-welcome__chip strong { color: #f1f5f9; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    .wonda-welcome {
        padding: 18px 18px 16px;
        gap: 14px;
    }
    .wonda-welcome__title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .wonda-welcome__status {
        align-self: flex-start;
    }
    .wonda-welcome__chip {
        font-size: 12px;
        padding: 4px 10px;
    }
    .wonda-welcome__chip code { font-size: 11.5px; }
}

/* ==== END WONDA_WELCOME_CSS ==== */

/* ============================================================
   WONDA_WELCOME_CSS
   Redesigned greeting card at the top of the client dashboard.
   ============================================================ */

.wonda-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 22px;
    background:
        radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
    border: 1px solid var(--wonda-card-border, rgba(28, 28, 60, .07));
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035),
        0 8px 24px -14px rgba(15, 23, 42, .10);
    position: relative;
    overflow: hidden;
}
.wonda-welcome::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--accent, #FF007E) 0%,
        rgba(255, 0, 126, .45) 100%);
}

.wonda-welcome__body {
    min-width: 0;
    flex: 1 1 420px;
}

.wonda-welcome__eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted, #94a3b8);
    margin-bottom: 6px;
}

.wonda-welcome__title {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--wonda-navy-1, #1c1c3c);
    word-break: break-word;
}

.wonda-welcome__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wonda-welcome__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f3f5fa;
    border: 1px solid rgba(28, 28, 60, .06);
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
    white-space: nowrap;
}
.wonda-welcome__chip code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    letter-spacing: .01em;
}
.wonda-welcome__chip strong {
    color: var(--wonda-navy-1, #1c1c3c);
    font-weight: 700;
}
.wonda-welcome__chip-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: .65;
    color: currentColor;
}

.wonda-welcome__chip--info {
    background: rgba(59, 130, 246, .08);
    border-color: rgba(59, 130, 246, .18);
    color: #1e40af;
}
.wonda-welcome__chip--warn {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .25);
    color: #92400e;
}
.wonda-welcome__chip--warn strong { color: #92400e; }
.wonda-welcome__chip--danger {
    background: rgba(185, 28, 28, .08);
    border-color: rgba(185, 28, 28, .22);
    color: #991b1b;
}

.wonda-welcome__status {
    flex-shrink: 0;
    align-self: center;
}
.wonda-welcome__status .wonda-pill {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Dark mode ---------- */

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    .wonda-welcome {
        padding: 18px 18px 16px;
        gap: 14px;
    }
    .wonda-welcome__title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .wonda-welcome__status {
        align-self: flex-start;
    }
    .wonda-welcome__chip {
        font-size: 12px;
        padding: 4px 10px;
    }
    .wonda-welcome__chip code { font-size: 11.5px; }
}

/* ==== END WONDA_WELCOME_CSS ==== */