/* ==========================================================================
   Vape Juice Cloner — frontend styles
   A "lab bench" aesthetic: deep space ground, neon cyan -> violet -> magenta
   signature gradient, glass panels, glow and scanlines. Dark by default,
   with a full light palette. All animation is disabled under
   prefers-reduced-motion.
   ========================================================================== */

.vlc {
    --vlc-bg: #0b0e17;
    --vlc-bg-2: #111524;
    --vlc-panel: #161b2c;
    --vlc-panel-2: #1d2438;
    --vlc-border: #2a3350;
    --vlc-text: #eef2ff;
    --vlc-muted: #93a0c8;
    --vlc-faint: #64708f;

    --vlc-c1: #22d3ee;   /* cyan   */
    --vlc-c2: #818cf8;   /* indigo */
    --vlc-c3: #e879f9;   /* magenta*/
    --vlc-accent: var(--vlc-c1);
    --vlc-glow: rgba(34, 211, 238, .35);

    --vlc-good: #34d399;
    --vlc-warn-bg: rgba(244, 63, 94, .12);
    --vlc-warn-text: #fda4af;
    --vlc-warn-line: rgba(244, 63, 94, .4);

    /* Native controls (checkboxes, range thumbs, spinners) follow this, not
       our tokens — without it they render as light blocks on the dark panel. */
    color-scheme: dark;

    box-sizing: border-box;
    position: relative;
    max-width: 880px;
    margin: 1.75rem 0;
    padding: 1.4rem;
    border: 1px solid var(--vlc-border);
    border-radius: 14px;
    color: var(--vlc-text);
    font-size: 15px;
    line-height: 1.45;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(120% 80% at 100% 0%, rgba(232, 121, 249, .10), transparent 60%),
        linear-gradient(180deg, var(--vlc-bg-2), var(--vlc-bg));
    box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}
/* faint engineering grid */
.vlc::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(90% 60% at 50% 0%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000 20%, transparent 80%);
}
/* gradient hairline along the top edge */
.vlc::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c2), var(--vlc-c3), var(--vlc-c1));
    background-size: 300% 100%;
    animation: vlc-sweep 8s linear infinite;
}
@keyframes vlc-sweep { to { background-position: 300% 0; } }

.vlc--light {
    --vlc-bg: #f7f9ff;
    --vlc-bg-2: #ffffff;
    --vlc-panel: #ffffff;
    --vlc-panel-2: #eef2fb;
    --vlc-border: #d3dcf0;
    --vlc-text: #101426;
    --vlc-muted: #4a5578;
    --vlc-faint: #7c88a8;
    --vlc-c1: #0891b2;
    --vlc-c2: #4f46e5;
    --vlc-c3: #c026d3;
    --vlc-glow: rgba(8, 145, 178, .25);
    --vlc-good: #059669;
    --vlc-warn-bg: rgba(225, 29, 72, .08);
    --vlc-warn-text: #be123c;
    --vlc-warn-line: rgba(225, 29, 72, .35);
    color-scheme: light;
    box-shadow: 0 14px 40px -24px rgba(30, 41, 90, .45), inset 0 1px 0 #fff;
}
.vlc *, .vlc *:before, .vlc *:after { box-sizing: inherit; }
.vlc > * { position: relative; z-index: 1; }

/* ---------- header ---------- */
.vlc-title {
    margin: 0 0 1.1rem;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c2) 55%, var(--vlc-c3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- inputs ---------- */
.vlc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: .8rem;
    margin-bottom: 1.1rem;
}
.vlc-field { display: block; }
.vlc-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--vlc-muted);
    margin-bottom: .3rem;
}
.vlc-input-wrap { display: flex; align-items: center; gap: .4rem; }
.vlc input[type="number"], .vlc input[type="text"] {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--vlc-border);
    border-radius: 8px;
    background: var(--vlc-panel);
    color: var(--vlc-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s;
}
.vlc input[type="number"] { max-width: 118px; }
.vlc input:focus {
    outline: none;
    border-color: var(--vlc-accent);
    box-shadow: 0 0 0 3px var(--vlc-glow);
}
.vlc-suffix { color: var(--vlc-faint); font-size: .82rem; white-space: nowrap; }

/* ---------- VG/PG slider ---------- */
.vlc-ratio {
    display: flex; align-items: center; gap: .9rem;
    margin-bottom: 1.1rem; flex-wrap: wrap;
    padding: .75rem .9rem;
    border: 1px solid var(--vlc-border);
    border-radius: 10px;
    background: var(--vlc-panel);
}
.vlc-ratio .vlc-label { margin: 0; }
.vlc-ratio input[type="range"] {
    flex: 1 1 220px;
    accent-color: var(--vlc-c2);
    height: 4px;
}
.vlc-ratio-read {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- tables ---------- */
.vlc table { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.vlc th, .vlc td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--vlc-border);
    font-variant-numeric: tabular-nums;
}
.vlc th {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--vlc-faint);
    border-bottom-color: var(--vlc-border);
}
.vlc-flavors .vlc-pct { white-space: nowrap; }
.vlc-flavors .vlc-pct input { max-width: 82px; display: inline-block; }
.vlc-pct-h, .vlc-flavors .vlc-pct { width: 112px; }
.vlc-own-h, .vlc-own { width: 46px; text-align: center; }
.vlc-own input { accent-color: var(--vlc-good); width: 1rem; height: 1rem; }
.vlc-remove { width: 40px; text-align: center; }
.vlc-remove button {
    border: none; background: transparent; color: var(--vlc-faint);
    font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .2rem .4rem;
    border-radius: 6px; transition: color .15s, background .15s;
}
.vlc-remove button:hover { color: #fff; background: var(--vlc-warn-line); }

.vlc-unverified {
    display: inline-block;
    margin-left: .45rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--vlc-warn-line);
    background: var(--vlc-warn-bg);
    color: var(--vlc-warn-text);
    font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    vertical-align: middle; cursor: help;
}

