/* ============================================================================
   Library components — card designs imported from docs/components
   (01-icon-cards.html, 02-image-cards.html, 03-stat-metric-cards.html,
   04-content-cards.html, 05-interactive-cards.html, 06-list-banner-cards.html,
   07-banner-cards.html, 08-glassmorphism-cards-light.html, 09-shape-cards.html,
   15-galleries.html, 16-events.html).

   WHY THIS FILE EXISTS
   ComponentItem stores HTML only (PreviewHtml) — there is no CSS field, and no
   stylesheet hook in ComponentsController or EmbedResolver. The seeded library
   components get away with that because they use nothing but Bootstrap
   utilities and inline style attributes. These designs can't: they depend on
   :hover, ::before overlays and transitions, none of which can be expressed
   inline. So the CSS lives here, exactly as .psite-* styles live in
   site-shell.css, and for the same reason — the Craft builder iframe has to be
   able to load it too, or every one of these blocks renders unstyled in the
   canvas.

   LOADED BY
     Views/Public/_PublicLayout.cshtml   (public pages + preview)
     wwwroot/builders/craft/index.html   (builder canvas)

   SCOPING RULE
   Everything is nested under .lib. The source files styled bare `body`, `h1-h6`
   and `*`, which would have fought ThemeCss's own body/heading rules and leaked
   into all nine admin screens that share admin.css. Nothing here touches a
   generic selector.

   THEMING
   The source files hard-coded a fixed palette (#e05d34 orange, Playfair
   Display / DM Sans via Google Fonts). Both are gone: the CDN font links are
   blocked by the CSP (style-src 'self'), and a fixed accent would look wrong on
   every tenant. The gallery's variable names are instead mapped onto the
   per-tenant variables ThemeCss.StyleBlock already emits, so each component
   picks up the workspace's own brand colour, fonts and corner radius.
   ========================================================================== */

.lib {
    /* Bridge: gallery variable names → tenant theme (see Support/ThemeCss.cs). */
    --lib-accent: var(--site, #4f46e5);
    --lib-accent-2: var(--site-2, #7c3aed);
    --lib-font: var(--site-font, system-ui, sans-serif);
    --lib-font-head: var(--site-font-head, var(--lib-font));
    --lib-radius: var(--site-radius, 16px);

    /* Derived accent shades, so hover/gradient states follow the brand colour
       instead of the source file's baked-in oranges. */
    --lib-accent-dark: color-mix(in srgb, var(--lib-accent), #000 18%);
    --lib-accent-light: color-mix(in srgb, var(--lib-accent), #fff 35%);
    --lib-accent-05: color-mix(in srgb, var(--lib-accent), transparent 95%);
    --lib-accent-10: color-mix(in srgb, var(--lib-accent), transparent 90%);
    --lib-accent-15: color-mix(in srgb, var(--lib-accent), transparent 85%);
    --lib-accent-20: color-mix(in srgb, var(--lib-accent), transparent 80%);
    --lib-accent-35: color-mix(in srgb, var(--lib-accent), transparent 65%);

    /* Neutrals. Kept as variables rather than literals so a dark-surface tenant
       can be supported later by overriding these four in one place. */
    --lib-heading: #1a1a2e;
    --lib-text: #444460;
    --lib-surface: #fff;
    --lib-on-accent: #fff;
    --lib-border: color-mix(in srgb, var(--lib-heading), transparent 88%);
    --lib-hairline: color-mix(in srgb, var(--lib-heading), transparent 94%);

    /* Support palette for components that are deliberately multi-hue
       (notifications, tag clouds, roadmaps). Tunable in one place. */
    --lib-blue: #3a86ff;
    --lib-teal: #2ec4b6;
    --lib-gold: #f5a623;
    --lib-violet: #7c3aed;
    --lib-pink: #ec4899;
    --lib-green: #16a34a;
    --lib-rose: #e11d48;

    /* Shadow scale — the source used a dozen slightly different rgba shadows;
       collapsing them to three keeps the set looking like one system. */
    --lib-sh-1: 0 4px 15px rgba(16, 18, 40, .06);
    --lib-sh-2: 0 10px 28px rgba(16, 18, 40, .10);
    --lib-sh-3: 0 20px 42px rgba(16, 18, 40, .14);

    font-family: var(--lib-font);
    color: var(--lib-text);
}

/* Headings inside a library block follow the tenant's heading font. Scoped to
   .lib so ThemeCss's global h1-h6 rule is untouched elsewhere. */
.lib h1, .lib h2, .lib h3, .lib h4, .lib h5, .lib h6 {
    font-family: var(--lib-font-head);
    color: var(--lib-heading);
}

.lib a { text-decoration: none; }
.lib img { max-width: 100%; }

/* Accessibility: the source designs had no visible keyboard focus at all —
   every interactive element relied on :hover only. */
.lib a:focus-visible,
.lib button:focus-visible,
.lib [tabindex]:focus-visible {
    outline: 2px solid var(--lib-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Several cards animate transform on hover and one spins continuously.
   Honour the OS "reduce motion" setting rather than overriding the user. */
@media (prefers-reduced-motion: reduce) {
    .lib *,
    .lib *::before,
    .lib *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .lib *:hover { transform: none !important; }
}

/* ==========================================================================
   FILE 01 — ICON CARDS
   ========================================================================== */

/* Card 01 — Centered icon */
.lib .icon-card { margin-bottom: 0; }
.lib .card-01 { background: var(--lib-surface); padding: 30px 20px; border-radius: var(--lib-radius); text-align: center; height: 100%; transition: all .3s ease; box-shadow: var(--lib-sh-1); }
.lib .card-01:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .card-01 .icon { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--lib-accent-10); margin-bottom: 20px; }
.lib .card-01 .icon i { font-size: 32px; color: var(--lib-accent); }
.lib .card-01 h4 { font-size: 1.2rem; margin-bottom: 15px; font-weight: 600; }
.lib .card-01 p { font-size: .95rem; margin-bottom: 0; color: var(--lib-text); }

/* Card 02 — Stat with rotating icon */
.lib .card-02 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2.5rem 2rem; height: 100%; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.25, .46, .45, .94); border: 1px solid var(--lib-accent-10); }
.lib .card-02::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--lib-accent), var(--lib-accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.lib .card-02:hover { transform: translateY(-8px); box-shadow: var(--lib-sh-3); }
.lib .card-02:hover::before { transform: scaleX(1); }
.lib .card-02:hover .icon-wrapper { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-2)); transform: rotate(360deg); }
.lib .card-02:hover .icon-wrapper i { color: var(--lib-on-accent); }
.lib .card-02 .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.lib .card-02 .header .icon-wrapper { width: 60px; height: 60px; border-radius: 50%; background: var(--lib-accent-10); display: flex; align-items: center; justify-content: center; transition: all .4s ease; }
.lib .card-02 .header .icon-wrapper i { font-size: 1.8rem; color: var(--lib-accent); transition: all .4s ease; }
.lib .card-02 .header .value { font-size: 2.75rem; font-weight: 900; color: var(--lib-heading); font-family: var(--lib-font-head); line-height: 1; }
.lib .card-02 .info h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.lib .card-02 .info p { color: var(--lib-text); font-size: .95rem; margin-bottom: 0; line-height: 1.5; }

/* Card 03 — Horizontal icon + text */
.lib .card-03 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); display: flex; align-items: flex-start; gap: 1.5rem; height: 100%; transition: all .3s ease; }
.lib .card-03:hover, .lib .card-03.active { transform: translateY(-10px); box-shadow: var(--lib-sh-2); }
.lib .card-03.active { border-left: 4px solid var(--lib-accent); }
.lib .card-03.active .icon { background: var(--lib-accent); color: var(--lib-on-accent); }
.lib .card-03 .icon { width: 60px; height: 60px; background: var(--lib-accent-10); color: var(--lib-accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; transition: all .3s ease; }
.lib .card-03 .card-content { flex: 1; }
.lib .card-03 .card-content h3 { font-size: 1.25rem; margin-bottom: .75rem; font-weight: 700; }
.lib .card-03 .card-content p { font-size: 1rem; color: var(--lib-text); margin: 0; }

/* Card 04 — Square icon box with link */
.lib .card-04 { padding: 30px; background: var(--lib-surface); border-radius: var(--lib-radius); box-shadow: var(--lib-sh-1); height: 100%; transition: all .3s ease; }
.lib .card-04:hover { box-shadow: var(--lib-sh-2); }
.lib .card-04:hover .icon-box { background: var(--lib-accent); }
.lib .card-04:hover .icon-box i { color: var(--lib-on-accent); }
.lib .card-04 .icon-box { width: 65px; height: 65px; background: var(--lib-accent-20); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all .3s ease; }
.lib .card-04 .icon-box i { font-size: 30px; color: var(--lib-accent); transition: all .3s ease; }
.lib .card-04 h5 { font-size: 1.2rem; margin-bottom: 15px; }
.lib .card-04 p { font-size: .95rem; margin-bottom: 15px; }
.lib .card-04 .card-link { color: var(--lib-accent); font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; transition: all .3s ease; }
.lib .card-04 .card-link i { margin-left: 5px; transition: transform .3s ease; }
.lib .card-04 .card-link:hover { color: var(--lib-accent-dark); }
.lib .card-04 .card-link:hover i { transform: translateX(5px); }

/* Card 05 — Numbered badge */
.lib .card-05 { text-align: center; padding: 2.5rem 2rem 2rem; background: var(--lib-surface); border: 1px solid var(--lib-border); border-radius: var(--lib-radius); position: relative; height: 100%; }
.lib .card-05 .number { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: var(--lib-accent); color: var(--lib-on-accent); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.lib .card-05 h4 { margin: 1rem 0 .6rem; }
.lib .card-05 p { margin: 0; font-size: .95rem; }

/* Card 06 — Gradient circle icon list */
.lib .card-06 .card-item { display: flex; align-items: flex-start; gap: 20px; padding: 25px; background: var(--lib-surface); border-radius: var(--lib-radius); margin-bottom: 20px; border: 1px solid var(--lib-hairline); transition: all .3s; }
.lib .card-06 .card-item:last-child { margin-bottom: 0; }
.lib .card-06 .card-item:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .card-06 .card-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib .card-06 .card-icon i { font-size: 24px; color: var(--lib-on-accent); }
.lib .card-06 .card-content h5 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.lib .card-06 .card-content p { margin: 0; font-size: 14px; color: var(--lib-text); }

/* Card 07 — Glassmorphism on a dark panel */
.lib .ic-07-panel { background: var(--lib-heading); border-radius: 20px; padding: 2rem; }
.lib .ic-07 { background: rgba(255, 255, 255, .06); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 2rem; color: #fff; position: relative; overflow: hidden; transition: all .4s ease; height: 100%; }
.lib .ic-07::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--lib-accent-20) 0%, transparent 60%); pointer-events: none; }
.lib .ic-07:hover { transform: translateY(-6px); border-color: var(--lib-accent-35); }
.lib .ic-07 .glass-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.6rem; color: #fff; position: relative; }
.lib .ic-07 h4 { color: #fff; font-size: 1.2rem; margin-bottom: .75rem; position: relative; }
.lib .ic-07 p { color: rgba(255, 255, 255, .68); font-size: .9rem; margin: 0; position: relative; }

/* Card 08 — Soft/neumorphic */
.lib .ic-08 { background: #eceaf3; border-radius: 20px; padding: 2rem; box-shadow: 8px 8px 16px #d2d0d9, -8px -8px 16px #fff; text-align: center; transition: all .3s ease; height: 100%; }
.lib .ic-08:hover { box-shadow: 4px 4px 10px #d2d0d9, -4px -4px 10px #fff; }
.lib .ic-08 .neu-icon { width: 70px; height: 70px; background: #eceaf3; border-radius: 50%; box-shadow: 5px 5px 12px #d2d0d9, -5px -5px 12px #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.8rem; color: var(--lib-accent); }
.lib .ic-08 h4 { margin-bottom: .75rem; }
.lib .ic-08 p { font-size: .9rem; color: var(--lib-text); margin: 0; }

/* Card 09 — Gradient tiles */
.lib .ic-09 { border-radius: 20px; padding: 2.5rem 2rem; text-align: center; color: #fff; height: 100%; transition: all .4s ease; position: relative; overflow: hidden; }
.lib .ic-09.v1 { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); }
.lib .ic-09.v2 { background: linear-gradient(135deg, var(--lib-blue), #1a5cc8); }
.lib .ic-09.v3 { background: linear-gradient(135deg, var(--lib-teal), #1a9a8e); }
.lib .ic-09.v4 { background: linear-gradient(135deg, var(--lib-heading), #2d2d5e); }
.lib .ic-09::before { content: ''; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; background: rgba(255, 255, 255, .08); border-radius: 50%; }
.lib .ic-09:hover { transform: translateY(-8px); box-shadow: var(--lib-sh-3); }
.lib .ic-09 i { font-size: 3rem; margin-bottom: 1.25rem; display: block; opacity: .9; }
.lib .ic-09 h4 { color: #fff; margin-bottom: .75rem; position: relative; }
.lib .ic-09 p { color: rgba(255, 255, 255, .8); font-size: .88rem; margin: 0; position: relative; }

/* Card 10 — Outline hover */
.lib .ic-10 { background: transparent; border-radius: var(--lib-radius); padding: 2rem; border: 2px solid var(--lib-border); transition: all .3s ease; height: 100%; text-align: center; }
.lib .ic-10:hover { border-color: var(--lib-accent); background: var(--lib-surface); box-shadow: var(--lib-sh-2); }
.lib .ic-10 i { font-size: 2.5rem; color: var(--lib-heading); margin-bottom: 1rem; display: block; transition: color .3s ease; }
.lib .ic-10:hover i { color: var(--lib-accent); }
.lib .ic-10 h5 { margin-bottom: .75rem; }
.lib .ic-10 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 11 — Step / process */
.lib .ic-11 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); text-align: center; height: 100%; position: relative; transition: all .3s ease; }
.lib .ic-11:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .ic-11 .step-num { width: 54px; height: 54px; background: var(--lib-accent); color: var(--lib-on-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; font-family: var(--lib-font-head); margin: 0 auto 1.5rem; }
.lib .ic-11 h5 { margin-bottom: .75rem; }
.lib .ic-11 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 12 — Side accent bar */
.lib .ic-12 { background: var(--lib-surface); border-radius: 14px; padding: 1.75rem; display: flex; gap: 1.25rem; align-items: flex-start; box-shadow: var(--lib-sh-1); transition: all .3s ease; height: 100%; }
.lib .ic-12:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .ic-12 .accent-bar { width: 4px; background: linear-gradient(180deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 4px; flex-shrink: 0; align-self: stretch; }
.lib .ic-12 .ic-icon { font-size: 2rem; color: var(--lib-accent); flex-shrink: 0; margin-top: 2px; }
.lib .ic-12 .content h5 { margin-bottom: .6rem; font-size: 1.05rem; }
.lib .ic-12 .content p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 13 — Gradient border */
.lib .ic-13-wrap { padding: 3px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-2)); border-radius: 18px; transition: all .3s ease; height: 100%; }
.lib .ic-13-wrap:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .ic-13 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; height: 100%; }
.lib .ic-13 i { font-size: 2.5rem; color: var(--lib-accent); margin-bottom: 1rem; display: block; }
.lib .ic-13 h5 { margin-bottom: .75rem; }
.lib .ic-13 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 14 — Feature highlight with hero colour block */
.lib .ic-14 { background: var(--lib-surface); border-radius: 20px; overflow: hidden; box-shadow: var(--lib-sh-1); transition: all .4s ease; height: 100%; }
.lib .ic-14:hover { transform: translateY(-6px); box-shadow: var(--lib-sh-3); }
.lib .ic-14 .hero { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.lib .ic-14 .hero.h1 { background: linear-gradient(135deg, var(--lib-accent-05), var(--lib-accent-20)); color: var(--lib-accent); }
.lib .ic-14 .hero.h2 { background: linear-gradient(135deg, #eaf0ff, #c5d5ff); color: var(--lib-blue); }
.lib .ic-14 .hero.h3 { background: linear-gradient(135deg, #e0faf8, #b3ede9); color: var(--lib-teal); }
.lib .ic-14 .hero.h4 { background: linear-gradient(135deg, #f0eaff, #d5c5ff); color: var(--lib-violet); }
.lib .ic-14 .body { padding: 1.75rem; }
.lib .ic-14 .body h5 { margin-bottom: .6rem; }
.lib .ic-14 .body p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 15 — Floating CTA */
.lib .ic-15 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); text-align: center; transition: all .4s ease; position: relative; overflow: hidden; height: 100%; }
.lib .ic-15::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 120px; height: 120px; background: var(--lib-accent-05); border-radius: 50%; }
.lib .ic-15:hover { box-shadow: var(--lib-sh-3); transform: translateY(-5px); }
.lib .ic-15 .icon-circle { width: 80px; height: 80px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: #fff; box-shadow: 0 8px 25px var(--lib-accent-35); position: relative; }
.lib .ic-15 h4 { margin-bottom: .75rem; position: relative; }
.lib .ic-15 p { font-size: .9rem; color: var(--lib-text); margin-bottom: 1.5rem; position: relative; }
.lib .ic-15 .cta { display: inline-block; padding: .6rem 1.5rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-size: .88rem; font-weight: 600; transition: all .3s ease; position: relative; z-index: 1; }
.lib .ic-15 .cta:hover { background: var(--lib-accent-dark); box-shadow: 0 8px 20px var(--lib-accent-35); color: #fff; }

/* Card 16 — Bordered hover */
.lib .ic-16 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; border: 2px solid transparent; box-shadow: var(--lib-sh-1); transition: all .3s ease; height: 100%; text-align: center; }
.lib .ic-16:hover { border-color: var(--lib-accent); box-shadow: var(--lib-sh-2); }
.lib .ic-16 .icon { font-size: 2.5rem; margin-bottom: 1rem; }
.lib .ic-16 h5 { margin-bottom: .75rem; }
.lib .ic-16 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* Card 17 — Split with coloured top */
.lib .ic-17 { border-radius: var(--lib-radius); overflow: hidden; box-shadow: var(--lib-sh-2); height: 100%; display: flex; flex-direction: column; }
.lib .ic-17 .top { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); padding: 2rem; color: #fff; }
.lib .ic-17 .top h4 { color: #fff; margin: 0; font-size: 1.2rem; }
.lib .ic-17 .top .big { font-size: 2.5rem; font-weight: 900; font-family: var(--lib-font-head); line-height: 1; margin-bottom: .25rem; }
.lib .ic-17 .bottom { background: var(--lib-surface); padding: 1.5rem; flex: 1; }
.lib .ic-17 .bottom p { font-size: .9rem; color: var(--lib-text); margin: 0; }

/* Card 18 — Skill badge with spinning ring */
.lib .ic-18 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); text-align: center; height: 100%; transition: all .3s ease; }
.lib .ic-18:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .ic-18 .badge-ring { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; position: relative; }
.lib .ic-18 .badge-ring::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px dashed; opacity: .35; animation: lib-spin 10s linear infinite; }
@keyframes lib-spin { to { transform: rotate(360deg); } }
.lib .ic-18 .badge-ring.r1 { background: var(--lib-accent-10); color: var(--lib-accent); }
.lib .ic-18 .badge-ring.r1::before { border-color: var(--lib-accent); }
.lib .ic-18 .badge-ring.r2 { background: rgba(58, 134, 255, .1); color: var(--lib-blue); }
.lib .ic-18 .badge-ring.r2::before { border-color: var(--lib-blue); }
.lib .ic-18 .badge-ring.r3 { background: rgba(46, 196, 182, .1); color: var(--lib-teal); }
.lib .ic-18 .badge-ring.r3::before { border-color: var(--lib-teal); }
.lib .ic-18 h5 { margin-bottom: .4rem; }
.lib .ic-18 .level { font-size: .8rem; color: var(--lib-accent); font-weight: 600; margin-bottom: .5rem; }
.lib .ic-18 p { font-size: .85rem; color: var(--lib-text); margin: 0; }

/* Card 19 — Dark card with arrow link */
.lib .ic-19 { background: var(--lib-heading); border-radius: var(--lib-radius); padding: 2rem; color: #fff; transition: all .3s ease; height: 100%; }
.lib .ic-19:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-3); }
.lib .ic-19 .d-icon { width: 56px; height: 56px; background: var(--lib-accent-20); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--lib-accent-light); margin-bottom: 1.5rem; }
.lib .ic-19 h5 { color: #fff; margin-bottom: .75rem; }
.lib .ic-19 p { color: rgba(255, 255, 255, .68); font-size: .9rem; margin-bottom: 1.25rem; }
.lib .ic-19 a { color: var(--lib-accent-light); font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: gap .3s ease; }
.lib .ic-19 a:hover { gap: 10px; }

/* Card 20 — Checkbox feature list */
.lib .ic-20 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); height: 100%; }
.lib .ic-20 .ic20-top i { font-size: 2.2rem; color: var(--lib-accent); margin-bottom: 1rem; }
.lib .ic-20 h5 { margin-bottom: 1rem; }
.lib .ic-20 ul { list-style: none; padding: 0; margin: 0; }
.lib .ic-20 ul li { display: flex; align-items: center; gap: 10px; padding: .5rem 0; font-size: .88rem; color: var(--lib-text); border-bottom: 1px solid var(--lib-hairline); }
.lib .ic-20 ul li:last-child { border-bottom: none; }
.lib .ic-20 ul li i { color: var(--lib-accent); font-size: 1rem; }
.lib .ic-20 ul li i.off { color: color-mix(in srgb, var(--lib-text), transparent 55%); }

/* ==========================================================================
   FILE 04 — CONTENT CARDS
   ========================================================================== */

/* cc-01 — Testimonial quote */
.lib .cc-01 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2.5rem 2rem 2rem; box-shadow: var(--lib-sh-1); position: relative; transition: all .3s ease; height: 100%; }
.lib .cc-01:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .cc-01 .quote-mark { position: absolute; top: 1rem; right: 1.5rem; font-size: 5rem; font-family: var(--lib-font-head); color: var(--lib-accent-20); line-height: 1; pointer-events: none; }
.lib .cc-01 .stars { color: var(--lib-gold); margin-bottom: 1.2rem; letter-spacing: 2px; }
.lib .cc-01 p { font-size: .95rem; color: var(--lib-text); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; position: relative; }
.lib .cc-01 .reviewer { display: flex; align-items: center; gap: 12px; }
.lib .cc-01 .reviewer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lib-accent-20); }
.lib .cc-01 .reviewer .name { font-weight: 700; color: var(--lib-heading); font-size: .95rem; line-height: 1.2; }
.lib .cc-01 .reviewer .role { font-size: .78rem; color: var(--lib-text); }

/* cc-02 — Verified review */
.lib .cc-02 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 1.75rem; box-shadow: var(--lib-sh-1); height: 100%; transition: all .3s ease; }
.lib .cc-02:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .cc-02 .top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.lib .cc-02 .top-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.lib .cc-02 .top-row .stars { color: var(--lib-gold); font-size: .85rem; letter-spacing: 1px; }
.lib .cc-02 .verified { font-size: .75rem; color: var(--lib-teal); font-weight: 600; margin-bottom: .75rem; display: flex; align-items: center; gap: 5px; }
.lib .cc-02 blockquote { font-size: .88rem; color: var(--lib-text); line-height: 1.7; margin-bottom: 1rem; font-style: italic; border-left: none; padding: 0; }
.lib .cc-02 .reviewer-name { font-weight: 700; font-size: .9rem; color: var(--lib-heading); }
.lib .cc-02 .review-date { font-size: .75rem; color: var(--lib-text); opacity: .7; }

/* cc-03 — Notification / alert */
.lib .cc-03 { background: var(--lib-surface); border-radius: 14px; padding: 1.1rem 1.4rem; display: flex; align-items: flex-start; gap: .9rem; box-shadow: var(--lib-sh-1); border-left: 4px solid transparent; transition: all .3s ease; margin-bottom: .65rem; }
.lib .cc-03:last-child { margin-bottom: 0; }
.lib .cc-03:hover { transform: translateX(5px); }
.lib .cc-03.info { border-left-color: var(--lib-blue); }
.lib .cc-03.success { border-left-color: var(--lib-teal); }
.lib .cc-03.warning { border-left-color: var(--lib-gold); }
.lib .cc-03.danger { border-left-color: var(--lib-accent); }
.lib .cc-03 .n-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.lib .cc-03.info .n-icon { background: rgba(58, 134, 255, .1); color: var(--lib-blue); }
.lib .cc-03.success .n-icon { background: rgba(46, 196, 182, .1); color: var(--lib-teal); }
.lib .cc-03.warning .n-icon { background: rgba(245, 166, 35, .1); color: var(--lib-gold); }
.lib .cc-03.danger .n-icon { background: var(--lib-accent-10); color: var(--lib-accent); }
.lib .cc-03 .n-body { flex: 1; }
.lib .cc-03 .n-body h6 { margin: 0 0 .15rem; font-size: .88rem; }
.lib .cc-03 .n-body p { margin: 0; font-size: .8rem; color: var(--lib-text); }
.lib .cc-03 .n-time { font-size: .72rem; color: var(--lib-text); opacity: .55; white-space: nowrap; padding-top: 2px; }

/* cc-04 — FAQ */
.lib .cc-04 { background: var(--lib-surface); border-radius: 14px; padding: 1.5rem; box-shadow: var(--lib-sh-1); border-left: 3px solid var(--lib-accent); margin-bottom: .85rem; transition: all .3s ease; }
.lib .cc-04:last-child { margin-bottom: 0; }
.lib .cc-04:hover { box-shadow: var(--lib-sh-2); transform: translateX(4px); }
.lib .cc-04 h6 { font-size: .98rem; margin-bottom: .55rem; display: flex; gap: 10px; align-items: flex-start; }
.lib .cc-04 h6 i { color: var(--lib-accent); flex-shrink: 0; margin-top: 2px; }
.lib .cc-04 p { font-size: .87rem; color: var(--lib-text); margin: 0; line-height: 1.65; }

/* cc-05 — Accordion. Built on native <details>/<summary>.
   The source needed bespoke JavaScript to toggle an .open class, which a
   Component Library entry has nowhere to put. Bootstrap collapse was the first
   replacement, but it targets panels by element id — and a library component is
   placed many times on one page, so every copy carried the same ids and clicking
   the second accordion toggled the first. <details> has no such coupling: the
   element IS the state, so any number of copies coexist, and it needs no
   JavaScript at all — which also means it works inside the preview iframes and
   TinyMCE, neither of which runs page script. */
.lib .cc-05 { background: var(--lib-surface); border-radius: var(--lib-radius); overflow: hidden; box-shadow: var(--lib-sh-1); }
.lib .cc-05 .acc-item { border-bottom: 1px solid var(--lib-hairline); }
.lib .cc-05 .acc-item:last-child { border-bottom: none; }
.lib .cc-05 .acc-header { padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; transition: background .25s; }
/* <summary> defaults to display:list-item with a disclosure triangle; the flex
   display above replaces it in modern browsers, and these two clear the marker
   in WebKit/Blink and older Gecko respectively. */
.lib .cc-05 .acc-header::-webkit-details-marker { display: none; }
.lib .cc-05 .acc-header { list-style: none; }
.lib .cc-05 .acc-header:hover, .lib .cc-05 .acc-item[open] > .acc-header { background: var(--lib-accent-05); }
.lib .cc-05 .acc-q { margin: 0; color: var(--lib-heading); font-size: .93rem; display: flex; align-items: center; gap: 10px; font-family: var(--lib-font); font-weight: 600; }
.lib .cc-05 .acc-q i { color: var(--lib-accent); }
.lib .cc-05 .acc-chevron { font-size: .85rem; color: var(--lib-accent); transition: transform .3s ease; flex-shrink: 0; }
.lib .cc-05 .acc-item[open] > .acc-header .acc-chevron { transform: rotate(180deg); }
.lib .cc-05 .acc-body { padding: 0 1.5rem 1rem 3.5rem; font-size: .87rem; color: var(--lib-text); line-height: 1.65; }

/* cc-06 — Tag cloud */
.lib .cc-06 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 1.75rem; box-shadow: var(--lib-sh-1); }
.lib .cc-06 h5 { margin-bottom: 1.1rem; }
.lib .cc-06 .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lib .cc-06 .tag { padding: 6px 16px; border-radius: 50px; font-size: .82rem; font-weight: 500; transition: transform .25s; }
.lib .cc-06 .tag:hover { transform: scale(1.07); }
.lib .cc-06 .tag.t1 { background: var(--lib-accent-15); color: var(--lib-accent); }
.lib .cc-06 .tag.t2 { background: rgba(58, 134, 255, .12); color: var(--lib-blue); }
.lib .cc-06 .tag.t3 { background: rgba(46, 196, 182, .12); color: var(--lib-teal); }
.lib .cc-06 .tag.t4 { background: rgba(245, 166, 35, .12); color: #a56a00; }
.lib .cc-06 .tag.t5 { background: rgba(124, 58, 237, .12); color: var(--lib-violet); }
.lib .cc-06 .tag.t6 { background: rgba(236, 72, 153, .12); color: var(--lib-pink); }

/* cc-07 — Ticket / event */
.lib .cc-07 { background: var(--lib-surface); border-radius: 12px; display: flex; box-shadow: var(--lib-sh-1); transition: all .3s ease; margin-bottom: .85rem; position: relative; }
.lib .cc-07:last-child { margin-bottom: 0; }
.lib .cc-07:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .cc-07 .ticket-stripe { width: 10px; background: var(--lib-accent); flex-shrink: 0; border-radius: 12px 0 0 12px; }
.lib .cc-07 .ticket-body { padding: 1.25rem 1.5rem; flex: 1; }
.lib .cc-07 .ev-type { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lib-accent); margin-bottom: .4rem; }
.lib .cc-07 h5 { margin-bottom: .4rem; font-size: .98rem; }
.lib .cc-07 .ticket-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--lib-text); flex-wrap: wrap; }
.lib .cc-07 .ticket-meta span { display: flex; align-items: center; gap: 5px; }
.lib .cc-07 .ticket-meta i { color: var(--lib-accent); }
.lib .cc-07 .ticket-price { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem 1.25rem; border-left: 1px dashed var(--lib-border); flex-shrink: 0; }
.lib .cc-07 .ticket-price .price { font-size: 1.4rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-accent); line-height: 1; }
.lib .cc-07 .ticket-price .seat { font-size: .7rem; color: var(--lib-text); margin-top: .2rem; }

