@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design System Variables & Reset
   Modern SaaS & Creative Library aesthetic: crisp white surfaces, vibrant
   purple primary (#6c5ce7), clean pastel accents, soft rounded corners,
   hairline borders, and diffuse soft elevation.
   ========================================================================== */
:root {
    --primary-main: #6c5ce7;
    --primary-light: #8c7ae6;
    --primary-dark: #5849be;
    --primary-bg: #f3eeff;
    --primary-gradient: linear-gradient(135deg, #6c5ce7 0%, #8c7ae6 100%);

    --accent-cyan: #00cec9;
    --accent-cyan-light: #e0fbfb;
    --accent-emerald: #00b894;
    --accent-emerald-light: #e6faf5;
    --accent-coral: #ff7675;
    --accent-amber: #feca57;
    --accent-sky: #0984e3;
    --accent-purple: #a29bfe;

    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-disabled: #94a3b8;

    --bg-default: #ffffff;
    --bg-light: #f8fafc;
    --bg-subtle: #f1f5f9;
    --border-color: rgba(15, 23, 42, 0.08);
    --border-color-strong: rgba(15, 23, 42, 0.14);

    /* Soft, generous radius scale — rounded everywhere, pills for actions */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --border-radius: 14px;
    --border-radius-pill: 9999px;

    /* Extremely soft elevation — diffuse shadows with low alpha */
    --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
    --shadow-purple: 0 6px 20px rgba(108, 92, 231, 0.32);

    --transition-standard: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Consistent vertical rhythm */
    --section-padding-y: 72px;
    --section-padding-y-md: 60px;
    --section-padding-y-sm: 48px;

    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--text-primary);
    background-color: var(--bg-default);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
.text-primary {
    color: var(--primary-main);
}

.bg-light {
    background-color: var(--bg-light);
}

/* ==========================================================================
   Buttons & Chips — pill-shaped, soft elevation
   ========================================================================== */
.btn {
    color: white;
    font-size: 14px;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 600;
    padding-top: 10px;
    white-space: nowrap;
    padding-left: 22px;
    border-radius: var(--border-radius-pill);
    padding-right: 22px;
    padding-bottom: 10px;
    text-transform: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-standard);
}

.btn-contained {
    background-color: var(--primary-main);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.28);
}

.btn-contained:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.38);
    color: #ffffff;
}

.btn-contained:active {
    transform: translateY(0);
}

.btn-outlined {
    color: var(--text-primary);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: var(--shadow-xs);
}

.btn-outlined:hover {
    background-color: var(--bg-light);
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-text,
.btn-ghost {
    color: var(--text-primary);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}

.btn-text:hover,
.btn-ghost:hover {
    color: var(--primary-main);
    background-color: rgba(108, 92, 231, 0.08);
}

.btn-large {
    padding: 13px 28px;
    font-size: 0.9375rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-bg);
    color: var(--primary-main);
    padding: 6px 16px;
    border-radius: var(--border-radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid rgba(108, 92, 231, 0.15);
}

.chip-label {
    font-weight: 700;
    margin-right: 6px;
}

/* ==========================================================================
   Header / Navbar
   ========================================================================== */
.app-bar {
    position: sticky;
    top: 0;
    z-index: 1100;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    height: 76px;
    display: flex;
    align-items: center;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /* Spans the full bar height, so dropdown panels anchored at `top: 100%`
       end up exactly on the navbar's bottom edge. */
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    width: 160px;
    height: auto;
    flex-shrink: 0;
    text-decoration: none;
}

.logo img {
    width: 100%;
    display: block;
}

/* --- Mobile toggle button --- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: var(--transition-standard);
}

.nav-toggle:hover {
    background: var(--bg-light);
}

.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    margin: 0 auto;
    transition: var(--transition-standard);
}

/* --- Nav links --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    /* Full height so .nav-item can stretch to the bar's edges (see below) */
    height: 100%;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: var(--transition-standard);
    display: inline-flex;
    align-items: center;
    position: relative;
    gap: 4px;
}

.nav-link:hover,
.nav-link.nav-link-active,
.nav-link.active {
    color: var(--primary-main);
    font-weight: 600;
}

.nav-link.nav-link-active::after,
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2.5px;
    background-color: var(--primary-main);
    border-radius: 999px;
}

/* Leading icon on each primary nav link — decorative (aria-hidden in the
   markup, the link text carries the name), so it just tracks the link's
   own colour state. */
.nav-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: var(--transition-standard);
}

.nav-link:hover .nav-link-icon,
.nav-link.nav-link-active .nav-link-icon,
.nav-link.active .nav-link-icon,
.nav-item.is-open .nav-link-icon {
    color: var(--primary-main);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* --- Navbar search field --- */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.nav-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
    flex-shrink: 0;
}

.nav-search input {
    width: 250px;
    height: 40px;
    padding: 0 16px 0 38px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-light);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--border-radius-pill);
    transition: var(--transition-standard);
}

.nav-search input::placeholder {
    color: var(--text-secondary);
}

.nav-search input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--primary-main);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
    width: 275px;
}

/* --- Auth buttons (Login / Sign up) --- */
.nav-actions-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-btn-login {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: var(--border-radius-pill);
    transition: var(--transition-standard);
}

.nav-btn-login:hover {
    color: var(--primary-main);
    background-color: rgba(108, 92, 231, 0.06);
}

.nav-btn-signup {
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Keep the bar controls (buttons, theme toggle, burger) on the same 40px line */
.nav-actions .btn,
.nav-mobile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    white-space: nowrap;
}

/* --- Collapsed (tablet / mobile) actions, rendered inside the burger dropdown --- */
.nav-mobile-actions {
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
}

.nav-mobile-actions .nav-search,
.nav-mobile-actions .nav-search input,
.nav-mobile-actions .btn {
    width: 100%;
}

/* ==========================================================================
   Mega Menu (click-to-open dropdown, wider, cleaner)
   ========================================================================== */