.vlc-results td:nth-child(n+2), .vlc-results th:nth-child(n+2) { text-align: right; width: 92px; }
.vlc-results tbody tr { transition: background .15s; }
.vlc-results tbody tr:hover { background: rgba(129, 140, 248, .07); }
.vlc-total td {
    font-weight: 800;
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c2), var(--vlc-c3)) 1;
    background: rgba(129, 140, 248, .08);
}

/* ---------- warnings ---------- */
.vlc-warnings:not(:empty) { margin: 0 0 .85rem; }
.vlc-warning {
    margin: 0 0 .4rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    border-left: 3px solid var(--vlc-warn-line);
    background: var(--vlc-warn-bg);
    color: var(--vlc-warn-text);
    font-size: .88rem;
}

/* ---------- buttons ---------- */
.vlc-btn {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--vlc-border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--vlc-panel-2), var(--vlc-panel));
    color: var(--vlc-text);
    font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s, color .15s;
}
.vlc-btn:hover {
    border-color: var(--vlc-accent);
    color: var(--vlc-accent);
    box-shadow: 0 0 0 3px var(--vlc-glow);
}
.vlc-btn:active { transform: translateY(1px); }
.vlc-btn.done { color: var(--vlc-good); border-color: var(--vlc-good); box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }

.vlc-foot { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0; }
.vlc-note { color: var(--vlc-faint); font-size: .76rem; }