/* cc-08 — Project card with avatar group */
.lib .cc-08 { background: var(--lib-surface); border-radius: 20px; padding: 2rem; box-shadow: var(--lib-sh-1); transition: all .3s ease; height: 100%; }
.lib .cc-08:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .cc-08 .cc08-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.lib .cc-08 .status-pill { background: rgba(46, 196, 182, .15); color: #12796f; font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; display: flex; align-items: center; gap: 5px; }
.lib .cc-08 .status-pill.paused { background: rgba(245, 166, 35, .15); color: #8a5800; }
.lib .cc-08 .status-pill.closed { background: var(--lib-accent-10); color: var(--lib-accent); }
.lib .cc-08 .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lib .cc-08 h5 { margin-bottom: .5rem; font-size: 1.05rem; }
.lib .cc-08 p { font-size: .87rem; color: var(--lib-text); margin-bottom: 1.5rem; line-height: 1.6; }
.lib .cc-08 .cc08-foot { display: flex; align-items: center; justify-content: space-between; }
.lib .cc-08 .avatar-group { display: flex; align-items: center; }
.lib .cc-08 .avatar-group img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.lib .cc-08 .avatar-group img:first-child { margin-left: 0; }
.lib .cc-08 .avatar-group .more { width: 32px; height: 32px; background: var(--lib-accent); border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: .65rem; color: #fff; font-weight: 700; margin-left: -8px; }
.lib .cc-08 .due { font-size: .78rem; color: var(--lib-text); display: flex; align-items: center; gap: 4px; }
.lib .cc-08 .due i { color: var(--lib-accent); }

/* cc-09 — Info tip */
.lib .cc-09 { background: var(--lib-surface); border-radius: 14px; padding: 1.5rem; box-shadow: var(--lib-sh-1); border-top: 4px solid var(--lib-accent); transition: all .3s ease; height: 100%; }
.lib .cc-09:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .cc-09.blue { border-top-color: var(--lib-blue); }
.lib .cc-09.teal { border-top-color: var(--lib-teal); }
.lib .cc-09.gold { border-top-color: var(--lib-gold); }
.lib .cc-09 .ih { display: flex; align-items: center; gap: 10px; margin-bottom: .85rem; }
.lib .cc-09 .ih i { font-size: 1.4rem; color: var(--lib-accent); }
.lib .cc-09.blue .ih i { color: var(--lib-blue); }
.lib .cc-09.teal .ih i { color: var(--lib-teal); }
.lib .cc-09.gold .ih i { color: var(--lib-gold); }
.lib .cc-09 .ih h6 { margin: 0; font-size: .98rem; }
.lib .cc-09 p { font-size: .87rem; color: var(--lib-text); margin: 0; line-height: 1.65; }

/* cc-10 — Split dark / light */
.lib .cc-10 { border-radius: 20px; overflow: hidden; box-shadow: var(--lib-sh-2); display: flex; flex-direction: column; height: 100%; }
.lib .cc-10 .dark-panel { background: var(--lib-heading); padding: 2rem; flex: 1; }
.lib .cc-10 .dark-panel .dp-icon { font-size: 2.5rem; color: var(--lib-accent-light); margin-bottom: 1rem; display: block; }
.lib .cc-10 .dark-panel h4 { color: #fff; margin-bottom: .6rem; }
.lib .cc-10 .dark-panel p { color: rgba(255, 255, 255, .62); font-size: .88rem; margin: 0; line-height: 1.65; }
.lib .cc-10 .light-panel { background: var(--lib-surface); padding: 1.1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.lib .cc-10 .light-panel .lp-stat span { font-size: .72rem; color: var(--lib-text); display: block; }
.lib .cc-10 .light-panel .lp-stat strong { font-size: 1.1rem; color: var(--lib-heading); }
.lib .cc-10 .light-panel a { font-size: .82rem; color: var(--lib-accent); font-weight: 600; display: flex; align-items: center; gap: 5px; transition: gap .25s; }
.lib .cc-10 .light-panel a:hover { gap: 10px; }

/* cc-11 — Minimal numbered line */
.lib .cc-11 { padding: 1.75rem 0; border-bottom: 2px solid var(--lib-hairline); display: flex; align-items: flex-start; gap: 1.25rem; transition: all .3s ease; }
.lib .cc-11:hover { padding-left: 1rem; border-bottom-color: var(--lib-accent); }
.lib .cc-11 .num { font-size: 2rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-border); line-height: 1; width: 44px; flex-shrink: 0; }
.lib .cc-11 h5 { margin-bottom: .4rem; font-size: 1rem; }
.lib .cc-11 p { font-size: .85rem; color: var(--lib-text); margin: 0; }

/* cc-12 — Location pin */
.lib .cc-12 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 1.5rem; box-shadow: var(--lib-sh-1); display: flex; gap: 1rem; align-items: flex-start; transition: all .3s ease; height: 100%; }
.lib .cc-12:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .cc-12 .pin { width: 46px; height: 46px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; box-shadow: 0 4px 12px var(--lib-accent-35); }
.lib .cc-12 .pin i { transform: rotate(45deg); color: #fff; font-size: 1.1rem; }
.lib .cc-12 .loc-info h5 { margin-bottom: .25rem; font-size: .98rem; }
.lib .cc-12 .loc-info .address { font-size: .82rem; color: var(--lib-text); margin-bottom: .5rem; line-height: 1.5; }
.lib .cc-12 .loc-info .dist { font-size: .78rem; color: var(--lib-accent); font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* cc-13 — Category tile */
.lib .cc-13 { background: var(--lib-surface); border-radius: 14px; padding: 1.4rem 1rem; text-align: center; box-shadow: var(--lib-sh-1); transition: all .3s ease; height: 100%; display: block; }
.lib .cc-13:hover { transform: translateY(-6px); background: var(--lib-heading); box-shadow: var(--lib-sh-2); }
.lib .cc-13 i { font-size: 2rem; margin-bottom: .7rem; display: block; color: var(--lib-accent); transition: color .3s ease; }
.lib .cc-13 h6 { font-size: .88rem; margin-bottom: .2rem; transition: color .3s; }
.lib .cc-13 span { font-size: .74rem; color: var(--lib-text); transition: color .3s; }
.lib .cc-13:hover i, .lib .cc-13:hover h6, .lib .cc-13:hover span { color: #fff; }

/* cc-14 — Horizontal roadmap */
.lib .cc-14 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); }
.lib .cc-14 h5 { margin-bottom: 2rem; }
.lib .cc-14 .roadmap { display: flex; position: relative; padding-top: 10px; }
.lib .cc-14 .roadmap::before { content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 3px; background: linear-gradient(90deg, var(--lib-accent), var(--lib-blue), var(--lib-teal), var(--lib-gold)); z-index: 0; }
.lib .cc-14 .rm-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.lib .cc-14 .rm-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; font-size: 1rem; border: 3px solid #fff; }
.lib .cc-14 .rm-dot.done { background: var(--lib-accent); color: #fff; box-shadow: 0 0 0 3px var(--lib-accent); }
.lib .cc-14 .rm-dot.active { background: var(--lib-blue); color: #fff; box-shadow: 0 0 0 3px var(--lib-blue); }
.lib .cc-14 .rm-dot.next { background: var(--lib-teal); color: #fff; box-shadow: 0 0 0 3px var(--lib-teal); }
.lib .cc-14 .rm-dot.upcoming { background: #eee; color: #777; box-shadow: 0 0 0 3px #e0dbd5; }
.lib .cc-14 h6 { font-size: .8rem; margin-bottom: .2rem; }
.lib .cc-14 .rm-step span { font-size: .7rem; color: var(--lib-text); }
/* The connecting line assumes a horizontal row; stack it on narrow screens
   rather than letting four dots crush together. */
@media (max-width: 767.98px) {
    .lib .cc-14 .roadmap { flex-direction: column; gap: 1.25rem; }
    .lib .cc-14 .roadmap::before { display: none; }
}

/* cc-15 — Blog post */
.lib .cc-15 { background: var(--lib-surface); border-radius: 14px; padding: 1.5rem; box-shadow: var(--lib-sh-1); transition: all .3s ease; height: 100%; }
.lib .cc-15:hover { transform: translateY(-4px); box-shadow: var(--lib-sh-2); }
.lib .cc-15 .date-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--lib-accent-10); color: var(--lib-accent); font-size: .76rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; margin-bottom: .75rem; }
.lib .cc-15 h5 { margin-bottom: .55rem; font-size: 1.02rem; line-height: 1.35; }
.lib .cc-15 p { font-size: .85rem; color: var(--lib-text); margin-bottom: 1rem; line-height: 1.6; }
.lib .cc-15 .foot { display: flex; align-items: center; gap: 10px; }
.lib .cc-15 .foot img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lib .cc-15 .foot span { font-size: .78rem; color: var(--lib-text); font-weight: 500; }
.lib .cc-15 .foot .read-time { margin-left: auto; font-size: .75rem; opacity: .7; }

/* cc-16 — Press quote */
.lib .cc-16 { background: var(--lib-heading); border-radius: var(--lib-radius); padding: 2.5rem 2rem; color: #fff; position: relative; overflow: hidden; height: 100%; transition: all .3s ease; }
.lib .cc-16:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-3); }
.lib .cc-16::before { content: '"'; position: absolute; top: -1rem; left: 1.5rem; font-size: 10rem; font-family: var(--lib-font-head); color: var(--lib-accent-20); line-height: 1; pointer-events: none; }
.lib .cc-16 .source { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; position: relative; }
.lib .cc-16 .source img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.lib .cc-16 .source .pub { font-size: .8rem; color: rgba(255, 255, 255, .58); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.lib .cc-16 blockquote { font-size: 1.05rem; color: #fff; line-height: 1.7; font-style: italic; margin: 0 0 1.5rem; position: relative; }
.lib .cc-16 .cite { font-size: .82rem; color: rgba(255, 255, 255, .55); position: relative; }

/* cc-17 — Newsletter strip */
.lib .cc-17 { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); border-radius: 20px; padding: 2.5rem 2rem; color: #fff; text-align: center; }
.lib .cc-17 h4 { color: #fff; margin-bottom: .75rem; }
.lib .cc-17 p { color: rgba(255, 255, 255, .85); font-size: .9rem; margin-bottom: 1.5rem; }
.lib .cc-17 .email-form { display: flex; gap: .5rem; max-width: 420px; margin: 0 auto; }
.lib .cc-17 .email-form input { flex: 1; padding: .65rem 1rem; border-radius: 50px; border: none; font-size: .9rem; outline: none; font-family: var(--lib-font); min-width: 0; }
.lib .cc-17 .email-form button { padding: .65rem 1.25rem; background: #fff; color: var(--lib-accent); border: none; border-radius: 50px; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .3s ease; white-space: nowrap; }
.lib .cc-17 .email-form button:hover { background: var(--lib-heading); color: #fff; }
@media (max-width: 575.98px) {
    .lib .cc-17 .email-form { flex-direction: column; }
}

/* cc-18 — Ribbon */
.lib .cc-18 { background: var(--lib-surface); border-radius: var(--lib-radius); padding: 2rem; box-shadow: var(--lib-sh-1); position: relative; overflow: hidden; height: 100%; transition: all .3s ease; }
.lib .cc-18:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .cc-18 .ribbon { position: absolute; top: 16px; right: -28px; background: var(--lib-accent); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 40px; transform: rotate(45deg); letter-spacing: 1px; text-transform: uppercase; }
.lib .cc-18 > i { font-size: 2.5rem; color: var(--lib-accent); margin-bottom: 1.25rem; display: block; }
.lib .cc-18 h5 { margin-bottom: .6rem; }
.lib .cc-18 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* cc-19 — Expandable detail. Native <details>/<summary>, same reasoning as cc-05. */
.lib .cc-19 { background: var(--lib-surface); border-radius: 14px; box-shadow: var(--lib-sh-1); overflow: hidden; margin-bottom: .75rem; transition: all .3s ease; }
.lib .cc-19:last-child { margin-bottom: 0; }
.lib .cc-19 .cc19-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; cursor: pointer; }
.lib .cc-19 .cc19-head::-webkit-details-marker { display: none; }
.lib .cc-19 .cc19-head { list-style: none; }
.lib .cc-19 .cc19-head:hover, .lib .cc-19[open] > .cc19-head { background: var(--lib-accent-05); }
.lib .cc-19 .cc19-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--lib-accent-10); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--lib-accent); flex-shrink: 0; }
.lib .cc-19 .cc19-title { flex: 1; font-weight: 600; color: var(--lib-heading); font-size: .93rem; }
.lib .cc-19 .cc19-arrow { font-size: .85rem; color: var(--lib-accent); transition: transform .3s; }
.lib .cc-19[open] > .cc19-head .cc19-arrow { transform: rotate(90deg); }
.lib .cc-19 .cc19-body { padding: 0 1.5rem 1rem 4.5rem; font-size: .87rem; color: var(--lib-text); line-height: 1.65; }

/* Text card — date grid */
.lib .text-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 992px) { .lib .text-card { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .lib .text-card { grid-template-columns: 1fr; } }
.lib .text-card .tc-item { text-align: center; padding: 1.5rem; border-radius: var(--lib-radius); background: var(--lib-hairline); transition: all .3s ease; }
.lib .text-card .tc-item:hover { transform: translateY(-5px); box-shadow: var(--lib-sh-2); }
.lib .text-card .card-date { font-size: 1.2rem; font-weight: 700; color: var(--lib-accent); margin-bottom: .8rem; }
.lib .text-card h4 { font-size: 1.1rem; margin-bottom: .5rem; }
.lib .text-card p { font-size: .9rem; margin-bottom: 0; color: var(--lib-text); }

/* Adv card — feature showcase */
.lib .adv-card { background: var(--lib-surface); border-radius: 20px; overflow: hidden; box-shadow: var(--lib-sh-2); transition: all .4s ease; position: relative; height: 100%; }
.lib .adv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(45deg, var(--lib-accent), var(--lib-accent-light)); z-index: 1; }
.lib .adv-card:hover { transform: translateY(-10px); box-shadow: var(--lib-sh-3); }
.lib .adv-card .adv-head { padding: 2rem 2rem 1rem; text-align: center; }
.lib .adv-card .adv-head .icon-wrapper { width: 76px; height: 76px; background: linear-gradient(45deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.lib .adv-card .adv-head .icon-wrapper i { font-size: 2rem; color: #fff; }
.lib .adv-card .adv-head h3 { font-weight: 700; margin: 0; font-size: 1.3rem; }
.lib .adv-card .adv-content { padding: 0 2rem; }
.lib .adv-card .card-image { border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; }
.lib .adv-card .card-image img { width: 100%; height: 180px; object-fit: cover; }
.lib .adv-card .card-list .card-item { display: flex; align-items: center; margin-bottom: .75rem; }
.lib .adv-card .card-list .card-item i { color: var(--lib-accent); margin-right: 10px; }
.lib .adv-card .card-list .card-item span { font-size: .92rem; }
.lib .adv-card .adv-foot { padding: 1.5rem 2rem 2rem; }
.lib .adv-card .explore-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--lib-accent); font-weight: 600; transition: all .3s ease; }
.lib .adv-card .explore-btn i { transition: transform .3s ease; }
.lib .adv-card .explore-btn:hover i { transform: translateX(5px); }

/* ==========================================================================
   FILE 02 — IMAGE CARDS
   ========================================================================== */

/* img-01 — Blog post card */
.lib .img-card .img-01 { background-color: var(--lib-surface); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, .06); transition: all .3s ease; height: 100%; }
.lib .img-card .img-01:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, .1); }
.lib .img-card .img-01:hover .card-img img { transform: scale(1.1); }
.lib .img-card .img-01 .card-img { position: relative; overflow: hidden; }
.lib .img-card .img-01 .card-img img { transition: all .5s ease; height: 200px; width: 100%; object-fit: cover; }
.lib .img-card .img-01 .card-img .card-tag { position: absolute; top: 10px; right: 10px; background-color: var(--lib-accent); color: #fff; padding: 5px 10px; font-size: .8rem; border-radius: 4px; }
.lib .img-card .img-01 .card-content { padding: 1.5rem; }
.lib .img-card .img-01 .card-content h4 { font-size: 1.1rem; margin-bottom: .75rem; font-weight: 700; }
.lib .img-card .img-01 .card-content p { font-size: .9rem; margin-bottom: 1rem; color: color-mix(in srgb, var(--lib-text), transparent 20%); }
.lib .img-card .img-01 .card-content .card-meta { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.lib .img-card .img-01 .card-content .card-meta .meta-item { display: flex; align-items: center; font-size: .85rem; color: color-mix(in srgb, var(--lib-text), transparent 40%); }
.lib .img-card .img-01 .card-content .card-meta .meta-item i { margin-right: 5px; color: var(--lib-accent); }
.lib .img-card .img-01 .card-content .card-link { display: inline-block; color: var(--lib-accent); font-weight: 500; font-size: .9rem; }
.lib .img-card .img-01 .card-content .card-link i { transition: all .3s ease; margin-left: 5px; }
.lib .img-card .img-01 .card-content .card-link:hover i { transform: translateX(5px); }

/* img-02 — Team / person card */
.lib .img-card .img-02 { background-color: var(--lib-surface); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, .06); transition: all .3s ease; height: 100%; }
.lib .img-card .img-02:hover { transform: translateY(-5px); }
.lib .img-card .img-02:hover .card-img img { transform: scale(1.1); }
.lib .img-card .img-02 .card-img { overflow: hidden; }
.lib .img-card .img-02 .card-img img { transition: all .5s ease; height: 300px; width: 100%; object-fit: cover; }
.lib .img-card .img-02 .card-content { padding: 1.25rem; text-align: center; }
.lib .img-card .img-02 .card-content h4 { font-size: 1.1rem; margin-bottom: .25rem; font-weight: 600; }
.lib .img-card .img-02 .card-content .card-position { color: color-mix(in srgb, var(--lib-text), transparent 30%); font-size: .9rem; margin-bottom: 1rem; }
.lib .img-card .img-02 .card-content .card-social { display: flex; justify-content: center; gap: .75rem; }
.lib .img-card .img-02 .card-content .card-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: color-mix(in srgb, var(--lib-accent), transparent 90%); border-radius: 50%; color: var(--lib-accent); transition: all .3s ease; }
.lib .img-card .img-02 .card-content .card-social a:hover { background-color: var(--lib-accent); color: #fff; }

/* img-03 — Research / faculty card with credential badge */
.lib .img-card .img-03 { background-color: var(--lib-surface); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, .05); transition: all .3s ease; height: 100%; }
.lib .img-card .img-03:hover { transform: translateY(-5px); box-shadow: 0 10px 35px rgba(0, 0, 0, .1); }
.lib .img-card .img-03:hover .card-image .social-links { opacity: 1; }
.lib .img-card .img-03 .card-image { position: relative; overflow: hidden; }
.lib .img-card .img-03 .card-image img { width: 100%; height: 300px; object-fit: cover; }
.lib .img-card .img-03 .card-image .social-links { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); padding: 1.5rem 1rem .5rem; opacity: 0; transition: all .3s ease; display: flex; gap: .8rem; justify-content: center; }
.lib .img-card .img-03 .card-image .social-links a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff; color: var(--lib-accent); border-radius: 50%; transition: all .3s ease; }
.lib .img-card .img-03 .card-image .social-links a:hover { background: var(--lib-accent); color: #fff; }
.lib .img-card .img-03 .card-info { padding: 1.5rem; }
.lib .img-card .img-03 .card-info h3 { font-size: 1.2rem; margin-bottom: .5rem; font-weight: 600; }
.lib .img-card .img-03 .card-info .position { color: var(--lib-accent); font-size: .9rem; margin-bottom: .5rem; }
.lib .img-card .img-03 .card-info .department { font-size: .85rem; margin-bottom: 1rem; color: color-mix(in srgb, var(--lib-text), transparent 40%); }
.lib .img-card .img-03 .card-info .research-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.lib .img-card .img-03 .card-info .research-tags span { font-size: .75rem; padding: .2rem .6rem; border-radius: 4px; background-color: color-mix(in srgb, var(--lib-accent), transparent 90%); color: color-mix(in srgb, var(--lib-accent), black 20%); }
.lib .img-card .img-03 .card-info .profile-link { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--lib-accent); border-radius: 30px; font-size: .85rem; transition: all .3s ease; color: var(--lib-accent); }
.lib .img-card .img-03 .card-info .profile-link:hover { background-color: var(--lib-accent); color: #fff; }

/* img-04 — Category tag card */
.lib .img-card .img-04 { background: var(--lib-surface); border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lib-text), transparent 90%); transition: all .4s ease; height: 100%; }
.lib .img-card .img-04 .card-image { position: relative; overflow: hidden; }
.lib .img-card .img-04 .card-image img { width: 100%; height: 250px; object-fit: cover; transition: transform .4s ease; }
.lib .img-card .img-04 .card-image .image-overlay { position: absolute; top: 20px; right: 20px; }
.lib .img-card .img-04 .card-image .image-overlay .category-tag { background: color-mix(in srgb, var(--lib-accent), transparent 10%); color: #fff; padding: 6px 15px; border-radius: 20px; font-size: .85rem; font-weight: 600; backdrop-filter: blur(10px); }
.lib .img-card .img-04 .card-body { padding: 1.5rem; }
.lib .img-card .img-04 .card-body h4 { font-weight: 700; margin-bottom: 1rem; font-size: 1.3rem; }
.lib .img-card .img-04 .card-body p { color: color-mix(in srgb, var(--lib-text), transparent 25%); margin-bottom: 1.5rem; font-size: .95rem; line-height: 1.6; }
.lib .img-card .img-04 .card-body .card-stats { display: flex; gap: 1rem; }
.lib .img-card .img-04 .card-body .card-stats .stat { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: color-mix(in srgb, var(--lib-text), transparent 20%); }
.lib .img-card .img-04 .card-body .card-stats .stat i { color: var(--lib-accent); font-size: 1rem; }
.lib .img-card .img-04:hover .card-image img { transform: scale(1.1); }

/* img-05 — 16:9 article card */
.lib .img-card .img-05 { border-radius: 8px; overflow: hidden; transition: all .3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); }
.lib .img-card .img-05 img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.lib .img-card .img-05 .card-content { padding: 20px; background-color: var(--lib-surface); }
.lib .img-card .img-05 .card-content h5 { font-size: 1.1rem; margin-bottom: 10px; color: var(--lib-heading); }
.lib .img-card .img-05 .card-content p { font-size: .9rem; margin-bottom: 0; }
.lib .img-card .img-05 .card-content a { font-size: .9rem; display: block; margin-top: 10px; color: var(--lib-accent); }
.lib .img-card .img-05:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, .1); }

/* img-06/img-07/img-08 — CSS corner-effect masks — three conic-gradient mask variants, no extra markup needed per effect */
.lib .img-card .img-06 img { --s: 50px; --t: 3px; --g: 10px; margin: 6px; padding: calc(var(--g) + var(--t)); outline: var(--t) solid #B38184; outline-offset: calc(-1*var(--t)); mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s)), conic-gradient(#000 0 0) content-box; transition: .4s; }
.lib .img-card .img-06 img:hover { outline-offset: calc(-1*var(--g)); }
.lib .img-card .img-07 img { --s: 50px; --t: 5px; --g: 20px; margin: 6px; padding: calc(var(--g) + var(--t)); outline: var(--t) solid #B38184; outline-offset: calc(-1*var(--t)); mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s)), conic-gradient(#000 0 0) content-box; transition: .4s; }
.lib .img-card .img-07 img:hover { outline-offset: calc(-1*var(--g)); }
.lib .img-card .img-08 img { --b: 5px; --s: 50px; --g: 14px; --c: #EDC951; margin: 6px; padding: calc(var(--b) + var(--g)); background-image: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 25%, var(--c) 0), conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0); background-position: var(--_p, 0%) var(--_p, 0%), calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%)); background-size: var(--s) var(--s); background-repeat: no-repeat; cursor: pointer; transition: background-position .3s var(--_i, .3s), background-size .3s calc(.3s - var(--_i, .3s)); }
.lib .img-card .img-08 img:hover { background-size: calc(100% - var(--g)) calc(100% - var(--g)); --_p: calc(var(--g)/2); --_i: 0s; }

/* img-09 — Magazine full-bleed */
.lib .img-09 { border-radius: 20px; overflow: hidden; position: relative; height: 380px; box-shadow: 0 5px 25px rgba(0, 0, 0, .12); cursor: pointer; }
.lib .img-09 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lib .img-09:hover img { transform: scale(1.05); }
.lib .img-09 .mag-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .4) 50%, transparent 100%); }
.lib .img-09 .mag-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.lib .img-09 .mag-cat { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; margin-bottom: .75rem; }
.lib .img-09 .mag-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: .75rem; }
.lib .img-09 .mag-content .mag-meta { display: flex; gap: 1rem; }
.lib .img-09 .mag-content .mag-meta span { font-size: .8rem; color: rgba(255, 255, 255, .65); display: flex; align-items: center; gap: 5px; }