.nav-item {
    /* Full bar height: the trigger stays centred like the other links and the
       panel measured against this item (admin bar) also lands on the bar's
       bottom edge. No position here on purpose — the public .mega-menu child is
       positioned absolutely against .navbar-container. */
    display: flex;
    align-items: center;
    height: 100%;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The caret rotation is scoped to the triangle glyph: a broader
   `.dropdown-trigger svg` rule would also shrink and spin the leading
   .nav-link-icon inside the trigger. */
.dropdown-trigger .si-glyph-triangle-down {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    width: 8px;
    height: 8px;
}

.nav-item.is-open .dropdown-trigger .si-glyph-triangle-down {
    transform: rotate(180deg);
}

.nav-item:hover .nav-link,
.nav-item.is-open .nav-link {
    color: var(--primary-main);
}

.mega-menu {
    /* Hangs from the bottom edge of the navbar: .navbar-container spans the full
       bar height, and the +1px clears the bar's bottom border.
       left/right 0 keep it aligned with the centered 1140px container. */
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    transform: translateY(8px);
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    z-index: 1200;
}

.nav-item.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.mega-menu-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 14px;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-item:hover,
.mega-item:focus-visible {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    transform: translateY(-1px);
}

.mega-item-icon {
    border-radius: 6px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-item:hover .mega-item-icon {
    transform: scale(1.08);
}

.mega-item-icon svg {
    width: 18px;
    height: 18px;
}

/* Icon Color Themes — light-mode inks (darker shades for the white surface) */
.icon-color-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #7c3aed;
}

.icon-color-amber {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.icon-color-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.icon-color-orange {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.icon-color-rose {
    background: rgba(244, 63, 94, 0.15);
    color: #e11d48;
}

.icon-color-teal {
    background: rgba(20, 184, 166, 0.15);
    color: #0d9488;
}

.icon-color-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

.icon-color-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.icon-color-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.mega-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mega-item-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.mega-item-desc {
    font-size: 0.73rem;
    color: var(--text-secondary);
    line-height: 1.35;
    font-weight: 400;
}

.mega-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mega-menu-cta {
    color: var(--primary-main);
    font-weight: 600;
    text-decoration: none;
}

.mega-menu-cta:hover {
    color: var(--primary-dark);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    padding: 96px 0 0px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-svg {
    position: absolute;
    top: -5%;
    right: -5%;
    width: 62%;
    min-width: 560px;
    height: auto;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 78% 18%, #000 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 65% at 78% 18%, #000 0%, #000 35%, transparent 78%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.hero-glow-top {
    top: -160px;
    right: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at center, var(--primary-light) 0%, var(--primary-main) 55%, transparent 75%);
    opacity: 0.28;
}

.hero-glow-bottom {
    bottom: -180px;
    right: 6%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at center, #ffb199 0%, #ff8a65 50%, transparent 75%);
    opacity: 0.22;
}

.hero-fade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 30% 40%, var(--bg-default) 0%, rgba(255, 255, 255, 0.85) 35%, transparent 68%),
        linear-gradient(180deg, transparent 55%, var(--bg-default) 96%);
}

.hero-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    max-width: 1000px;
    margin-bottom: 24px;
    line-height: 1.05;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 670px;
    margin-bottom: 36px;
    line-height: 1.6;
    text-wrap: balance;
}

.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.hero-search {
    position: relative;
    display: flex;
    width: min(620px, 100%);
    align-items: center;
    margin: 0px auto 18px;
    padding: 6px;
    padding-right: 10px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-md);
}

.hero-search-icon {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.hero-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 12px 8px;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
}

.hero-search input::placeholder {
    color: var(--text-disabled);
}

.hero-search:focus-within {
    border-color: var(--primary-main);
    box-shadow: 0 0 0 4px rgba(133, 107, 174, 0.18), var(--shadow-md);
}

.hero-search-button {
    border: 0;
    cursor: pointer;
    padding: 11px 20px;
}

/* Hero Code Showcase Card */
.hero-showcase-card {
    width: 100%;
    max-width: 900px;
    background: #ffffff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    text-align: left;
}

.showcase-header {
    background: var(--bg-light);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red {
    background-color: #ff5f56;
}

.dot.yellow {
    background-color: #ffbd2e;
}

.dot.green {
    background-color: #27c93f;
}

.showcase-title {
    margin-left: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.showcase-grid {
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.icon-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-light);
    padding: 24px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: var(--transition-standard);
}

.icon-preview-box:hover {
    border-color: var(--border-color);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.saas-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-main);
    background: var(--primary-bg);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.saas-icon-wrap lottie-player {
    width: 24px;
    height: 24px;
}

.icon-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ==========================================================================
   Section shared styles
   ========================================================================== */
.section {
    padding: var(--section-padding-y) 0;
    position: relative;
    overflow: hidden;
}

.section-accent {
    position: absolute;
    top: -120px;
    left: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--primary-light) 0%, var(--primary-main) 55%, transparent 75%);
    filter: blur(100px);
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.section-accent-alt {
    left: auto;
    top: auto;
    right: -120px;
    bottom: -140px;
    background: radial-gradient(circle at center, #ffb199 0%, #ff8a65 50%, transparent 75%);
    opacity: 0.1;
}

.section>.container {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   Build Visually Section
   ========================================================================== */
.build-section {
    background-color: var(--bg-default);
}

.build-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

/* Left: simple image */
.build-visual {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    aspect-ratio: 4 / 3;
}

.build-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-standard);
}

.build-visual:hover .build-image {
    transform: scale(1.03);
}

/* Right: copy + feature list */
.build-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eyebrow {
    color: var(--primary-main);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.build-title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    text-wrap: balance;
}

.build-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.build-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-standard);
}

.build-feature:hover {
    background: var(--bg-light);
}