@media (max-width: 480px) {
    .vlc { padding: 1rem; }
    .vlc-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Loading indicator (generator)
   ========================================================================== */
.vlc-loading {
    position: relative;
    max-width: 880px;
    margin: 1rem 0 1.75rem;
    padding: 0 0 1rem;
    border: 1px solid #2a3350;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(100% 100% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
        linear-gradient(180deg, #111524, #0b0e17);
    color: #eef2ff;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .9);
}
.vlc-loading-bar { height: 3px; background: rgba(148, 163, 184, .15); overflow: hidden; }
.vlc-loading-bar span {
    display: block; height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, #22d3ee, #818cf8, #e879f9, transparent);
    animation: vlc-indeterminate 1.4s ease-in-out infinite;
}
@keyframes vlc-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.vlc-loading-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem 0; }
.vlc-loading-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vlc-loading-text strong { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.vlc-loading-sub { color: #93a0c8; font-size: .82rem; }
.vlc-loading-sub [data-vlc-elapsed] { font-variant-numeric: tabular-nums; color: #22d3ee; }

/* three falling droplets */
.vlc-loading-drops { display: flex; gap: .35rem; flex: 0 0 auto; }
.vlc-loading-drops i {
    width: 10px; height: 10px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #22d3ee, #818cf8);
    box-shadow: 0 0 10px rgba(34, 211, 238, .6);
    animation: vlc-drop 1.1s ease-in-out infinite;
}
.vlc-loading-drops i:nth-child(2) { animation-delay: .16s; background: linear-gradient(135deg, #818cf8, #e879f9); box-shadow: 0 0 10px rgba(129, 140, 248, .6); }
.vlc-loading-drops i:nth-child(3) { animation-delay: .32s; background: linear-gradient(135deg, #e879f9, #22d3ee); box-shadow: 0 0 10px rgba(232, 121, 249, .6); }
@keyframes vlc-drop {
    0%, 100% { transform: rotate(-45deg) translateY(0);      opacity: .55; }
    50%      { transform: rotate(-45deg) translateY(-7px);   opacity: 1; }
}

/* reduced motion / explicit still mode */
.vlc-loading--still .vlc-loading-bar span,
.vlc-loading--still .vlc-loading-drops i { animation: none; }
.vlc-loading--still .vlc-loading-bar span { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .vlc::after, .vlc-loading-bar span, .vlc-loading-drops i { animation: none !important; }
    .vlc-loading-bar span { width: 100%; }
}

/* ==========================================================================
   Age gate
   ========================================================================== */
.vapelab-agegate {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(6, 8, 14, .93);
    backdrop-filter: blur(6px);
}
.vapelab-agegate-box {
    position: relative;
    max-width: 430px; padding: 2.2rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #161b2c, #0b0e17);
    color: #eef2ff;
    border: 1px solid #2a3350;
    text-align: center;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
    overflow: hidden;
}
.vapelab-agegate-box::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #22d3ee, #818cf8, #e879f9);
}
.vapelab-agegate-box h2 {
    margin: 0 0 .6rem; font-size: 1.45rem; font-weight: 800;
    letter-spacing: .01em;
    background: linear-gradient(90deg, #22d3ee, #e879f9);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vapelab-agegate-box p { margin: 0 0 1.4rem; color: #93a0c8; line-height: 1.55; }
.vapelab-agegate-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.vapelab-agegate-actions button {
    padding: .65rem 1.3rem; border-radius: 9px;
    border: 1px solid #2a3350; font: inherit; font-weight: 600; cursor: pointer;
    transition: transform .1s, box-shadow .15s;
}
.vapelab-agegate-actions button:active { transform: translateY(1px); }
.vapelab-agegate-yes {
    background: linear-gradient(90deg, #22d3ee, #818cf8);
    border-color: transparent !important; color: #06121a;
    box-shadow: 0 0 0 0 rgba(34, 211, 238, .5);
}
.vapelab-agegate-yes:hover { box-shadow: 0 0 22px -2px rgba(34, 211, 238, .65); }
.vapelab-agegate-no { background: transparent; color: #93a0c8; }
.vapelab-agegate-no:hover { color: #eef2ff; }

/* ==========================================================================
   Single recipe page
   ========================================================================== */
.vjc-recipe {
    --c1: #22d3ee; --c2: #818cf8; --c3: #e879f9;
    --ink: #eef2ff; --muted: #93a0c8; --faint: #64708f;
    --panel: #161b2c; --panel-2: #1d2438; --line: #2a3350;
    color-scheme: dark;
    --good: #34d399; --bad: #fb7185;
    --bg: #0b0e17;
    /* Self-contained surface: the page it sits on may be any colour, so the
       recipe brings its own ground rather than inheriting the theme's. */
    max-width: 940px; margin: 2rem auto; padding: 2rem 1.6rem 2.4rem;
    border-radius: 18px;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(129, 140, 248, .08), transparent 70%),
        var(--bg);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Theme follows the plugin's own setting (emitted as a class), so the page and
   the calculator embedded in it never disagree. */
.vjc-recipe.vjc-light {
    --ink: #101426; --muted: #4a5578; --faint: #7c88a8;
    --panel: #ffffff; --panel-2: #eef2fb; --line: #d3dcf0;
    --c1: #0891b2; --c2: #4f46e5; --c3: #c026d3;
    color-scheme: light;
    --good: #059669; --bad: #e11d48;
    --bg: #f7f9ff;
}

/* hero */
.vjc-hero {
    position: relative;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(100% 120% at 0% 0%, rgba(34, 211, 238, .12), transparent 55%),
        radial-gradient(100% 120% at 100% 0%, rgba(232, 121, 249, .12), transparent 55%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
    display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
}
.vjc-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}
.vjc-hero-main { flex: 1 1 320px; min-width: 0; }
.vjc-eyebrow {
    display: inline-block; margin-bottom: .4rem;
    font-size: .66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--c1);
}
.vjc-title {
    margin: 0 0 .85rem;
    /* The site's own face, not a condensed display font — recipe names are
       often long and full of digits, and Oswald crushed them together. */
    font-family: inherit;
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    font-weight: 800; line-height: 1.2;
    text-transform: none; letter-spacing: -.01em;
    text-wrap: balance;
    padding-bottom: .1rem;          /* descenders were clipped by background-clip */
    background: linear-gradient(100deg, var(--c1), var(--c2) 50%, var(--c3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vjc-profile {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 60ch;
}
.vjc-eyebrow + .vjc-title { margin-top: .1rem; }

/* accuracy gauge */
.vjc-gauge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.vjc-ring {
    width: 104px; height: 104px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--c1) calc(var(--pct) * 1%), rgba(148, 163, 184, .16) 0);
    position: relative;
}
.vjc-ring::after {
    content: ""; position: absolute; inset: 7px; border-radius: 50%;
    background: var(--panel);
}
.vjc-ring-val {
    position: relative; z-index: 1;
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vjc-ring-val small { display: block; font-size: .58rem; letter-spacing: .14em; color: var(--faint); -webkit-text-fill-color: var(--faint); margin-top: .2rem; }
.vjc-gauge-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }

/* spec strip */
.vjc-specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem; margin: 1rem 0 0;
}
.vjc-spec {
    padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 11px;
    background: var(--panel);
}
.vjc-spec dt {
    margin: 0 0 .2rem; font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .13em; color: var(--faint);
}
.vjc-spec dd { margin: 0; font-size: 1.02rem; font-weight: 700; }

/* section headings */
.vjc-h2 {
    display: flex; align-items: center; gap: .7rem;
    margin: 2.4rem 0 1rem;
    /* Site font, matching the h1 — the condensed display face crushed the
       longer section names. Casing is left exactly as written, so wording
       like "DIY eJuice Mixing Notes" keeps its capitals instead of being
       flattened to EJUICE by text-transform. */
    font-family: inherit;
    font-size: 1.3rem; font-weight: 800;
    text-transform: none; letter-spacing: -.005em; line-height: 1.3;
    color: var(--ink);
}
.vjc-h2::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--c2), transparent);
}

/* concentrate rows with percentage bars */
.vjc-mix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.vjc-mix li {
    position: relative;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem .9rem;
    border: 1px solid var(--line); border-radius: 11px;
    background: var(--panel);
    overflow: hidden;
}
.vjc-mix li::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: calc(var(--pct) * 1%);
    background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(232, 121, 249, .10));
    border-right: 1px solid rgba(129, 140, 248, .35);
}
.vjc-mix li > * { position: relative; z-index: 1; }
.vjc-brand {
    flex: 0 0 auto;
    min-width: 3.1rem;
    text-align: center;
    font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .26rem .5rem; border-radius: 6px;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--c1);
}
/* Each known manufacturer gets its own hue, set inline as --h, so the codes
   are told apart at a glance instead of reading as identical grey pills. */
.vjc-brand--known {
    border-color: hsl(var(--h) 70% 55% / .5);
    background: hsl(var(--h) 70% 45% / .18);
    color: hsl(var(--h) 85% 72%);
    cursor: help;
}
.vjc-light .vjc-brand--known {
    border-color: hsl(var(--h) 55% 45% / .45);
    background: hsl(var(--h) 70% 45% / .10);
    color: hsl(var(--h) 65% 32%);
}

/* ---------- brand key ---------- */
.vjc-key { margin: .9rem 0 0; font-size: .9rem; }
.vjc-key > summary {
    cursor: pointer;
    display: inline-block;
    padding: .3rem 0;
    color: var(--muted);
    font-size: .84rem;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.vjc-key > summary:hover { color: var(--c1); }
.vjc-key-list {
    list-style: none; margin: .6rem 0 0; padding: .8rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .5rem .9rem;
}
.vjc-key-list li { display: flex; align-items: center; gap: .55rem; }
.vjc-key-name { color: var(--muted); font-size: .86rem; }

/* ---------- sources: attribution, deliberately near-invisible ----------
   These exist so the accuracy claim can be checked, not to be read. They sit
   with the disclaimer at the very bottom and are dimmed to the point of
   receding — but still keyboard-reachable, and they gain contrast plus an
   underline on hover and focus so anyone actually looking can use them. */
.vjc-sources {
    margin: 2.5rem 0 0;
    font-size: .68rem;
    line-height: 1.6;
    color: var(--faint);
    opacity: .55;
    transition: opacity .15s;
}
.vjc-sources:hover, .vjc-sources:focus-within { opacity: 1; }
.vjc-sources-label { font-weight: 400; }
.vjc-sources a { color: inherit; text-decoration: none; }
.vjc-sources a:hover, .vjc-sources a:focus-visible {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vjc-sources-sep { margin: 0 .25rem; opacity: .6; }
.vjc-flavor { font-weight: 600; }
.vjc-pct {
    margin-left: auto; font-weight: 800; font-size: 1.05rem;
    background: linear-gradient(90deg, var(--c1), var(--c3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vjc-chip {
    font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .18rem .45rem; border-radius: 999px; cursor: help;
}
.vjc-chip--ok  { color: var(--good); border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .1); }
.vjc-chip--bad { color: var(--bad);  border: 1px solid rgba(251, 113, 133, .4); background: rgba(251, 113, 133, .1); }
.vjc-buy {
    padding: .3rem .75rem; border-radius: 8px; text-decoration: none;
    font-size: .78rem; font-weight: 700;
    color: #06121a; background: linear-gradient(90deg, var(--c1), var(--c2));
    transition: box-shadow .15s, transform .1s;
}
.vjc-buy:hover { box-shadow: 0 0 18px -2px rgba(34, 211, 238, .6); }
.vjc-buy:active { transform: translateY(1px); }

/* notes / feedback */
.vjc-note {
    padding: 1rem 1.1rem; border-radius: 11px;
    border: 1px solid var(--line); border-left: 3px solid var(--c2);
    background: var(--panel); color: var(--muted); line-height: 1.6;
}
.vjc-feedback {
    margin: 1.5rem 0; padding: 1.1rem 1.2rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.vjc-feedback strong { display: block; margin-bottom: .2rem; }
.vjc-feedback-stat { color: var(--muted); font-size: .88rem; }
.vjc-vote { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.vjc-vote button {
    padding: .5rem 1rem; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
    font: inherit; font-weight: 600; font-size: .88rem;
    transition: border-color .15s, box-shadow .15s, color .15s;
}
.vjc-vote button:hover:not(:disabled) { border-color: var(--c1); color: var(--c1); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.vjc-vote button:disabled { opacity: .55; cursor: default; }
.vjc-vote button.voted { border-color: var(--good); color: var(--good); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }

.vjc-disclaimer { margin-top: 2.5rem; font-size: .78rem; color: var(--faint); line-height: 1.6; }
.vjc-content { color: var(--muted); line-height: 1.65; }

/* ---------- star rating ---------- */
.vjc-stars { display: flex; gap: .15rem; margin: .7rem 0 .2rem; }
.vjc-star {
    background: none; border: 0; padding: .1rem; cursor: pointer;
    line-height: 0; border-radius: 6px;
    transition: transform .12s;
}
.vjc-star svg { width: 30px; height: 30px; display: block; }
.vjc-star svg path {
    fill: rgba(148, 163, 184, .22);
    stroke: var(--line); stroke-width: 1;
    transition: fill .12s, filter .12s;
}
.vjc-star:hover { transform: scale(1.12); }
/* The community average, shown before the visitor picks their own score. */
.vjc-star.is-avg svg path {
    fill: rgba(251, 191, 36, .42);
    stroke: rgba(245, 158, 11, .55);
}
.vjc-star.is-on svg path {
    fill: url(#vjc-star-grad, #fbbf24);
    fill: #fbbf24;
    stroke: #f59e0b;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, .55));
}
.vjc-stars.is-locked .vjc-star { cursor: default; }
.vjc-stars.is-locked .vjc-star:hover { transform: none; }
.vjc-star:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }

/* ---------- report form ---------- */
.vjc-report-open { margin-left: auto; }
.vjc-report {
    display: flex; flex-direction: column; gap: .6rem;
    margin-top: .9rem; padding-top: .9rem;
    border-top: 1px dashed var(--line);
}
.vjc-report[hidden] { display: none; }
.vjc-report-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.vjc-report select, .vjc-report textarea {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel-2); color: var(--ink); font: inherit;
}
.vjc-report select:focus, .vjc-report textarea:focus {
    outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
.vjc-report textarea { resize: vertical; min-height: 70px; }
.vjc-report-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.vjc-report-actions button {
    padding: .5rem 1rem; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
    font: inherit; font-weight: 600; font-size: .88rem;
}
.vjc-report-send {
    background: linear-gradient(90deg, var(--c1), var(--c2)) !important;
    border-color: transparent !important; color: #06121a !important;
}
.vjc-report-send:hover { box-shadow: 0 0 18px -2px rgba(34, 211, 238, .55); }
.vjc-report-thanks { color: var(--good); font-weight: 600; }

@media (max-width: 560px) {
    .vjc-hero { padding: 1.2rem; }
    .vjc-report-open { margin-left: 0; }
}

/* ==========================================================================
   Generator skin
   The generator UI is a prebuilt React bundle that styles itself with inline
   styles and emits no class names, so it cannot be restyled at source here.
   These rules re-skin it onto the same tokens the calculator uses, so the two
   read as one tool. Overrides are deliberately limited to colour, border and
   radius — never layout — so a future rebuild of the bundle degrades to
   "slightly off palette" rather than "broken page". !important is required
   only because the bundle's own styles are inline.
   ========================================================================== */
.vjc-gen {
    --vlc-bg: #0b0e17;
    --vlc-bg-2: #111524;
    --vlc-panel: #161b2c;
    --vlc-panel-2: #1d2438;
    --vlc-border: #2a3350;
    --vlc-text: #eef2ff;
    --vlc-muted: #93a0c8;
    --vlc-faint: #64708f;
    --vlc-c1: #22d3ee;
    --vlc-c2: #818cf8;
    --vlc-c3: #e879f9;
    --vlc-glow: rgba(34, 211, 238, .35);
    color-scheme: dark;

    display: block;
    position: relative;
    max-width: 880px;
    margin: 1.75rem auto;
    border: 1px solid var(--vlc-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(120% 80% at 100% 0%, rgba(232, 121, 249, .10), transparent 60%),
        linear-gradient(180deg, var(--vlc-bg-2), var(--vlc-bg));
}
.vjc-gen--light {
    --vlc-bg: #f7f9ff;
    --vlc-bg-2: #ffffff;
    --vlc-panel: #ffffff;
    --vlc-panel-2: #eef2fb;
    --vlc-border: #d3dcf0;
    --vlc-text: #101426;
    --vlc-muted: #4a5578;
    --vlc-faint: #7c88a8;
    --vlc-c1: #0e7490;
    --vlc-c2: #4f46e5;
    --vlc-c3: #c026d3;
    --vlc-glow: rgba(14, 116, 144, .22);
    color-scheme: light;
    box-shadow: 0 14px 40px -24px rgba(30, 41, 90, .45), inset 0 1px 0 #fff;
}
/* matching gradient hairline along the top edge */
.vjc-gen::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c2), var(--vlc-c3), var(--vlc-c1));
    background-size: 300% 100%;
    animation: vlc-sweep 8s linear infinite;
}
/* the bundle's own shell: drop its background and font, keep its padding.
   The font must be overridden here rather than on the headings alone — they
   inherit from this element, not from the page. */
.vjc-gen > div {
    background: transparent !important;
    color: var(--vlc-text) !important;
    font-family: inherit !important;
}
.vjc-gen > div > div { max-width: none !important; }

/* The bundle ships Oswald/Impact for its headings; the calculator uses the
   site font, so force both onto the site font rather than have one tool show
   two typefaces. */
.vjc-gen h1, .vjc-gen h2 { font-family: inherit !important; }
.vjc-gen h1 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    border-bottom: 0 !important;
    background: linear-gradient(90deg, var(--vlc-c1), var(--vlc-c2) 55%, var(--vlc-c3)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.vjc-gen h2 {
    color: var(--vlc-text) !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}
.vjc-gen h2 span { color: var(--vlc-muted) !important; }
.vjc-gen p { color: var(--vlc-muted) !important; }
.vjc-gen p strong, .vjc-gen strong { color: var(--vlc-text) !important; }

.vjc-gen input {
    border: 1px solid var(--vlc-border) !important;
    border-radius: 8px !important;
    background: var(--vlc-panel) !important;
    color: var(--vlc-text) !important;
}
.vjc-gen input::placeholder { color: var(--vlc-faint) !important; }
.vjc-gen input:focus {
    outline: none !important;
    border-color: var(--vlc-c1) !important;
    box-shadow: 0 0 0 3px var(--vlc-glow) !important;
}
.vjc-gen button {
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--vlc-c1), var(--vlc-c2)) !important;
    color: #fff !important;
    letter-spacing: .06em !important;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s;
}
.vjc-gen button:hover { box-shadow: 0 0 0 3px var(--vlc-glow) !important; }
.vjc-gen button:active { transform: translateY(1px); }
.vjc-gen button[disabled] { opacity: .7; cursor: default; }

/* the result panel the bundle renders under the form */
.vjc-gen > div > div > div {
    border: 1px solid var(--vlc-border) !important;
    border-radius: 12px !important;
    background: var(--vlc-panel) !important;
    color: var(--vlc-text) !important;
}
.vjc-gen table { border-collapse: collapse !important; }
.vjc-gen thead tr {
    background: transparent !important;
    color: var(--vlc-faint) !important;
}
.vjc-gen th {
    border-bottom: 1px solid var(--vlc-border) !important;
    color: var(--vlc-faint) !important;
    letter-spacing: .12em !important;
}
.vjc-gen tbody tr { border-bottom: 1px solid var(--vlc-border) !important; }
.vjc-gen tbody tr:hover { background: rgba(129, 140, 248, .07) !important; }
.vjc-gen td { color: var(--vlc-text) !important; }
.vjc-gen a { color: var(--vlc-c1) !important; }

/* The auto calculator sits directly under the generator; centre it on the
   same axis so the two cards line up rather than merely stacking. */
[data-vapelab-calc-auto] .vlc { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
    .vjc-gen::after { animation: none; }
}

/* ---------- link through to the saved recipe page ---------- */
.vlc-permalink {
    --vlc-c1: #22d3ee; --vlc-c2: #818cf8;
    --vlc-glow: rgba(34, 211, 238, .35);
    margin: 1.25rem 0 0;
}
.vlc-permalink--light {
    --vlc-c1: #0e7490; --vlc-c2: #4f46e5;
    --vlc-glow: rgba(14, 116, 144, .22);
}
.vlc-permalink-btn {
    display: inline-block;
    padding: .7rem 1.15rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--vlc-c1), var(--vlc-c2));
    color: #fff !important;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .03em;
    text-decoration: none;
    box-shadow: 0 10px 26px -14px rgba(34, 211, 238, .8);
    transition: transform .1s, box-shadow .15s;
}
.vlc-permalink-btn:hover { box-shadow: 0 0 0 3px var(--vlc-glow); }
.vlc-permalink-btn:active { transform: translateY(1px); }

/* ==========================================================================
   Sponsor slots
   Paid placements around the generator. Deliberately quieter than the tools —
   a sponsor should read as an advert, not as part of the recipe output — but
   still on the same palette so the page holds together.
   ========================================================================== */
.vlc-sponsor {
    --vlc-c1: #22d3ee; --vlc-c2: #818cf8;
    --vlc-panel: #161b2c; --vlc-border: #2a3350;
    --vlc-text: #eef2ff; --vlc-muted: #93a0c8; --vlc-faint: #64708f;
    --vlc-glow: rgba(34, 211, 238, .3);

    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .85rem;
    max-width: 880px;
    margin: 1rem auto;
    padding: .55rem .8rem;
    border: 1px solid var(--vlc-border);
    border-left: 3px solid transparent;
    border-image: none;
    border-radius: 12px;
    background: var(--vlc-panel);
    color: var(--vlc-text);
    text-decoration: none;
    font-size: 15px;
    line-height: 1.45;
}
.vlc-sponsor--light {
    --vlc-c1: #0e7490; --vlc-c2: #4f46e5;
    --vlc-panel: #ffffff; --vlc-border: #d3dcf0;
    --vlc-text: #101426; --vlc-muted: #4a5578; --vlc-faint: #7c88a8;
    --vlc-glow: rgba(14, 116, 144, .2);
}
.vlc-sponsor * { box-sizing: inherit; }
.vlc-sponsor--linked { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vlc-sponsor--linked:hover { border-color: var(--vlc-c1); box-shadow: 0 0 0 3px var(--vlc-glow); }

.vlc-sponsor-img {
    flex: 0 0 auto;
    width: 54px; height: auto;
    max-height: 54px;
    object-fit: contain;
    border-radius: 6px;
}
.vlc-sponsor-text { min-width: 0; flex: 1 1 auto; }
/* Label and headline share a line — stacking them cost a whole row. */
.vlc-sponsor-line { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.vlc-sponsor-tag {
    flex: 0 0 auto;
    font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--vlc-faint);
}
.vlc-sponsor-headline {
    font-size: .95rem; font-weight: 800;
    letter-spacing: .01em;
    color: var(--vlc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlc-sponsor-body {
    margin: .1rem 0 0;
    color: var(--vlc-muted);
    font-size: .82rem; line-height: 1.4;
    /* One line, so a long blurb cannot stretch the slot back out. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlc-sponsor-cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-block;
    padding: .42rem .85rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--vlc-c1), var(--vlc-c2));
    color: #fff !important;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow .15s, transform .1s;
}
.vlc-sponsor-cta:hover { box-shadow: 0 0 0 3px var(--vlc-glow); }
.vlc-sponsor-cta:active { transform: translateY(1px); }

@media (max-width: 560px) {
    .vlc-sponsor { flex-wrap: wrap; gap: .5rem .7rem; }
    .vlc-sponsor-text { flex: 1 1 100%; order: 1; }
    .vlc-sponsor-img { order: 0; width: 44px; max-height: 44px; }
    .vlc-sponsor-cta { order: 2; margin-left: 0; width: 100%; text-align: center; }
    .vlc-sponsor-body { white-space: normal; }
}

/* ---------- "clone another" links back to the generator ---------- */
.vjc-clone-top {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 1.1rem;
    padding: .42rem .85rem .42rem .6rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--panel);
    color: var(--muted); text-decoration: none;
    font-size: .8rem; font-weight: 600;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.vjc-clone-top:hover, .vjc-clone-top:focus-visible {
    border-color: var(--c1); color: var(--c1);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
}
.vjc-clone-icon {
    display: grid; place-items: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff; font-weight: 800; font-size: .8rem; line-height: 1;
}

.vjc-clone-bottom {
    margin: 2.6rem 0 0;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line); border-radius: 14px;
    background:
        radial-gradient(100% 140% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(100% 140% at 100% 0%, rgba(232, 121, 249, .10), transparent 60%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
    text-align: center;
}
.vjc-clone-bottom strong {
    display: block;
    font-size: 1.15rem; font-weight: 800;
    color: var(--ink);
}
.vjc-clone-bottom p {
    margin: .45rem auto 1rem;
    max-width: 46ch;
    color: var(--muted);
    font-size: .92rem; line-height: 1.6;
}
.vjc-clone-btn {
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff !important;
    font-weight: 700; font-size: .95rem; letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 12px 28px -16px rgba(34, 211, 238, .85);
    transition: box-shadow .15s, transform .1s;
}
.vjc-clone-btn:hover, .vjc-clone-btn:focus-visible { box-shadow: 0 0 0 3px rgba(34, 211, 238, .3); }
.vjc-clone-btn:active { transform: translateY(1px); }

/* ---------- taxonomy chips ---------- */
.vjc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.vjc-tag {
    display: inline-block;
    padding: .3rem .7rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--panel);
    color: var(--muted); text-decoration: none;
    font-size: .76rem; font-weight: 600; letter-spacing: .02em;
    transition: border-color .15s, color .15s;
}
.vjc-tag:hover, .vjc-tag:focus-visible { border-color: var(--c1); color: var(--c1); }
.vjc-tag--flavor::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--c1); vertical-align: middle; }
.vjc-tag--brand::before  { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--c3); vertical-align: middle; }

/* ---------- similar recipes ---------- */
.vjc-related {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem;
}
.vjc-related a {
    display: block; position: relative;
    padding: .9rem 3.2rem .9rem 1rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--panel);
    text-decoration: none;
    transition: border-color .15s, transform .1s, box-shadow .15s;
}
.vjc-related a:hover, .vjc-related a:focus-visible {
    border-color: var(--c2);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .16);
}
.vjc-related-name { display: block; color: var(--ink); font-weight: 700; font-size: .96rem; line-height: 1.35; }
.vjc-related-desc { display: block; margin-top: .25rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.vjc-related-acc {
    position: absolute; top: .9rem; right: .9rem;
    font-size: .8rem; font-weight: 800;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vlc-permalink-name {
    display: block;
    margin-bottom: .6rem;
    font-size: 1.15rem; font-weight: 800;
    color: var(--vlc-text, #eef2ff);
}
.vlc-permalink--light .vlc-permalink-name { color: #101426; }

/* Page mode: the recipe page is the canonical presentation, so the bundle's
   own summary is hidden once a published recipe exists to link to. Done with
   a class on the mount element because React owns everything inside it. */
.vjc-gen--sent > div > div > div { display: none !important; }

/* Page mode result: a card, since it is the only thing left on screen. */
.vlc-permalink--card {
    max-width: 880px;
    margin: 1.25rem auto 0;
    padding: 1.6rem 1.5rem;
    border: 1px solid #2a3350;
    border-radius: 14px;
    text-align: center;
    background:
        radial-gradient(100% 140% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(100% 140% at 100% 0%, rgba(232, 121, 249, .10), transparent 60%),
        linear-gradient(180deg, #161b2c, #111524);
}
.vlc-permalink--card.vlc-permalink--light {
    border-color: #d3dcf0;
    background:
        radial-gradient(100% 140% at 0% 0%, rgba(14, 116, 144, .07), transparent 60%),
        radial-gradient(100% 140% at 100% 0%, rgba(192, 38, 211, .07), transparent 60%),
        linear-gradient(180deg, #ffffff, #f7f9ff);
}
.vlc-permalink-eyebrow {
    display: block;
    margin-bottom: .35rem;
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--vlc-c1);
}
.vlc-permalink--card .vlc-permalink-name { font-size: 1.45rem; margin-bottom: 1rem; }

/* ==========================================================================
   Recipe library — [vapelab_library]
   Server-rendered grid with crawlable filter links. Shares the recipe page's
   palette so a library page and a recipe page read as one site.
   ========================================================================== */
.vjc-library {
    --c1: #22d3ee; --c2: #818cf8; --c3: #e879f9;
    --ink: #eef2ff; --muted: #93a0c8; --faint: #64708f;
    --panel: #161b2c; --panel-2: #1d2438; --line: #2a3350;
    --bg: #0b0e17;
    color-scheme: dark;

    box-sizing: border-box;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1.6rem 1.4rem 2rem;
    border-radius: 18px;
    color: var(--ink);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(129, 140, 248, .08), transparent 70%),
        var(--bg);
}
.vjc-library.vjc-light {
    --ink: #101426; --muted: #4a5578; --faint: #7c88a8;
    --panel: #ffffff; --panel-2: #eef2fb; --line: #d3dcf0;
    --c1: #0e7490; --c2: #4f46e5; --c3: #c026d3;
    --bg: #f7f9ff;
    color-scheme: light;
}
.vjc-library *, .vjc-library *::before, .vjc-library *::after { box-sizing: inherit; }

.vjc-lib-controls { margin-bottom: 1.4rem; }
.vjc-lib-search { display: flex; gap: .5rem; margin-bottom: .9rem; }
.vjc-lib-search input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    padding: .6rem .85rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); color: var(--ink);
    font: inherit; font-size: .95rem;
}
.vjc-lib-search input:focus { outline: none; border-color: var(--c1); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.vjc-lib-search button {
    flex: 0 0 auto;
    padding: .6rem 1.1rem;
    border: 0; border-radius: 10px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff; font: inherit; font-weight: 700; font-size: .9rem;
    cursor: pointer;
}

.vjc-lib-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.vjc-lib-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .75rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--panel);
    color: var(--muted); text-decoration: none;
    font-size: .8rem; font-weight: 600;
    transition: border-color .15s, color .15s;
}
.vjc-lib-chip:hover, .vjc-lib-chip:focus-visible { border-color: var(--c1); color: var(--c1); }
.vjc-lib-chip.is-on { border-color: var(--c2); color: var(--ink); background: var(--panel-2); }
.vjc-lib-count { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.vjc-lib-active { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }
.vjc-lib-active a { color: var(--c1); }
.vjc-lib-empty { margin: 2rem 0; color: var(--muted); }

.vjc-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: .9rem;
}
.vjc-lib-card { min-width: 0; }
.vjc-lib-link {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel);
    overflow: hidden; text-decoration: none;
    transition: border-color .15s, transform .1s, box-shadow .15s;
}
.vjc-lib-link:hover, .vjc-lib-link:focus-visible {
    border-color: var(--c2);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .16);
}
.vjc-lib-thumb { display: block; aspect-ratio: 16 / 9; background: var(--panel-2); }
.vjc-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vjc-lib-body { display: flex; flex-direction: column; gap: .25rem; padding: .85rem .95rem 1rem; }
.vjc-lib-brand {
    font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--c1);
}
.vjc-lib-name { color: var(--ink); font-weight: 800; font-size: 1rem; line-height: 1.35; }
.vjc-lib-desc { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.vjc-lib-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
    margin-top: .5rem; padding-top: .55rem;
    border-top: 1px solid var(--line);
    font-size: .78rem; color: var(--faint);
}
.vjc-lib-acc {
    font-weight: 800; font-size: .95rem;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vjc-lib-acc small, .vjc-lib-stars small { font-size: .68rem; font-weight: 600; -webkit-text-fill-color: var(--faint); color: var(--faint); }
.vjc-lib-stars { color: #f59e0b; font-weight: 700; }
.vjc-lib-vg { margin-left: auto; font-variant-numeric: tabular-nums; }

.vjc-lib-pages {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: 1.6rem;
}
.vjc-lib-page {
    padding: .5rem 1rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel);
    color: var(--ink); text-decoration: none;
    font-size: .88rem; font-weight: 600;
}
.vjc-lib-page:hover, .vjc-lib-page:focus-visible { border-color: var(--c1); color: var(--c1); }
.vjc-lib-pageof { color: var(--faint); font-size: .82rem; }

/* ---------- [vapelab_recent] : compact internal-link list ---------- */
.vjc-recent {
    --c1: #22d3ee; --c2: #818cf8;
    --ink: #eef2ff; --muted: #93a0c8; --faint: #64708f;
    --panel: #161b2c; --line: #2a3350;
    box-sizing: border-box;
}
.vjc-recent.vjc-light {
    --c1: #0e7490; --c2: #4f46e5;
    --ink: #101426; --muted: #4a5578; --faint: #7c88a8;
    --panel: #ffffff; --line: #d3dcf0;
}
.vjc-recent * { box-sizing: inherit; }
.vjc-recent-title {
    margin: 0 0 .7rem;
    font-size: 1.05rem; font-weight: 800;
    color: var(--ink);
}
.vjc-recent-list {
    list-style: none; margin: 0; padding: 0;
    /* columns="2" and up. Grid rather than CSS columns so rows line up and
       the dividers do not straddle the gap. */
    display: grid;
    grid-template-columns: repeat(var(--vjc-cols, 1), minmax(0, 1fr));
    column-gap: 1.6rem;
}
.vjc-recent-list li {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .42rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem; line-height: 1.4;
}
.vjc-recent-list li:last-child { border-bottom: 0; }
/* With more than one column, the last row is what should lose its rule. */
@media (min-width: 700px) {
    .vjc-recent-list li:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 699px) {
    .vjc-recent-list { grid-template-columns: 1fr; }
}
.vjc-recent-list a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.vjc-recent-list a:hover, .vjc-recent-list a:focus-visible {
    color: var(--c1);
    border-bottom-color: currentColor;
}
.vjc-recent-acc {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .78rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}