/* img-10 — Image with overlay-on-hover caption */
.lib .img-10 { border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 5px 20px rgba(0, 0, 0, .08); cursor: pointer; }
.lib .img-10 img { width: 100%; height: 260px; object-fit: cover; transition: transform .5s ease; }
.lib .img-10:hover img { transform: scale(1.08); }
.lib .img-10 .always { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); }
.lib .img-10 .always h5 { color: #fff; margin: 0; font-size: 1.05rem; }
.lib .img-10 .hover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--lib-heading), transparent 8%) 0%, color-mix(in srgb, var(--lib-heading), transparent 50%) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; opacity: 0; transition: opacity .4s ease; }
.lib .img-10:hover .hover-overlay { opacity: 1; }
.lib .img-10 .hover-overlay h4 { color: #fff; margin-bottom: .5rem; font-size: 1.15rem; }
.lib .img-10 .hover-overlay p { color: rgba(255, 255, 255, .75); font-size: .85rem; margin-bottom: 1rem; }
.lib .img-10 .hover-overlay .rd { display: inline-block; padding: .4rem 1.2rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-size: .82rem; font-weight: 600; }

/* img-11 — Video thumbnail card with play glyph */
.lib .img-11 { border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); }
.lib .img-11 img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
.lib .img-11:hover img { transform: scale(1.05); }
.lib .img-11 .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .3); transition: background .3s ease; }
.lib .img-11:hover .play-overlay { background: rgba(0, 0, 0, .5); }
.lib .img-11 .play-btn { width: 64px; height: 64px; background: rgba(255, 255, 255, .95); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--lib-accent); box-shadow: 0 4px 20px rgba(0, 0, 0, .3); transition: transform .3s ease; }
.lib .img-11:hover .play-btn { transform: scale(1.1); }
.lib .img-11 .duration { position: absolute; bottom: 56px; right: 12px; background: rgba(0, 0, 0, .75); color: #fff; font-size: .78rem; padding: 3px 8px; border-radius: 4px; font-weight: 600; }
.lib .img-11 .video-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.25rem; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); }
.lib .img-11 .video-info h6 { color: #fff; margin: 0; font-size: .95rem; }

/* img-12 — Split image + text, horizontal */
.lib .img-12 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); display: flex; transition: all .3s ease; height: 100%; }
.lib .img-12:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, .12); }
.lib .img-12 .img-side { width: 42%; flex-shrink: 0; }
.lib .img-12 .img-side img { width: 100%; height: 100%; object-fit: cover; }
.lib .img-12 .text-side { padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.lib .img-12 .text-side .cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--lib-accent); margin-bottom: .5rem; }
.lib .img-12 .text-side h5 { color: var(--lib-heading); font-size: 1rem; margin-bottom: .6rem; }
.lib .img-12 .text-side p { font-size: .85rem; color: var(--lib-text); margin: 0; }

/* img-13 — Product / shop card */
.lib .img-13 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); transition: all .3s ease; height: 100%; }
.lib .img-13:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }
.lib .img-13 .img-wrap { position: relative; overflow: hidden; }
.lib .img-13 .img-wrap img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s ease; }
.lib .img-13:hover .img-wrap img { transform: scale(1.08); }
.lib .img-13 .img-wrap .badge-ribbon { position: absolute; top: 16px; left: -8px; background: var(--lib-accent); color: #fff; padding: 6px 18px 6px 12px; font-size: .78rem; font-weight: 700; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%); }
.lib .img-13 .prod-body { padding: 1.5rem; }
.lib .img-13 .prod-body h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .img-13 .prod-body .meta { font-size: .82rem; color: var(--lib-text); margin-bottom: 1rem; display: flex; gap: 12px; }
.lib .img-13 .prod-body .meta i { color: var(--lib-accent); }
.lib .img-13 .prod-body .price-row { display: flex; align-items: center; justify-content: space-between; }
.lib .img-13 .prod-body .price { font-size: 1.5rem; font-weight: 800; font-family: var(--lib-font-head); color: var(--lib-accent); }
.lib .img-13 .prod-body .btn-cart { background: var(--lib-heading); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: .85rem; cursor: pointer; transition: all .3s ease; }
.lib .img-13 .prod-body .btn-cart:hover { background: var(--lib-accent); }

/* img-14 — Dark team card */
.lib .img-14 { background: var(--lib-heading); border-radius: 20px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, .15); transition: all .4s ease; height: 100%; position: relative; }
.lib .img-14:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0, 0, 0, .25); }
.lib .img-14 img { width: 100%; height: 240px; object-fit: cover; filter: grayscale(30%); transition: filter .4s ease; }
.lib .img-14:hover img { filter: grayscale(0); }
.lib .img-14 .card-info { padding: 1.5rem; }
.lib .img-14 .card-info h5 { color: #fff; margin-bottom: .25rem; }
.lib .img-14 .card-info .role { color: var(--lib-accent); font-size: .85rem; font-weight: 500; margin-bottom: 1rem; }
.lib .img-14 .card-info .socials { display: flex; gap: .6rem; }
.lib .img-14 .card-info .socials a { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: all .3s ease; }
.lib .img-14 .card-info .socials a:hover { background: var(--lib-accent); color: #fff; }

/* img-15 — Author post card */
.lib .img-15 { background: var(--lib-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .1); height: 100%; }
.lib .img-15 .img-top { position: relative; overflow: hidden; }
.lib .img-15 .img-top img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
.lib .img-15:hover .img-top img { transform: scale(1.06); }
.lib .img-15 .img-top .overlay-tag { position: absolute; bottom: 12px; left: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); padding: 5px 14px; border-radius: 50px; font-size: .78rem; font-weight: 700; color: var(--lib-heading); }
.lib .img-15 .card-body { padding: 1.5rem; }
.lib .img-15 .card-body h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .img-15 .card-body p { font-size: .88rem; color: var(--lib-text); margin-bottom: 1.25rem; }
.lib .img-15 .card-body .footer-row { display: flex; align-items: center; justify-content: space-between; }
.lib .img-15 .card-body .footer-row .author { display: flex; align-items: center; gap: 8px; }
.lib .img-15 .card-body .footer-row .author img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.lib .img-15 .card-body .footer-row .author span { font-size: .82rem; font-weight: 500; color: var(--lib-text); }
.lib .img-15 .card-body .footer-row .like { font-size: .82rem; color: var(--lib-accent); display: flex; align-items: center; gap: 5px; }

/* img-16 — Portfolio thumbnail grid */
.lib .img-16 { border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 4/3; }
.lib .img-16 img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .img-16:hover img { transform: scale(1.1); }
.lib .img-16 .info { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--lib-heading), transparent 5%), transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; transform: translateY(60%); transition: transform .4s ease; }
.lib .img-16:hover .info { transform: translateY(0); }
.lib .img-16 .info h6 { color: #fff; margin-bottom: .25rem; }
.lib .img-16 .info span { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.lib .img-16 .info .view-btn { display: inline-block; margin-top: .75rem; padding: .35rem 1rem; border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 50px; font-size: .78rem; transition: all .3s ease; }
.lib .img-16:hover .info .view-btn { background: #fff; color: var(--lib-heading); }

/* img-17 — Recipe / food card */
.lib .img-17 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); transition: all .3s ease; height: 100%; }
.lib .img-17:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, .12); }
.lib .img-17 .food-img { position: relative; overflow: hidden; }
.lib .img-17 .food-img img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s ease; }
.lib .img-17:hover .food-img img { transform: scale(1.08); }
.lib .img-17 .food-img .fav-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--lib-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.lib .img-17 .food-body { padding: 1.5rem; }
.lib .img-17 .food-body h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .img-17 .food-body .stars { color: var(--lib-gold); font-size: .85rem; margin-bottom: .75rem; }
.lib .img-17 .food-body .food-meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--lib-text); flex-wrap: wrap; }
.lib .img-17 .food-body .food-meta span { display: flex; align-items: center; gap: 5px; }
.lib .img-17 .food-body .food-meta i { color: var(--lib-accent); }

/* img-18 — Event / calendar card */
.lib .img-18 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); display: flex; height: 100%; transition: all .3s ease; }
.lib .img-18:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, .12); }
.lib .img-18 .date-block { background: var(--lib-accent); color: #fff; padding: 1.25rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 72px; }
.lib .img-18 .date-block .day { font-size: 2rem; font-weight: 900; font-family: var(--lib-font-head); line-height: 1; }
.lib .img-18 .date-block .month { font-size: .75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.lib .img-18 .event-body { padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.lib .img-18 .event-body h5 { color: var(--lib-heading); margin-bottom: .4rem; font-size: 1rem; }
.lib .img-18 .event-body .ev-meta { font-size: .82rem; color: var(--lib-text); display: flex; flex-direction: column; gap: 4px; }
.lib .img-18 .event-body .ev-meta span { display: flex; align-items: center; gap: 5px; }
.lib .img-18 .event-body .ev-meta i { color: var(--lib-accent); }


/* ==========================================================================
   FILE 03 — STAT & METRIC CARDS
   ========================================================================== */

/* sm-01 — Dark stat card with a fill bar */
.lib .sm-01 { background: var(--lib-heading); border-radius: 16px; padding: 2rem; color: #fff; transition: all .3s ease; height: 100%; }
.lib .sm-01:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, .25); }
.lib .sm-01 .stat-label { font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .75rem; }
.lib .sm-01 .stat-number { font-size: 3rem; font-weight: 900; font-family: var(--lib-font-head); color: #fff; line-height: 1; margin-bottom: .5rem; }
.lib .sm-01 .stat-change { font-size: .85rem; display: flex; align-items: center; gap: 4px; }
.lib .sm-01 .stat-change.up { color: #66e0a0; }
.lib .sm-01 .stat-change.down { color: #ff7a7a; }
.lib .sm-01 .stat-bar { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; margin-top: 1.5rem; overflow: hidden; }
.lib .sm-01 .stat-bar .fill { height: 100%; background: var(--lib-accent); border-radius: 2px; }

/* sm-02 — Metric card with a CSS bar-chart sparkline */
.lib .sm-02 { background: var(--lib-surface); border-radius: 16px; padding: 1.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); height: 100%; }
.lib .sm-02 .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.lib .sm-02 .m-icon { width: 46px; height: 46px; background: color-mix(in srgb, var(--lib-accent), transparent 88%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--lib-accent); }
.lib .sm-02 .trend { font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 50px; }
.lib .sm-02 .trend.up { background: rgba(46, 196, 182, .12); color: var(--lib-teal); }
.lib .sm-02 .trend.down { background: color-mix(in srgb, var(--lib-accent), transparent 88%); color: var(--lib-accent); }
.lib .sm-02 .big-num { font-size: 2.5rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); line-height: 1; margin-bottom: .25rem; }
.lib .sm-02 .metric-label { font-size: .85rem; color: var(--lib-text); margin-bottom: 1.5rem; }
.lib .sm-02 .sparkline { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.lib .sm-02 .sparkline .bar { flex: 1; background: color-mix(in srgb, var(--lib-accent), transparent 70%); border-radius: 3px 3px 0 0; transition: background .3s; }
.lib .sm-02 .sparkline .bar.active, .lib .sm-02 .sparkline .bar:hover { background: var(--lib-accent); }

/* sm-03 — Split values with a progress bar */
.lib .sm-03 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); height: 100%; transition: all .3s ease; }
.lib .sm-03:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .1); }
.lib .sm-03 .label { font-size: .82rem; color: var(--lib-text); font-weight: 500; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 8px; }
.lib .sm-03 .label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lib-accent); }
.lib .sm-03 .values { display: flex; gap: 2rem; margin-bottom: 1.5rem; }
.lib .sm-03 .val-block .num { font-size: 2.2rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); line-height: 1; }
.lib .sm-03 .val-block .sub { font-size: .78rem; color: var(--lib-text); }
.lib .sm-03 .progress { height: 6px; border-radius: 3px; background: #eee; overflow: hidden; }
.lib .sm-03 .progress-bar { border-radius: 3px; }

/* sm-04 — Feature comparison table card */
.lib .sm-04 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); }
.lib .sm-04 .sc04-head { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--lib-heading); color: #fff; padding: 1rem 1.5rem; font-size: .85rem; font-weight: 600; }
.lib .sm-04 .sc04-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: .9rem 1.5rem; border-bottom: 1px solid var(--lib-hairline); align-items: center; font-size: .88rem; transition: background .2s; }
.lib .sm-04 .sc04-row:last-child { border-bottom: none; }
.lib .sm-04 .sc04-row:hover { background: color-mix(in srgb, var(--lib-accent), transparent 97%); }
.lib .sm-04 .sc04-row .feature { color: var(--lib-heading); font-weight: 500; }
.lib .sm-04 .sc04-row .check { text-align: center; }

/* sm-05 — Donut ring metric — inline SVG stroke-dasharray ring */
.lib .sm-05 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); text-align: center; height: 100%; }
.lib .sm-05 .donut-wrap { width: 120px; height: 120px; margin: 0 auto 1.5rem; position: relative; }
.lib .sm-05 .donut-wrap svg { transform: rotate(-90deg); }
.lib .sm-05 .donut-wrap .center-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lib .sm-05 .donut-wrap .center-text .pct { font-size: 1.5rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); }
.lib .sm-05 .donut-wrap .center-text .lbl { font-size: .65rem; color: var(--lib-text); }
.lib .sm-05 h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .sm-05 p { font-size: .85rem; color: var(--lib-text); margin: 0; }

/* sm-06 — Skill progress bars */
.lib .sm-06 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); height: 100%; }
.lib .sm-06 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }
.lib .sm-06 .skill-item { margin-bottom: 1.25rem; }
.lib .sm-06 .skill-item:last-child { margin-bottom: 0; }
.lib .sm-06 .skill-item .skill-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .88rem; font-weight: 500; color: var(--lib-heading); }
.lib .sm-06 .progress { height: 8px; border-radius: 4px; background: #eee; overflow: hidden; }
.lib .sm-06 .progress-bar { border-radius: 4px; }

/* sm-07 — Gradient counting cards */
.lib .sm-07 { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); border-radius: 16px; padding: 2rem; color: #fff; text-align: center; transition: all .3s ease; height: 100%; }
.lib .sm-07:hover { transform: translateY(-5px); box-shadow: 0 15px 35px color-mix(in srgb, var(--lib-accent), transparent 60%); }
.lib .sm-07 i { font-size: 2.5rem; opacity: .8; margin-bottom: 1rem; display: block; }
.lib .sm-07 .big { font-size: 2.8rem; font-weight: 900; font-family: var(--lib-font-head); line-height: 1; margin-bottom: .25rem; }
.lib .sm-07 .label { font-size: .85rem; opacity: .85; }

/* sm-08 — Stat row with mini bars */
.lib .sm-08 { background: var(--lib-surface); border-radius: 14px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, .06); height: 100%; }
.lib .sm-08 h6 { color: var(--lib-text); font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.25rem; font-family: var(--lib-font); }
.lib .sm-08 .stat-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--lib-hairline); }
.lib .sm-08 .stat-row:last-child { border-bottom: none; }
.lib .sm-08 .stat-row .s-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.lib .sm-08 .stat-row .s-label { flex: 1; font-size: .85rem; color: var(--lib-text); }
.lib .sm-08 .stat-row .s-val { font-weight: 700; color: var(--lib-heading); font-size: .9rem; margin-right: .5rem; }
.lib .sm-08 .stat-row .mini-bar { width: 60px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.lib .sm-08 .stat-row .mini-bar .fill { height: 100%; border-radius: 3px; }

/* sm-09/sm-10 — Leaderboard card — ranked rows + supporting stat panel */
.lib .sm-09 { background: var(--lib-surface); border-radius: 16px; padding: 1.5rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); }
.lib .sm-09 h5 { color: var(--lib-heading); margin-bottom: 1.25rem; }
.lib .sm-09 .lb-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--lib-hairline); cursor: pointer; transition: all .3s ease; }
.lib .sm-09 .lb-row:last-child { border-bottom: none; }
.lib .sm-09 .lb-row:hover { background: color-mix(in srgb, var(--lib-accent), transparent 97%); margin: 0 -.5rem; padding: .75rem .5rem; border-radius: 8px; }
.lib .sm-09 .lb-row .rank { font-size: 1.2rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); width: 28px; text-align: center; }
.lib .sm-09 .lb-row .rank.gold { color: var(--lib-gold); }
.lib .sm-09 .lb-row .rank.silver { color: #9ca3af; }
.lib .sm-09 .lb-row .rank.bronze { color: #b77c4a; }
.lib .sm-09 .lb-row img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lib .sm-09 .lb-row .info { flex: 1; }
.lib .sm-09 .lb-row .info h6 { margin: 0 0 .15rem; font-size: .9rem; color: var(--lib-heading); }
.lib .sm-09 .lb-row .info span { font-size: .78rem; color: var(--lib-text); }
.lib .sm-09 .lb-row .score { font-weight: 700; color: var(--lib-accent); }
.lib .sm-10 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); }
.lib .sm-10 .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.lib .sm-10 .kpi-item { text-align: center; padding: 1.5rem 1rem; border-radius: 12px; background: var(--lib-hairline); }
.lib .sm-10 .kpi-item .kpi-icon { font-size: 1.5rem; color: var(--lib-accent); margin-bottom: .75rem; }
.lib .sm-10 .kpi-item .kpi-num { font-size: 1.8rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); line-height: 1; margin-bottom: .25rem; }
.lib .sm-10 .kpi-item .kpi-label { font-size: .78rem; color: var(--lib-text); }