.build-feature .feature-arrow {
    font-size: 0.65rem;
    color: var(--text-disabled);
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.build-feature .feature-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.build-feature .feature-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.build-feature .feature-desc {
    display: none;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.build-feature-active {
    align-items: flex-start;
    background: var(--bg-light);
    border-color: var(--border-color);
    padding: 20px;
}

.build-feature-active:hover {
    background: var(--bg-light);
}

.build-feature-active .feature-arrow {
    color: var(--primary-main);
    margin-top: 3px;
}

.build-feature-active .feature-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.build-feature-active .feature-desc {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ========================================================================
   Categories, About & FAQ Sections
   ======================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.category-card {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    color: inherit;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: var(--transition-standard);
}

.category-card:hover,
.category-card:focus-visible {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.category-number {
    color: var(--primary-main);
    font-size: 0.75rem;
    font-weight: 700;
}

.category-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.category-description,
.about-text,
.faq-item p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.category-link {
    margin-top: auto;
    color: var(--primary-main);
    font-size: 0.875rem;
    font-weight: 600;
}

.about-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.about-content .section-title {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 2rem;
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--border-color);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding-right: 32px;
    position: relative;
    font-size: 1rem;
    font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--primary-main);
    font-size: 1.25rem;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item p {
    max-width: 700px;
    margin-top: 12px;
}

/* ==========================================================================
   Features Section
   ========================================================================== */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.mui-card {
    background: #ffffff;
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-standard);
}

.mui-card:hover {
    border-color: var(--border-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    color: var(--primary-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-meta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-disabled);
    margin: 0 0 10px;
}

.card-meta time {
    white-space: nowrap;
}

.card-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   Icon Gallery Section — Toolbar (search + filters)
   ========================================================================== */
.icons-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.icons-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 400px;
}

.icons-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none;
}

.icons-search input {
    width: 100%;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    padding: 12px 16px 12px 40px;
    outline: none;
    transition: var(--transition-standard);
}

.icons-search input:focus {
    border-color: var(--primary-main);
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.18);
}

.icons-search input::placeholder {
    color: var(--text-disabled);
}

.icons-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-btn {
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: var(--transition-standard);
    white-space: nowrap;
}

.filter-btn:hover {
    color: var(--primary-main);
    border-color: var(--primary-light);
    background: var(--bg-light);
}

.filter-btn.active {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Icon Gallery Grid — more columns & rows
   ========================================================================== */
.icons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.icon-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    aspect-ratio: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.icon-card:hover {
    border-color: rgba(108, 92, 231, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.icon-stage {
    width: 58px;
    height: 58px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-main);
    margin-bottom: 8px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition: var(--transition-standard);
}

.icon-card:hover .icon-stage {
    background: var(--primary-bg);
    transform: scale(1.05);
}

.icon-stage lottie-player {
    width: 28px;
    height: 28px;
}

.icon-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.icon-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-light);
    padding: 2px 10px;
    border-radius: var(--border-radius-pill);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.icons-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* ==========================================================================
   Asset Explorer — catalog layout (sidebar + heading + compact tools + grid)
   ========================================================================== */
.explorer-page {
    background: var(--bg-default);
    border-top: 1px solid var(--border-color);
}

.explorer-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 72px);
}

/* Explorer filter toggle + backdrop — desktop hidden, mobile drawer trigger. */
.explorer-filters-toggle {
    display: none;
}

.explorer-sidebar-backdrop {
    display: none;
}

.explorer-sidebar {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    padding: 20px 14px 40px;
}

.explorer-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 20px 32px 64px;
}

/* --- Sidebar filter groups --- */
.filter-group {
    padding: 8px 0 18px;
}

.filter-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-disabled);
    margin: 0 8px 8px;
}

.filter-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-standard);
}

.filter-option::before {
    display: none;
}

.filter-option.is-active,
.filter-option:has(input:checked) {
    color: var(--text-primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--primary-main) 22%, #ffffff);
}

.filter-option.is-active::before,
.filter-option:has(input:checked)::before {
    display: none;
}

.filter-group-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-standard);
}

.filter-option:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}

/* Custom checkbox indicator (the real input stays in the DOM for auto-submit) */
.filter-option::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-default);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    transition: var(--transition-standard);
}

.filter-option:hover::before {
    border-color: var(--text-secondary);
}

.filter-option.is-active,
.filter-option:has(input:checked) {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--primary-bg);
}

.filter-option.is-active::before,
.filter-option:has(input:checked)::before {
    background-color: var(--primary-main);
    border-color: var(--primary-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5 L7.5 13 L14 5.5' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.filter-option:has(input:focus-visible) {
    outline: 2px solid var(--primary-light);
    outline-offset: 1px;
}

.filter-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.filter-option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-option-count {
    font-size: 0.75rem;
    color: var(--text-disabled);
    font-variant-numeric: tabular-nums;
}

.filter-empty {
    padding: 4px 8px;
    font-size: 0.8125rem;
    color: var(--text-disabled);
}

/* --- Explorer chrome, heading, compact tools --- */
.explorer-chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 28px;
    min-width: 0;
}

.explorer-type-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.explorer-type-tabs::-webkit-scrollbar {
    display: none;
}

.explorer-type-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.explorer-type-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.explorer-type-tab.is-active,
.explorer-type-tab:has(input:checked) {
    color: var(--text-primary);
    background: var(--bg-default);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.explorer-search {
    flex: 1 1 220px;
    max-width: 420px;
}

.explorer-chrome-filters {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.explorer-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
    min-width: 0;
}

.explorer-heading-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.explorer-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 10px;
}

.explorer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.explorer-lede {
    margin: 0;
    max-width: 52rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.explorer-heading-side {
    flex-shrink: 0;
    padding-top: 6px;
}

.explorer-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
    padding: 14px 0 18px;
    margin-bottom: 8px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    min-width: 0;
}

.explorer-topbar>.explorer-tool {
    flex: 0 1 auto;
    min-width: 0;
}

.explorer-tool {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.explorer-search {
    flex: 1 1 240px;
    max-width: 420px;
}

.explorer-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explorer-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.explorer-select {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    background-color: var(--bg-default);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 L8 10.5 L12.5 6' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 10px 32px 10px 12px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: var(--transition-standard);
}

.explorer-select:hover {
    border-color: var(--text-secondary);
}

.explorer-select:focus {
    outline: none;
    border-color: var(--primary-main);
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.18);
}

/* Free-only switch */
.explorer-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    cursor: pointer;
    user-select: none;
}

.explorer-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.explorer-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: var(--transition-standard);
}

.explorer-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-disabled);
    transition: var(--transition-standard);
}

.explorer-switch input:checked+.explorer-switch-track {
    background: var(--primary-main);
    border-color: var(--primary-main);
}

.explorer-switch input:checked+.explorer-switch-track::after {
    background: #ffffff;
    transform: translateX(16px);
}

.explorer-switch input:focus-visible+.explorer-switch-track {
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.24);
}

.explorer-switch-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.explorer-switch input:checked~.explorer-switch-label {
    color: var(--text-primary);
    font-weight: 600;
}

/* License filter pills */
.license-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.license-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-standard);
}

.license-pill:hover {
    color: var(--primary-main);
    background: var(--bg-light);
    border-color: var(--primary-light);
}

.license-pill.is-active,
.license-pill:has(input:checked) {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
    box-shadow: var(--shadow-sm);
}

.license-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.license-pill:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.24);
}

/* Inline icon recolor */
.explorer-recolor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* Weight control — presets + fine slider */
.explorer-weight {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 0 1 220px;
    max-width: 100%;
}

.explorer-weight-presets {
    display: flex;
    gap: 4px;
}

.explorer-weight-preset {
    flex: 1;
    padding: 5px 8px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-standard);
}

.explorer-weight-preset:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.explorer-weight-preset.is-active {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
}

.explorer-weight-preset:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.explorer-weight-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.explorer-weight-range {
    flex: 1;
    min-width: 0;
    accent-color: var(--primary-main);
    cursor: pointer;
    height: 2px;
}

.explorer-weight-readout {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 22px;
    text-align: right;
}

.explorer-weight-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.explorer-weight-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.explorer-weight.is-unavailable {
    opacity: 0.48;
}

.explorer-weight.is-unavailable .explorer-weight-presets,
.explorer-weight.is-unavailable .explorer-weight-slider {
    pointer-events: none;
}

.explorer-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.explorer-swatch,
.explorer-color-input {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    cursor: pointer;
    transition: var(--transition-standard);
}

.explorer-swatch:hover {
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

.explorer-swatch:focus-visible,
.explorer-color-input:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.explorer-color-input {
    padding: 2px;
    background: var(--bg-default);
}

.explorer-recolor-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.explorer-recolor-meta>span {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.explorer-reset-btn {
    padding: 0;
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-main);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: var(--transition-standard);
}

.explorer-reset-btn:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Result count + select-all */
.explorer-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-bottom: 4px;
}

.explorer-results {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* --- Selectable asset grid (icons only, no labels) --- */
.explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.explorer-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    aspect-ratio: 1;
    padding: 12px;
    color: inherit;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: var(--transition-standard);
}

.explorer-cell:hover,
.explorer-cell:focus-visible {
    background: var(--bg-light);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.explorer-cell.is-selected {
    background: var(--primary-bg);
    border-color: var(--primary-main);
    box-shadow: inset 0 0 0 1px var(--primary-main);
}

.explorer-cell-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-width: 0;
    flex: 1;
    color: var(--text-primary);
}

.explorer-cell-media>svg,
.explorer-cell-media img,
.explorer-cell-media lottie-player,
.explorer-svg-inline>svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.explorer-svg-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.explorer-cell-fallback {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-disabled);
}

.explorer-cell-label {
    text-align: center;
    width: 100%;
    padding: 2px 5px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    overflow-wrap: break-word;
    text-decoration: none;
    transition: var(--transition-standard);
    white-space: nowrap;      
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-cell-label:hover {
    color: var(--text-primary);
    background: var(--bg-default);
}

/* Selection checkbox — revealed on hover / focus or once selected */
.explorer-cell-check {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: transparent;
    background: var(--bg-default);
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    opacity: 0;
    cursor: pointer;
    transition: var(--transition-standard);
}

.explorer-cell-check svg {
    width: 12px;
    height: 12px;
}

.explorer-cell:hover .explorer-cell-check,
.explorer-cell:focus-visible .explorer-cell-check,
.explorer-cell:focus-within .explorer-cell-check {
    opacity: 1;
}

.explorer-cell-check:hover {
    color: var(--primary-main);
    border-color: var(--primary-main);
}

.explorer-cell.is-selected .explorer-cell-check {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
    opacity: 1;
}

/* Touch devices have no hover state — keep the checkbox reachable */
@media (hover: none) {
    .explorer-cell-check {
        opacity: 1;
    }
}

/* --- Pagination (Laravel's default paginator view, matched to the design) ---
   Shared by every paginated SEO page — the explorer, the hub / category /
   collection / tag listings and search — via
   resources/views/partials/seo/pagination.blade.php. */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.pagination nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* The default view ships a mobile-only block and a full block. The SEO layout
   loads no Tailwind build, so the mobile duplicate is hidden and the full
   block below it stays visible at every width. Without this rule the two
   blocks both render unstyled at every breakpoint. */
.pagination nav>div:first-child {
    display: none;
}

.pagination nav>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pagination p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.pagination p span {
    font-weight: 700;
    color: var(--text-primary);
}

.pagination a,
.pagination span[aria-current='page']>span,
.pagination span[aria-disabled='true']>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: var(--transition-standard);
}

.pagination a:hover {
    color: var(--primary-main);
    background: var(--primary-bg);
    border-color: var(--primary-light);
}

.pagination a svg,
.pagination span[aria-disabled='true']>span svg {
    width: 16px;
    height: 16px;
}

.pagination span[aria-current='page']>span {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
}

.pagination span[aria-disabled='true']>span {
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* --- Floating bulk-selection bar --- */
.selection-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 10px 10px 20px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: var(--transition-standard);
}