/* sm-11 — Pricing cards */
.lib .sm-11 { background: var(--lib-surface); border-radius: 20px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); height: 100%; transition: all .4s ease; position: relative; overflow: hidden; }
.lib .sm-11.featured { background: var(--lib-heading); }
.lib .sm-11.featured h4, .lib .sm-11.featured .price, .lib .sm-11.featured .period { color: rgba(255, 255, 255, .9)!important; }
.lib .sm-11.featured li { color: rgba(255, 255, 255, .75)!important; }
.lib .sm-11:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, .15); }
.lib .sm-11 .plan-badge { display: inline-block; background: color-mix(in srgb, var(--lib-accent), transparent 85%); color: var(--lib-accent); font-size: .72rem; font-weight: 700; padding: 4px 14px; border-radius: 50px; margin-bottom: 1.5rem; letter-spacing: 1px; text-transform: uppercase; }
.lib .sm-11.featured .plan-badge { background: color-mix(in srgb, var(--lib-accent), transparent 70%); color: var(--lib-accent-light); }
.lib .sm-11 h4 { color: var(--lib-heading); font-size: 1.3rem; margin-bottom: 1rem; }
.lib .sm-11 .price { font-size: 3.5rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); line-height: 1; }
.lib .sm-11 .period { font-size: .85rem; color: var(--lib-text); margin-bottom: 2rem; }
.lib .sm-11 ul { list-style: none; padding: 0; margin: 0 0 2rem; text-align: left; }
.lib .sm-11 ul li { padding: .5rem 0; font-size: .9rem; color: var(--lib-text); display: flex; align-items: center; gap: 8px; }
.lib .sm-11 ul li i { color: var(--lib-accent); }
.lib .sm-11 .btn-plan { display: block; padding: .85rem; border-radius: 50px; font-weight: 600; font-size: .95rem; background: var(--lib-accent); color: #fff; border: none; cursor: pointer; transition: all .3s ease; text-decoration: none; }
.lib .sm-11 .btn-plan:hover { background: var(--lib-accent-dark); color: #fff; }
.lib .sm-11.featured .btn-plan { background: #fff; color: var(--lib-heading); }

/* sm-12 — Timeline cards */
.lib .sm-12 { position: relative; padding: 1.5rem 1.5rem 1.5rem 4rem; background: var(--lib-surface); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, .06); margin-bottom: 1rem; transition: all .3s ease; }
.lib .sm-12:hover { transform: translateX(6px); box-shadow: 0 8px 25px rgba(0, 0, 0, .1); }
.lib .sm-12 .tl-dot { position: absolute; left: 1.25rem; top: 1.75rem; width: 20px; height: 20px; background: var(--lib-accent); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--lib-accent); }
.lib .sm-12 .tl-line { position: absolute; left: 1.75rem; top: 3rem; bottom: -1rem; width: 2px; background: color-mix(in srgb, var(--lib-accent), transparent 70%); }
.lib .sm-12 .tl-date { font-size: .78rem; color: var(--lib-accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: .3rem; }
.lib .sm-12 h5 { color: var(--lib-heading); margin-bottom: .4rem; font-size: 1rem; }
.lib .sm-12 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* sm-13/sm-14 — Revenue dashboard card — CSS bar chart + supporting activity feed */
.lib .sm-13 { background: var(--lib-heading); border-radius: 20px; padding: 2rem; color: #fff; }
.lib .sm-13 .top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.lib .sm-13 .top-row h5 { color: rgba(255, 255, 255, .6); font-size: .85rem; font-weight: 500; font-family: var(--lib-font); margin: 0; }
.lib .sm-13 .top-row .period-tag { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font-size: .75rem; padding: 4px 12px; border-radius: 50px; }
.lib .sm-13 .rev-number { font-size: 2.8rem; font-weight: 900; font-family: var(--lib-font-head); line-height: 1; margin-bottom: .5rem; }
.lib .sm-13 .change { font-size: .85rem; color: #66e0a0; display: flex; align-items: center; gap: 4px; margin-bottom: 2rem; }
.lib .sm-13 .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.lib .sm-13 .bar-chart .b { flex: 1; background: rgba(255, 255, 255, .12); border-radius: 4px 4px 0 0; position: relative; cursor: pointer; transition: background .3s; }
.lib .sm-13 .bar-chart .b.active, .lib .sm-13 .bar-chart .b:hover { background: var(--lib-accent); }
.lib .sm-13 .bar-chart .b::after { content: attr(data-m); position: absolute; bottom: -1.3rem; left: 50%; transform: translateX(-50%); font-size: .6rem; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.lib .sm-14 { background: var(--lib-surface); border-radius: 16px; padding: 1.5rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); height: 100%; }
.lib .sm-14 .feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.lib .sm-14 .feed-header h5 { margin: 0; color: var(--lib-heading); }
.lib .sm-14 .feed-header a { font-size: .8rem; color: var(--lib-accent); }
.lib .sm-14 .feed-item { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem 0; border-bottom: 1px solid var(--lib-hairline); }
.lib .sm-14 .feed-item:last-child { border-bottom: none; }
.lib .sm-14 .feed-item .f-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.lib .sm-14 .feed-item .f-body { flex: 1; }
.lib .sm-14 .feed-item .f-body .f-text { font-size: .85rem; color: var(--lib-heading); margin-bottom: .15rem; }
.lib .sm-14 .feed-item .f-body .f-time { font-size: .75rem; color: var(--lib-text); }
.lib .sm-14 .feed-item .f-badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; flex-shrink: 0; }

/* sm-15 — Traffic source breakdown */
.lib .sm-15 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .06); }
.lib .sm-15 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }
.lib .sm-15 .source-item { margin-bottom: 1.1rem; }
.lib .sm-15 .source-item .s-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: .85rem; }
.lib .sm-15 .source-item .s-name { color: var(--lib-heading); font-weight: 500; }
.lib .sm-15 .source-item .s-pct { color: var(--lib-accent); font-weight: 700; }
.lib .sm-15 .s-bar { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.lib .sm-15 .s-bar .fill { height: 100%; border-radius: 4px; transition: width .6s ease; }


/* ==========================================================================
   FILE 06 — LISTS & BANNERS
   ========================================================================== */

/* lb-01 — Image thumbnail list */
.lib .icon-list .lb-01 { display: flex; flex-direction: column; gap: 1.25rem; }
.lib .icon-list .lb-01 .list-item { display: flex; gap: 1rem; background: var(--lib-surface); padding: 1.25rem; border-radius: 16px; box-shadow: 0 5px 20px rgba(0, 0, 0, .05); transition: all .3s ease; }
.lib .icon-list .lb-01 .list-item:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
.lib .icon-list .lb-01 .list-item .item-thumb { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.lib .icon-list .lb-01 .list-item .item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib .icon-list .lb-01 .list-item .item-info h6 { font-weight: 600; margin-bottom: .5rem; color: var(--lib-heading); }
.lib .icon-list .lb-01 .list-item .item-info p { font-size: .88rem; color: color-mix(in srgb, var(--lib-text), transparent 30%); margin: 0; line-height: 1.4; }

/* lb-02 — Arrow navigation list */
.lib .lb-02 .list-item { display: flex; align-items: center; background-color: var(--lib-surface); padding: 20px; border-radius: 15px; transition: all .3s ease; border: 1px solid color-mix(in srgb, var(--lib-heading), transparent 90%); cursor: pointer; margin-bottom: .75rem; }
.lib .lb-02 .list-item:hover { background-color: color-mix(in srgb, var(--lib-accent), transparent 95%); border-color: color-mix(in srgb, var(--lib-accent), transparent 80%); transform: translateX(10px); }
.lib .lb-02 .list-item:hover .item-arrow i { transform: translateX(5px); color: var(--lib-accent); }
.lib .lb-02 .list-item .item-icon { width: 65px; height: 65px; border-radius: 12px; overflow: hidden; margin-right: 18px; flex-shrink: 0; }
.lib .lb-02 .list-item .item-icon img { width: 100%; height: 100%; object-fit: cover; }
.lib .lb-02 .list-item .item-content { flex: 1; }
.lib .lb-02 .list-item .item-content h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; color: var(--lib-heading); }
.lib .lb-02 .list-item .item-content p { color: color-mix(in srgb, var(--lib-text), transparent 30%); font-size: .88rem; margin-bottom: 8px; line-height: 1.5; }
.lib .lb-02 .list-item .item-content .meta-info { display: flex; gap: 12px; }
.lib .lb-02 .list-item .item-content .meta-info span { font-size: .78rem; color: color-mix(in srgb, var(--lib-accent), transparent 20%); font-weight: 500; }
.lib .lb-02 .list-item .item-arrow { margin-left: 12px; }
.lib .lb-02 .list-item .item-arrow i { font-size: 1.2rem; color: color-mix(in srgb, var(--lib-text), transparent 50%); transition: all .3s ease; }

/* lb-03/lb-04 — Icon check lists, two styles */
.lib .icon-list .lb-03 { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lib .icon-list .lb-03 li { display: flex; align-items: flex-start; margin-bottom: .8rem; }
.lib .icon-list .lb-03 li i { color: var(--lib-accent); margin-right: 10px; font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.lib .icon-list .lb-03 li span { font-size: .93rem; }
.lib .icon-list .lb-04 { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lib .icon-list .lb-04 li { display: flex; align-items: center; margin-bottom: .7rem; }
.lib .icon-list .lb-04 li i { color: var(--lib-accent); margin-right: 10px; }

/* lb-05 — Circle icon description list */
.lib .icon-list .lb-05 { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.lib .icon-list .lb-05 .l5-icon { font-size: 1.4rem; color: var(--lib-accent); background: color-mix(in srgb, var(--lib-accent), transparent 85%); padding: 12px; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib .icon-list .lb-05 strong { display: block; margin-bottom: 4px; color: var(--lib-heading); }
.lib .icon-list .lb-05 p { margin: 0; font-size: .88rem; color: color-mix(in srgb, var(--lib-text), transparent 30%); }

/* lb-06/lb-07/lb-08 — Nav list + action-link list, side by side */
.lib .icon-list .lb-06 { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; margin-bottom: 4px; cursor: pointer; transition: all .3s ease; }
.lib .icon-list .lb-06 i { font-size: 1.1rem; color: color-mix(in srgb, var(--lib-text), transparent 40%); }
.lib .icon-list .lb-06 span { font-weight: 500; color: color-mix(in srgb, var(--lib-text), transparent 20%); }
.lib .icon-list .lb-06:hover { background: color-mix(in srgb, var(--lib-surface), var(--lib-accent) 5%); }
.lib .icon-list .lb-06.active { background: color-mix(in srgb, var(--lib-accent), transparent 85%); }
.lib .icon-list .lb-06.active i, .lib .icon-list .lb-06.active span { color: var(--lib-accent); }
.lib .icon-list .lb-07 .action-link { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--lib-accent); font-weight: 500; transition: all .3s ease; border-bottom: 1px solid color-mix(in srgb, var(--lib-text), transparent 90%); }
.lib .icon-list .lb-07 .action-link:last-child { border-bottom: none; }
.lib .icon-list .lb-07 .action-link i { font-size: 1.1rem; }
.lib .icon-list .lb-07 .action-link:hover { color: color-mix(in srgb, var(--lib-accent), transparent 20%); padding-left: 10px; }
.lib .banner-card .lb-08 { background-color: color-mix(in srgb, var(--lib-heading), transparent 90%); border-radius: 8px; padding: 2.5rem; margin-top: 2rem; }
.lib .banner-card .lb-08 h3 { color: var(--lib-heading); margin-bottom: 1rem; }
.lib .banner-card .lb-08 p { margin-bottom: 0; font-size: 1.1rem; }
.lib .banner-card .lb-08 .btn-primary { padding: .75rem 1.5rem; font-weight: 600; background-color: var(--lib-accent); border-color: var(--lib-accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; }

/* lb-09 — Image with gradient overlay (event banner) */
.lib .banner-card .lb-09 { position: relative; border-radius: 6px; overflow: hidden; }
.lib .banner-card .lb-09 img { width: 100%; height: 200px; object-fit: cover; }
.lib .banner-card .lb-09 .card-details { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }
.lib .banner-card .lb-09 .card-details h5 { color: #fff; font-size: 18px; margin-bottom: 5px; }
.lib .banner-card .lb-09 .card-details .date { display: block; color: rgba(255, 255, 255, .8); font-size: 14px; margin-bottom: 10px; }
.lib .banner-card .lb-09 .card-details .btn-sm { font-size: 14px; padding: 5px 15px; border-radius: 50px; background-color: var(--lib-accent); color: #fff; transition: all .3s; display: inline-block; }

/* lb-10 — Horizontal scrollable media list */
.lib .lb-10 { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; scrollbar-width: thin; }
.lib .lb-10::-webkit-scrollbar { height: 4px; }
.lib .lb-10::-webkit-scrollbar-track { background: transparent; }
.lib .lb-10::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lib-accent), transparent 60%); border-radius: 2px; }
.lib .lb-10 .nl08-card { background: var(--lib-surface); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); flex-shrink: 0; width: 200px; transition: transform .3s ease; }
.lib .lb-10 .nl08-card:hover { transform: translateY(-4px); }
.lib .lb-10 .nl08-card img { width: 100%; height: 120px; object-fit: cover; }
.lib .lb-10 .nl08-card .nl08-body { padding: .85rem; }
.lib .lb-10 .nl08-card h6 { color: var(--lib-heading); font-size: .88rem; margin-bottom: .2rem; }
.lib .lb-10 .nl08-card span { font-size: .75rem; color: var(--lib-text); }

/* lb-11/lb-12/lb-13 — Step list + rating list + feature comparison, three list styles together */
.lib .lb-11 { list-style: none; padding: 0; margin: 0; }
.lib .lb-11 li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--lib-hairline); }
.lib .lb-11 li:last-child { border-bottom: none; }
.lib .lb-11 li .nl09-num { width: 34px; height: 34px; background: var(--lib-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .88rem; flex-shrink: 0; }
.lib .lb-11 li .nl09-body h6 { color: var(--lib-heading); margin-bottom: .25rem; font-size: .93rem; }
.lib .lb-11 li .nl09-body p { font-size: .85rem; color: var(--lib-text); margin: 0; }
.lib .lb-12 { list-style: none; padding: 0; margin: 0; }
.lib .lb-12 li { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--lib-hairline); }
.lib .lb-12 li:last-child { border-bottom: none; }
.lib .lb-12 li img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.lib .lb-12 li .nl10-info { flex: 1; }
.lib .lb-12 li .nl10-info h6 { color: var(--lib-heading); margin: 0 0 .15rem; font-size: .9rem; }
.lib .lb-12 li .nl10-info .stars { color: var(--lib-gold); font-size: .75rem; letter-spacing: 1px; }
.lib .lb-12 li .nl10-pct { font-size: .82rem; font-weight: 700; color: var(--lib-accent); }
.lib .lb-13 { list-style: none; padding: 0; margin: 0; }
.lib .lb-13 li { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.25rem; border-radius: 10px; margin-bottom: .4rem; transition: background .25s; }
.lib .lb-13 li:hover { background: color-mix(in srgb, var(--lib-accent), transparent 97%); }
.lib .lb-13 li .nl11-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.lib .lb-13 li .nl11-text { flex: 1; font-size: .88rem; color: var(--lib-text); }
.lib .lb-13 li .nl11-status { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; }

/* lb-14/lb-15/lb-16 — Notification feed + playlist + priority task list, three list styles together */
.lib .lb-14 { list-style: none; padding: 0; margin: 0; }
.lib .lb-14 li { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--lib-hairline); position: relative; }
.lib .lb-14 li:last-child { border-bottom: none; }
.lib .lb-14 li .nl12-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lib .lb-14 li .nl12-body { flex: 1; }
.lib .lb-14 li .nl12-body .nl12-text { font-size: .86rem; color: var(--lib-text); line-height: 1.5; margin-bottom: .15rem; }
.lib .lb-14 li .nl12-body .nl12-text strong { color: var(--lib-heading); }
.lib .lb-14 li .nl12-time { font-size: .72rem; color: var(--lib-text); opacity: .5; white-space: nowrap; }
.lib .lb-15 { list-style: none; padding: 0; margin: 0; }
.lib .lb-15 li { display: flex; align-items: center; gap: .9rem; padding: .75rem .85rem; border-radius: 10px; transition: background .25s; cursor: pointer; }
.lib .lb-15 li:hover, .lib .lb-15 li.playing { background: color-mix(in srgb, var(--lib-accent), transparent 94%); }
.lib .lb-15 li .nl13-num { width: 22px; text-align: center; font-size: .82rem; color: var(--lib-text); opacity: .5; flex-shrink: 0; }
.lib .lb-15 li.playing .nl13-num { color: var(--lib-accent); opacity: 1; }
.lib .lb-15 li .nl13-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.lib .lb-15 li .nl13-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib .lb-15 li .nl13-info { flex: 1; }
.lib .lb-15 li .nl13-info h6 { font-size: .88rem; color: var(--lib-heading); margin: 0 0 .15rem; }
.lib .lb-15 li .nl13-info span { font-size: .75rem; color: var(--lib-text); }
.lib .lb-15 li .nl13-dur { font-size: .78rem; color: var(--lib-text); opacity: .6; }
.lib .lb-16 { list-style: none; padding: 0; margin: 0; }
.lib .lb-16 li { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid var(--lib-hairline); }
.lib .lb-16 li:last-child { border-bottom: none; }
.lib .lb-16 li .nl14-checkbox { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d1ccc7; cursor: pointer; flex-shrink: 0; transition: all .25s; display: flex; align-items: center; justify-content: center; }
.lib .lb-16 li.done .nl14-checkbox { background: var(--lib-accent); border-color: var(--lib-accent); }
.lib .lb-16 li.done .nl14-checkbox::after { content: '✓'; color: #fff; font-size: .7rem; }
.lib .lb-16 li .nl14-text { flex: 1; font-size: .88rem; color: var(--lib-heading); }
.lib .lb-16 li.done .nl14-text { text-decoration: line-through; color: var(--lib-text); opacity: .55; }
.lib .lb-16 li .nl14-badge { font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 50px; flex-shrink: 0; }

/* lb-17/lb-18/lb-19 — Full-width gradient banner + split-image banner + announcement strip */
.lib .lb-17 { background: linear-gradient(135deg, var(--lib-heading) 0%, #2d2d5e 100%); border-radius: 20px; padding: 3.5rem 3rem; position: relative; overflow: hidden; }
.lib .lb-17::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle, color-mix(in srgb, var(--lib-accent), transparent 70%) 0%, transparent 70%); }
.lib .lb-17::after { content: ''; position: absolute; bottom: -40px; left: 30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(58, 134, 255, .2) 0%, transparent 70%); }
.lib .lb-17 .bn03-inner { position: relative; z-index: 1; }
.lib .lb-17 h2 { color: #fff; font-size: 2rem; margin-bottom: .75rem; }
.lib .lb-17 p { color: rgba(255, 255, 255, .65); font-size: 1rem; margin-bottom: 2rem; max-width: 500px; }
.lib .lb-17 .bn03-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.lib .lb-17 .btn-primary-bn { padding: .75rem 2rem; background: var(--lib-accent); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .3s ease; }
.lib .lb-17 .btn-primary-bn:hover { background: var(--lib-accent-dark); box-shadow: 0 8px 20px color-mix(in srgb, var(--lib-accent), transparent 55%); }
.lib .lb-17 .btn-ghost-bn { padding: .75rem 2rem; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50px; font-family: var(--lib-font); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s ease; backdrop-filter: blur(4px); }
.lib .lb-17 .btn-ghost-bn:hover { background: rgba(255, 255, 255, .2); }
.lib .lb-18 { background: var(--lib-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .1); display: flex; min-height: 240px; }
.lib .lb-18 .bn04-img { width: 45%; flex-shrink: 0; }
.lib .lb-18 .bn04-img img { width: 100%; height: 100%; object-fit: cover; }
.lib .lb-18 .bn04-text { padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.lib .lb-18 .bn04-text .bn04-tag { display: inline-block; background: color-mix(in srgb, var(--lib-accent), transparent 88%); color: var(--lib-accent); font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 14px; border-radius: 50px; margin-bottom: 1rem; }
.lib .lb-18 .bn04-text h3 { color: var(--lib-heading); font-size: 1.6rem; margin-bottom: .75rem; }
.lib .lb-18 .bn04-text p { color: var(--lib-text); font-size: .9rem; margin-bottom: 1.5rem; line-height: 1.65; }
.lib .lb-18 .bn04-text a { display: inline-block; padding: .65rem 1.75rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-weight: 600; font-size: .88rem; transition: all .3s ease; }
.lib .lb-18 .bn04-text a:hover { background: var(--lib-accent-dark); box-shadow: 0 6px 16px color-mix(in srgb, var(--lib-accent), transparent 65%); }
.lib .lb-19 { background: var(--lib-accent); border-radius: 12px; padding: 1rem 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lib .lb-19 .bn05-emoji { font-size: 1.5rem; }
.lib .lb-19 .bn05-text { flex: 1; color: #fff; font-size: .9rem; font-weight: 500; }
.lib .lb-19 .bn05-text strong { font-weight: 800; }
.lib .lb-19 a { display: inline-block; padding: .45rem 1.25rem; background: #fff; color: var(--lib-accent); border-radius: 50px; font-size: .82rem; font-weight: 700; white-space: nowrap; transition: all .3s ease; }
.lib .lb-19 a:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.lib .lb-19 .bn05-close { background: none; border: none; color: rgba(255, 255, 255, .7); font-size: 1.1rem; cursor: pointer; padding: 0; transition: color .25s; }
.lib .lb-19 .bn05-close:hover { color: #fff; }

/* lb-20/lb-21/lb-22 — Inline CTA + hero image banner + info box, three banner styles */
.lib .lb-20 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lib .lb-20 .bn06-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fff; flex-shrink: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--lib-accent), transparent 65%); }
.lib .lb-20 .bn06-content { flex: 1; }
.lib .lb-20 .bn06-content h5 { color: var(--lib-heading); margin-bottom: .3rem; }
.lib .lb-20 .bn06-content p { font-size: .88rem; color: var(--lib-text); margin: 0; }
.lib .lb-20 .bn06-action { flex-shrink: 0; }
.lib .lb-20 .bn06-action a { display: inline-block; padding: .65rem 1.75rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-weight: 600; font-size: .88rem; transition: all .3s ease; }
.lib .lb-20 .bn06-action a:hover { background: var(--lib-accent-dark); }
.lib .lb-21 { border-radius: 20px; overflow: hidden; position: relative; }
.lib .lb-21 img { width: 100%; height: 280px; object-fit: cover; }
.lib .lb-21 .bn07-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--lib-heading), transparent 8%) 0%, color-mix(in srgb, var(--lib-heading), transparent 50%) 60%, transparent 100%); display: flex; align-items: center; padding: 3rem; }
.lib .lb-21 .bn07-content { max-width: 480px; }
.lib .lb-21 .bn07-content .bn07-tag { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 14px; border-radius: 4px; margin-bottom: 1rem; }
.lib .lb-21 .bn07-content h2 { color: #fff; font-size: 1.9rem; margin-bottom: .75rem; }
.lib .lb-21 .bn07-content p { color: rgba(255, 255, 255, .7); font-size: .9rem; margin-bottom: 1.5rem; }
.lib .lb-21 .bn07-content .bn07-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.lib .lb-21 .bn07-content .bn07-btns a { display: inline-block; padding: .6rem 1.5rem; border-radius: 50px; font-size: .85rem; font-weight: 600; transition: all .3s ease; }
.lib .lb-21 .bn07-content .bn07-btns a.primary { background: var(--lib-accent); color: #fff; }
.lib .lb-21 .bn07-content .bn07-btns a.primary:hover { background: var(--lib-accent-dark); }
.lib .lb-21 .bn07-content .bn07-btns a.ghost { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.lib .lb-21 .bn07-content .bn07-btns a.ghost:hover { background: rgba(255, 255, 255, .15); }
.lib .lb-22 { border-radius: 16px; padding: 2rem; border: 2px solid color-mix(in srgb, var(--lib-accent), transparent 75%); background: color-mix(in srgb, var(--lib-accent), transparent 96%); display: flex; gap: 1.25rem; align-items: flex-start; }
.lib .lb-22 i { font-size: 2rem; color: var(--lib-accent); flex-shrink: 0; margin-top: 2px; }
.lib .lb-22.info { border-color: color-mix(in srgb, #3a86ff, transparent 65%); background: rgba(58, 134, 255, .05); }
.lib .lb-22.info i { color: #3a86ff; }
.lib .lb-22.success { border-color: color-mix(in srgb, var(--lib-teal), transparent 65%); background: rgba(46, 196, 182, .05); }
.lib .lb-22.success i { color: var(--lib-teal); }
.lib .lb-22 .bn08-content h5 { color: var(--lib-heading); margin-bottom: .4rem; font-size: 1rem; }
.lib .lb-22 .bn08-content p { font-size: .87rem; color: var(--lib-text); margin: 0; line-height: 1.65; }

/* lb-23/lb-24 — Social proof strip + countdown banner */
.lib .lb-23 { background: var(--lib-surface); border-radius: 16px; padding: 1.75rem 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.lib .lb-23 .avatar-strip { display: flex; align-items: center; }
.lib .lb-23 .avatar-strip img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.lib .lb-23 .avatar-strip img:first-child { margin-left: 0; }
.lib .lb-23 .bn09-text { flex: 1; }
.lib .lb-23 .bn09-text .stars { color: var(--lib-gold); font-size: .85rem; margin-bottom: .25rem; }
.lib .lb-23 .bn09-text p { font-size: .88rem; color: var(--lib-text); margin: 0; }
.lib .lb-23 .bn09-text strong { color: var(--lib-heading); }
.lib .lb-23 .bn09-cta a { display: inline-block; padding: .65rem 1.75rem; background: var(--lib-heading); color: #fff; border-radius: 50px; font-weight: 600; font-size: .88rem; transition: all .3s ease; white-space: nowrap; }
.lib .lb-23 .bn09-cta a:hover { background: var(--lib-accent); }
.lib .lb-24 { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); border-radius: 20px; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.lib .lb-24 .bn10-left h3 { color: #fff; margin-bottom: .5rem; }
.lib .lb-24 .bn10-left p { color: rgba(255, 255, 255, .75); font-size: .9rem; margin: 0; }
.lib .lb-24 .countdown { display: flex; gap: 1rem; }
.lib .lb-24 .countdown .cd-block { background: rgba(255, 255, 255, .15); border-radius: 12px; padding: .75rem 1.25rem; text-align: center; min-width: 72px; }
.lib .lb-24 .countdown .cd-block .cd-num { font-size: 2rem; font-weight: 900; font-family: var(--lib-font-head); color: #fff; line-height: 1; }
.lib .lb-24 .countdown .cd-block .cd-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .7); }
.lib .lb-24 .bn10-right a { display: inline-block; padding: .75rem 2rem; background: #fff; color: var(--lib-accent); border-radius: 50px; font-weight: 700; font-size: .9rem; transition: all .3s ease; white-space: nowrap; }
.lib .lb-24 .bn10-right a:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }

/* ==========================================================================
   FILE 05 — INTERACTIVE CARDS
   ========================================================================== */

/* iv-01 — Flip card — hover to flip, front/back faces via CSS 3D transform */
.lib .iv-01 { height: 240px; perspective: 1000px; cursor: pointer; }
.lib .iv-01 .flip-inner { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.lib .iv-01:hover .flip-inner { transform: rotateY(180deg); }
.lib .iv-01 .flip-front, .lib .iv-01 .flip-back { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.lib .iv-01 .flip-front { background: var(--lib-surface); box-shadow: 0 5px 20px rgba(0, 0, 0, .08); }
.lib .iv-01 .flip-front i { font-size: 2.8rem; color: var(--lib-accent); margin-bottom: 1rem; }
.lib .iv-01 .flip-front h5 { color: var(--lib-heading); margin: 0; }
.lib .iv-01 .flip-back { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); transform: rotateY(180deg); }
.lib .iv-01 .flip-back h5 { color: #fff; margin-bottom: .75rem; }
.lib .iv-01 .flip-back p { color: rgba(255, 255, 255, .85); font-size: .88rem; margin: 0; }
.lib .iv-01.v2 .flip-back { background: linear-gradient(135deg, #3a86ff, #1a5cc8); }
.lib .iv-01.v3 .flip-back { background: linear-gradient(135deg, var(--lib-teal), #1a9a8e); }

/* iv-02 — 3D tilt hover card */
.lib .iv-02 { background: var(--lib-surface); border-radius: 20px; padding: 2.5rem 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); text-align: center; height: 100%; transition: transform .1s ease, box-shadow .3s ease; will-change: transform; cursor: default; }
.lib .iv-02:hover { box-shadow: 0 25px 50px rgba(0, 0, 0, .15); }
.lib .iv-02 .tilt-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: #fff; box-shadow: 0 8px 25px color-mix(in srgb, var(--lib-accent), transparent 65%); }
.lib .iv-02 h5 { color: var(--lib-heading); margin-bottom: .6rem; }
.lib .iv-02 p { font-size: .88rem; color: var(--lib-text); margin: 0; }

/* iv-03 — Tab card — accordion-free content switch via CSS :target-free tab markup */
.lib .iv-03 { background: var(--lib-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-03 .tab-nav { display: flex; background: #f4f1ed; padding: .5rem; }
.lib .iv-03 .tab-nav .tab-btn { flex: 1; padding: .6rem; border: none; background: transparent; border-radius: 10px; font-family: var(--lib-font); font-size: .85rem; font-weight: 600; color: var(--lib-text); cursor: pointer; transition: all .25s; }
.lib .iv-03 .tab-nav .tab-btn.active { background: var(--lib-surface); color: var(--lib-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.lib .iv-03 .tab-content-area { padding: 1.75rem; }
.lib .iv-03 .tab-pane { display: none; }
.lib .iv-03 .tab-pane.active { display: block; }
.lib .iv-03 .tab-pane h5 { color: var(--lib-heading); margin-bottom: .75rem; }
.lib .iv-03 .tab-pane p { font-size: .88rem; color: var(--lib-text); margin-bottom: 1rem; line-height: 1.65; }
.lib .iv-03 .tab-pane ul { list-style: none; padding: 0; margin: 0; }
.lib .iv-03 .tab-pane ul li { padding: .4rem 0; font-size: .85rem; color: var(--lib-text); display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--lib-hairline); }
.lib .iv-03 .tab-pane ul li:last-child { border-bottom: none; }
.lib .iv-03 .tab-pane ul li i { color: var(--lib-accent); }

/* iv-04 — Hover reveal card */
.lib .iv-04 { border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 5px 20px rgba(0, 0, 0, .08); cursor: pointer; height: 260px; }
.lib .iv-04 img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .iv-04:hover img { transform: scale(1.08); }
.lib .iv-04 .always-show { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); }
.lib .iv-04 .always-show h5 { color: #fff; margin: 0; font-size: 1.05rem; }
.lib .iv-04 .reveal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--lib-heading), transparent 5%) 0%, color-mix(in srgb, var(--lib-heading), transparent 40%) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; opacity: 0; transition: opacity .4s ease; }
.lib .iv-04:hover .reveal-overlay { opacity: 1; }
.lib .iv-04 .reveal-overlay h4 { color: #fff; margin-bottom: .5rem; font-size: 1.15rem; }
.lib .iv-04 .reveal-overlay p { color: rgba(255, 255, 255, .75); font-size: .85rem; margin-bottom: 1rem; }
.lib .iv-04 .reveal-overlay .rd-btn { display: inline-block; padding: .4rem 1.2rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-size: .8rem; font-weight: 600; }

/* iv-05/iv-06 — Star rating input + toggle switch settings row */
.lib .iv-05 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); height: 100%; }
.lib .iv-05 h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .iv-05 p { font-size: .85rem; color: var(--lib-text); margin-bottom: 1.5rem; }
.lib .iv-05 .stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 1.5rem; }
.lib .iv-05 .stars-input input { display: none; }
.lib .iv-05 .stars-input label { font-size: 2rem; color: #e0d8d0; cursor: pointer; transition: color .15s; }
.lib .iv-05 .stars-input input:checked ~ label, .lib .iv-05 .stars-input label:hover, .lib .iv-05 .stars-input label:hover ~ label { color: var(--lib-gold); }
.lib .iv-05 textarea { width: 100%; border: 1.5px solid #e5e0da; border-radius: 10px; padding: .75rem 1rem; font-family: var(--lib-font); font-size: .85rem; resize: none; outline: none; transition: border-color .25s; }
.lib .iv-05 textarea:focus { border-color: var(--lib-accent); }
.lib .iv-05 .submit-btn { display: inline-block; margin-top: .75rem; padding: .6rem 1.5rem; background: var(--lib-accent); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .3s ease; }
.lib .iv-05 .submit-btn:hover { background: var(--lib-accent-dark); box-shadow: 0 6px 18px color-mix(in srgb, var(--lib-accent), transparent 65%); }
.lib .iv-06 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-06 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }

/* iv-07/iv-08 — Counter card + like/bookmark action cards */
.lib .iv-07 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); text-align: center; height: 100%; }
.lib .iv-07 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }
.lib .iv-07 .counter-control { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.lib .iv-07 .count-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--lib-accent), transparent 88%); color: var(--lib-accent); font-size: 1.4rem; cursor: pointer; transition: all .3s ease; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.lib .iv-07 .count-btn:hover { background: var(--lib-accent); color: #fff; }
.lib .iv-07 .count-display { font-size: 3rem; font-weight: 900; font-family: var(--lib-font-head); color: var(--lib-heading); min-width: 80px; }
.lib .iv-07 .count-label { font-size: .82rem; color: var(--lib-text); }
.lib .iv-07 .add-btn { display: inline-block; width: 100%; padding: .65rem; background: var(--lib-heading); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s ease; margin-top: .5rem; }
.lib .iv-07 .add-btn:hover { background: var(--lib-accent); }
.lib .iv-08 { background: var(--lib-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); transition: all .3s ease; height: 100%; }
.lib .iv-08:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, .1); }
.lib .iv-08 img { width: 100%; height: 180px; object-fit: cover; }
.lib .iv-08 .soc-body { padding: 1.25rem; }
.lib .iv-08 .soc-body h5 { color: var(--lib-heading); font-size: 1rem; margin-bottom: .4rem; }
.lib .iv-08 .soc-body p { font-size: .83rem; color: var(--lib-text); margin-bottom: 1rem; }
.lib .iv-08 .soc-actions { display: flex; align-items: center; gap: .5rem; }
.lib .iv-08 .soc-actions .act-btn { display: flex; align-items: center; gap: 5px; padding: .4rem .9rem; border-radius: 50px; border: 1.5px solid #e5e0da; background: transparent; cursor: pointer; font-family: var(--lib-font); font-size: .8rem; color: var(--lib-text); transition: all .25s; }
.lib .iv-08 .soc-actions .act-btn:hover, .lib .iv-08 .soc-actions .act-btn.liked { background: color-mix(in srgb, var(--lib-accent), transparent 88%); border-color: var(--lib-accent); color: var(--lib-accent); }
.lib .iv-08 .soc-actions .act-btn.bookmarked { background: rgba(58, 134, 255, .1); border-color: #3a86ff; color: #3a86ff; }
.lib .iv-08 .soc-actions .share-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #e5e0da; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; color: var(--lib-text); }
.lib .iv-08 .soc-actions .share-btn:hover { background: var(--lib-heading); color: #fff; border-color: var(--lib-heading); }

/* iv-09/iv-10 — Search & filter card + progress card */
.lib .iv-09 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-09 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }
.lib .iv-09 .search-box { position: relative; margin-bottom: 1.25rem; }
.lib .iv-09 .search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--lib-accent); }
.lib .iv-09 .search-box input { width: 100%; padding: .7rem 1rem .7rem 2.75rem; border: 1.5px solid #e5e0da; border-radius: 50px; font-family: var(--lib-font); font-size: .88rem; outline: none; transition: border-color .25s; }
.lib .iv-09 .search-box input:focus { border-color: var(--lib-accent); }
.lib .iv-09 .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.lib .iv-09 .chip { padding: 5px 14px; border-radius: 50px; font-size: .78rem; font-weight: 600; border: 1.5px solid #e5e0da; background: transparent; cursor: pointer; transition: all .25s; color: var(--lib-text); }
.lib .iv-09 .chip.active { background: var(--lib-accent); color: #fff; border-color: var(--lib-accent); }
.lib .iv-09 .chip:hover:not(.active) { border-color: var(--lib-accent); color: var(--lib-accent); }
.lib .iv-09 .result-list { list-style: none; padding: 0; margin: 0; }
.lib .iv-09 .result-list li { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--lib-hairline); font-size: .85rem; color: var(--lib-text); }
.lib .iv-09 .result-list li:last-child { border-bottom: none; }
.lib .iv-09 .result-list li i { color: var(--lib-accent); }
.lib .iv-09 .result-list li .res-tag { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 50px; }
.lib .iv-10 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-10 h5 { color: var(--lib-heading); margin-bottom: 1.5rem; }
.lib .iv-10 .step-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.lib .iv-10 .step-row:last-child { margin-bottom: 0; }
.lib .iv-10 .step-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.lib .iv-10 .step-icon.done { background: var(--lib-accent); color: #fff; }
.lib .iv-10 .step-icon.active { background: #3a86ff; color: #fff; box-shadow: 0 0 0 4px rgba(58, 134, 255, .2); }
.lib .iv-10 .step-icon.pending { background: #eee; color: #aaa; }
.lib .iv-10 .step-text h6 { font-size: .92rem; color: var(--lib-heading); margin-bottom: .15rem; font-family: var(--lib-font); font-weight: 600; }
.lib .iv-10 .step-text span { font-size: .78rem; color: var(--lib-text); }
.lib .iv-10 .connector { width: 2px; height: 20px; background: #e5e0da; margin-left: 19px; }
.lib .iv-10 .connector.done-line { background: var(--lib-accent); }

/* iv-11 — Mini kanban board, three columns */
.lib .iv-11 { background: var(--lib-surface); border-radius: 16px; padding: 1.5rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-11 h5 { color: var(--lib-heading); margin-bottom: 1.25rem; }
.lib .iv-11 .kanban-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lib .iv-11 .k-col { background: #f4f1ed; border-radius: 12px; padding: .85rem; }
.lib .iv-11 .k-col .k-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .75rem; display: flex; align-items: center; justify-content: space-between; }
.lib .iv-11 .k-col .k-head .k-count { background: rgba(0, 0, 0, .08); border-radius: 50px; padding: 2px 8px; font-size: .7rem; }
.lib .iv-11 .k-card { background: #fff; border-radius: 8px; padding: .85rem; margin-bottom: .6rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); cursor: grab; transition: box-shadow .25s, transform .25s; font-size: .82rem; color: var(--lib-text); }
.lib .iv-11 .k-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.lib .iv-11 .k-card:active { cursor: grabbing; }
.lib .iv-11 .k-card .k-label { display: inline-block; padding: 2px 8px; border-radius: 50px; font-size: .68rem; font-weight: 700; margin-bottom: .4rem; }
.lib .iv-11 .k-card .k-title { color: var(--lib-heading); font-weight: 600; margin-bottom: .3rem; font-size: .85rem; }
.lib .iv-11 .k-card .k-meta { font-size: .72rem; color: var(--lib-text); opacity: .65; display: flex; justify-content: space-between; }

/* iv-12/iv-13 — Colour swatch picker + poll result cards */
.lib .iv-12 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-12 h5 { color: var(--lib-heading); margin-bottom: 1.25rem; }
.lib .iv-12 .preview-box { height: 100px; border-radius: 12px; margin-bottom: 1.25rem; transition: background .3s ease; background: var(--lib-accent); }
.lib .iv-12 .swatch-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.lib .iv-12 .swatch { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all .2s ease; }
.lib .iv-12 .swatch:hover, .lib .iv-12 .swatch.selected { border-color: #fff; box-shadow: 0 0 0 3px currentColor; }
.lib .iv-12 .hex-input { display: flex; gap: .5rem; align-items: center; }
.lib .iv-12 .hex-input input { flex: 1; padding: .6rem 1rem; border: 1.5px solid #e5e0da; border-radius: 50px; font-family: var(--lib-font); font-size: .85rem; outline: none; text-transform: uppercase; }
.lib .iv-12 .hex-input button { padding: .6rem 1.25rem; background: var(--lib-heading); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-size: .82rem; font-weight: 600; cursor: pointer; }
.lib .iv-13 { background: var(--lib-surface); border-radius: 16px; padding: 2rem; box-shadow: 0 5px 20px rgba(0, 0, 0, .07); }
.lib .iv-13 h5 { color: var(--lib-heading); margin-bottom: .5rem; }
.lib .iv-13 .poll-q { font-size: .9rem; color: var(--lib-text); margin-bottom: 1.5rem; }
.lib .iv-13 .option { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-radius: 10px; border: 1.5px solid #e5e0da; margin-bottom: .6rem; cursor: pointer; transition: all .25s; position: relative; overflow: hidden; }
.lib .iv-13 .option:hover { border-color: var(--lib-accent); background: color-mix(in srgb, var(--lib-accent), transparent 96%); }
.lib .iv-13 .option.voted { border-color: var(--lib-accent); }
.lib .iv-13 .option .opt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--lib-accent), transparent 90%); z-index: 0; transition: width .6s ease; }
.lib .iv-13 .option .opt-label { position: relative; z-index: 1; font-size: .88rem; font-weight: 500; color: var(--lib-heading); flex: 1; }
.lib .iv-13 .option .opt-pct { position: relative; z-index: 1; font-size: .78rem; font-weight: 700; color: var(--lib-accent); }
.lib .iv-13 .total { font-size: .75rem; color: var(--lib-text); opacity: .6; margin-top: .75rem; }


/* ==========================================================================
   FILE 07 — BANNER CARDS
   ========================================================================== */

/* bnr-01 — Deep mesh gradient hero banner */
.lib .bnr-01 { border-radius: 24px; padding: 4rem 3rem; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--lib-heading) 0%, #16213e 40%, #0f3460 100%); }
.lib .bnr-01::before { content: ''; position: absolute; top: -120px; left: -80px; width: 500px; height: 500px; background: radial-gradient(circle, color-mix(in srgb, var(--lib-accent), transparent 55%) 0%, transparent 60%); }
.lib .bnr-01::after { content: ''; position: absolute; bottom: -80px; right: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(58, 134, 255, .3) 0%, transparent 60%); }
.lib .bnr-01 .inner { position: relative; z-index: 1; max-width: 560px; }
.lib .bnr-01 .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .7); font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: 50px; margin-bottom: 1.5rem; backdrop-filter: blur(6px); }
.lib .bnr-01 h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; margin-bottom: 1rem; letter-spacing: -1px; }
.lib .bnr-01 p { color: rgba(255, 255, 255, .6); font-size: .97rem; margin-bottom: 2rem; line-height: 1.7; }
.lib .bnr-01 .actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.lib .bnr-01 .btn-solid { padding: .75rem 2rem; background: var(--lib-accent); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .3s; box-shadow: 0 6px 20px color-mix(in srgb, var(--lib-accent), transparent 55%); }
.lib .bnr-01 .btn-solid:hover { background: var(--lib-accent-dark); transform: translateY(-2px); }
.lib .bnr-01 .btn-outline { padding: .75rem 2rem; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50px; font-family: var(--lib-font); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s; backdrop-filter: blur(4px); }
.lib .bnr-01 .btn-outline:hover { background: rgba(255, 255, 255, .1); }
.lib .bnr-01 .stats-row { display: flex; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.lib .bnr-01 .stat strong { display: block; font-family: var(--lib-font-head); font-size: 1.9rem; color: #fff; line-height: 1; }
.lib .bnr-01 .stat span { font-size: .8rem; color: rgba(255, 255, 255, .45); margin-top: .25rem; display: block; }

/* bnr-02 — Diagonal split banner with pricing panel */
.lib .bnr-02 { border-radius: 20px; overflow: hidden; position: relative; padding: 3.5rem; background: linear-gradient(110deg, var(--lib-accent) 0%, var(--lib-accent-light) 40%, #ffcba4 100%); box-shadow: 0 20px 60px color-mix(in srgb, var(--lib-accent), transparent 65%); }
.lib .bnr-02::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 45%; background: rgba(255, 255, 255, .07); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.lib .bnr-02 .inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.lib .bnr-02 .left h2 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.4rem); letter-spacing: -1px; margin-bottom: .75rem; }
.lib .bnr-02 .left p { color: rgba(255, 255, 255, .8); font-size: .93rem; max-width: 380px; }
.lib .bnr-02 .right { text-align: right; }
.lib .bnr-02 .price { font-family: var(--lib-font-head); color: #fff; }
.lib .bnr-02 .price .was { font-size: .85rem; opacity: .7; text-decoration: line-through; }
.lib .bnr-02 .price .now { font-size: 3.5rem; font-weight: 900; line-height: 1; }
.lib .bnr-02 .price .per { font-size: .8rem; opacity: .75; }
.lib .bnr-02 .cta-btn { display: inline-block; margin-top: 1rem; padding: .75rem 2rem; background: #fff; color: var(--lib-accent); border-radius: 50px; font-weight: 800; font-size: .9rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); transition: all .3s; }
.lib .bnr-02 .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .2); }

/* bnr-03 — Pastel gradient mini cards, three-up */
.lib .bnr-03 { border-radius: 20px; padding: 2.5rem 2rem; position: relative; overflow: hidden; }
.lib .bnr-03.coral { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.lib .bnr-03.sky { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.lib .bnr-03.mint { background: linear-gradient(135deg, #84fab0, #8fd3f4); }
.lib .bnr-03.gold { background: linear-gradient(135deg, #f6d365, #fda085); }
.lib .bnr-03::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 130px; height: 130px; background: rgba(255, 255, 255, .2); border-radius: 50%; }
.lib .bnr-03 i { font-size: 2.5rem; color: rgba(255, 255, 255, .9); margin-bottom: 1rem; display: block; }
.lib .bnr-03 h4 { color: #fff; font-size: 1.25rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .15); margin-bottom: .5rem; }
.lib .bnr-03 p { font-size: .87rem; color: rgba(255, 255, 255, .85); margin-bottom: 1.25rem; }
.lib .bnr-03 a { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .25); color: #fff; font-size: .82rem; font-weight: 700; padding: 6px 16px; border-radius: 50px; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .35); transition: all .3s; }
.lib .bnr-03 a:hover { background: rgba(255, 255, 255, .4); }

/* bnr-04 — Glassmorphism panel on a gradient banner */
.lib .bnr-04 { border-radius: 24px; padding: 3.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; }
.lib .bnr-04::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: rgba(255, 255, 255, .1); border-radius: 50%; }
.lib .bnr-04::after { content: ''; position: absolute; bottom: -80px; left: 20%; width: 220px; height: 220px; background: rgba(255, 255, 255, .08); border-radius: 50%; }

/* bnr-05 — Dark gradient banner with icon feature grid */
.lib .bnr-05 { background: linear-gradient(135deg, var(--lib-heading) 0%, #2d1b69 100%); border-radius: 20px; padding: 3rem; position: relative; overflow: hidden; }
.lib .bnr-05::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml, %3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); }
.lib .bnr-05 .top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.lib .bnr-05 h3 { color: #fff; font-size: 1.8rem; letter-spacing: -0.5px; max-width: 400px; }
.lib .bnr-05 .top-right p { color: rgba(255, 255, 255, .55); font-size: .9rem; max-width: 300px; margin-bottom: 1rem; }
.lib .bnr-05 .top-right a { display: inline-block; padding: .65rem 1.75rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-weight: 700; font-size: .88rem; transition: all .3s; }
.lib .bnr-05 .top-right a:hover { background: var(--lib-accent-dark); }
.lib .bnr-05 .icon-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lib .bnr-05 .ig-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 1.25rem; text-align: center; transition: all .3s; }
.lib .bnr-05 .ig-item:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); }
.lib .bnr-05 .ig-item i { font-size: 1.8rem; margin-bottom: .6rem; display: block; }
.lib .bnr-05 .ig-item span { font-size: .8rem; color: rgba(255, 255, 255, .6); }

/* bnr-06 — Aurora gradient banner, centered CTA */
.lib .bnr-06 { border-radius: 24px; padding: 4rem 3rem; background: linear-gradient(160deg, #0f2027, #203a43, #2c5364); position: relative; overflow: hidden; }
.lib .bnr-06::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 50%, rgba(46, 196, 182, .25) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, .3) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--lib-accent), transparent 80%) 0%, transparent 40%); }
.lib .bnr-06 .inner { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
.lib .bnr-06 .badge { display: inline-block; background: rgba(46, 196, 182, .2); border: 1px solid rgba(46, 196, 182, .4); color: var(--lib-teal); font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; margin-bottom: 1.5rem; }
.lib .bnr-06 h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -1px; margin-bottom: 1rem; font-style: italic; }
.lib .bnr-06 p { color: rgba(255, 255, 255, .55); font-size: .97rem; margin-bottom: 2.5rem; line-height: 1.7; }
.lib .bnr-06 .btn-aurora { padding: .85rem 2.5rem; background: linear-gradient(135deg, var(--lib-teal), #7c3aed); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .3s; box-shadow: 0 8px 24px rgba(124, 58, 237, .4); }
.lib .bnr-06 .btn-aurora:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(124, 58, 237, .55); }

/* bnr-07 — Vibrant gradient plan cards */
.lib .bnr-07 { border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); height: 100%; display: flex; flex-direction: column; }
.lib .bnr-07 .top-band { padding: 2.5rem 2rem; flex: 1; }
.lib .bnr-07 .top-band i { font-size: 2.5rem; color: rgba(255, 255, 255, .9); margin-bottom: 1rem; display: block; }
.lib .bnr-07 .top-band h4 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; }
.lib .bnr-07 .top-band p { font-size: .87rem; color: rgba(255, 255, 255, .7); line-height: 1.65; }
.lib .bnr-07 .bottom-band { background: var(--lib-surface); padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.lib .bnr-07 .bottom-band .price { font-family: var(--lib-font-head); font-size: 1.4rem; font-weight: 700; color: var(--lib-heading); }
.lib .bnr-07 .bottom-band a { display: inline-block; padding: .45rem 1.25rem; background: var(--lib-heading); color: #fff; border-radius: 50px; font-size: .82rem; font-weight: 700; transition: all .3s; }
.lib .bnr-07 .bottom-band a:hover { background: var(--lib-accent); }
.lib .bnr-07.v1 .top-band { background: linear-gradient(135deg, #f83600, #f9d423); }
.lib .bnr-07.v2 .top-band { background: linear-gradient(135deg, #30cfd0, #330867); }
.lib .bnr-07.v3 .top-band { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* bnr-08 — Gradient notification strips, dismissible */
.lib .bnr-08 { border-radius: 14px; padding: 1.1rem 1.75rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.lib .bnr-08.v1 { background: linear-gradient(90deg, #f093fb, #f5576c); }
.lib .bnr-08.v2 { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.lib .bnr-08.v3 { background: linear-gradient(90deg, #43e97b, #38f9d7); }
.lib .bnr-08::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: rgba(255, 255, 255, .4); }
.lib .bnr-08 i { font-size: 1.5rem; color: #fff; flex-shrink: 0; }
.lib .bnr-08 .text { flex: 1; }
.lib .bnr-08 .text strong { color: #fff; display: block; font-size: .92rem; }
.lib .bnr-08 .text span { color: rgba(255, 255, 255, .8); font-size: .82rem; }
.lib .bnr-08 .close-btn { background: rgba(255, 255, 255, .2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; transition: background .25s; }
.lib .bnr-08 .close-btn:hover { background: rgba(255, 255, 255, .35); }

/* bnr-09 — Gradient stat badges, four-up */
.lib .bnr-09 { border-radius: 20px; padding: 2.5rem; text-align: center; position: relative; overflow: hidden; }
.lib .bnr-09.v1 { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); }
.lib .bnr-09.v2 { background: linear-gradient(135deg, #3a86ff, #1a5cc8); }
.lib .bnr-09.v3 { background: linear-gradient(135deg, var(--lib-teal), #0d9488); }
.lib .bnr-09.v4 { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.lib .bnr-09::before { content: ''; position: absolute; bottom: -30px; right: -30px; width: 130px; height: 130px; background: rgba(255, 255, 255, .1); border-radius: 50%; }
.lib .bnr-09 i { font-size: 2.8rem; color: rgba(255, 255, 255, .85); margin-bottom: .85rem; display: block; }
.lib .bnr-09 .big-num { font-family: var(--lib-font-head); font-size: 3.5rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: .4rem; }
.lib .bnr-09 .label { font-size: .85rem; color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: 1px; }
.lib .bnr-09 .delta { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .15); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; margin-top: .85rem; }

/* bnr-10 — Cinematic full-width image hero */
.lib .bnr-10 { border-radius: 24px; overflow: hidden; position: relative; min-height: 400px; display: flex; align-items: flex-end; }
.lib .bnr-10 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-10 .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .05) 100%); }
.lib .bnr-10 .content { position: relative; z-index: 1; padding: 3rem; }
.lib .bnr-10 .content .tag { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px; border-radius: 4px; margin-bottom: 1rem; }
.lib .bnr-10 .content h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -1px; margin-bottom: .75rem; max-width: 560px; }
.lib .bnr-10 .content p { color: rgba(255, 255, 255, .7); font-size: .95rem; margin-bottom: 2rem; max-width: 480px; line-height: 1.65; }
.lib .bnr-10 .content .meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lib .bnr-10 .content .meta a { display: inline-block; padding: .7rem 2rem; border-radius: 50px; font-weight: 700; font-size: .9rem; transition: all .3s; }
.lib .bnr-10 .content .meta a.primary { background: var(--lib-accent); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--lib-accent), transparent 55%); }
.lib .bnr-10 .content .meta a.primary:hover { background: var(--lib-accent-dark); transform: translateY(-2px); }
.lib .bnr-10 .content .meta a.ghost { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; }
.lib .bnr-10 .content .meta a.ghost:hover { background: rgba(255, 255, 255, .12); }

/* bnr-11 — Dark side panel paired with an image */
.lib .bnr-11 { background: var(--lib-heading); border-radius: 20px; overflow: hidden; display: flex; min-height: 280px; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.lib .bnr-11 .text-panel { padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.lib .bnr-11 .text-panel .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lib-accent); margin-bottom: 1rem; }
.lib .bnr-11 .text-panel h3 { color: #fff; font-size: 1.75rem; letter-spacing: -0.5px; margin-bottom: .75rem; }
.lib .bnr-11 .text-panel p { color: rgba(255, 255, 255, .55); font-size: .9rem; margin-bottom: 1.75rem; line-height: 1.65; }
.lib .bnr-11 .text-panel a { display: inline-flex; align-items: center; gap: 8px; color: var(--lib-accent); font-weight: 700; font-size: .9rem; transition: gap .3s; }
.lib .bnr-11 .text-panel a:hover { gap: 14px; }
.lib .bnr-11 .img-panel { width: 42%; flex-shrink: 0; position: relative; overflow: hidden; }
.lib .bnr-11 .img-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-11 .img-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lib-heading) 0%, transparent 30%); z-index: 1; }

/* bnr-12 — Background image banner with feature grid overlay */
.lib .bnr-12 { border-radius: 20px; overflow: hidden; position: relative; padding: 3rem 2.5rem; }
.lib .bnr-12 img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-12::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--lib-heading), transparent 18%); }
.lib .bnr-12 .content { position: relative; z-index: 1; }
.lib .bnr-12 .content h3 { color: #fff; font-size: 1.75rem; letter-spacing: -0.5px; margin-bottom: .5rem; }
.lib .bnr-12 .content .sub { color: rgba(255, 255, 255, .5); font-size: .9rem; margin-bottom: 2.5rem; }
.lib .bnr-12 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lib .bnr-12 .grid-item { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 1.5rem; backdrop-filter: blur(6px); transition: all .3s; }
.lib .bnr-12 .grid-item:hover { background: rgba(255, 255, 255, .14); transform: translateY(-4px); }
.lib .bnr-12 .grid-item i { font-size: 1.75rem; margin-bottom: .75rem; display: block; }
.lib .bnr-12 .grid-item h5 { color: #fff; font-size: 1rem; margin-bottom: .35rem; }
.lib .bnr-12 .grid-item p { font-size: .82rem; color: rgba(255, 255, 255, .55); margin: 0; }

/* bnr-13 — Tall tinted portrait cards */
.lib .bnr-13 { border-radius: 20px; overflow: hidden; position: relative; height: 100%; min-height: 380px; }
.lib .bnr-13 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lib .bnr-13:hover img { transform: scale(1.04); }
.lib .bnr-13 .tint { position: absolute; inset: 0; transition: background .4s; }
.lib .bnr-13.coral .tint { background: linear-gradient(to top, color-mix(in srgb, var(--lib-accent), transparent 10%) 0%, color-mix(in srgb, var(--lib-accent), transparent 80%) 50%, transparent 100%); }
.lib .bnr-13.blue .tint { background: linear-gradient(to top, rgba(26, 92, 200, .9) 0%, rgba(58, 134, 255, .2) 50%, transparent 100%); }
.lib .bnr-13.deep .tint { background: linear-gradient(to top, rgba(91, 33, 182, .9) 0%, rgba(124, 58, 237, .2) 50%, transparent 100%); }
.lib .bnr-13 .bottom-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 1; }
.lib .bnr-13 .bottom-content .cat { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: .5rem; }
.lib .bnr-13 .bottom-content h4 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; line-height: 1.3; }
.lib .bnr-13 .bottom-content a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); font-size: .82rem; font-weight: 600; transition: color .25s; }
.lib .bnr-13 .bottom-content a:hover { color: #fff; }

/* bnr-14 — Full-bleed image banner, centered CTA */
.lib .bnr-14 { border-radius: 24px; overflow: hidden; position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; }
.lib .bnr-14 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-14::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--lib-heading), transparent 20%) 0%, color-mix(in srgb, var(--lib-heading), transparent 50%) 50%, color-mix(in srgb, var(--lib-accent), transparent 60%) 100%); }
.lib .bnr-14 .content { position: relative; z-index: 1; padding: 3rem 2rem; max-width: 520px; }
.lib .bnr-14 .content .tag { display: inline-block; background: color-mix(in srgb, var(--lib-accent), transparent 10%); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; margin-bottom: 1.25rem; }
.lib .bnr-14 .content h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.5rem); letter-spacing: -0.5px; margin-bottom: .75rem; }
.lib .bnr-14 .content p { color: rgba(255, 255, 255, .65); font-size: .9rem; margin-bottom: 1.75rem; }
.lib .bnr-14 .content a { display: inline-block; padding: .75rem 2.25rem; background: #fff; color: var(--lib-heading); border-radius: 50px; font-weight: 800; font-size: .9rem; transition: all .3s; }
.lib .bnr-14 .content a:hover { background: var(--lib-accent); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--lib-accent), transparent 60%); }

/* bnr-15 — Split two-up image pair banner */
.lib .bnr-15 { border-radius: 20px; overflow: hidden; position: relative; height: 260px; }
.lib .bnr-15 img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .bnr-15:hover img { transform: scale(1.05); }
.lib .bnr-15 .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; }
.lib .bnr-15 .overlay.left { background: linear-gradient(to top, color-mix(in srgb, var(--lib-heading), transparent 10%) 0%, transparent 65%); }
.lib .bnr-15 .overlay.right { background: linear-gradient(to top, color-mix(in srgb, var(--lib-accent), transparent 15%) 0%, transparent 65%); }
.lib .bnr-15 .overlay .cat { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: .35rem; }
.lib .bnr-15 .overlay h5 { color: #fff; font-size: 1.15rem; margin-bottom: .2rem; }
.lib .bnr-15 .overlay span { font-size: .8rem; color: rgba(255, 255, 255, .55); }

/* bnr-16 — Editorial article banner with author byline */
.lib .bnr-16 { border-radius: 24px; overflow: hidden; position: relative; min-height: 340px; display: flex; align-items: center; }
.lib .bnr-16 img { position: absolute; inset: 0; width: 100%; height: 110%; object-fit: cover; top: -5%; }
.lib .bnr-16 .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%); }
.lib .bnr-16 .content { position: relative; z-index: 1; padding: 3rem 3.5rem; max-width: 520px; }
.lib .bnr-16 .tag-row { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.lib .bnr-16 .tag { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.lib .bnr-16 .tag.t1 { background: var(--lib-accent); color: #fff; }
.lib .bnr-16 .tag.t2 { background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .25); }
.lib .bnr-16 h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.6rem); letter-spacing: -1px; margin-bottom: .75rem; line-height: 1.2; }
.lib .bnr-16 p { color: rgba(255, 255, 255, .6); font-size: .9rem; margin-bottom: 2rem; line-height: 1.7; }
.lib .bnr-16 .author { display: flex; align-items: center; gap: .85rem; }
.lib .bnr-16 .author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .3); }
.lib .bnr-16 .author .aname { color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.lib .bnr-16 .author .ameta { color: rgba(255, 255, 255, .45); font-size: .78rem; }

/* bnr-17 — Mosaic image grid layout */
/* Desktop layout */
.lib .bnr-17 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    height: 460px;
}

.lib .bnr-17 .big {
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.lib .bnr-17 .small {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.lib .bnr-17 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.lib .bnr-17 .big:hover img,
.lib .bnr-17 .small:hover img {
    transform: scale(1.04);
}

/* Labels */
.lib .bnr-17 .label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

.lib .bnr-17 .big .label {
    padding: 2rem;
}

.lib .bnr-17 .label .cat {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .35rem;
}

.lib .bnr-17 .label h4 {
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.3;
}

.lib .bnr-17 .big .label h4 {
    font-size: 1.6rem;
}

/* Tablet */
@media (max-width: 991.98px) {
    .lib .bnr-17 {
        height: 380px;
        gap: .75rem;
        grid-template-columns: 1.4fr 1fr;
    }

    .lib .bnr-17 .big .label {
        padding: 1.25rem;
    }

    .lib .bnr-17 .label {
        padding: 1rem;
    }

    .lib .bnr-17 .big .label h4 {
        font-size: 1.35rem;
    }
}

/* Mobile: big image first, small images below */
@media (max-width: 767.98px) {
    .lib .bnr-17 {
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: .75rem;
    }

    .lib .bnr-17 .big {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 260px;
        border-radius: 16px;
    }

    .lib .bnr-17 .small {
        grid-row: 2;
        height: 150px;
        border-radius: 12px;
    }

    .lib .bnr-17 .label {
        padding: .85rem;
    }

    .lib .bnr-17 .big .label {
        padding: 1.25rem;
    }

    .lib .bnr-17 .label .cat {
        font-size: .6rem;
        letter-spacing: 1px;
    }

    .lib .bnr-17 .label h4 {
        font-size: .95rem;
    }

    .lib .bnr-17 .big .label h4 {
        font-size: 1.25rem;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .lib .bnr-17 .big {
        height: 220px;
    }

    .lib .bnr-17 .small {
        height: 120px;
    }

    .lib .bnr-17 .label {
        padding: .65rem;
    }

    .lib .bnr-17 .label h4 {
        font-size: .85rem;
    }
}


/* bnr-18 — Colour-tinted category grid */
.lib .bnr-18 { border-radius: 20px; overflow: hidden; position: relative; height: 200px; }
.lib .bnr-18 img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .bnr-18:hover img { transform: scale(1.06); }
.lib .bnr-18 .tint-overlay { position: absolute; inset: 0; opacity: .75; transition: opacity .3s; }
.lib .bnr-18:hover .tint-overlay { opacity: .6; }
.lib .bnr-18.t1 .tint-overlay { background: linear-gradient(135deg, var(--lib-accent), var(--lib-accent-dark)); }
.lib .bnr-18.t2 .tint-overlay { background: linear-gradient(135deg, #3a86ff, #1a5cc8); }
.lib .bnr-18.t3 .tint-overlay { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.lib .bnr-18.t4 .tint-overlay { background: linear-gradient(135deg, var(--lib-teal), #0d9488); }
.lib .bnr-18 .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.lib .bnr-18 .label i { font-size: 2rem; color: rgba(255, 255, 255, .9); margin-bottom: .6rem; }
.lib .bnr-18 .label h5 { color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.lib .bnr-18 .label span { font-size: .78rem; color: rgba(255, 255, 255, .65); }

/* bnr-19 — Event / concert ticket-style banner */
.lib .bnr-19 { border-radius: 24px; overflow: hidden; position: relative; min-height: 300px; display: flex; align-items: stretch; }
.lib .bnr-19 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-19 .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 50%, transparent 100%); }
.lib .bnr-19 .content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2.5rem 3rem; flex-wrap: wrap; gap: 2rem; }
.lib .bnr-19 .ev-info .ev-badge { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 14px; border-radius: 4px; margin-bottom: 1rem; }
.lib .bnr-19 .ev-info h2 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.5rem); letter-spacing: -1px; margin-bottom: .5rem; }
.lib .bnr-19 .ev-info .ev-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lib .bnr-19 .ev-info .ev-meta span { color: rgba(255, 255, 255, .6); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.lib .bnr-19 .ev-info .ev-meta i { color: var(--lib-accent); }
.lib .bnr-19 .ev-right { text-align: right; flex-shrink: 0; }
.lib .bnr-19 .ev-right .price-label { color: rgba(255, 255, 255, .5); font-size: .78rem; margin-bottom: .25rem; }
.lib .bnr-19 .ev-right .price { color: #fff; font-family: var(--lib-font-head); font-size: 2.5rem; font-weight: 900; line-height: 1; margin-bottom: .85rem; }
.lib .bnr-19 .ev-right a { display: inline-block; padding: .7rem 2rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-weight: 700; font-size: .9rem; transition: all .3s; }
.lib .bnr-19 .ev-right a:hover { background: var(--lib-accent-dark); box-shadow: 0 8px 24px color-mix(in srgb, var(--lib-accent), transparent 55%); }

/* bnr-20 — Portfolio showcase strip */
.lib .bnr-20 { border-radius: 20px; overflow: hidden; position: relative; height: 320px; }
.lib .bnr-20 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lib .bnr-20:hover img { transform: scale(1.03); }
.lib .bnr-20 .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--lib-heading), transparent 5%) 100%); }
.lib .bnr-20 .content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lib .bnr-20 .content .info .cat { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lib-accent); margin-bottom: .35rem; }
.lib .bnr-20 .content .info h4 { color: #fff; font-size: 1.35rem; margin-bottom: .25rem; }
.lib .bnr-20 .content .info span { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.lib .bnr-20 .content a { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; padding: .55rem 1.25rem; border-radius: 50px; font-size: .82rem; font-weight: 600; backdrop-filter: blur(6px); transition: all .3s; white-space: nowrap; }
.lib .bnr-20 .content a:hover { background: var(--lib-accent); border-color: var(--lib-accent); }

/* bnr-21 — Text banner with multi-image collage */
.lib .bnr-21 { border-radius: 20px; background: var(--lib-heading); padding: 2.5rem; overflow: hidden; position: relative; }
.lib .bnr-21::before { content: ''; position: absolute; top: -60px; left: -60px; width: 250px; height: 250px; background: radial-gradient(circle, color-mix(in srgb, var(--lib-accent), transparent 80%) 0%, transparent 70%); }
.lib .bnr-21 .row-inner { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.lib .bnr-21 .text-col { flex: 1; min-width: 220px; }
.lib .bnr-21 .text-col .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lib-accent); margin-bottom: 1rem; }
.lib .bnr-21 .text-col h3 { color: #fff; font-size: 1.75rem; letter-spacing: -0.5px; margin-bottom: .75rem; }
.lib .bnr-21 .text-col p { color: rgba(255, 255, 255, .5); font-size: .88rem; margin-bottom: 1.5rem; line-height: 1.65; }
.lib .bnr-21 .text-col a { display: inline-block; padding: .7rem 1.75rem; background: var(--lib-accent); color: #fff; border-radius: 50px; font-weight: 700; font-size: .88rem; transition: all .3s; }
.lib .bnr-21 .text-col a:hover { background: var(--lib-accent-dark); }
.lib .bnr-21 .collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; width: 280px; height: 220px; flex-shrink: 0; }
.lib .bnr-21 .collage .col-img { border-radius: 10px; overflow: hidden; }
.lib .bnr-21 .collage .col-img img { width: 100%; height: 100%; object-fit: cover; }
.lib .bnr-21 .collage .col-img:first-child { grid-row: 1/3; }


/* ==========================================================================
   FILE 08 — GLASSMORPHISM CARDS (LIGHT)
   ========================================================================== */

/* gl-01/gl-02 — Glassmorphic feature hero + stats grid */
.lib .gl-01 { border-radius: 28px; padding: 3.5rem; position: relative; overflow: hidden; transition: transform .4s ease, box-shadow .4s ease; }
.lib .gl-01:hover { transform: translateY(-6px); box-shadow: 0 40px 80px rgba(80, 60, 180, .15); }
.lib .gl-01 .corner-orb { position: absolute; width: 220px; height: 220px; border-radius: 50%; bottom: -60px; right: -60px; background: rgba(120, 80, 255, .06); }
.lib .gl-01 .corner-orb2 { position: absolute; width: 120px; height: 120px; border-radius: 50%; top: -30px; right: 30px; background: rgba(120, 80, 255, .04); }
.lib .gl-01 .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(20, 10, 60, .4); margin-bottom: 1.25rem; }
.lib .gl-01 h2 { color: var(--lib-heading); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300; letter-spacing: -1px; margin-bottom: 1rem; line-height: 1.15; }
.lib .gl-01 h2 strong { font-weight: 700; }
.lib .gl-01 p { color: rgba(20, 10, 60, .55); font-size: .95rem; margin-bottom: 2.25rem; line-height: 1.75; max-width: 480px; }
.lib .gl-01 .actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.lib .gl-01 .btn-glass-solid { padding: .75rem 2rem; background: rgba(20, 10, 60, .85); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .3s; }
.lib .gl-01 .btn-glass-solid:hover { background: var(--lib-heading); box-shadow: 0 8px 24px rgba(20, 10, 60, .25); }
.lib .gl-01 .btn-glass-ghost { padding: .75rem 2rem; background: rgba(0, 0, 0, .05); color: rgba(20, 10, 60, .7); border: 1px solid rgba(0, 0, 0, .15); border-radius: 50px; font-family: var(--lib-font); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s; }
.lib .gl-01 .btn-glass-ghost:hover { background: rgba(0, 0, 0, .09); }
.lib .gl-01 .pill-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2.5rem; }
.lib .gl-01 .pill { background: rgba(120, 80, 255, .07); border: 1px solid rgba(120, 80, 255, .15); color: rgba(20, 10, 60, .55); font-size: .77rem; padding: 5px 14px; border-radius: 50px; }
.lib .gl-02 { border-radius: 24px; padding: 2.5rem; transition: transform .4s, box-shadow .4s; }
.lib .gl-02:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(80, 60, 180, .12); }
.lib .gl-02 .g02-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.lib .gl-02 .g02-head h5 { color: var(--lib-heading); font-size: 1.25rem; font-weight: 600; }
.lib .gl-02 .g02-head .period { background: rgba(0, 0, 0, .05); color: rgba(20, 10, 60, .45); font-size: .75rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; border: 1px solid rgba(0, 0, 0, .08); }
.lib .gl-02 .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.lib .gl-02 .stat-box { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px; padding: 1.25rem; transition: background .25s; }
.lib .gl-02 .stat-box:hover { background: rgba(255, 255, 255, .75); }
.lib .gl-02 .stat-box .sb-icon { font-size: 1.4rem; margin-bottom: .65rem; }
.lib .gl-02 .stat-box .sb-val { font-family: var(--lib-font-head); font-size: 2rem; font-weight: 700; color: var(--lib-heading); line-height: 1; margin-bottom: .2rem; }
.lib .gl-02 .stat-box .sb-label { font-size: .77rem; color: rgba(20, 10, 60, .45); }
.lib .gl-02 .stat-box .sb-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; margin-top: .4rem; padding: 2px 8px; border-radius: 50px; }
.lib .gl-02 .stat-box .sb-delta.up { background: rgba(0, 160, 80, .12); color: #00904a; }
.lib .gl-02 .stat-box .sb-delta.down { background: rgba(220, 40, 40, .1); color: #c02020; }

/* gl-03/gl-04 — Glassmorphic team profile cards + testimonials */
.lib .gl-03 { border-radius: 24px; padding: 2.5rem 2rem; text-align: center; transition: transform .4s, box-shadow .4s; height: 100%; }
.lib .gl-03:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(80, 60, 180, .12); }
.lib .gl-03 .avatar-ring { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.25rem; position: relative; }
.lib .gl-03 .avatar-ring::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: linear-gradient(135deg, rgba(120, 80, 255, .5), rgba(255, 80, 160, .2)); z-index: 0; }
.lib .gl-03 .avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; }
.lib .gl-03 .online-dot { width: 14px; height: 14px; background: #00c855; border-radius: 50%; border: 2px solid #fff; position: absolute; bottom: 4px; right: 4px; z-index: 2; }
.lib .gl-03 h5 { color: var(--lib-heading); font-size: 1.15rem; font-weight: 600; margin-bottom: .2rem; }
.lib .gl-03 .role { color: rgba(20, 10, 60, .45); font-size: .82rem; margin-bottom: 1.25rem; }
.lib .gl-03 .tags { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.lib .gl-03 .tags span { background: rgba(120, 80, 255, .07); border: 1px solid rgba(120, 80, 255, .15); color: rgba(20, 10, 60, .55); font-size: .72rem; padding: 3px 10px; border-radius: 50px; }
.lib .gl-03 .mini-stats { display: flex; gap: 1.5rem; justify-content: center; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, .07); }
.lib .gl-03 .mini-stats .ms-item strong { display: block; color: var(--lib-heading); font-family: var(--lib-font-head); font-size: 1.3rem; line-height: 1; }
.lib .gl-03 .mini-stats .ms-item span { font-size: .72rem; color: rgba(20, 10, 60, .4); }
.lib .gl-03 .connect-btn { display: inline-block; width: 100%; margin-top: 1.25rem; padding: .65rem; background: rgba(120, 80, 255, .1); border: 1px solid rgba(120, 80, 255, .2); border-radius: 50px; color: #5030a0; font-size: .85rem; font-weight: 600; transition: all .3s; cursor: pointer; font-family: var(--lib-font); }
.lib .gl-03 .connect-btn:hover { background: rgba(120, 80, 255, .18); }
.lib .gl-04 { border-radius: 24px; padding: 3rem 2.5rem; position: relative; overflow: hidden; height: 100%; transition: transform .4s, box-shadow .4s; }
.lib .gl-04:hover { transform: translateY(-5px); }
.lib .gl-04 .qmark { position: absolute; top: .5rem; right: 1.75rem; font-size: 8rem; font-family: Georgia, serif; color: rgba(0, 0, 0, .05); line-height: 1; pointer-events: none; }
.lib .gl-04 .stars { color: #f0a000; letter-spacing: 3px; font-size: .85rem; margin-bottom: 1.5rem; }
.lib .gl-04 blockquote { font-size: 1rem; color: rgba(20, 10, 60, .65); font-style: italic; line-height: 1.8; margin-bottom: 2rem; font-family: var(--lib-font-head); font-size: 1.1rem; }
.lib .gl-04 .reviewer { display: flex; align-items: center; gap: .85rem; }
.lib .gl-04 .reviewer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(120, 80, 255, .2); }
.lib .gl-04 .reviewer .rname { font-size: .9rem; font-weight: 600; color: var(--lib-heading); line-height: 1.2; }
.lib .gl-04 .reviewer .rrole { font-size: .77rem; color: rgba(20, 10, 60, .38); }

/* gl-05/gl-06 — Glassmorphic pricing cards + feature list */
.lib .gl-05 { border-radius: 24px; padding: 2.5rem 2rem; text-align: center; transition: transform .4s, box-shadow .4s; position: relative; overflow: hidden; height: 100%; }
.lib .gl-05:hover { transform: translateY(-6px); }
.lib .gl-05.featured::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, rgba(120, 80, 255, .08), rgba(255, 255, 255, .04)); pointer-events: none; }
.lib .gl-05 .plan-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 14px; border-radius: 50px; margin-bottom: 1.25rem; }
.lib .gl-05.featured .plan-badge { background: rgba(200, 140, 0, .12); border: 1px solid rgba(200, 140, 0, .3); color: #a07000; }
.lib .gl-05:not(.featured) .plan-badge { background: rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .08); color: rgba(20, 10, 60, .45); }
.lib .gl-05 h4 { color: var(--lib-heading); font-size: 1.35rem; margin-bottom: .5rem; }
.lib .gl-05 .price-display { margin: 1.5rem 0; }
.lib .gl-05 .price-display .currency { font-size: 1.2rem; color: rgba(20, 10, 60, .45); vertical-align: top; margin-top: .5rem; display: inline-block; }
.lib .gl-05 .price-display .amount { font-family: var(--lib-font-head); font-size: 4rem; font-weight: 700; color: var(--lib-heading); line-height: 1; }
.lib .gl-05 .price-display .period { font-size: .82rem; color: rgba(20, 10, 60, .4); display: block; margin-top: .25rem; }
.lib .gl-05 .feature-list { list-style: none; padding: 0; margin: 0 0 2rem; text-align: left; }
.lib .gl-05 .feature-list li { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: .87rem; color: rgba(20, 10, 60, .65); }
.lib .gl-05 .feature-list li:last-child { border-bottom: none; }
.lib .gl-05 .feature-list li i { font-size: .9rem; flex-shrink: 0; }
.lib .gl-05 .feature-list li.yes i { color: #00a84a; }
.lib .gl-05 .feature-list li.no { opacity: .35; }
.lib .gl-05 .feature-list li.no i { color: rgba(20, 10, 60, .3); }
.lib .gl-05 .cta { display: block; padding: .8rem; background: rgba(0, 0, 0, .07); border: 1px solid rgba(0, 0, 0, .1); border-radius: 50px; color: var(--lib-heading); font-weight: 700; font-size: .9rem; transition: all .3s; }
.lib .gl-05.featured .cta { background: rgba(200, 140, 0, .8); border-color: transparent; color: #fff; }
.lib .gl-05 .cta:hover { background: rgba(0, 0, 0, .12); }
.lib .gl-05.featured .cta:hover { background: #c8a000; }
.lib .gl-06 { border-radius: 24px; padding: 2.5rem; height: 100%; transition: transform .4s; }
.lib .gl-06:hover { transform: translateY(-5px); }
.lib .gl-06 .g08-icon { width: 60px; height: 60px; border-radius: 18px; background: rgba(120, 80, 255, .08); border: 1px solid rgba(120, 80, 255, .12); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.5rem; }
.lib .gl-06 h4 { color: var(--lib-heading); font-size: 1.35rem; font-weight: 600; margin-bottom: .65rem; }
.lib .gl-06 p { font-size: .88rem; color: rgba(20, 10, 60, .5); margin-bottom: 1.75rem; line-height: 1.7; }
.lib .gl-06 ul { list-style: none; padding: 0; margin: 0; }
.lib .gl-06 ul li { display: flex; align-items: center; gap: .65rem; font-size: .85rem; color: rgba(20, 10, 60, .6); padding: .5rem 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.lib .gl-06 ul li:last-child { border-bottom: none; }
.lib .gl-06 ul li i { color: rgba(20, 10, 60, .3); font-size: .85rem; }

/* gl-07/gl-08/gl-09 — Glassmorphic notification stack + event card + analytics panel */
.lib .gl-07 { border-radius: 18px; padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; transition: all .3s; }
.lib .gl-07:hover { background: rgba(255, 255, 255, .75)!important; }
.lib .gl-07 .notif-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.lib .gl-07 .notif-body { flex: 1; }
.lib .gl-07 .notif-body h6 { color: var(--lib-heading); font-size: .9rem; font-weight: 600; margin-bottom: .15rem; font-family: var(--lib-font); }
.lib .gl-07 .notif-body p { font-size: .8rem; color: rgba(20, 10, 60, .45); margin: 0; line-height: 1.5; }
.lib .gl-07 .notif-time { font-size: .72rem; color: rgba(20, 10, 60, .3); white-space: nowrap; }
.lib .gl-07 .notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.lib .gl-08 { border-radius: 24px; padding: 2.5rem; text-align: center; transition: transform .4s; }
.lib .gl-08:hover { transform: translateY(-5px); }
.lib .gl-08 .ev-badge { display: inline-block; background: rgba(220, 40, 100, .1); border: 1px solid rgba(220, 40, 100, .25); color: var(--lib-accent); font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; margin-bottom: 1.25rem; }
.lib .gl-08 h4 { color: var(--lib-heading); font-size: 1.6rem; letter-spacing: -0.5px; margin-bottom: .75rem; }
.lib .gl-08 .ev-meta { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lib .gl-08 .ev-meta span { font-size: .82rem; color: rgba(20, 10, 60, .45); display: flex; align-items: center; gap: 5px; }
.lib .gl-08 .ev-meta i { color: rgba(20, 10, 60, .3); }
.lib .gl-08 .cd-row { display: flex; justify-content: center; gap: .75rem; margin-bottom: 2rem; }
.lib .gl-08 .cd-box { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 14px; padding: .85rem 1rem; min-width: 68px; }
.lib .gl-08 .cd-box .cd-n { font-family: var(--lib-font-head); font-size: 2.2rem; font-weight: 700; color: var(--lib-heading); line-height: 1; }
.lib .gl-08 .cd-box .cd-l { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(20, 10, 60, .35); margin-top: .2rem; }
.lib .gl-08 .reg-btn { display: inline-block; padding: .75rem 2.5rem; background: rgba(200, 30, 90, .8); color: #fff; border-radius: 50px; font-weight: 700; font-size: .9rem; transition: all .3s; }
.lib .gl-08 .reg-btn:hover { background: var(--lib-accent); box-shadow: 0 8px 24px rgba(200, 30, 90, .25); }
.lib .gl-09 { border-radius: 24px; padding: 2.5rem; transition: transform .4s; }
.lib .gl-09:hover { transform: translateY(-5px); }
.lib .gl-09 .g11-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; }
.lib .gl-09 .g11-head h5 { color: var(--lib-heading); font-size: 1.1rem; }
.lib .gl-09 .g11-head .trend { display: flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; }
.lib .gl-09 .g11-head .trend.up { background: rgba(0, 160, 80, .12); color: #008040; }
.lib .gl-09 .g11-head .trend.down { background: rgba(220, 40, 40, .1); color: #c02020; }
.lib .gl-09 .big-number { font-family: var(--lib-font-head); font-size: 3.5rem; font-weight: 700; color: var(--lib-heading); line-height: 1; margin-bottom: .35rem; }
.lib .gl-09 .sub-number { font-size: .85rem; color: rgba(20, 10, 60, .4); margin-bottom: 2rem; }
.lib .gl-09 .bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 80px; }
.lib .gl-09 .bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity .25s; }
.lib .gl-09 .bar:hover { opacity: .75; }
.lib .gl-09 .bar-labels { display: flex; gap: .5rem; margin-top: .5rem; }
.lib .gl-09 .bar-labels span { flex: 1; font-size: .65rem; color: rgba(20, 10, 60, .3); text-align: center; }

/* gl-10/gl-11/gl-12 — Glassmorphic skill bars + product card + form panel */
.lib .gl-10 { border-radius: 24px; padding: 2.5rem; transition: transform .4s, box-shadow .4s; }
.lib .gl-10:hover { transform: translateY(-5px); }
.lib .gl-10 h5 { color: var(--lib-heading); font-size: 1.2rem; margin-bottom: 1.75rem; }
.lib .gl-10 .skill-row { margin-bottom: 1.25rem; }
.lib .gl-10 .skill-row .sk-head { display: flex; justify-content: space-between; margin-bottom: .55rem; }
.lib .gl-10 .skill-row .sk-name { font-size: .87rem; color: rgba(20, 10, 60, .6); }
.lib .gl-10 .skill-row .sk-pct { font-size: .82rem; font-weight: 700; color: var(--lib-heading); }
.lib .gl-10 .sk-track { height: 6px; background: rgba(0, 0, 0, .06); border-radius: 3px; overflow: hidden; }
.lib .gl-10 .sk-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.lib .gl-11 { border-radius: 24px; overflow: hidden; transition: transform .4s, box-shadow .4s; height: 100%; }
.lib .gl-11:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(80, 60, 180, .15); }
.lib .gl-11 .prod-img { height: 200px; position: relative; overflow: hidden; }
.lib .gl-11 .prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gl-11:hover .prod-img img { transform: scale(1.06); }
.lib .gl-11 .prod-img .wishlist { position: absolute; top: .85rem; right: .85rem; width: 36px; height: 36px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #555; font-size: .9rem; cursor: pointer; transition: all .3s; }
.lib .gl-11 .prod-img .wishlist:hover { background: rgba(220, 40, 100, .15); color: var(--lib-accent); }
.lib .gl-11 .prod-body { padding: 1.5rem; }
.lib .gl-11 .prod-cat { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(20, 10, 60, .35); margin-bottom: .4rem; }
.lib .gl-11 .prod-name { color: var(--lib-heading); font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.lib .gl-11 .prod-desc { font-size: .82rem; color: rgba(20, 10, 60, .45); margin-bottom: 1.25rem; line-height: 1.55; }
.lib .gl-11 .prod-foot { display: flex; align-items: center; justify-content: space-between; }
.lib .gl-11 .prod-price { font-family: var(--lib-font-head); font-size: 1.6rem; font-weight: 700; color: var(--lib-heading); }
.lib .gl-11 .prod-price .was { font-size: .85rem; text-decoration: line-through; color: rgba(20, 10, 60, .3); margin-right: .35rem; font-family: var(--lib-font); font-weight: 400; }
.lib .gl-11 .add-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(120, 80, 255, .1); border: 1px solid rgba(120, 80, 255, .2); color: #5030a0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: all .3s; }
.lib .gl-11 .add-btn:hover { background: rgba(120, 80, 255, .2); }
.lib .gl-12 { border-radius: 24px; padding: 2.5rem; transition: transform .4s; }
.lib .gl-12 h5 { color: var(--lib-heading); font-size: 1.3rem; margin-bottom: .5rem; }
.lib .gl-12 .sub { font-size: .85rem; color: rgba(20, 10, 60, .45); margin-bottom: 2rem; }
.lib .gl-12 .field { margin-bottom: 1.1rem; }
.lib .gl-12 .field label { display: block; font-size: .8rem; font-weight: 600; color: rgba(20, 10, 60, .45); letter-spacing: .5px; margin-bottom: .4rem; text-transform: uppercase; }
.lib .gl-12 .field input, .lib .gl-12 .field select, .lib .gl-12 .field textarea { width: 100%; background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: .75rem 1rem; color: var(--lib-heading); font-family: var(--lib-font); font-size: .9rem; outline: none; transition: border-color .25s, background .25s; }
.lib .gl-12 .field input:focus, .lib .gl-12 .field select:focus, .lib .gl-12 .field textarea:focus { border-color: rgba(120, 80, 255, .4); background: rgba(255, 255, 255, .8); }
.lib .gl-12 .field input::placeholder, .lib .gl-12 .field textarea::placeholder { color: rgba(20, 10, 60, .25); }
.lib .gl-12 .field select option { background: #fff; color: var(--lib-heading); }
.lib .gl-12 .submit-btn { width: 100%; padding: .85rem; background: rgba(20, 10, 60, .85); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 800; font-size: .95rem; cursor: pointer; transition: all .3s; margin-top: .5rem; }
.lib .gl-12 .submit-btn:hover { background: var(--lib-heading); box-shadow: 0 8px 24px rgba(20, 10, 60, .2); }

/* gl-13/gl-14/gl-15 — Glassmorphic app sidebar + CTA banner + promo card */
.lib .gl-13 { border-radius: 24px; padding: 2rem 1.5rem; transition: transform .4s; }
.lib .gl-13 .g14-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.lib .gl-13 .g14-logo .logo-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, rgba(120, 80, 255, .8), rgba(255, 80, 160, .6)); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; }
.lib .gl-13 .g14-logo .logo-name { font-weight: 700; color: var(--lib-heading); font-size: .95rem; }
.lib .gl-13 .g14-logo .logo-name span { display: block; font-size: .72rem; color: rgba(20, 10, 60, .35); font-weight: 400; }
.lib .gl-13 .nav-section { margin-bottom: 1.5rem; }
.lib .gl-13 .nav-section .ns-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(20, 10, 60, .3); margin-bottom: .75rem; padding: 0 .5rem; }
.lib .gl-13 .nav-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 12px; cursor: pointer; transition: all .25s; margin-bottom: .2rem; }
.lib .gl-13 .nav-item i { font-size: 1rem; color: rgba(20, 10, 60, .3); width: 20px; text-align: center; transition: color .25s; }
.lib .gl-13 .nav-item span { font-size: .87rem; color: rgba(20, 10, 60, .5); transition: color .25s; }
.lib .gl-13 .nav-item .badge { margin-left: auto; background: rgba(200, 40, 100, .12); color: var(--lib-accent); font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 50px; }
.lib .gl-13 .nav-item:hover { background: rgba(0, 0, 0, .04); }
.lib .gl-13 .nav-item:hover i, .lib .gl-13 .nav-item:hover span { color: rgba(20, 10, 60, .75); }
.lib .gl-13 .nav-item.active { background: rgba(120, 80, 255, .1); border: 1px solid rgba(120, 80, 255, .15); }
.lib .gl-13 .nav-item.active i, .lib .gl-13 .nav-item.active span { color: #6040b0; }
.lib .gl-13 .g14-user { display: flex; align-items: center; gap: .75rem; padding: 1rem .85rem; background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; margin-top: 1.5rem; cursor: pointer; transition: background .25s; }
.lib .gl-13 .g14-user:hover { background: rgba(0, 0, 0, .06); }
.lib .gl-13 .g14-user img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lib .gl-13 .g14-user .u-name { font-size: .85rem; font-weight: 600; color: var(--lib-heading); line-height: 1.2; }
.lib .gl-13 .g14-user .u-plan { font-size: .72rem; color: rgba(20, 10, 60, .35); }
.lib .gl-13 .g14-user i { margin-left: auto; color: rgba(20, 10, 60, .25); }
.lib .gl-14 { border-radius: 28px; padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden; transition: transform .4s; }
.lib .gl-14:hover { transform: translateY(-4px); }
.lib .gl-14::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(120, 80, 255, .07) 0%, transparent 65%); }
.lib .gl-14 .g10-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(120, 80, 255, .08); border: 1px solid rgba(120, 80, 255, .15); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 1.75rem; }
.lib .gl-14 h3 { color: var(--lib-heading); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 300; letter-spacing: -0.5px; margin-bottom: .85rem; }
.lib .gl-14 h3 strong { font-weight: 700; }
.lib .gl-14 p { color: rgba(20, 10, 60, .5); font-size: .95rem; margin-bottom: 2.5rem; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.lib .gl-14 .cta-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.lib .gl-14 .btn-main { padding: .85rem 2.5rem; background: rgba(20, 10, 60, .85); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font); font-weight: 800; font-size: .95rem; cursor: pointer; transition: all .3s; }
.lib .gl-14 .btn-main:hover { background: var(--lib-heading); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20, 10, 60, .2); }
.lib .gl-14 .btn-sub { color: rgba(20, 10, 60, .45); font-size: .88rem; transition: color .25s; }
.lib .gl-14 .btn-sub:hover { color: var(--lib-heading); }
.lib .gl-15 { border-radius: 24px; padding: 3rem; display: flex; align-items: center; gap: 3rem; transition: transform .4s, box-shadow .4s; flex-wrap: wrap; }
.lib .gl-15:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(80, 60, 180, .12); }
.lib .gl-15 .g15-icon { width: 90px; height: 90px; border-radius: 24px; background: rgba(120, 80, 255, .07); border: 1px solid rgba(120, 80, 255, .12); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; }
.lib .gl-15 .g15-text { flex: 1; min-width: 200px; }
.lib .gl-15 .g15-text .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(20, 10, 60, .35); margin-bottom: .65rem; }
.lib .gl-15 .g15-text h3 { color: var(--lib-heading); font-size: 1.75rem; font-weight: 300; letter-spacing: -0.5px; margin-bottom: .5rem; }
.lib .gl-15 .g15-text h3 strong { font-weight: 700; }
.lib .gl-15 .g15-text p { font-size: .88rem; color: rgba(20, 10, 60, .45); line-height: 1.65; }
.lib .gl-15 .g15-action { flex-shrink: 0; text-align: right; }
.lib .gl-15 .g15-action .price { font-family: var(--lib-font-head); font-size: 2.5rem; font-weight: 700; color: var(--lib-heading); line-height: 1; margin-bottom: .5rem; }
.lib .gl-15 .g15-action .price span { font-size: .9rem; color: rgba(20, 10, 60, .4); font-family: var(--lib-font); font-weight: 400; }
.lib .gl-15 .g15-action a { display: inline-block; padding: .7rem 2rem; background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .1); color: var(--lib-heading); border-radius: 50px; font-weight: 600; font-size: .88rem; transition: all .3s; }
.lib .gl-15 .g15-action a:hover { background: rgba(0, 0, 0, .1); }


/* ==========================================================================
   FILE 09 — SHAPE CARDS
   ========================================================================== */

/* shp-01 — Diagonal slash corner card */
.lib .shp-01 { background: #fff; border-radius: 16px; padding: 2.5rem 2rem; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s ease, box-shadow .35s ease; height: 100%; }
.lib .shp-01:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.lib .shp-01::before { content: ''; position: absolute; top: -30px; right: -50px; width: 160px; height: 240px; background: var(--lib-accent); transform: rotate(15deg); opacity: .08; transition: opacity .35s ease; }
.lib .shp-01:hover::before { opacity: .14; }
.lib .shp-01::after { content: ''; position: absolute; top: -40px; right: -20px; width: 80px; height: 260px; background: var(--lib-accent); transform: rotate(15deg); opacity: .05; transition: opacity .35s ease; }
.lib .shp-01:hover::after { opacity: .09; }
.lib .shp-01 .s01-icon { width: 52px; height: 52px; background: color-mix(in srgb, var(--lib-accent), transparent 88%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--lib-accent); margin-bottom: 1.25rem; position: relative; z-index: 1; }
.lib .shp-01 h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; position: relative; z-index: 1; }
.lib .shp-01 p { font-size: .87rem; color: #666; line-height: 1.7; position: relative; z-index: 1; }
.lib .shp-01.v-blue::before, .lib .shp-01.v-blue::after { background: var(--lib-blue); }
.lib .shp-01.v-blue .s01-icon { background: rgba(26, 79, 255, .08); color: var(--lib-blue); }
.lib .shp-01.v-teal::before, .lib .shp-01.v-teal::after { background: var(--lib-teal); }
.lib .shp-01.v-teal .s01-icon { background: rgba(0, 180, 160, .08); color: var(--lib-teal); }
.lib .shp-01.v-purple::before, .lib .shp-01.v-purple::after { background: var(--lib-violet); }
.lib .shp-01.v-purple .s01-icon { background: rgba(108, 43, 217, .08); color: var(--lib-violet); }

/* shp-02 — Folded-corner card */
.lib .shp-02 { background: #fff; border-radius: 16px 0 16px 16px; /* cut top-right */ padding: 2rem 2rem; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-02:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .1); }
.lib .shp-02::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 48px 48px 0; border-color: transparent var(--lib-hairline) transparent transparent; transition: border-width .3s ease; }
.lib .shp-02:hover::before { border-width: 0 56px 56px 0; }
.lib .shp-02::after { content: ''; position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; background: rgba(0, 0, 0, .06); clip-path: polygon(100% 0, 100% 100%, 0 100%); transition: top .3s, right .3s; }
.lib .shp-02:hover::after { top: 8px; right: 8px; }
.lib .shp-02 .fold-label { position: absolute; top: 4px; right: 4px; font-size: .6rem; font-weight: 800; color: var(--lib-accent); text-transform: uppercase; letter-spacing: .5px; transform: rotate(0deg); z-index: 2; font-family: var(--lib-font-head); }
.lib .shp-02 .s02-badge { display: inline-block; background: color-mix(in srgb, var(--lib-accent), transparent 88%); color: var(--lib-accent); font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; margin-bottom: .85rem; font-family: var(--lib-font-head); letter-spacing: .5px; }
.lib .shp-02 h5 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; }
.lib .shp-02 p { font-size: .86rem; color: #666; line-height: 1.65; }
.lib .shp-02 .sc02-foot { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.lib .shp-02 .sc02-foot .price { font-family: var(--lib-font-head); font-size: 1.5rem; font-style: italic; color: var(--lib-heading); }
.lib .shp-02 .sc02-foot a { font-size: .8rem; font-weight: 700; color: var(--lib-accent); font-family: var(--lib-font-head); display: flex; align-items: center; gap: 4px; transition: gap .25s; }
.lib .shp-02 .sc02-foot a:hover { gap: 8px; }

/* shp-03 — Speech-bubble testimonial card */
.lib .shp-03 { background: #fff; border-radius: 20px; padding: 2rem; position: relative; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; }
.lib .shp-03:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .1); }
.lib .shp-03::before { content: ''; position: absolute; bottom: -22px; left: 36px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 0px solid transparent; border-top: 22px solid #fff; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .06)); }
.lib .shp-03::after { content: ''; position: absolute; bottom: -22px; left: 36px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 0px solid transparent; border-top: 22px solid rgba(0, 0, 0, .03); transform: translateX(1px) translateY(2px); }
.lib .shp-03 .stars { color: var(--lib-gold); letter-spacing: 2px; font-size: .85rem; margin-bottom: .85rem; }
.lib .shp-03 blockquote { font-family: var(--lib-font-head); font-size: 1.05rem; font-style: italic; color: var(--lib-heading); line-height: 1.75; margin-bottom: 1.25rem; }
.lib .shp-03 .reviewer { display: flex; align-items: center; gap: .75rem; }
.lib .shp-03 .reviewer img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lib .shp-03 .reviewer .rn { font-weight: 700; font-size: .87rem; color: var(--lib-heading); font-family: var(--lib-font-head); }
.lib .shp-03 .reviewer .rr { font-size: .76rem; color: #888; }
.lib .shp-03.accent-bubble { background: var(--lib-accent); }
.lib .shp-03.accent-bubble::before { border-top-color: var(--lib-accent); }
.lib .shp-03.accent-bubble::after { border-top-color: rgba(0, 0, 0, .12); }
.lib .shp-03.accent-bubble .stars { color: rgba(255, 255, 255, .7); }
.lib .shp-03.accent-bubble blockquote { color: #fff; }
.lib .shp-03.accent-bubble .reviewer .rn { color: #fff; }
.lib .shp-03.accent-bubble .reviewer .rr { color: rgba(255, 255, 255, .6); }
.lib .shp-03.ink-bubble { background: var(--lib-heading); }
.lib .shp-03.ink-bubble::before { border-top-color: var(--lib-heading); }
.lib .shp-03.ink-bubble::after { border-top-color: rgba(255, 255, 255, .05); }
.lib .shp-03.ink-bubble .stars { color: var(--lib-gold); }
.lib .shp-03.ink-bubble blockquote { color: rgba(255, 255, 255, .85); }
.lib .shp-03.ink-bubble .reviewer .rn { color: #fff; }
.lib .shp-03.ink-bubble .reviewer .rr { color: rgba(255, 255, 255, .4); }

/* shp-04 — Zigzag-edge card — repeating conic mask strip, four colour variants */
.lib .shp-04 { background: var(--lib-accent); border-radius: 20px 20px 0 0; padding: 2.5rem 2rem 3.5rem; position: relative; overflow: visible; transition: transform .35s; height: 100%; }
.lib .shp-04:hover { transform: translateY(-5px); }
.lib .shp-04::after { content: ''; position: absolute; bottom: -18px; left: 0; right: 0; height: 20px; background: linear-gradient(135deg, var(--lib-accent) 25%, transparent 25%) -10px 0, linear-gradient(225deg, var(--lib-accent) 25%, transparent 25%) -10px 0, linear-gradient(315deg, var(--lib-accent) 25%, transparent 25%), linear-gradient(45deg, var(--lib-accent)  25%, transparent 25%); background-size: 20px 20px; background-color: transparent; }
.lib .shp-04::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px 20px 0 0; background: url("data:image/svg+xml, %3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.06'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.lib .shp-04 .s04-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.lib .shp-04 .s04-icon { font-size: 2.2rem; color: rgba(255, 255, 255, .9); }
.lib .shp-04 .s04-badge { background: rgba(255, 255, 255, .2); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; font-family: var(--lib-font-head); letter-spacing: 1px; }
.lib .shp-04 h4 { font-family: var(--lib-font-head); font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .6rem; }
.lib .shp-04 p { font-size: .87rem; color: rgba(255, 255, 255, .75); line-height: 1.65; }
.lib .shp-04 .s04-num { font-family: var(--lib-font-head); font-size: 3rem; font-style: italic; color: rgba(255, 255, 255, .15); position: absolute; bottom: 1.25rem; right: 1.5rem; line-height: 1; }
.lib .shp-04.v2 { background: var(--lib-blue); }
.lib .shp-04.v2::after { background: linear-gradient(135deg, var(--lib-blue) 25%, transparent 25%) -10px 0, linear-gradient(225deg, var(--lib-blue) 25%, transparent 25%) -10px 0, linear-gradient(315deg, var(--lib-blue) 25%, transparent 25%), linear-gradient(45deg, var(--lib-blue)  25%, transparent 25%); background-size: 20px 20px; }
.lib .shp-04.v3 { background: var(--lib-teal); }
.lib .shp-04.v3::after { background: linear-gradient(135deg, var(--lib-teal) 25%, transparent 25%) -10px 0, linear-gradient(225deg, var(--lib-teal) 25%, transparent 25%) -10px 0, linear-gradient(315deg, var(--lib-teal) 25%, transparent 25%), linear-gradient(45deg, var(--lib-teal)  25%, transparent 25%); background-size: 20px 20px; }
.lib .shp-04.v4 { background: var(--lib-violet); }
.lib .shp-04.v4::after { background: linear-gradient(135deg, var(--lib-violet) 25%, transparent 25%) -10px 0, linear-gradient(225deg, var(--lib-violet) 25%, transparent 25%) -10px 0, linear-gradient(315deg, var(--lib-violet) 25%, transparent 25%), linear-gradient(45deg, var(--lib-violet)  25%, transparent 25%); background-size: 20px 20px; }

/* shp-05 — Double border frame card */
.lib .shp-05 { background: #fff; padding: 2.5rem; position: relative; transition: transform .35s; height: 100%; }
.lib .shp-05:hover { transform: translateY(-4px); }
.lib .shp-05::before { content: ''; position: absolute; inset: -6px; border: 2px solid var(--lib-accent); border-radius: 20px; transition: inset .3s ease, opacity .3s; opacity: .25; }
.lib .shp-05:hover::before { inset: -10px; opacity: .45; }
.lib .shp-05::after { content: ''; position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--lib-accent), transparent 80%); border-radius: 16px; pointer-events: none; }
.lib .shp-05 .s05-icon { font-size: 2.5rem; margin-bottom: 1.25rem; }
.lib .shp-05 h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .6rem; }
.lib .shp-05 p { font-size: .87rem; color: #666; line-height: 1.7; margin-bottom: 1.25rem; }
.lib .shp-05 a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lib-font-head); font-size: .82rem; font-weight: 700; color: var(--lib-accent); transition: gap .25s; }
.lib .shp-05 a:hover { gap: 10px; }
.lib .shp-05.v-blue::before, .lib .shp-05.v-blue::after { border-color: var(--lib-blue); }
.lib .shp-05.v-blue a { color: var(--lib-blue); }
.lib .shp-05.v-teal::before, .lib .shp-05.v-teal::after { border-color: var(--lib-teal); }
.lib .shp-05.v-teal a { color: var(--lib-teal); }

/* shp-06 — Polygon clip-path header card */
.lib .shp-06 { background: #fff; border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .08); position: relative; transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-06:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0, 0, 0, .13); }
.lib .shp-06::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%); transition: height .4s ease; }
.lib .shp-06:hover::before { height: 215px; }
.lib .shp-06::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: .2; transition: opacity .4s; }
.lib .shp-06:hover::after { opacity: .35; }
.lib .shp-06.c-red::before { background: linear-gradient(135deg, var(--lib-accent), #f07030); }
.lib .shp-06.c-red::after { background: var(--lib-gold); }
.lib .shp-06.c-blue::before { background: linear-gradient(135deg, var(--lib-blue), #4a80ff); }
.lib .shp-06.c-blue::after { background: #90c0ff; }
.lib .shp-06.c-teal::before { background: linear-gradient(135deg, var(--lib-teal), #00d4b8); }
.lib .shp-06.c-teal::after { background: #80ffe8; }
.lib .shp-06.c-purple::before { background: linear-gradient(135deg, var(--lib-violet), #9a50ff); }
.lib .shp-06.c-purple::after { background: #c090ff; }
.lib .shp-06.c-ink::before { background: linear-gradient(135deg, var(--lib-heading), #2a2a3e); }
.lib .shp-06.c-ink::after { background: var(--lib-accent); }
.lib .shp-06 .s06-body { padding: 1.75rem 1.75rem 2rem; margin-top: 140px; position: relative; z-index: 1; }
.lib .shp-06 .s06-icon { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 2.4rem; z-index: 2; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2)); }
.lib .shp-06 .s06-body h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; text-align: center; }
.lib .shp-06 .s06-body p { font-size: .85rem; color: #666; line-height: 1.65; text-align: center; }
.lib .shp-06 .s06-body .s06-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #f0ece8; display: flex; justify-content: center; gap: .5rem; }
.lib .shp-06 .s06-body .s06-foot .tag { background: #f4f1ed; color: #888; font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; font-family: var(--lib-font-head); }

/* shp-07 — Diagonal ribbon corner card */
.lib .shp-07 { background: #fff; border-radius: 16px; padding: 2.2rem 2rem; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-07:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0, 0, 0, .11); }
.lib .shp-07::before { content: attr(data-ribbon); position: absolute; top: 18px; right: -32px; background: var(--lib-accent); color: #fff; font-family: var(--lib-font-head); font-size: .65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 44px; transform: rotate(45deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); white-space: nowrap; }
.lib .shp-07::after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 64px 64px 0; border-color: transparent rgba(0, 0, 0, .06) transparent transparent; }
.lib .shp-07.rb-blue::before { background: var(--lib-blue); }
.lib .shp-07.rb-teal::before { background: var(--lib-teal); }
.lib .shp-07.rb-ink::before { background: var(--lib-heading); }
.lib .shp-07.rb-gold::before { background: var(--lib-gold); color: var(--lib-heading); }
.lib .shp-07 .s07-icon { font-size: 2.2rem; margin-bottom: 1rem; display: block; }
.lib .shp-07 h5 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .45rem; }
.lib .shp-07 p { font-size: .86rem; color: #666; line-height: 1.65; margin-bottom: 1.1rem; }
.lib .shp-07 .price { font-family: var(--lib-font-head); font-size: 1.75rem; font-style: italic; color: var(--lib-heading); }
.lib .shp-07 .price small { font-size: .9rem; color: #aaa; font-style: normal; font-family: var(--lib-font); }

/* shp-08 — Rotating geometric corner card */
.lib .shp-08 { background: #fff; border-radius: 20px; padding: 2.5rem 2rem; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-08:hover { transform: translateY(-6px); box-shadow: 0 22px 52px rgba(0, 0, 0, .12); }
.lib .shp-08::before { content: ''; position: absolute; bottom: -50px; right: -50px; width: 160px; height: 160px; background: currentColor; opacity: .06; border-radius: 24px; transform: rotate(20deg); transition: transform .5s ease, opacity .35s; }
.lib .shp-08:hover::before { transform: rotate(35deg); opacity: .1; }
.lib .shp-08::after { content: ''; position: absolute; bottom: -20px; right: 60px; width: 90px; height: 90px; background: currentColor; opacity: .04; border-radius: 14px; transform: rotate(12deg); transition: transform .5s ease; }
.lib .shp-08:hover::after { transform: rotate(25deg); }
.lib .shp-08.sq-red { color: var(--lib-accent); }
.lib .shp-08.sq-blue { color: var(--lib-blue); }
.lib .shp-08.sq-teal { color: var(--lib-teal); }
.lib .shp-08.sq-purple { color: var(--lib-violet); }
.lib .shp-08.sq-gold { color: var(--lib-gold); }
.lib .shp-08 .s08-num { font-family: var(--lib-font-head); font-size: 4rem; font-weight: 400; font-style: italic; color: currentColor; opacity: .15; line-height: 1; margin-bottom: .5rem; }
.lib .shp-08 h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; }
.lib .shp-08 p { font-size: .87rem; color: #666; line-height: 1.7; position: relative; z-index: 1; }
.lib .shp-08 .s08-bar { height: 3px; background: currentColor; border-radius: 2px; margin-top: 1.5rem; opacity: .35; width: 40%; transition: width .4s ease; }
.lib .shp-08:hover .s08-bar { width: 70%; opacity: .6; }

/* shp-09 — Dashed underline accent card */
.lib .shp-09 { background: #fff; border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-09:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0, 0, 0, .1); }
.lib .shp-09 .s09-head { position: relative; display: inline-block; margin-bottom: 1.25rem; }
.lib .shp-09 .s09-head h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: var(--lib-heading); position: relative; z-index: 1; padding-right: 1.5rem; }
.lib .shp-09 .s09-head::before { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: repeating-linear-gradient(90deg, var(--lib-accent) 0, var(--lib-accent) 6px, transparent 6px, transparent 10px); border-radius: 2px; }
.lib .shp-09 .s09-head::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 8px; height: 8px; background: var(--lib-accent); border-radius: 50%; }
.lib .shp-09 p { font-size: .87rem; color: #666; line-height: 1.7; }
.lib .shp-09 .meta-row { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.lib .shp-09 .meta-row .chip { font-size: .75rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; background: #f4f1ed; color: #888; font-family: var(--lib-font-head); }
.lib .shp-09.ul-blue .s09-head::before { background: repeating-linear-gradient(90deg, var(--lib-blue) 0, var(--lib-blue) 6px, transparent 6px, transparent 10px); }
.lib .shp-09.ul-blue .s09-head::after { background: var(--lib-blue); }
.lib .shp-09.ul-teal .s09-head::before { background: repeating-linear-gradient(90deg, var(--lib-teal) 0, var(--lib-teal) 6px, transparent 6px, transparent 10px); }
.lib .shp-09.ul-teal .s09-head::after { background: var(--lib-teal); }

/* shp-10 — Circle burst corner card */
.lib .shp-10 { border-radius: 24px; padding: 2.75rem 2rem; position: relative; overflow: hidden; transition: transform .35s, box-shadow .35s; height: 100%; text-align: center; }
.lib .shp-10:hover { transform: translateY(-6px); }
.lib .shp-10::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: transform .5s ease; }
.lib .shp-10:hover::before { transform: translateX(-50%) scale(1.12); }
.lib .shp-10::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .06); transition: transform .5s ease; }
.lib .shp-10:hover::after { transform: scale(1.2); }
.lib .shp-10 .s10-icon { font-size: 3rem; display: block; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.lib .shp-10 h4 { font-family: var(--lib-font-head); font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: .6rem; position: relative; z-index: 1; }
.lib .shp-10 p { font-size: .87rem; color: rgba(255, 255, 255, .7); line-height: 1.65; position: relative; z-index: 1; }
.lib .shp-10 .s10-cta { display: inline-block; margin-top: 1.5rem; padding: .6rem 1.75rem; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 50px; font-size: .83rem; font-weight: 700; font-family: var(--lib-font-head); transition: all .3s; position: relative; z-index: 1; }
.lib .shp-10 .s10-cta:hover { background: rgba(255, 255, 255, .25); }
.lib .shp-10.burst-red { background: linear-gradient(135deg, var(--lib-accent), #c83800); }
.lib .shp-10.burst-blue { background: linear-gradient(135deg, var(--lib-blue), #0a2ecc); }
.lib .shp-10.burst-teal { background: linear-gradient(135deg, var(--lib-teal), #007a6e); }
.lib .shp-10.burst-ink { background: linear-gradient(135deg, var(--lib-heading), #1a1a2e); }

/* shp-11 — Skewed side accent card */
.lib .shp-11 { background: #fff; border-radius: 16px; padding: 2rem 2rem 2rem 3.5rem; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; display: flex; align-items: flex-start; gap: 1.25rem; height: 100%; }
.lib .shp-11:hover { transform: translateX(6px); box-shadow: 0 16px 40px rgba(0, 0, 0, .1); }
.lib .shp-11::before { content: ''; position: absolute; top: -10%; left: -18px; width: 56px; height: 120%; background: var(--lib-accent); transform: skewX(-8deg); transition: width .3s ease; }
.lib .shp-11:hover::before { width: 62px; }
.lib .shp-11::after { content: ''; position: absolute; top: 20%; left: 44px; width: 2px; height: 60%; background: rgba(255, 255, 255, .3); }
.lib .shp-11.sk-blue::before { background: var(--lib-blue); }
.lib .shp-11.sk-teal::before { background: var(--lib-teal); }
.lib .shp-11.sk-purple::before { background: var(--lib-violet); }
.lib .shp-11.sk-ink::before { background: var(--lib-heading); }
.lib .shp-11.sk-gold::before { background: var(--lib-gold); }
.lib .shp-11 .s11-icon { width: 46px; height: 46px; background: #f4f1ed; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.lib .shp-11 .s11-body h5 { font-family: var(--lib-font-head); font-size: .98rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .4rem; }
.lib .shp-11 .s11-body p { font-size: .85rem; color: #666; line-height: 1.65; margin-bottom: .75rem; }
.lib .shp-11 .s11-body .tag-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.lib .shp-11 .s11-body .tag-row span { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; background: #f4f1ed; color: #888; font-family: var(--lib-font-head); }

/* shp-12 — Neon glow border card */
.lib .shp-12 { background: var(--lib-heading); border-radius: 20px; padding: 2.5rem; position: relative; border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; height: 100%; transition: border-color .4s; }
.lib .sc-12-wrap:hover .shp-12 { border-color: rgba(255, 255, 255, .12); }
.lib .shp-12::before { content: ''; position: absolute; inset: -1px; border-radius: 21px; opacity: 0; transition: opacity .4s ease; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lib .sc-12-wrap.glow-red .shp-12::before { background: linear-gradient(135deg, var(--lib-accent), #f07030, var(--lib-accent)); }
.lib .sc-12-wrap.glow-blue .shp-12::before { background: linear-gradient(135deg, var(--lib-blue), #4a80ff, var(--lib-blue)); }
.lib .sc-12-wrap.glow-teal .shp-12::before { background: linear-gradient(135deg, var(--lib-teal), #00d4b8, var(--lib-teal)); }
.lib .sc-12-wrap.glow-purple .shp-12::before { background: linear-gradient(135deg, var(--lib-violet), #9a50ff, var(--lib-violet)); }
.lib .sc-12-wrap:hover .shp-12::before { opacity: 1; }
.lib .shp-12::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, .012) 20px, rgba(255, 255, 255, .012) 21px); pointer-events: none; }
.lib .shp-12 .s12-icon { font-size: 2.2rem; margin-bottom: 1.25rem; display: block; position: relative; z-index: 1; }
.lib .shp-12 h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .5rem; position: relative; z-index: 1; }
.lib .shp-12 p { font-size: .87rem; color: rgba(255, 255, 255, .45); line-height: 1.7; position: relative; z-index: 1; }
.lib .shp-12 .s12-foot { margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.lib .shp-12 .s12-foot a { font-size: .82rem; font-weight: 700; font-family: var(--lib-font-head); display: flex; align-items: center; gap: 5px; transition: gap .25s; }
.lib .sc-12-wrap.glow-red .shp-12 .s12-foot a { color: var(--lib-accent); }
.lib .sc-12-wrap.glow-blue .shp-12 .s12-foot a { color: #4a80ff; }
.lib .sc-12-wrap.glow-teal .shp-12 .s12-foot a { color: var(--lib-teal); }
.lib .sc-12-wrap.glow-purple .shp-12 .s12-foot a { color: #9a50ff; }
.lib .shp-12 .s12-foot a:hover { gap: 9px; }
.lib .shp-12 .s12-foot .s12-tag { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .35); font-family: var(--lib-font-head); }

/* shp-13 — Notched corner skill card */
.lib .shp-13 { background: #fff; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px)); padding: 2.5rem 2rem; position: relative; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; height: 100%; }
.lib .shp-13:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.lib .shp-13::before { content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 44px; clip-path: polygon(0 0, 100% 0, 100% 100%); transition: opacity .3s; }
.lib .shp-13.notch-red::before { background: var(--lib-accent); }
.lib .shp-13.notch-blue::before { background: var(--lib-blue); }
.lib .shp-13.notch-teal::before { background: var(--lib-teal); }
.lib .shp-13.notch-ink::before { background: var(--lib-heading); }
.lib .shp-13::after { content: ''; position: absolute; bottom: 0; left: 0; width: 44px; height: 44px; clip-path: polygon(0 0, 0 100%, 100% 100%); opacity: .35; }
.lib .shp-13.notch-red::after { background: var(--lib-accent); }
.lib .shp-13.notch-blue::after { background: var(--lib-blue); }
.lib .shp-13.notch-teal::after { background: var(--lib-teal); }
.lib .shp-13.notch-ink::after { background: var(--lib-heading); }
.lib .shp-13 .s13-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #aaa; margin-bottom: .75rem; font-family: var(--lib-font-head); }
.lib .shp-13 h5 { font-family: var(--lib-font-head); font-size: 1.05rem; font-weight: 800; color: var(--lib-heading); margin-bottom: .6rem; }
.lib .shp-13 p { font-size: .87rem; color: #666; line-height: 1.65; margin-bottom: 1.5rem; }
.lib .shp-13 .s13-bar { height: 4px; background: #f0ece8; border-radius: 2px; margin-bottom: .35rem; }
.lib .shp-13 .s13-bar .fill { height: 100%; border-radius: 2px; transition: width .8s ease; }
.lib .shp-13.notch-red .s13-bar .fill { background: var(--lib-accent); }
.lib .shp-13.notch-blue .s13-bar .fill { background: var(--lib-blue); }
.lib .shp-13.notch-teal .s13-bar .fill { background: var(--lib-teal); }
.lib .shp-13.notch-ink .s13-bar .fill { background: var(--lib-heading); }
.lib .shp-13 .s13-bar-label { display: flex; justify-content: space-between; font-size: .75rem; color: #aaa; margin-bottom: .75rem; }

/* shp-14 — Stamp / ticket-style card */
.lib .shp-14 { background: #fff; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; display: flex; }
.lib .shp-14:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .1); }
.lib .shp-14 .s14-left { width: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--lib-font-head); font-size: .72rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .8); position: relative; }
.lib .shp-14 .s14-left::after { content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, transparent, transparent 6px, rgba(0, 0, 0, .08) 6px, rgba(0, 0, 0, .08) 10px); }
.lib .shp-14 .s14-left::before { content: ''; position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 24px; height: 24px; background: var(--lib-hairline); border-radius: 50%; z-index: 2; box-shadow: inset 0 0 0 2px #e8e2da; }
.lib .shp-14 .s14-right { flex: 1; padding: 1.75rem 1.5rem; }
.lib .shp-14 .s14-right .ev-type { font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #aaa; margin-bottom: .5rem; font-family: var(--lib-font-head); }
.lib .shp-14 .s14-right h5 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .4rem; }
.lib .shp-14 .s14-right .s14-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: #888; margin-bottom: .75rem; }
.lib .shp-14 .s14-right .s14-meta span { display: flex; align-items: center; gap: 5px; }
.lib .shp-14 .s14-right .barcode { height: 28px; background: repeating-linear-gradient(90deg, var(--lib-heading) 0, var(--lib-heading) 2px, transparent 2px, transparent 4px, var(--lib-heading) 4px, var(--lib-heading) 5px, transparent 5px, transparent 8px, var(--lib-heading) 8px, var(--lib-heading) 11px, transparent 11px, transparent 13px); opacity: .12; border-radius: 2px; margin-top: .75rem; }
.lib .shp-14.tk-red .s14-left { background: var(--lib-accent); }
.lib .shp-14.tk-blue .s14-left { background: var(--lib-blue); }
.lib .shp-14.tk-teal .s14-left { background: var(--lib-teal); }
.lib .shp-14.tk-ink .s14-left { background: var(--lib-heading); }
.lib .shp-14.tk-gold .s14-left { background: var(--lib-gold); }
.lib .shp-14.tk-gold .s14-left { color: rgba(0, 0, 0, .6); }


/* ==========================================================================
   FILE 15 — GALLERIES
   ========================================================================== */

/* gal-01 — CSS masonry grid gallery (native multi-column) */
.lib .gal-01 { columns: 4 200px; gap: 1rem; }
.lib .gal-01 .item { break-inside: avoid; margin-bottom: 1rem; position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; }
.lib .gal-01 .item img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.lib .gal-01 .item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 50%); opacity: 0; transition: opacity .35s; z-index: 1; }
.lib .gal-01 .item:hover img { transform: scale(1.06); }
.lib .gal-01 .item:hover::before { opacity: 1; }
.lib .gal-01 .item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.25rem; transform: translateY(8px); opacity: 0; transition: all .35s; z-index: 2; }
.lib .gal-01 .item:hover .caption { transform: translateY(0); opacity: 1; }
.lib .gal-01 .item .caption h6 { font-family: var(--lib-font-head); font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .15rem; }
.lib .gal-01 .item .caption span { font-size: .74rem; color: rgba(255, 255, 255, .6); }

/* gal-02 — Editorial alternating-row gallery */
.lib .gal-02 .row-item { display: grid; gap: .75rem; margin-bottom: .75rem; }
.lib .gal-02 .row-item:nth-child(1) { grid-template-columns: 1fr 1fr; }
.lib .gal-02 .row-item:nth-child(2) { grid-template-columns: 2fr 1fr; }
.lib .gal-02 .row-item:nth-child(3) { grid-template-columns: 1fr 2fr; }
.lib .gal-02 .frame { overflow: hidden; border-radius: 14px; position: relative; cursor: pointer; }
.lib .gal-02 .frame img { width: 100%; height: 280px; object-fit: cover; transition: transform .5s ease; }
.lib .gal-02 .frame:hover img { transform: scale(1.05); }
.lib .gal-02 .frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 20, .5), transparent 45%); pointer-events: none; }
.lib .gal-02 .frame .meta { position: absolute; bottom: 1rem; left: 1.25rem; z-index: 1; }
.lib .gal-02 .frame .meta .tag { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-bottom: .4rem; }
.lib .gal-02 .frame .meta h6 { font-family: var(--lib-font-head); font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.35; margin: 0; }

/* gal-03 — Polaroid card gallery, randomised tilt per card */
.lib .gal-03 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.lib .gal-03 .polaroid { background: #fff; padding: .85rem .85rem 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); transform: rotate(var(--r, 0deg)); transition: transform .35s ease, box-shadow .35s; cursor: pointer; }
.lib .gal-03 .polaroid:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
.lib .gal-03 .polaroid img { width: 100%; height: 200px; object-fit: cover; }
.lib .gal-03 .polaroid .p-label { padding: .6rem .2rem 0; font-family: var(--lib-font-head); font-size: .9rem; font-style: italic; color: #999; text-align: center; }

/* gal-04 — Bento mosaic gallery layout */
.lib .gal-04 { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: .75rem; }
.lib .gal-04 .cell { overflow: hidden; border-radius: 14px; position: relative; cursor: pointer; }
.lib .gal-04 .cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gal-04 .cell:hover img { transform: scale(1.07); }
.lib .gal-04 .cell::before { content: ''; position: absolute; inset: 0; background: rgba(15, 15, 20, 0); transition: background .35s; z-index: 1; }
.lib .gal-04 .cell:hover::before { background: rgba(15, 15, 20, .25); }
.lib .gal-04 .cell .over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; z-index: 2; }
.lib .gal-04 .cell:hover .over { opacity: 1; }
.lib .gal-04 .cell .over i { font-size: 1.6rem; color: #fff; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lib .gal-04 .c1 { grid-column: span 3; grid-row: span 2; }
.lib .gal-04 .c2 { grid-column: span 2; }
.lib .gal-04 .c3 { grid-column: span 1; }
.lib .gal-04 .c4 { grid-column: span 1; }
.lib .gal-04 .c5 { grid-column: span 2; }
.lib .gal-04 .c6 { grid-column: span 3; grid-row: span 2; }
.lib .gal-04 .c7 { grid-column: span 2; }
.lib .gal-04 .c8 { grid-column: span 1; }
.lib .gal-04 .c9 { grid-column: span 1; }
.lib .gal-04 .c10 { grid-column: span 2; }

/* gal-05 — Horizontal scroll film-strip gallery */
.lib .gal-05 { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 2rem 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lib .gal-05::-webkit-scrollbar { display: none; }
.lib .gal-05 .frame { flex: 0 0 300px; height: 220px; overflow: hidden; border-radius: 14px; scroll-snap-align: start; position: relative; cursor: pointer; }
.lib .gal-05 .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gal-05 .frame:hover img { transform: scale(1.08); }
.lib .gal-05 .frame .badge { position: absolute; bottom: .75rem; left: .85rem; background: rgba(15, 15, 20, .7); color: #fff; font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; backdrop-filter: blur(4px); z-index: 1; }

/* gal-06 — 3×3 lightbox grid gallery */
.lib .gal-06 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.lib .gal-06 .item { aspect-ratio: 1; overflow: hidden; position: relative; cursor: pointer; }
.lib .gal-06 .item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gal-06 .item:hover img { transform: scale(1.08); }
.lib .gal-06 .item::after { content: ''; position: absolute; inset: 0; background: rgba(15, 15, 20, 0); transition: background .35s; z-index: 1; }
.lib .gal-06 .item:hover::after { background: rgba(15, 15, 20, .35); }
.lib .gal-06 .item.more::after { background: rgba(15, 15, 20, .65); }
.lib .gal-06 .item .over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.lib .gal-06 .item.more .over span { font-family: var(--lib-font-head); font-size: 1.8rem; font-weight: 800; color: #fff; }

/* gal-07 — Dark cinematic portfolio gallery */
.lib .gal-07 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; position: relative; z-index: 1; }
.lib .gal-07 .item { border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 3/4; }
.lib .gal-07 .item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gal-07 .item:hover img { transform: scale(1.08); }
.lib .gal-07 .item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 20, .85), rgba(15, 15, 20, .1) 50%, transparent); z-index: 1; }
.lib .gal-07 .item .info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; z-index: 2; }
.lib .gal-07 .item .info .cat { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, .5); margin-bottom: .3rem; font-family: var(--lib-font-head); }
.lib .gal-07 .item .info h6 { font-family: var(--lib-font-head); font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.35; margin: 0; }
.lib .gal-07 .item .hover-btn { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; opacity: 0; transition: opacity .35s; z-index: 2; backdrop-filter: blur(4px); }
.lib .gal-07 .item:hover .hover-btn { opacity: 1; }

/* gal-08 — Featured image + thumbnail split gallery */
.lib .gal-08 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.lib .gal-08 .featured { border-radius: 18px; overflow: hidden; position: relative; cursor: pointer; min-height: 480px; }
.lib .gal-08 .featured img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lib .gal-08 .featured:hover img { transform: scale(1.04); }
.lib .gal-08 .featured::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 20, .75), transparent 50%); z-index: 1; }
.lib .gal-08 .featured .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 2; }
.lib .gal-08 .featured .meta .tag { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-bottom: .6rem; }
.lib .gal-08 .featured .meta h4 { font-family: var(--lib-font-head); font-size: 1.5rem; font-style: italic; color: #fff; letter-spacing: -.5px; margin-bottom: .35rem; }
.lib .gal-08 .featured .meta p { font-size: .82rem; color: rgba(255, 255, 255, .6); margin: 0; }
.lib .gal-08 .thumbs { display: flex; flex-direction: column; gap: 1rem; }
.lib .gal-08 .thumbs .thumb { border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; flex: 1; min-height: 120px; }
.lib .gal-08 .thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.lib .gal-08 .thumbs .thumb:hover img { transform: scale(1.07); }
.lib .gal-08 .thumbs .thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 20, .55), transparent 65%); z-index: 1; }
.lib .gal-08 .thumbs .thumb .tl { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); z-index: 2; }
.lib .gal-08 .thumbs .thumb .tl span { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .5); font-family: var(--lib-font-head); display: block; margin-bottom: .2rem; }
.lib .gal-08 .thumbs .thumb .tl h6 { font-family: var(--lib-font-head); font-size: .85rem; font-weight: 700; color: #fff; margin: 0; }

/* gal-09 — Pinterest-style masonry card grid */
.lib .gal-09 { columns: 3 220px; gap: 1rem; }
.lib .gal-09 .pin { break-inside: avoid; margin-bottom: 1rem; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 3px 14px rgba(0, 0, 0, .07); cursor: pointer; transition: transform .35s, box-shadow .35s; }
.lib .gal-09 .pin:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.lib .gal-09 .pin img { width: 100%; height: auto; display: block; }
.lib .gal-09 .pin .pin-body { padding: .85rem 1rem 1rem; }
.lib .gal-09 .pin .tag-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .45rem; }
.lib .gal-09 .pin .tag-row .pt { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 50px; font-family: var(--lib-font-head); }
.lib .gal-09 .pin .tag-row .pt.r { background: rgba(212, 65, 26, .08); color: var(--lib-accent); }
.lib .gal-09 .pin .tag-row .pt.b { background: rgba(26, 79, 255, .07); color: var(--lib-blue); }
.lib .gal-09 .pin .tag-row .pt.t { background: rgba(0, 180, 160, .07); color: var(--lib-teal); }
.lib .gal-09 .pin .tag-row .pt.p { background: rgba(124, 58, 237, .07); color: var(--lib-violet); }
.lib .gal-09 .pin h6 { font-family: var(--lib-font-head); font-size: .87rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .2rem; }
.lib .gal-09 .pin p { font-size: .78rem; color: #aaa; line-height: 1.5; margin: 0 0 .65rem; }
.lib .gal-09 .pin .pin-foot { display: flex; align-items: center; justify-content: space-between; }
.lib .gal-09 .pin .pin-foot .author { display: flex; align-items: center; gap: .4rem; }
.lib .gal-09 .pin .pin-foot .author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.lib .gal-09 .pin .pin-foot .author span { font-size: .74rem; color: #bbb; }
.lib .gal-09 .pin .pin-foot .likes { font-size: .74rem; color: #ccc; display: flex; align-items: center; gap: 3px; }

/* gal-10 — Hero slider gallery */
.lib .gal-10 { position: relative; overflow: hidden; border-radius: 20px; }
.lib .gal-10 .slides { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.lib .gal-10 .slide { flex: 0 0 100%; position: relative; height: 500px; }
.lib .gal-10 .slide img { width: 100%; height: 100%; object-fit: cover; }
.lib .gal-10 .slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 20, .75), rgba(15, 15, 20, .1) 60%, transparent); }
.lib .gal-10 .slide .content { position: absolute; top: 50%; left: 3rem; transform: translateY(-50%); max-width: 480px; }
.lib .gal-10 .slide .content .eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, .5); margin-bottom: .75rem; font-family: var(--lib-font-head); }
.lib .gal-10 .slide .content h3 { font-family: var(--lib-font-head); font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; font-style: italic; letter-spacing: -1px; line-height: 1.15; margin-bottom: .75rem; }
.lib .gal-10 .slide .content p { font-size: .9rem; color: rgba(255, 255, 255, .6); line-height: 1.7; margin: 0; }
.lib .gal-10 .nav-btns { position: absolute; bottom: 1.5rem; right: 1.5rem; display: flex; gap: .5rem; z-index: 3; }
.lib .gal-10 .nav-btns button { width: 44px; height: 44px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background .25s; }
.lib .gal-10 .nav-btns button:hover { background: rgba(255, 255, 255, .25); }
.lib .gal-10 .dots { position: absolute; bottom: 1.75rem; left: 3rem; display: flex; gap: .5rem; z-index: 3; }
.lib .gal-10 .dots .dot { width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background .25s, width .25s; }
.lib .gal-10 .dots .dot.active { background: #fff; width: 44px; }

/* gal-11 — Before / after image comparison slider */
.lib .gal-11 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.lib .gal-11 .side { border-radius: 18px; overflow: hidden; position: relative; }
.lib .gal-11 .side img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform .5s; }
.lib .gal-11 .side.mono img { filter: grayscale(1); }
.lib .gal-11 .side:hover img { transform: scale(1.04); }
.lib .gal-11 .side .badge { position: absolute; top: 1.25rem; left: 1.25rem; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); border-radius: 50px; padding: .4rem 1rem; font-family: var(--lib-font-head); font-size: .74rem; font-weight: 700; color: var(--lib-heading); }
.lib .gal-11 .side.mono .badge { background: rgba(15, 15, 20, .72); color: #fff; }


/* ==========================================================================
   FILE 16 — EVENTS
   ========================================================================== */

/* ev-01 — Event card grid with date badge + category pill */
.lib .ev-01 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.lib .ev-01 .card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; cursor: pointer; }
.lib .ev-01 .card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.lib .ev-01 .card .img-wrap { height: 180px; position: relative; overflow: hidden; }
.lib .ev-01 .card .img-wrap img { height: 100%; transition: transform .5s ease; }
.lib .ev-01 .card:hover .img-wrap img { transform: scale(1.06); }
.lib .ev-01 .card .img-wrap .date-badge { position: absolute; top: 1rem; left: 1rem; background: #fff; border-radius: 10px; padding: .4rem .7rem; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.lib .ev-01 .card .img-wrap .date-badge .d { font-family: var(--lib-font-head); font-size: 1.2rem; font-weight: 800; color: var(--lib-heading); line-height: 1; }
.lib .ev-01 .card .img-wrap .date-badge .m { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #aaa; font-family: var(--lib-font-head); }
.lib .ev-01 .card .img-wrap .cat-badge { position: absolute; top: 1rem; right: 1rem; background: var(--lib-accent); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; font-family: var(--lib-font-head); }
.lib .ev-01 .card .body { padding: 1.5rem; }
.lib .ev-01 .card .body .status { display: flex; align-items: center; margin-bottom: .65rem; }
.lib .ev-01 .card .body h5 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; line-height: 1.35; }
.lib .ev-01 .card .body .meta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.lib .ev-01 .card .body .meta-row .m { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: #aaa; }
.lib .ev-01 .card .body .meta-row .m i { font-size: .85rem; }
.lib .ev-01 .card .body .foot { display: flex; align-items: center; justify-content: space-between; }
.lib .ev-01 .card .body .foot .price { font-family: var(--lib-font-head); font-size: 1.3rem; font-style: italic; color: var(--lib-heading); }
.lib .ev-01 .card .body .foot .price small { font-size: .8rem; font-style: normal; color: #bbb; font-family: var(--lib-font); }
.lib .ev-01 .card .body .foot .btn { padding: .5rem 1.25rem; background: var(--lib-heading); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font-head); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .3s; }
.lib .ev-01 .card .body .foot .btn:hover { background: var(--lib-accent); }

/* ev-02 — Horizontal event timeline */
.lib .ev-02 { position: relative; padding: 2rem 0; }
.lib .ev-02::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--lib-border) 5%, var(--lib-border) 95%, transparent); z-index: 0; }
.lib .ev-02 .track { display: flex; gap: 0; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; }
.lib .ev-02 .track::-webkit-scrollbar { display: none; }
.lib .ev-02 .stop { flex: 0 0 200px; text-align: center; position: relative; z-index: 1; }
.lib .ev-02 .stop .dot-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.lib .ev-02 .stop .node { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--lib-border); background: #fff; transition: all .35s; }
.lib .ev-02 .stop.active .node { background: var(--lib-accent); border-color: var(--lib-accent); box-shadow: 0 0 0 4px rgba(212, 65, 26, .2); }
.lib .ev-02 .stop.past .node { background: var(--lib-heading); border-color: var(--lib-heading); }
.lib .ev-02 .stop .card { background: #fff; border-radius: 14px; padding: 1rem 1.25rem; margin: 0 .5rem; box-shadow: 0 3px 14px rgba(0, 0, 0, .07); border: 1px solid var(--lib-border); }
.lib .ev-02 .stop.active .card { border-color: var(--lib-accent); box-shadow: 0 4px 20px rgba(212, 65, 26, .15); }
.lib .ev-02 .stop .card .date { font-family: var(--lib-font-head); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #bbb; margin-bottom: .3rem; }
.lib .ev-02 .stop .card h6 { font-family: var(--lib-font-head); font-size: .85rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .25rem; }
.lib .ev-02 .stop .card .loc { font-size: .76rem; color: #aaa; display: flex; align-items: center; justify-content: center; gap: 3px; }

/* ev-03 — Magazine-style event hero + sidebar list */
.lib .ev-03 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; }
.lib .ev-03 .hero-ev { border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; min-height: 460px; }
.lib .ev-03 .hero-ev img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lib .ev-03 .hero-ev:hover img { transform: scale(1.04); }
.lib .ev-03 .hero-ev::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 20, .88) 0%, rgba(15, 15, 20, .2) 50%, transparent); }
.lib .ev-03 .hero-ev .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.lib .ev-03 .hero-ev .meta .type { display: inline-block; background: var(--lib-accent); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-bottom: .85rem; }
.lib .ev-03 .hero-ev .meta .date { font-size: .8rem; color: rgba(255, 255, 255, .55); margin-bottom: .5rem; font-family: var(--lib-font-head); }
.lib .ev-03 .hero-ev .meta h3 { font-family: var(--lib-font-head); font-size: clamp(1.5rem, 3vw, 2.2rem); font-style: italic; color: #fff; letter-spacing: -.5px; margin-bottom: .5rem; }
.lib .ev-03 .hero-ev .meta .loc { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.lib .ev-03 .hero-ev .meta .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.lib .ev-03 .hero-ev .meta .price { font-family: var(--lib-font-head); font-size: 1.6rem; font-style: italic; color: #fff; }
.lib .ev-03 .hero-ev .meta .btn-ticket { padding: .55rem 1.5rem; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 50px; font-family: var(--lib-font-head); font-weight: 700; font-size: .82rem; cursor: pointer; backdrop-filter: blur(6px); transition: all .3s; }
.lib .ev-03 .hero-ev .meta .btn-ticket:hover { background: rgba(255, 255, 255, .25); }
.lib .ev-03 .list-ev { display: flex; flex-direction: column; gap: 1rem; }
.lib .ev-03 .list-ev .ev-row { background: #fff; border-radius: 14px; padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; cursor: pointer; border: 1px solid var(--lib-border); transition: all .3s; }
.lib .ev-03 .list-ev .ev-row:hover { border-color: var(--lib-accent); box-shadow: 0 4px 20px rgba(212, 65, 26, .1); }
.lib .ev-03 .list-ev .ev-row .date-col { flex-shrink: 0; width: 52px; text-align: center; background: var(--lib-hairline); border-radius: 10px; padding: .5rem .25rem; }
.lib .ev-03 .list-ev .ev-row .date-col .d { font-family: var(--lib-font-head); font-size: 1.35rem; font-weight: 800; color: var(--lib-heading); line-height: 1; }
.lib .ev-03 .list-ev .ev-row .date-col .m { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #aaa; font-family: var(--lib-font-head); }
.lib .ev-03 .list-ev .ev-row .info h6 { font-family: var(--lib-font-head); font-size: .9rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .3rem; }
.lib .ev-03 .list-ev .ev-row .info .meta { font-size: .78rem; color: #aaa; display: flex; gap: .75rem; flex-wrap: wrap; }
.lib .ev-03 .list-ev .ev-row .info .meta span { display: flex; align-items: center; gap: 3px; }
.lib .ev-03 .list-ev .ev-row .price-badge { margin-left: auto; font-family: var(--lib-font-head); font-size: 1.1rem; font-style: italic; color: var(--lib-heading); white-space: nowrap; flex-shrink: 0; }

/* ev-04 — Calendar widget + upcoming events list */
.lib .ev-04 { background: #fff; border-radius: 24px; padding: 2rem; box-shadow: 0 6px 28px rgba(0, 0, 0, .07); }
.lib .ev-04 .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.lib .ev-04 .cal-head h4 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); }
.lib .ev-04 .cal-head .nav-btns { display: flex; gap: .5rem; }
.lib .ev-04 .cal-head .nav-btns button { width: 32px; height: 32px; background: var(--lib-hairline); border: none; border-radius: 8px; cursor: pointer; font-size: .9rem; color: #888; transition: all .25s; }
.lib .ev-04 .cal-head .nav-btns button:hover { background: var(--lib-heading); color: #fff; }
.lib .ev-04 .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-bottom: .5rem; }
.lib .ev-04 .weekdays div { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #bbb; padding: .35rem 0; font-family: var(--lib-font-head); }
.lib .ev-04 .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.lib .ev-04 .days .day { aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: all .25s; font-size: .85rem; font-weight: 500; color: #888; }
.lib .ev-04 .days .day:hover { background: var(--lib-hairline); }
.lib .ev-04 .days .day.other { color: #ddd; }
.lib .ev-04 .days .day.today { background: var(--lib-heading); color: #fff; font-weight: 700; }
.lib .ev-04 .days .day.has-event::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--lib-accent); }
.lib .ev-04 .days .day.today.has-event::after { background: #fff; }
.lib .ev-04 .days .day.event-day { background: rgba(212, 65, 26, .08); color: var(--lib-accent); font-weight: 700; }
.lib .ev-04 .upcoming { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lib-border); }
.lib .ev-04 .upcoming h5 { font-family: var(--lib-font-head); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #bbb; margin-bottom: 1rem; }
.lib .ev-04 .upcoming .ev-mini { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--lib-border); }
.lib .ev-04 .upcoming .ev-mini:last-child { border-bottom: none; }
.lib .ev-04 .upcoming .ev-mini .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lib .ev-04 .upcoming .ev-mini .dot.r { background: var(--lib-accent); }
.lib .ev-04 .upcoming .ev-mini .dot.b { background: var(--lib-blue); }
.lib .ev-04 .upcoming .ev-mini .dot.t { background: var(--lib-teal); }
.lib .ev-04 .upcoming .ev-mini .inf h6 { font-family: var(--lib-font-head); font-size: .82rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .1rem; }
.lib .ev-04 .upcoming .ev-mini .inf span { font-size: .74rem; color: #aaa; }
.lib .ev-04 .upcoming .ev-mini .time { margin-left: auto; font-size: .74rem; font-weight: 600; color: #aaa; white-space: nowrap; }

/* ev-05 — Ticket-style event cards */
.lib .ev-05 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.lib .ev-05 .ticket { display: flex; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .07); transition: transform .35s, box-shadow .35s; cursor: pointer; }
.lib .ev-05 .ticket:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, .1); }
.lib .ev-05 .ticket .stub { width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 1rem .5rem; }
.lib .ev-05 .ticket .stub::after { content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, transparent, transparent 6px, rgba(0, 0, 0, .06) 6px, rgba(0, 0, 0, .06) 10px); }
.lib .ev-05 .ticket .stub .d { font-family: var(--lib-font-head); font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; }
.lib .ev-05 .ticket .stub .m { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .7); font-family: var(--lib-font-head); }
.lib .ev-05 .ticket .stub .yr { font-size: .6rem; color: rgba(255, 255, 255, .5); font-family: var(--lib-font-head); }
.lib .ev-05 .ticket.t-red .stub { background: var(--lib-accent); }
.lib .ev-05 .ticket.t-blue .stub { background: var(--lib-blue); }
.lib .ev-05 .ticket.t-teal .stub { background: var(--lib-teal); }
.lib .ev-05 .ticket.t-purple .stub { background: var(--lib-violet); }
.lib .ev-05 .ticket.t-ink .stub { background: var(--lib-heading); }
.lib .ev-05 .ticket .body { flex: 1; padding: 1.25rem; }
.lib .ev-05 .ticket .body .type { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #bbb; margin-bottom: .4rem; font-family: var(--lib-font-head); }
.lib .ev-05 .ticket .body h5 { font-family: var(--lib-font-head); font-size: .95rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .5rem; line-height: 1.3; }
.lib .ev-05 .ticket .body .meta { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.lib .ev-05 .ticket .body .meta span { font-size: .78rem; color: #aaa; display: flex; align-items: center; gap: 5px; }
.lib .ev-05 .ticket .body .foot { display: flex; align-items: center; justify-content: space-between; }
.lib .ev-05 .ticket .body .foot .price { font-family: var(--lib-font-head); font-size: 1.15rem; font-style: italic; color: var(--lib-heading); }
.lib .ev-05 .ticket .body .foot .seats { font-size: .72rem; color: #bbb; background: var(--lib-hairline); padding: 3px 10px; border-radius: 50px; font-family: var(--lib-font-head); }

/* ev-06/ev-07 — Full-width event list with dividers */
.lib .ev-06 .ev-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 2rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--lib-border); transition: background .25s; }
.lib .ev-06 .ev-item:first-child { border-top: 1px solid var(--lib-border); }
.lib .ev-06 .ev-item:hover { padding-left: .75rem; margin-left: -.75rem; }
.lib .ev-06 .ev-item .date-block { text-align: center; }
.lib .ev-06 .ev-item .date-block .d { font-family: var(--lib-font-head); font-size: 2.5rem; font-weight: 700; color: var(--lib-heading); line-height: 1; }
.lib .ev-06 .ev-item .date-block .md { font-family: var(--lib-font-head); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #bbb; }
.lib .ev-06 .ev-item .info .type-tag { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 2px 10px; border-radius: 50px; margin-bottom: .5rem; font-family: var(--lib-font-head); }
.lib .ev-06 .ev-item .info .type-tag.conf { background: rgba(212, 65, 26, .08); color: var(--lib-accent); }
.lib .ev-06 .ev-item .info .type-tag.meet { background: rgba(26, 79, 255, .07); color: var(--lib-blue); }
.lib .ev-06 .ev-item .info .type-tag.ws { background: rgba(0, 180, 160, .07); color: var(--lib-teal); }
.lib .ev-06 .ev-item .info .type-tag.online { background: rgba(124, 58, 237, .07); color: var(--lib-violet); }
.lib .ev-06 .ev-item .info h5 { font-family: var(--lib-font-head); font-size: 1rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .4rem; }
.lib .ev-06 .ev-item .info .meta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.lib .ev-06 .ev-item .info .meta-row span { font-size: .8rem; color: #aaa; display: flex; align-items: center; gap: 4px; }
.lib .ev-06 .ev-item .action { text-align: right; flex-shrink: 0; }
.lib .ev-06 .ev-item .action .price { font-family: var(--lib-font-head); font-size: 1.4rem; font-style: italic; color: var(--lib-heading); display: block; margin-bottom: .4rem; }
.lib .ev-06 .ev-item .action .btn { padding: .5rem 1.5rem; background: var(--lib-heading); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font-head); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .3s; }
.lib .ev-06 .ev-item .action .btn:hover { background: var(--lib-accent); }
.lib .ev-07 { background: var(--lib-heading); padding: 5rem 3rem; position: relative; overflow: hidden; }
.lib .ev-07::before { content: ''; position: absolute; top: -100px; right: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(212, 65, 26, .2), transparent 65%); }
.lib .ev-07::after { content: ''; position: absolute; bottom: -60px; left: -40px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(26, 79, 255, .15), transparent 65%); }
.lib .ev-07 .inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lib .ev-07 .left .conf-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(255, 255, 255, .4); margin-bottom: 1.25rem; font-family: var(--lib-font-head); }
.lib .ev-07 .left h2 { font-family: var(--lib-font-head); font-size: clamp(2rem, 4.5vw, 3.5rem); color: #fff; font-style: italic; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: .75rem; }
.lib .ev-07 .left .date-loc { display: flex; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lib .ev-07 .left .date-loc .dl { font-size: .88rem; color: rgba(255, 255, 255, .5); display: flex; align-items: center; gap: 5px; }
.lib .ev-07 .left .date-loc .dl i { color: rgba(255, 255, 255, .3); }
.lib .ev-07 .left .speakers { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.lib .ev-07 .left .speakers .av-stack { display: flex; }
.lib .ev-07 .left .speakers .av-stack img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .1); margin-left: -8px; object-fit: cover; }
.lib .ev-07 .left .speakers .av-stack img:first-child { margin-left: 0; }
.lib .ev-07 .left .speakers .sp-text { font-size: .82rem; color: rgba(255, 255, 255, .4); }
.lib .ev-07 .left .speakers .sp-text strong { color: rgba(255, 255, 255, .75); }
.lib .ev-07 .left .btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.lib .ev-07 .left .btn-main { padding: .85rem 2.25rem; background: var(--lib-accent); color: #fff; border: none; border-radius: 50px; font-family: var(--lib-font-head); font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 6px 20px rgba(212, 65, 26, .35); transition: all .3s; }
.lib .ev-07 .left .btn-main:hover { background: #b83515; }
.lib .ev-07 .left .btn-ghost { padding: .85rem 2.25rem; background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50px; font-family: var(--lib-font-head); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .3s; }
.lib .ev-07 .left .btn-ghost:hover { background: rgba(255, 255, 255, .13); }
.lib .ev-07 .right .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lib .ev-07 .right .stat-box { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 1.5rem; text-align: center; }
.lib .ev-07 .right .stat-box .val { font-family: var(--lib-font-head); font-size: 2.2rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: .3rem; }
.lib .ev-07 .right .stat-box .lbl { font-size: .74rem; color: rgba(255, 255, 255, .35); text-transform: uppercase; letter-spacing: 1px; font-family: var(--lib-font-head); }
.lib .ev-07 .right .countdown { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; padding: 1.5rem; margin-top: 1rem; }
.lib .ev-07 .right .countdown .cd-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, .3); margin-bottom: 1rem; font-family: var(--lib-font-head); }
.lib .ev-07 .right .countdown .cd-row { display: flex; gap: .75rem; }
.lib .ev-07 .right .countdown .cd-box { flex: 1; text-align: center; }
.lib .ev-07 .right .countdown .cd-box .n { font-family: var(--lib-font-head); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.lib .ev-07 .right .countdown .cd-box .l { font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .3); font-family: var(--lib-font-head); }

/* ev-08/ev-09 — Filterable event grid with category tabs */
.lib .ev-08 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.lib .ev-08 h3 { font-family: var(--lib-font-head); font-size: 1.75rem; color: var(--lib-heading); font-style: italic; margin: 0; }
.lib .ev-09 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.lib .ev-09 .card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--lib-border); cursor: pointer; transition: all .35s; }
.lib .ev-09 .card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, .1); }
.lib .ev-09 .card .img { height: 160px; overflow: hidden; position: relative; }
.lib .ev-09 .card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lib .ev-09 .card:hover .img img { transform: scale(1.06); }
.lib .ev-09 .card .img .cb { position: absolute; top: .75rem; left: .75rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 50px; font-family: var(--lib-font-head); }
.lib .ev-09 .card .img .cb.conf { background: var(--lib-accent); color: #fff; }
.lib .ev-09 .card .img .cb.ws { background: var(--lib-blue); color: #fff; }
.lib .ev-09 .card .img .cb.net { background: var(--lib-teal); color: #fff; }
.lib .ev-09 .card .img .cb.online { background: var(--lib-violet); color: #fff; }
.lib .ev-09 .card .info { padding: 1.25rem; }
.lib .ev-09 .card .info h6 { font-family: var(--lib-font-head); font-size: .92rem; font-weight: 700; color: var(--lib-heading); margin-bottom: .4rem; line-height: 1.35; }
.lib .ev-09 .card .info .meta { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: .85rem; }
.lib .ev-09 .card .info .meta span { font-size: .76rem; color: #aaa; display: flex; align-items: center; gap: 3px; }
.lib .ev-09 .card .info .foot { display: flex; align-items: center; justify-content: space-between; }
.lib .ev-09 .card .info .foot .price { font-family: var(--lib-font-head); font-size: 1.1rem; font-style: italic; color: var(--lib-heading); }
.lib .ev-09 .card .info .foot .seats-badge { font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; background: var(--lib-hairline); color: #888; font-family: var(--lib-font-head); }