.selection-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.selection-bar-copy {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.selection-bar-copy strong {
    font-weight: 700;
    color: var(--text-primary);
}

.selection-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-bar-btn {
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: var(--transition-standard);
}

.selection-bar-btn:hover {
    background: var(--bg-light);
    border-color: var(--text-secondary);
}

.selection-bar-btn.primary {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
}

.selection-bar-btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.selection-bar-btn:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* Inline failure message under the bulk-selection bar */
.selection-bar-error {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -22px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    text-align: center;
}

.selection-bar-error[hidden] {
    display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.app-footer {
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    padding-top: 72px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 64px;
    padding-bottom: 56px;
}

.footer-brand {
    max-width: 340px;
}

.footer-brand .logo-icon {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--primary-main);
    margin-bottom: 8px;
}

.footer-brand .logo-text {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.footer-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-pill);
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: var(--transition-standard);
}

.social-link:hover {
    color: #ffffff;
    background: var(--primary-main);
    border-color: var(--primary-main);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Five columns: Assets, Resources, Frameworks, Collections, Support.
   Keep this count in step with the .footer-col blocks in
   resources/views/layouts/seo.blade.php, or the last column wraps onto a
   row of its own. */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.footer-col a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: var(--transition-standard);
}

.footer-col a:hover {
    color: var(--primary-main);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    text-decoration: none;
    color: var(--text-secondary);
    transition: var(--transition-standard);
}

.footer-bottom-links a:hover {
    color: var(--primary-main);
}

/* ==========================================================================
   Responsive Queries
   ========================================================================== */
@media (max-width: 1100px) {
    .icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* .mega-menu intentionally stays full-width here (no fixed px override) */

    /* Navbar gets tighter so logo + links + search + auth buttons still fit */
    .nav-links {
        gap: 20px;
    }

    .nav-search input {
        width: 150px;
    }

    .explorer-shell {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .explorer-main {
        padding: 20px 24px 56px;
    }
}

@media (max-width: 900px) {
    :root {
        --section-padding-y: var(--section-padding-y-md);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        /* The desktop rule stretches the row to the bar height; the collapsed
           panel sizes itself from its content instead. */
        height: auto;
        background: #ffffff;
        border-bottom: 1px solid var(--border-color);
        padding: 16px 24px 24px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    }

    .nav-links.nav-links-open {
        max-height: min(80vh, 900px);
        overflow-y: auto;
        opacity: 1;
        pointer-events: auto;
        padding: 16px 24px 24px;
    }

    .nav-link {
        padding: 12px 4px;
        width: 100%;
        /* Icon + label stay together on the left; only the caret spreads
           out to the right edge of its trigger row (margin auto). */
        justify-content: flex-start;
        gap: 10px;
    }

    .nav-item .dropdown-trigger .si-glyph-triangle-down {
        margin-left: auto;
    }

    .nav-item {
        display: block;
        height: auto;
        width: 100%;
    }

    /* Mega menu becomes static accordion in mobile */
    .mega-menu {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        padding: 12px;
        margin-top: 8px;
        display: none;
    }

    .nav-item.is-open .mega-menu {
        transform: none;
        display: block;
    }

    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    /* Bar keeps only the theme toggle + burger on the right (burger last),
       search and auth buttons move into the burger dropdown. */
    .nav-actions {
        margin-left: auto;
        gap: 8px;
    }

    .nav-search,
    .nav-actions-group {
        display: none;
    }

    .nav-mobile-actions {
        display: flex;
    }

    .hero {
        padding: 64px 0 80px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 28px;
    }

    .grid-3,
    .icons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-svg {
        width: 90%;
        min-width: 0;
        opacity: 0.35;
    }

    .build-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .build-title {
        font-size: 2.1rem;
    }

    .build-visual {
        max-width: 520px;
        margin: 0 auto;
    }

    .section-header {
        margin-bottom: 48px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .icons-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .icons-search {
        max-width: 100%;
    }

    /* --- Explorer: single column + off-canvas filters --- */
    .explorer-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .explorer-main {
        padding: 16px 16px 56px;
        min-width: 0;
    }

    .explorer-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        justify-self: start;
        margin: 12px 16px 0;
        padding: 9px 14px;
        font-family: var(--font-family);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-light);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        cursor: pointer;
        transition: var(--transition-standard);
    }

    .explorer-filters-toggle:hover {
        border-color: var(--primary-main);
        color: var(--primary-main);
    }

    .explorer-filters-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 0.6875rem;
        font-weight: 700;
        color: #ffffff;
        background: var(--primary-main);
        border-radius: 999px;
    }

    .explorer-filters-count[hidden] {
        display: none;
    }

    .explorer-sidebar-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        /* Above the sticky .app-bar (1100), the mega menu and the bulk-selection
           bar (both 1200) so the drawer dims the whole viewport. */
        z-index: 1390;
        background: rgba(15, 23, 42, 0.45);
    }

    .explorer-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1400;
        width: min(320px, 86vw);
        max-height: none;
        overflow-y: auto;
        padding: 20px 16px 48px;
        background: var(--bg-default);
        border-right: 1px solid var(--border-color);
        box-shadow: 8px 0 32px -12px rgba(15, 23, 42, 0.18);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
    }

    .explorer-sidebar.is-open {
        transform: translateX(0);
    }

    body.explorer-filters-open {
        overflow: hidden;
    }

    .explorer-chrome {
        gap: 10px 12px;
        margin-bottom: 20px;
    }

    .explorer-type-tabs {
        order: 0;
        width: 100%;
    }

    .explorer-chrome .explorer-search {
        order: 1;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .explorer-chrome-filters {
        order: 2;
        margin-left: 0;
    }

    .explorer-heading {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .explorer-title {
        font-size: 1.5rem;
    }

    .explorer-heading-side {
        padding-top: 0;
    }

    .explorer-topbar {
        align-items: stretch;
        gap: 14px;
    }

    .explorer-topbar>.explorer-tool {
        flex: 1 1 100%;
    }

    .explorer-select {
        width: 100%;
    }

    .explorer-weight-slider {
        max-width: 100%;
    }

    .explorer-search {
        max-width: 100%;
        flex-basis: 100%;
    }

    .explorer-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 10px;
    }

    .explorer-cell {
        padding: 10px;
    }

    .explorer-meta {
        gap: 6px 12px;
    }

    .explorer-lede {
        font-size: 0.875rem;
    }

    .explorer-top-actions {
        margin-left: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 640px) {
    :root {
        --section-padding-y: var(--section-padding-y-sm);
    }

    .container {
        padding: 0 20px;
    }

    /* .nav-actions (theme toggle + burger, right aligned) and the hidden
       .nav-search / .nav-actions-group are already handled by the 900px query */

    .hero-title {
        font-size: 2rem;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .showcase-grid,
    .grid-3,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .icon-card {
        padding: 20px 14px;
    }

    .icon-stage {
        width: 52px;
        height: 52px;
    }

    .icon-stage lottie-player {
        width: 22px;
        height: 22px;
    }

    .icons-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
        flex-shrink: 0;
    }

    .build-title {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .build-feature-active {
        padding: 16px;
    }

    .explorer-filters-toggle {
        margin: 10px 12px 0;
        width: calc(100% - 24px);
        justify-content: center;
    }

    .explorer-main {
        padding: 12px 12px 48px;
    }

    .explorer-title {
        font-size: 1.375rem;
    }

    .explorer-topbar {
        gap: 12px;
    }

    .explorer-recolor {
        flex-wrap: wrap;
    }

    .explorer-weight-presets {
        flex-wrap: wrap;
    }

    .license-pills {
        gap: 8px;
    }

    .license-pill {
        padding: 8px 12px;
    }

    .explorer-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        gap: 8px;
    }

    .explorer-cell {
        padding: 8px;
    }

    .selection-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 10px 16px;
        transform: translateY(16px);
    }

    .selection-bar.is-visible {
        transform: translateY(0);
    }
}

/* ==========================================================================
   Auth Pages — login, register, forgot/reset password (app design system)
   ========================================================================== */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary-main);
    text-decoration: none;
    transition: var(--transition-standard);
}

.auth-brand:hover {
    color: var(--primary-dark);
}

.auth-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    flex-shrink: 0;
    position: relative;
}

.auth-brand-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 7px solid #ffffff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.auth-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Keep the bar controls (auth buttons + theme toggle) on the same 40px line
   as the public navbar */
.auth-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

/* The auth bar carries the full wordmark + auth actions and has no burger,
   so on phones it tightens up and may grow taller instead of overflowing. */
@media (max-width: 640px) {
    .auth-bar {
        height: auto;
        min-height: 80px;
        padding: 12px 0;
    }

    .auth-bar .navbar-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .auth-bar .logo {
        width: 96px;
    }

    .auth-nav {
        gap: 8px;
    }

    .auth-nav .btn {
        height: 36px;
        padding: 0 12px;
        font-size: 0.8125rem;
    }
}

.auth-main {
    min-height: calc(100vh - 80px);
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.auth-card-header {
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--border-color);
}

.auth-card-title {
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.auth-card-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

.auth-card-body {
    padding: 28px 32px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.auth-input {
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    outline: none;
    width: 100%;
    transition: var(--transition-standard);
}

.auth-input:focus {
    border-color: var(--primary-main);
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.18);
}

.auth-input::placeholder {
    color: var(--text-disabled);
}

/* Multi-line counterpart of .auth-input, used by the contact and icon-request
   forms. Inherits every box style above, so it only needs the textarea-specific
   bits. `resize: vertical` keeps the height draggable without letting anyone
   stretch the field across the page. */
textarea.auth-input {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}

/* Native selects don't pick up the .auth-input box styles reliably across
   engines (appearance reset + explicit height), so the support/request forms
   use this instead of .auth-input. The chevron is an inline SVG background, so
   the control needs the extra right padding to clear it. */
.auth-select {
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--text-primary);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 12px 44px 12px 16px;
    outline: none;
    width: 100%;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: var(--transition-standard);
}

.auth-select:focus {
    border-color: var(--primary-main);
    box-shadow: 0 0 0 3px rgba(133, 107, 174, 0.18);
}

.auth-field-error {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #c62828;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 5px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-standard);
}

.auth-checkbox input:hover {
    border-color: var(--text-secondary);
}

.auth-checkbox input:checked {
    background-color: var(--primary-main);
    border-color: var(--primary-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M12 4 L9 7 L3 13' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.auth-checkbox input:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.auth-checkbox span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.auth-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-standard);
}

.auth-link:hover {
    color: var(--primary-main);
}

.auth-switch {
    margin-top: 24px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--primary-main);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-standard);
}

.auth-switch a:hover {
    color: var(--primary-dark);
}

.auth-alert {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.auth-alert-success {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #2e7d32;
}

.auth-alert-error {
    background-color: #ffebee;
    border-color: #ffcdd2;
    color: #c62828;
}

/* Neutral/informational variant — e.g. the "address not confirmed yet" notice
   on the account page. Not an error: the account works, it just needs a click. */
.auth-alert-info {
    background-color: var(--primary-bg);
    border-color: rgba(133, 107, 174, 0.30);
    color: #0f6b58;
}

.auth-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Email-verification recovery block. Rendered on the login form when a correct
   password was refused because the address was never confirmed, giving the
   visitor a way to request a fresh link (see the verification.resend route and
   AuthenticatedSessionController::store). */
.auth-verify-resend {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.auth-verify-resend-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.auth-verify-resend .auth-text {
    margin-bottom: 0;
}

.auth-verify-resend .auth-form {
    margin-top: 16px;
}

/* Google sign-in button + divider */
.auth-social {
    margin-bottom: 6px;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: var(--transition-standard);
}

.btn-google:hover {
    background: var(--bg-light);
    border-color: var(--border-color-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-google svg {
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}


/* ==========================================================================
   Shared Asset Editor Panel (SVG + Lottie show pages)

   The page frame, preview stage and spacing scale live in
   resources/views/partials/seo/asset-show-styles.blade.php; only the reusable
   control chrome the JS generates (swatches, stroke rows) is kept here.
   ========================================================================== */

/* Editor panel wrapper */
.svg-editor-panel {
    margin-top: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.svg-editor-section {
    padding: 14px 16px 6px;
    border-bottom: 1px solid var(--border-color);
}

.svg-editor-section-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.svg-editor-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-main) 12%, transparent);
    color: var(--primary-main);
}

/* Actions bar */
.svg-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-default);
    border-top: 1px solid var(--border-color);
}

/* Small button variant */
.btn-sm {
    font-size: 0.8125rem;
    padding: 6px 12px;
    gap: 5px;
    display: inline-flex;
    align-items: center;
}

.btn-sm svg {
    flex-shrink: 0;
}

/* Stroke-width sliders */
.svg-stroke-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.svg-stroke-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-default);
}

.svg-stroke-preview {
    flex-shrink: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-stroke-line {
    width: 24px;
    background: var(--text-primary);
    border-radius: 999px;
    transition: height 0.15s;
}

.svg-stroke-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svg-stroke-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.svg-stroke-slider {
    width: 100%;
    accent-color: var(--primary-main);
    cursor: pointer;
}

.svg-stroke-value {
    font-size: 0.72rem;
    font-family: monospace;
    color: var(--text-secondary);
}

/* ==========================================================================
   Inline Color Editor (Lottie show page)
   ========================================================================== */
.color-editor {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 8px 0 24px;
}

.color-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.color-editor-head .eyebrow {
    margin: 0;
}

.color-editor-hint {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 12px;
}

.color-swatch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.color-swatch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-default);
    cursor: pointer;
    transition: var(--transition-standard);
}

.color-swatch-row:hover {
    border-color: var(--primary-main);
}

.color-swatch {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.color-swatch input[type='color'] {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 52px;
    height: 52px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.color-swatch-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.color-swatch-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.color-swatch-hex {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.color-editor-empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    padding: 8px 0;
}

.color-editor-actions .btn {
    width: 100%;
}

/* ==========================================================================
   Blog Article Body
   Renders the HTML produced by the admin rich text editor
   (see resources/views/seo/blog/show.blade.php + BlogPost::bodyHtml()).
   The global reset removes default element spacing, so it is restored here.
   ========================================================================== */
.blog-body {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.blog-body>*:first-child {
    margin-top: 0;
}

.blog-body>*:last-child {
    margin-bottom: 0;
}

.blog-body p,
.blog-body ul,
.blog-body ol,
.blog-body blockquote,
.blog-body pre,
.blog-body table,
.blog-body figure {
    margin: 0 0 20px;
}

.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
    margin: 36px 0 12px;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.blog-body h1 {
    font-size: 1.75rem;
}

.blog-body h2 {
    font-size: 1.5rem;
}

.blog-body h3 {
    font-size: 1.25rem;
}

.blog-body h4,
.blog-body h5,
.blog-body h6 {
    font-size: 1.0625rem;
}

.blog-body a {
    color: var(--primary-main);
    text-decoration: underline;
}

.blog-body a:hover {
    color: var(--primary-dark);
}

.blog-body strong,
.blog-body b {
    color: var(--text-primary);
    font-weight: 700;
}

.blog-body ul,
.blog-body ol {
    padding-left: 24px;
}

.blog-body ul {
    list-style: disc;
}

.blog-body ol {
    list-style: decimal;
}

.blog-body li {
    margin-bottom: 8px;
}

.blog-body li>ul,
.blog-body li>ol {
    margin: 8px 0 0;
}

.blog-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.blog-body figure {
    margin-left: 0;
    margin-right: 0;
}

.blog-body figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--text-disabled);
    text-align: center;
}

.blog-body blockquote {
    margin-left: 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--primary-main);
    font-style: italic;
}

.blog-body hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

.blog-body pre {
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.blog-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

.blog-body :not(pre)>code {
    padding: 2px 6px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.blog-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.blog-body th,
.blog-body td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.blog-body th {
    background: var(--bg-light);
    color: var(--text-primary);
    font-weight: 600;
}

.blog-body iframe,
.blog-body video {
    max-width: 100%;
}

/* ==========================================================================
   Social Share Row (blog article)
   Rendered by resources/views/partials/seo/share-buttons.blade.php and
   enhanced by public/js/share.js. The brand colours only apply on hover, so
   the resting state follows the light/dark tokens automatically.
   ========================================================================== */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.share-bar-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.share-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    background: var(--bg-default);
    color: var(--text-secondary);
    font-family: var(--font-family);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-standard);
}

.share-btn svg {
    width: 16px;
    height: 16px;
}

.share-btn:hover,
.share-btn:focus-visible {
    color: #ffffff;
    background: var(--share-brand, var(--primary-main));
    border-color: var(--share-brand, var(--primary-main));
}

.share-btn:focus-visible {
    outline: 2px solid var(--primary-main);
    outline-offset: 2px;
}

/* Brand accents, applied on hover only */
.share-btn-x {
    --share-brand: #000000;
}

.share-btn-facebook {
    --share-brand: #1877f2;
}

.share-btn-linkedin {
    --share-brand: #0a66c2;
}

.share-btn-whatsapp {
    --share-brand: #25d366;
}

.share-btn-telegram {
    --share-brand: #26a5e4;
}

.share-btn-reddit {
    --share-brand: #ff4500;
}

.share-btn-email {
    --share-brand: #5f6368;
}

.share-btn-copy {
    --share-brand: var(--primary-main);
}

/* The copy button is the only one with a label, so it grows to fit */
.share-btn-copy {
    width: auto;
    gap: 8px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.share-btn-copy.is-copied {
    --share-brand: #2e7d32;
}

.share-icon-check {
    display: none;
}

.share-btn-copy.is-copied .share-icon-link {
    display: none;
}

.share-btn-copy.is-copied .share-icon-check {
    display: block;
}

.share-status {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .share-label {
        width: 100%;
    }
}

/* X's brand black vanishes on the dark surface, so the hover flips to white */
:root.dark .share-btn-x:hover,
:root.dark .share-btn-x:focus-visible {
    color: #0f1115;
    background: #ffffff;
    border-color: #ffffff;
}

:root.dark .share-btn-copy.is-copied {
    --share-brand: #4caf50;
}


/* ==========================================================================
   Account Menu (avatar dropdown) + Account Settings page
   Rendered by resources/views/partials/seo/user-menu.blade.php and
   resources/views/account/edit.blade.php. The dropdown reuses the
   .nav-item / .dropdown-trigger contract that public/js/nav.js drives.
   ========================================================================== */
.nav-item-user {
    /* .nav-item is deliberately unpositioned so the public .mega-menu hangs
       from .navbar-container; this panel is narrow, so it anchors here. */
    position: relative;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-standard);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar:hover,
.user-avatar:focus-visible {
    border-color: var(--primary-main);
    color: var(--primary-main);
    outline: none;
}

.user-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 0.9375rem;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 240px;
    padding: 8px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition-standard);
}

.nav-item-user.is-open .user-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.user-menu-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.user-menu-email {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-standard);
}

.user-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--bg-light);
    color: var(--text-primary);
    outline: none;
}

.user-menu-item-danger:hover,
.user-menu-item-danger:focus-visible {
    color: #c62828;
}

/* Stacked variant (burger panel + auth layout, which loads no JavaScript) */
.user-menu-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.user-menu-mobile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-menu-mobile-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.user-menu-mobile-email {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* .btn is inline-block, so the stacked rows opt into flex to line the icon up
   with its label. Both the burger panel and the auth layout render the rows as
   siblings right after .user-menu-mobile, hence the `~` combinators. */
.user-menu-mobile~.btn,
.user-menu-mobile~form .btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.user-menu-mobile~.btn svg,
.user-menu-mobile~form .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-danger {
    background-color: #c62828;
}

.btn-danger:hover {
    background-color: #ad2b2b;
}

/* Account settings cards (resources/views/account/edit.blade.php) */
.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    text-align: left;
}

.account-card {
    padding: 32px;
    background: var(--bg-default);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    scroll-margin-top: 96px;
}

.account-card-danger {
    grid-column: 1 / -1;
    border-color: rgba(198, 40, 40, 0.35);
}

.account-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.account-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* ==========================================================================
   Support Pages (/contact, /requests)
   ========================================================================== */

/* Single centred column for a form that doesn't need a sidebar. The icon
   request page uses it; /contact uses the two-column .account-grid below. */
.form-narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* Contact page: the form next to a "what happens next" aside. Reuses the
   account grid/column instead of a second two-column definition, so both stay
   in step at every breakpoint. */
.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Ordered list of numbered steps in the contact aside. */
.support-steps {
    list-style: none;
    counter-reset: support-step;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.support-steps li {
    counter-increment: support-step;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.support-steps li::before {
    content: counter(support-step);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--primary-main);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Support/contact address block (mail link + reply time). */
.support-contact-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.9375rem;
}

.support-contact-list a {
    color: var(--primary-main);
    font-weight: 600;
    text-decoration: none;
}

.support-contact-list a:hover {
    text-decoration: underline;
}

.support-contact-list span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
}

@media (max-width: 860px) {
    .support-layout {
        grid-template-columns: 1fr;
    }
}

:root.dark .user-menu-panel {
    background: #141416;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 24px 60px -24px rgba(0, 0, 0, 0.65);
}

:root.dark .account-card {
    background: var(--bg-light);
}

:root.dark .btn-danger {
    color: #ffffff;
}

@media (max-width: 900px) {
    .account-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Inside the burger panel the panel is static, exactly like .mega-menu */
    .nav-item-user {
        position: static;
        width: 100%;
    }

    .user-menu-panel {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 8px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        display: none;
    }

    .nav-item-user.is-open .user-menu-panel {
        transform: none;
        display: block;
    }
}
/* === Extracted inline utilities (replaces style="" in Blade) === */
.home-cta-center{text-align:center;margin-top:32px;}
.home-inline-arrow{width:16px;height:16px;margin-left:auto;flex-shrink:0;}
.footer-logo-text{font-weight:700;font-size:1.25rem;color:var(--primary-main);}
.icons-filters-spaced{margin-bottom:32px;}
.pagination-spaced{margin-top:32px;}
.search-form-full{max-width:100%;margin-bottom:32px;}
.style-hub-icon{width:64px;height:64px;object-fit:contain;margin-bottom:12px;}
.blog-body-spaced{margin-top:32px;}
.card-link-reset{text-decoration:none;color:inherit;}
.grid-span-full{grid-column:1/-1;}
.breadcrumb-nav{padding-top:16px;padding-bottom:8px;}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:.875rem;color:var(--text-secondary);}
.breadcrumb-item{display:flex;align-items:center;gap:8px;}
.breadcrumb-current{color:var(--text-primary);}
.breadcrumb-link{color:var(--primary-main);text-decoration:none;}
.icon-fallback-lg{font-size:1.5rem;}
.account-card-spaced{margin-top:32px;}
.account-card-title-spaced{margin-top:28px;}
.auth-text-spaced{margin-top:20px;margin-bottom:0;}
.auth-text-request{margin-top:28px;margin-bottom:0;}
.about-lead-spaced{margin-top:16px;}
.support-layout-spaced{margin-top:48px;}
.support-contact-spaced{margin-bottom:24px;}
.text-strong{font-weight:600;color:var(--text-primary);}
.account-desc-flush{margin-bottom:0;}
.asset-grid-media{width:32px;height:32px;object-fit:contain;}
.asset-grid-lottie{width:26px;height:26px;}
.explorer-side-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0;}
.svg-stroke-line{height:var(--stroke-h,4px);}
/* Dynamic swatch / badge colors are passed via --swatch / --badge-color vars */
.explorer-swatch{background:var(--swatch,#000);}
.type-badge{font-size:.75rem;font-weight:600;color:var(--badge-color,var(--text-secondary));background:color-mix(in srgb,var(--badge-color,var(--text-secondary)) 12%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap;}
.muted-no{color:var(--text-secondary);font-size:.875rem;}
/* Tag hub sections */
.tag-hub-section{padding-top:48px;padding-bottom:80px;}
.tag-hub-header{display:flex;flex-direction:column;gap:6px;margin-bottom:36px;}
.tag-hub-title{margin-bottom:4px;}