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

    :root {
      --bg: #fbfafc;
      --card: #ffffff;
      --text: #15131a;
      --muted: #706a7a;
      --soft: #f0edf5;
      --soft-2: #f7f3fb;
      --brand: #e60023;
      --brand-2: #ff4d6d;
      --accent: #7b2ff7;
      --yellow: #ffbe0b;
      --green: #06d6a0;
      --blue: #3a86ff;
      --border: rgba(21, 19, 26, 0.10);
      --shadow: 0 18px 50px rgba(39, 29, 59, 0.10);
      --shadow-soft: 0 8px 24px rgba(39, 29, 59, 0.08);
      --radius: 28px;
    }

    body.dark {
      --bg: #0d0c11;
      --card: #17151f;
      --text: #f7f4ff;
      --muted: #b7adc7;
      --soft: #242131;
      --soft-2: #1e1b29;
      --border: rgba(255,255,255,0.10);
      --shadow: 0 18px 50px rgba(0,0,0,0.40);
      --shadow-soft: 0 8px 24px rgba(0,0,0,0.30);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: Inter, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255,77,109,.16), transparent 28%),
        radial-gradient(circle at top right, rgba(123,47,247,.14), transparent 28%),
        var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    button, input, select { font-family: inherit; }

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,.76);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
    }

    body.dark header { background: rgba(13,12,17,.76); }

    .nav-wrap {
      width: min(1300px, 94%);
      margin: auto;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 27px;
      font-weight: 950;
      color: var(--brand);
      cursor: pointer;
      letter-spacing: -1px;
      white-space: nowrap;
    }

    .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: conic-gradient(from 180deg, #e60023, #ffbe0b, #06d6a0, #3a86ff, #8338ec, #e60023);
      box-shadow: 0 8px 18px rgba(230,0,35,.28);
    }

    nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      overflow-x: auto;
      scrollbar-width: none;
    }

    nav::-webkit-scrollbar { display: none; }

    .nav-link, .btn, .icon-btn {
      border: none;
      background: transparent;
      color: var(--text);
      padding: 10px 13px;
      border-radius: 999px;
      font-weight: 800;
      cursor: pointer;
      transition: .2s ease;
      white-space: nowrap;
    }

    .nav-link:hover, .nav-link.active, .btn.primary {
      background: var(--brand);
      color: white;
      box-shadow: 0 8px 20px rgba(230,0,35,.20);
    }

    .btn {
      background: var(--soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--border);
    }

    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

    .icon-btn {
      width: 44px;
      height: 44px;
      background: var(--soft);
      border: 1px solid var(--border);
      font-size: 18px;
    }

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

    .page {
      display: none;
      width: min(1300px, 94%);
      margin: auto;
      padding: 34px 0 80px;
      animation: fade .22s ease;
    }

    .page.active { display: block; }
    @keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

    .hero {
      min-height: 620px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items: center;
      padding: 34px 0 56px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 18px;
      box-shadow: var(--shadow-soft);
    }

    .hero h1 {
      font-size: clamp(44px, 7vw, 94px);
      line-height: .92;
      letter-spacing: -4px;
      margin-bottom: 18px;
    }

    .gradient-text {
      background: linear-gradient(90deg, var(--brand), #ff8a00, var(--accent), #3a86ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      color: var(--muted);
      font-size: 20px;
      line-height: 1.65;
      max-width: 690px;
      margin-bottom: 28px;
    }

    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 12px;
      max-width: 600px;
    }

    .stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }

    .stat strong { display: block; font-size: 26px; margin-bottom: 4px; }
    .stat span { color: var(--muted); font-weight: 700; font-size: 13px; }

    .hero-board {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 36px;
      padding: 18px;
      box-shadow: var(--shadow);
      transform: rotate(1deg);
    }

    .board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .dots { display: flex; gap: 7px; }
    .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); }
    .dot:nth-child(2) { background: var(--yellow); }
    .dot:nth-child(3) { background: var(--green); }

    .featured-palette {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      height: 310px;
      overflow: hidden;
      border-radius: 26px;
      margin-bottom: 16px;
    }

    .featured-palette div { display: flex; align-items: end; justify-content: center; padding: 14px 4px; color: white; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.45); writing-mode: vertical-rl; }

    .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mini-card { background: var(--soft-2); border: 1px solid var(--border); border-radius: 22px; padding: 14px; }
    .mini-card h4 { margin-bottom: 8px; }
    .mini-strip { display: flex; height: 58px; border-radius: 14px; overflow: hidden; }
    .mini-strip span { flex: 1; }

    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 24px 0; }
    .section-title { font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -1.7px; }
    .subtext { color: var(--muted); line-height: 1.65; font-size: 17px; max-width: 780px; }

    .tool-grid, .category-grid, .pricing, .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 18px;
    }

    .tool-card, .price-card, .content-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-soft);
      transition: .2s ease;
    }

    .tool-card:hover, .content-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .tool-icon { font-size: 38px; margin-bottom: 14px; }

    /* Real SVG icons (replaces emoji markers) */
    .ui-icon {
      width: 1.15em;
      height: 1.15em;
      display: inline-block;
      vertical-align: -0.18em;
      fill: currentColor;
      flex: 0 0 auto;
    }

    .tool-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      color: white;
      background: linear-gradient(135deg, var(--brand), var(--accent));
      box-shadow: var(--shadow-soft);
    }

    .tool-icon .ui-icon { width: 28px; height: 28px; }
    .stat-icon .ui-icon { width: 23px; height: 23px; }
    .btn .ui-icon, .palette-count-pill .ui-icon, .feed-status .ui-icon { margin-right: 2px; }
    .round-action .ui-icon, .float-btn .ui-icon { width: 18px; height: 18px; }
    .icon-btn .ui-icon { width: 20px; height: 20px; }

    .tool-card h3, .content-card h3 { font-size: 24px; margin-bottom: 10px; letter-spacing: -.5px; }
    .tool-card p, .content-card p { color: var(--muted); line-height: 1.6; margin-bottom: 18px; }

    .searchbar {
      width: 100%;
      padding: 16px 20px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      font-size: 16px;
      outline: none;
      box-shadow: var(--shadow-soft);
      margin: 12px 0 18px;
    }

    .chips {
      display: flex;
      gap: 10px;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 18px;
      padding-bottom: 8px;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    .chips::-webkit-scrollbar { height: 6px; }
    .chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
    .chip { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border); padding: 10px 16px; border-radius: 999px; background: var(--card); color: var(--text); font-weight: 850; cursor: pointer; box-shadow: var(--shadow-soft); transition: .2s ease; }
    .chip.active, .chip:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }

    .explore-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 8px 0 22px; }
    .explore-stat { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 16px; box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 12px; }
    .explore-stat b { display: block; font-size: 24px; letter-spacing: -.5px; }
    .explore-stat span { color: var(--muted); font-size: 13px; font-weight: 800; }
    .stat-icon { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--accent)); color: white; font-size: 22px; }

    .explore-loader { display: none; min-height: 280px; place-items: center; padding: 34px; }
    .explore-loader.show { display: grid; }
    .loader-card { width: min(440px, 92%); background: var(--card); border: 1px solid var(--border); border-radius: 30px; padding: 26px; box-shadow: var(--shadow); text-align: center; position: relative; overflow: hidden; }
    .loader-card::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: shimmer 1.25s infinite; }
    .loader-orbit { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; position: relative; background: conic-gradient(from 0deg, #ff006e, #8338ec, #3a86ff, #06d6a0, #ffbe0b, #ff006e); animation: spin 1.1s linear infinite; }
    .loader-orbit::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--card); }
    .loader-dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
    .loader-dots span { width:10px; height:10px; border-radius:50%; background: var(--brand); animation: bounce .75s infinite alternate; }
    .loader-dots span:nth-child(2){ animation-delay: .12s; background: var(--accent); }
    .loader-dots span:nth-child(3){ animation-delay: .24s; background: var(--green); }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes shimmer { to { transform: translateX(100%); } }
    @keyframes bounce { to { transform: translateY(-8px); opacity: .55; } }


    .infinite-loader { display: none; break-inside: avoid; width: min(520px, 100%); margin: 18px auto 30px; }
    .infinite-loader.show { display: block; }
    .infinite-loader-card { position: relative; overflow: hidden; border: 1px solid var(--border); background: var(--card); border-radius: 26px; padding: 20px; box-shadow: var(--shadow-soft); text-align: center; }
    .infinite-loader-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-100%); animation: shimmer 1.1s infinite; }
    .infinite-color-row { display: flex; height: 58px; border-radius: 18px; overflow: hidden; margin-bottom: 12px; }
    .infinite-color-row span { flex: 1; animation: pulseColor 1s infinite alternate; }
    .infinite-color-row span:nth-child(1){ background:#ff006e; animation-delay:0s; }
    .infinite-color-row span:nth-child(2){ background:#8338ec; animation-delay:.1s; }
    .infinite-color-row span:nth-child(3){ background:#3a86ff; animation-delay:.2s; }
    .infinite-color-row span:nth-child(4){ background:#06d6a0; animation-delay:.3s; }
    .infinite-color-row span:nth-child(5){ background:#ffbe0b; animation-delay:.4s; }
    .scroll-hint { color: var(--muted); font-weight: 850; font-size: 13px; margin-top: 4px; }
    @keyframes pulseColor { to { filter: brightness(1.24) saturate(1.25); transform: scaleY(.88); } }

    .masonry { columns: 5 220px; column-gap: 18px; }
    .pin { break-inside: avoid; background: var(--card); border: 1px solid var(--border); border-radius: 28px; margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-soft); transition: .2s ease; position: relative; }
    .pin:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
    .pin-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,.88); color: #111; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; backdrop-filter: blur(8px); }
    .palette-preview { display: flex; flex-direction: column; height: var(--height); cursor: pointer; }
    .palette-preview.horizontal { flex-direction: row; height: 150px; }
    .color-block { flex: 1; position: relative; cursor: pointer; }
    .color-block:hover::after { content: attr(data-color); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.28); color: white; font-weight: 950; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
    .pin-content { padding: 16px; }
    .pin-content h3 { font-size: 18px; margin-bottom: 7px; }
    .pin-content p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 13px; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .small-btn { border: 1px solid var(--border); padding: 8px 11px; border-radius: 999px; background: var(--soft); color: var(--text); cursor: pointer; font-weight: 850; font-size: 12px; }
    .small-btn.red { background: var(--brand); color: white; border-color: transparent; }
    .hex-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .hex { font-size: 12px; background: var(--soft); padding: 7px 8px; border-radius: 9px; cursor: pointer; font-weight: 850; border: 1px solid var(--border); }
    .hex:hover { background: var(--text); color: var(--bg); }



    /* Colorrow parallax Explore upgrade */
    .explore-stage {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      padding: 22px;
      margin-bottom: 22px;
      background:
        linear-gradient(135deg, rgba(230,0,35,.08), rgba(123,47,247,.08), rgba(58,134,255,.08)),
        var(--soft-2);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }

    .explore-stage > *:not(.parallax-bg) {
      position: relative;
      z-index: 2;
    }

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

    .color-orb {
      position: absolute;
      width: var(--size);
      height: var(--size);
      border-radius: 38% 62% 55% 45% / 45% 42% 58% 55%;
      background: var(--orb);
      filter: blur(.2px);
      opacity: .42;
      transform: translate3d(var(--move-x, 0), var(--move-y, 0), 0) rotate(var(--rot, 0deg));
      animation: floatOrb var(--speed) ease-in-out infinite alternate;
      mix-blend-mode: multiply;
    }

    body.dark .color-orb { opacity: .28; mix-blend-mode: screen; }

    .orb-1 { --size: 190px; --orb: linear-gradient(135deg,#ff006e,#ffbe0b); left: -42px; top: 40px; --speed: 7s; }
    .orb-2 { --size: 250px; --orb: linear-gradient(135deg,#8338ec,#3a86ff); right: -78px; top: -50px; --speed: 8.5s; }
    .orb-3 { --size: 160px; --orb: linear-gradient(135deg,#06d6a0,#80ffdb); right: 10%; bottom: -42px; --speed: 6.5s; }
    .orb-4 { --size: 130px; --orb: linear-gradient(135deg,#f72585,#7209b7); left: 34%; bottom: 6px; --speed: 9s; }

    @keyframes floatOrb {
      from { transform: translate3d(var(--move-x, 0), var(--move-y, 0), 0) rotate(0deg) scale(1); }
      to { transform: translate3d(calc(var(--move-x, 0) + 16px), calc(var(--move-y, 0) - 20px), 0) rotate(18deg) scale(1.06); }
    }

    .explore-live-banner {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items: center;
      background: rgba(255,255,255,.62);
      backdrop-filter: blur(18px);
      border: 1px solid var(--border);
      border-radius: 30px;
      padding: 18px;
      margin-bottom: 18px;
    }

    body.dark .explore-live-banner { background: rgba(23,21,31,.72); }

    .live-copy h3 { font-size: clamp(24px, 3vw, 38px); letter-spacing: -1px; margin-bottom: 6px; }
    .live-copy p { color: var(--muted); line-height: 1.55; }
    .live-palette-ticker { display: grid; gap: 10px; }
    .ticker-strip { display: flex; height: 42px; border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-soft); transform: translateX(var(--ticker-x, 0px)); transition: transform .18s linear; }
    .ticker-strip:nth-child(2) { margin-left: 34px; opacity: .88; }
    .ticker-strip:nth-child(3) { margin-left: 70px; opacity: .76; }
    .ticker-strip span { flex: 1; animation: shimmerColor 2s ease-in-out infinite alternate; }
    .ticker-strip span:nth-child(1){ background:#ff006e; }
    .ticker-strip span:nth-child(2){ background:#8338ec; animation-delay:.12s; }
    .ticker-strip span:nth-child(3){ background:#3a86ff; animation-delay:.24s; }
    .ticker-strip span:nth-child(4){ background:#06d6a0; animation-delay:.36s; }
    .ticker-strip span:nth-child(5){ background:#ffbe0b; animation-delay:.48s; }
    @keyframes shimmerColor { to { filter: hue-rotate(24deg) brightness(1.16) saturate(1.18); } }

    .pin.reveal-card { animation: cardPop .42s ease both; animation-delay: calc(min(var(--i), 18) * 22ms); }
    @keyframes cardPop { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

    .pin::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.34), transparent 30%);
      opacity: 0;
      transition: opacity .2s ease;
    }
    .pin:hover::after { opacity: 1; }

    .palette-preview { transition: transform .25s ease, filter .25s ease; }
    .pin:hover .palette-preview { transform: scale(1.018); filter: saturate(1.08); }

    .scroll-progress {
      position: sticky;
      top: 69px;
      height: 4px;
      width: 100%;
      background: transparent;
      z-index: 50;
      margin-bottom: 14px;
      border-radius: 999px;
      overflow: hidden;
    }
    .scroll-progress span {
      display: block;
      height: 100%;
      width: var(--progress, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), var(--yellow), var(--green), var(--blue), var(--accent));
      transition: width .12s linear;
    }

    .infinite-loader-card {
      background:
        radial-gradient(circle at 12% 30%, rgba(255,0,110,.18), transparent 28%),
        radial-gradient(circle at 85% 20%, rgba(58,134,255,.18), transparent 30%),
        var(--card);
    }
    .infinite-loader-card h3 { letter-spacing: -.4px; }
    .infinite-color-row { transform: translateY(var(--loader-y, 0px)); transition: transform .18s linear; }

    .palette-count-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--muted);
      font-weight: 900;
      box-shadow: var(--shadow-soft);
      margin-bottom: 14px;
    }

    @media (max-width: 850px) {
      .explore-stage { padding: 14px; border-radius: 24px; }
      .explore-live-banner { grid-template-columns: 1fr; border-radius: 24px; }
      .ticker-strip:nth-child(2), .ticker-strip:nth-child(3) { margin-left: 0; }
      .color-orb { opacity: .22; }
    }



    /* Explore interactive scroll upgrades */
    .explore-quick-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0 18px;
    }

    .feed-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--muted);
      font-weight: 900;
      box-shadow: var(--shadow-soft);
    }

    .pin {
      transform-origin: center;
      will-change: transform, opacity;
    }

    .pin.reveal-card {
      opacity: 0;
      transform: translateY(34px) scale(.96);
    }

    .pin.reveal-card.in-view {
      animation: cardPop .42s ease both;
      animation-delay: calc(min(var(--i), 18) * 20ms);
    }

    .pin:focus-within {
      outline: 3px solid rgba(230, 0, 35, .28);
      outline-offset: 4px;
    }

    .pin-top-actions {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      display: flex;
      gap: 7px;
      opacity: 0;
      transform: translateY(-6px);
      transition: .2s ease;
    }

    .pin:hover .pin-top-actions,
    .pin:focus-within .pin-top-actions {
      opacity: 1;
      transform: translateY(0);
    }

    .round-action {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.5);
      background: rgba(255,255,255,.88);
      color: #111;
      font-weight: 950;
      box-shadow: 0 8px 20px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: .18s ease;
    }

    .round-action:hover {
      background: var(--brand);
      color: white;
      transform: scale(1.08);
    }

    .pin-meta-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 9px;
    }

    .pin-meta-line small {
      color: var(--muted);
      font-weight: 850;
    }

    .copy-flash {
      animation: copyFlash .55s ease;
    }

    @keyframes copyFlash {
      0% { transform: scale(1); }
      35% { transform: scale(1.08); background: var(--brand); color: white; }
      100% { transform: scale(1); }
    }

    .explore-floating-controls {
      position: fixed;
      right: 20px;
      bottom: 22px;
      z-index: 1500;
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .explore-floating-controls.show {
      display: flex;
    }

    .float-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      font-size: 20px;
      display: grid;
      place-items: center;
    }

    .float-btn.active {
      background: var(--brand);
      color: white;
    }

    .load-more-row {
      display: flex;
      justify-content: center;
      margin: 24px 0 8px;
    }

    .saved-pop {
      animation: savedPop .45s ease;
    }

    @keyframes savedPop {
      0% { transform: scale(1); }
      45% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    @media (max-width: 760px) {
      .explore-floating-controls { right: 14px; bottom: 16px; }
      .float-btn { width: 48px; height: 48px; }
      .pin-top-actions { opacity: 1; transform: none; }
      .explore-quick-actions .btn, .explore-quick-actions .feed-status { width: 100%; }
    }



    /* Explore skeleton loading state */
    .skeleton-grid {
      display: none;
      columns: 5 220px;
      column-gap: 18px;
      margin-top: 4px;
    }

    .skeleton-grid.show {
      display: block;
    }

    .skeleton-pin {
      break-inside: avoid;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 28px;
      margin-bottom: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .skeleton-palette {
      height: var(--sk-height, 330px);
      display: grid;
      grid-template-rows: repeat(5, 1fr);
      overflow: hidden;
    }

    .skeleton-color {
      background: linear-gradient(90deg, var(--soft), var(--soft-2), var(--soft));
      background-size: 240% 100%;
      animation: skeletonShimmer 1.15s ease-in-out infinite;
    }

    .skeleton-color:nth-child(2) { animation-delay: .08s; }
    .skeleton-color:nth-child(3) { animation-delay: .16s; }
    .skeleton-color:nth-child(4) { animation-delay: .24s; }
    .skeleton-color:nth-child(5) { animation-delay: .32s; }

    .skeleton-content {
      padding: 16px;
    }

    .skeleton-line,
    .skeleton-chip {
      background: linear-gradient(90deg, var(--soft), var(--soft-2), var(--soft));
      background-size: 240% 100%;
      animation: skeletonShimmer 1.15s ease-in-out infinite;
      border-radius: 999px;
    }

    .skeleton-line.title { width: 72%; height: 18px; margin-bottom: 12px; }
    .skeleton-line.text { width: 100%; height: 12px; margin-bottom: 8px; opacity: .9; }
    .skeleton-line.text.short { width: 58%; }
    .skeleton-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
    .skeleton-chip { width: 54px; height: 28px; }

    .skeleton-pin::after {
      content: 'Loading palette...';
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(255,255,255,.86);
      color: #111;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      backdrop-filter: blur(8px);
    }

    body.dark .skeleton-pin::after {
      background: rgba(23,21,31,.86);
      color: var(--text);
    }

    .infinite-skeleton {
      margin-top: 18px;
    }

    @keyframes skeletonShimmer {
      0% { background-position: 140% 0; }
      100% { background-position: -140% 0; }
    }

    .generator-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 34px; box-shadow: var(--shadow); overflow: hidden; }
    .generator-palette { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 460px; }
    .gen-color { display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: white; text-shadow: 0 2px 8px rgba(0,0,0,.45); position: relative; }
    .gen-color input { width: 100%; padding: 11px; border: none; border-radius: 13px; font-weight: 950; text-align: center; margin-bottom: 10px; background: rgba(255,255,255,.88); color: #111; }
    .gen-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .generator-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 24px; background: var(--card); }

    .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .input, select.input { width: 100%; padding: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 16px; margin: 8px 0 16px; font-size: 15px; outline: none; }
    label { color: var(--muted); font-weight: 850; }
    .big-preview, .gradient-preview { min-height: 280px; border-radius: 26px; margin: 18px 0; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .result-box { background: var(--soft); border: 1px solid var(--border); padding: 16px; border-radius: 18px; margin-top: 14px; line-height: 1.8; overflow-x: auto; }
    canvas { display: none; }

    .visualizer-card { background: var(--card); border: 1px solid var(--border); border-radius: 30px; padding: 18px; box-shadow: var(--shadow); }
    .mock-site { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); }
    .mock-hero { padding: 38px; min-height: 220px; }
    .mock-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 18px; }
    .mock-box { height: 100px; border-radius: 18px; }

    .ai-chat { display: grid; grid-template-columns: 1fr; gap: 14px; }
    .chat-box { min-height: 230px; background: var(--soft-2); border: 1px solid var(--border); border-radius: 22px; padding: 18px; line-height: 1.7; }
    .message { padding: 12px 14px; border-radius: 16px; margin-bottom: 10px; max-width: 820px; }
    .message.bot { background: var(--card); }
    .message.user { background: var(--brand); color: white; margin-left: auto; }

    .price-card { position: relative; overflow: hidden; }
    .price-card.featured { border-color: rgba(230,0,35,.35); transform: scale(1.02); }
    .price-card h3 { font-size: 30px; margin-bottom: 8px; }
    .price { font-size: 46px; font-weight: 950; margin: 20px 0; letter-spacing: -1px; }
    .price-card ul { list-style: none; line-height: 2.05; color: var(--muted); margin-bottom: 22px; }
    .price-card li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 10px; vertical-align: 1px; }

    .modal { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 2000; }
    .modal.show { display: flex; }
    .modal-box { width: min(780px, 100%); background: var(--card); color: var(--text); border-radius: 30px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
    .modal-palette { display: flex; height: 250px; }
    .modal-content { padding: 24px; }
    .modal-content h2 { font-size: 34px; margin-bottom: 8px; }

    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #111; color: white; padding: 13px 22px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .25s; z-index: 3000; font-weight: 850; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .toast.show { opacity: 1; bottom: 32px; }

    footer { border-top: 1px solid var(--border); padding: 36px 0; color: var(--muted); }
    .footer-inner { width: min(1300px, 94%); margin: auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }



    /* Added polish: keyboard accessibility, better generator cards, exports */
    :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 65%, white); outline-offset: 3px; }
    .btn.danger, .small-btn.danger { background: #ffe7ec; color: var(--brand); border-color: rgba(230,0,35,.18); }
    body.dark .btn.danger, body.dark .small-btn.danger { background: rgba(230,0,35,.16); color: #ff8fa3; }
    .gen-color { transition: transform .22s ease, filter .22s ease; isolation: isolate; }
    .gen-color:hover { transform: translateY(-4px); filter: saturate(1.08); }
    .gen-color::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.22), transparent 55%); z-index:-1; }
    .gen-color input { box-shadow: 0 8px 22px rgba(0,0,0,.16); }
    .export-note { width: min(1300px, 94%); margin: 0 auto 18px; color: var(--muted); font-weight: 750; line-height: 1.55; }
    .kbd-pill { display:inline-flex; padding: 5px 10px; border-radius:999px; background: var(--soft); border:1px solid var(--border); color: var(--text); font-size: 13px; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

    @media (max-width: 980px) {
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-board { transform: none; }
      .nav-wrap { flex-wrap: wrap; }
      nav { order: 3; width: 100%; }
      .nav-actions { margin-left: auto; }
      .featured-palette { height: 240px; }
    }

    @media (max-width: 760px) {
      .hero h1 { letter-spacing: -2px; }
      .stats { grid-template-columns: 1fr; }
      .generator-palette { grid-template-columns: 1fr; }
      .gen-color { min-height: 150px; }
      .masonry { columns: 2 160px; }
      .mock-row { grid-template-columns: 1fr; }
      .section-head { align-items: start; flex-direction: column; }
      .nav-link { padding: 9px 11px; }
      .logo { font-size: 24px; }
    }
  

    /* Clean futuristic glass theme — strong light/dark contrast, no neon palette */
    :root {
      color-scheme: light;
      --bg: #eef2f8;
      --page-bg:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.92), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(207,216,235,.72), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #edf2f7 48%, #e6edf5 100%);
      --card: rgba(255,255,255,.66);
      --card-strong: rgba(255,255,255,.84);
      --text: #172033;
      --muted: #607086;
      --soft: rgba(255,255,255,.48);
      --soft-2: rgba(255,255,255,.34);
      --brand: #52637a;
      --brand-2: #748398;
      --accent: #8b6f5a;
      --yellow: #c49a4a;
      --green: #5f8b78;
      --blue: #607ca8;
      --border: rgba(37, 49, 68, .16);
      --glass-border: rgba(255,255,255,.72);
      --shadow: 0 28px 70px rgba(55, 70, 95, .18);
      --shadow-soft: 0 14px 38px rgba(55, 70, 95, .12);
      --inset-light: inset 0 1px 0 rgba(255,255,255,.78);
      --radius: 30px;
      --glass-blur: 22px;
      --button-bg: rgba(255,255,255,.54);
      --button-hover: rgba(23,32,51,.92);
      --button-hover-text: #ffffff;
      --input-bg: rgba(255,255,255,.70);
      --line-gradient: linear-gradient(135deg, rgba(255,255,255,.78), rgba(120,135,160,.28));
    }

    body.dark {
      color-scheme: dark;
      --bg: #111722;
      --page-bg:
        radial-gradient(circle at 14% 10%, rgba(86,102,126,.34), transparent 30%),
        radial-gradient(circle at 86% 8%, rgba(109,91,75,.28), transparent 34%),
        linear-gradient(135deg, #0c1119 0%, #121a27 48%, #161d29 100%);
      --card: rgba(29, 38, 52, .62);
      --card-strong: rgba(35, 45, 60, .82);
      --text: #edf3fb;
      --muted: #aeb9c8;
      --soft: rgba(255,255,255,.08);
      --soft-2: rgba(255,255,255,.12);
      --brand: #d7b98f;
      --brand-2: #b8c2d0;
      --accent: #9fb0c5;
      --yellow: #d0aa62;
      --green: #82a997;
      --blue: #8ca6c9;
      --border: rgba(255,255,255,.14);
      --glass-border: rgba(255,255,255,.18);
      --shadow: 0 30px 84px rgba(0,0,0,.44);
      --shadow-soft: 0 18px 48px rgba(0,0,0,.28);
      --inset-light: inset 0 1px 0 rgba(255,255,255,.14);
      --button-bg: rgba(255,255,255,.09);
      --button-hover: rgba(237,243,251,.92);
      --button-hover-text: #111722;
      --input-bg: rgba(255,255,255,.08);
      --line-gradient: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
    }

    html { background: var(--bg); }

    body {
      background: var(--page-bg);
      background-attachment: fixed;
      color: var(--text);
      overflow-x: hidden;
      transition: background .35s ease, color .25s ease;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      background-image:
        linear-gradient(rgba(80, 94, 115, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 94, 115, .075) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
      opacity: .56;
    }

    body.dark::before {
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
      opacity: .42;
    }

    body::after {
      content: '';
      position: fixed;
      inset: -10%;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle at 20% 24%, rgba(255,255,255,.62), transparent 26%),
        radial-gradient(circle at 80% 18%, rgba(176,185,201,.30), transparent 30%),
        radial-gradient(circle at 54% 82%, rgba(139,111,90,.16), transparent 34%);
      filter: blur(28px);
      opacity: .78;
    }

    body.dark::after {
      background:
        radial-gradient(circle at 20% 24%, rgba(135,151,173,.16), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(176,144,109,.12), transparent 32%),
        radial-gradient(circle at 54% 82%, rgba(255,255,255,.07), transparent 34%);
      opacity: .86;
    }

    header {
      background: color-mix(in srgb, var(--card-strong) 82%, transparent);
      backdrop-filter: blur(24px) saturate(145%);
      -webkit-backdrop-filter: blur(24px) saturate(145%);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }

    body.dark header { background: rgba(17,23,34,.72); }

    .logo { color: var(--text); text-shadow: none; }

    .logo-mark {
      border-radius: 16px;
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.86), transparent 18%),
        conic-gradient(from 180deg, #607ca8, #82a997, #d0aa62, #b18273, #607ca8);
      box-shadow: var(--shadow-soft), var(--inset-light);
      position: relative;
    }

    .logo-mark::after {
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 10px;
      border: 1px solid var(--glass-border);
    }

    .nav-link, .btn, .icon-btn, .chip, .small-btn, .hex, .kbd-pill, .float-btn {
      background: var(--button-bg);
      border: 1px solid var(--border);
      color: var(--text);
      box-shadow: var(--inset-light), 0 10px 26px rgba(35,45,65,.08);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
    }

    body.dark .nav-link, body.dark .btn, body.dark .icon-btn, body.dark .chip,
    body.dark .small-btn, body.dark .hex, body.dark .kbd-pill, body.dark .float-btn {
      box-shadow: var(--inset-light), 0 12px 28px rgba(0,0,0,.22);
    }

    .nav-link:hover, .nav-link.active, .btn.primary, .chip.active, .chip:hover, .float-btn.active {
      background: var(--button-hover);
      color: var(--button-hover-text);
      border-color: color-mix(in srgb, var(--text) 22%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .btn:hover, .nav-link:hover, .small-btn:hover, .icon-btn:hover, .float-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .hero h1, .section-title { text-shadow: none; }

    .gradient-text {
      background: linear-gradient(92deg, var(--text), var(--brand), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: none;
    }

    .eyebrow, .palette-count-pill, .feed-status {
      background: var(--card);
      border: 1px solid var(--border);
      backdrop-filter: blur(var(--glass-blur)) saturate(145%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
      color: var(--muted);
      box-shadow: var(--shadow-soft);
    }

    .stat, .hero-board, .tool-card, .price-card, .content-card, .mini-card,
    .explore-stage, .explore-live-banner, .explore-stat, .pin, .skeleton-pin,
    .generator-wrap, .visualizer-card, .modal-box, .loader-card, .infinite-loader-card,
    .chat-box, .message.bot, .input, select.input, .searchbar, .result-box,
    .toast {
      background: var(--card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
      backdrop-filter: blur(var(--glass-blur)) saturate(145%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
    }

    .hero-board, .explore-stage, .generator-wrap, .visualizer-card, .content-card, .price-card.featured {
      position: relative;
      overflow: hidden;
    }

    .hero-board::before, .explore-stage::before, .generator-wrap::before,
    .visualizer-card::before, .content-card::before, .price-card.featured::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: var(--line-gradient);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: .9;
    }

    .hero-board {
      transform: rotate(.4deg) perspective(900px) rotateY(-3deg);
      box-shadow: var(--shadow), var(--inset-light);
    }

    .tool-card:hover, .content-card:hover, .pin:hover, .price-card:hover {
      transform: translateY(-6px) scale(1.006);
      border-color: color-mix(in srgb, var(--brand) 36%, var(--border));
      box-shadow: var(--shadow), var(--inset-light);
    }

    .tool-icon, .stat-icon {
      background: linear-gradient(135deg, var(--brand), var(--accent));
      color: #ffffff;
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    body.dark .tool-icon, body.dark .stat-icon { color: #111722; }

    .featured-palette, .mini-strip, .ticker-strip, .infinite-color-row, .palette-preview, .gradient-preview, .big-preview, .mock-site {
      border: 1px solid var(--border);
      box-shadow: var(--inset-light), 0 18px 46px rgba(35,45,65,.10);
    }

    body.dark .featured-palette, body.dark .mini-strip, body.dark .ticker-strip,
    body.dark .infinite-color-row, body.dark .palette-preview, body.dark .gradient-preview,
    body.dark .big-preview, body.dark .mock-site {
      box-shadow: var(--inset-light), 0 18px 46px rgba(0,0,0,.26);
    }

    .color-block:hover::after {
      background: rgba(17,23,34,.42);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .pin-badge, .round-action, .skeleton-pin::after {
      background: var(--card-strong);
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
    }

    .round-action:hover, .small-btn.red, .btn.danger, .small-btn.danger {
      background: var(--button-hover);
      color: var(--button-hover-text);
      border-color: color-mix(in srgb, var(--text) 22%, transparent);
    }

    .explore-stage {
      background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 34%),
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32%),
        var(--card);
    }

    .explore-live-banner { background: var(--card); }

    .color-orb {
      filter: blur(14px) saturate(1.05);
      opacity: .28;
      mix-blend-mode: multiply;
    }

    body.dark .color-orb { opacity: .20; mix-blend-mode: screen; }

    .orb-1 { --orb: linear-gradient(135deg,#607ca8,#82a997); }
    .orb-2 { --orb: linear-gradient(135deg,#52637a,#8b6f5a); }
    .orb-3 { --orb: linear-gradient(135deg,#d0aa62,#82a997); }
    .orb-4 { --orb: linear-gradient(135deg,#b18273,#607ca8); }

    .searchbar, .input, select.input {
      background: var(--input-bg);
      caret-color: var(--brand);
    }

    .searchbar::placeholder, .input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }

    .generator-controls {
      background: color-mix(in srgb, var(--card) 84%, transparent);
      border-top: 1px solid var(--border);
      backdrop-filter: blur(20px) saturate(145%);
      -webkit-backdrop-filter: blur(20px) saturate(145%);
    }

    .gen-color input {
      background: rgba(255,255,255,.72);
      color: #172033;
      border: 1px solid rgba(255,255,255,.60);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    body.dark .gen-color input {
      background: rgba(17,23,34,.66);
      color: #edf3fb;
      border-color: rgba(255,255,255,.14);
    }

    .message.user {
      background: var(--button-hover);
      color: var(--button-hover-text);
      box-shadow: var(--shadow-soft);
    }

    .scroll-progress span {
      background: linear-gradient(90deg, var(--brand), var(--accent), var(--green));
      box-shadow: none;
    }

    .skeleton-color, .skeleton-line, .skeleton-chip {
      background: linear-gradient(90deg, var(--soft), var(--soft-2), var(--soft));
      background-size: 260% 100%;
    }

    footer {
      background: color-mix(in srgb, var(--card) 52%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .toast { background: var(--button-hover); color: var(--button-hover-text); }

    ::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--text); }

    @media (max-width: 980px) {
      .hero-board { transform: none; }
    }



    /* Fix nav tab clipping: give horizontal scroller enough vertical breathing room */
    nav {
      padding: 10px 6px;
      margin: -10px -6px;
      min-height: 66px;
      align-items: center;
    }

    .nav-link {
      flex: 0 0 auto;
      margin: 4px 0;
    }

    .nav-link.active {
      transform: none;
    }

    .nav-link:focus-visible {
      outline-offset: 2px;
    }

    @media (max-width: 980px) {
      nav {
        padding: 12px 8px;
        margin: -12px -8px;
        min-height: 70px;
      }
    }


    /* Smart Filter Dock — compact, tabbed, collapsible filter UX */
    .filter-search-wrap {
      position: relative;
      z-index: 40;
    }

    .filter-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      margin: 12px 0 10px;
    }

    .filter-search-row .searchbar {
      margin: 0;
      padding-left: 46px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--card-strong) 78%, transparent), color-mix(in srgb, var(--soft) 72%, transparent));
    }

    .filter-search-shell {
      position: relative;
      min-width: 0;
    }

    .filter-search-shell::before {
      content: '⌕';
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      font-size: 22px;
      font-weight: 950;
      color: var(--muted);
      pointer-events: none;
    }

    .filter-panel-toggle,
    .filter-clear-mini,
    .filter-done-btn,
    .clear-filter-btn {
      padding: 14px 16px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--button-bg);
      color: var(--text);
      font-weight: 950;
      cursor: pointer;
      box-shadow: var(--shadow-soft), var(--inset-light);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      white-space: nowrap;
      transition: .18s ease;
    }

    .filter-panel-toggle.active,
    .filter-panel-toggle:hover,
    .filter-clear-mini:hover,
    .filter-done-btn:hover,
    .clear-filter-btn:hover {
      background: var(--button-hover);
      color: var(--button-hover-text);
      transform: translateY(-1px);
    }

    .filter-panel-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .filter-panel-toggle::before {
      content: '⚙';
      font-size: 15px;
    }

    .selected-search-tags {
      display: none;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 12px;
      min-height: 0;
    }

    .selected-search-tags.show {
      display: flex;
    }

    .selected-filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--button-hover);
      color: var(--button-hover-text);
      font-weight: 950;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }

    .selected-filter-pill button {
      border: none;
      background: rgba(255,255,255,.18);
      color: inherit;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      cursor: pointer;
      font-weight: 950;
      line-height: 1;
    }

    .tag-filter-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 10px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px) scale(.985);
      transform-origin: top center;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      border-radius: 30px;
      background:
        radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 28%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 26%),
        color-mix(in srgb, var(--card-strong) 92%, transparent);
      border: 1px solid var(--border);
      box-shadow: 0 28px 80px rgba(26,35,52,.18), var(--inset-light);
      backdrop-filter: blur(28px) saturate(155%);
      -webkit-backdrop-filter: blur(28px) saturate(155%);
      padding: 16px;
      max-height: min(560px, calc(100vh - 190px));
      overflow: hidden;
    }

    body.dark .tag-filter-panel {
      box-shadow: 0 34px 90px rgba(0,0,0,.42), var(--inset-light);
    }

    .tag-filter-panel.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .filter-dock-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
    }

    .filter-dock-title h3 {
      font-size: 20px;
      line-height: 1.05;
      letter-spacing: -.5px;
    }

    .filter-dock-title p {
      color: var(--muted);
      font-weight: 800;
      font-size: 13px;
      margin-top: 5px;
    }

    .filter-dock-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .filter-quick-row {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding: 4px 2px 13px;
      margin-bottom: 12px;
      scrollbar-width: thin;
    }

    .filter-quick-row::-webkit-scrollbar { height: 5px; }
    .filter-quick-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

    .quick-filter-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--soft) 72%, transparent);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 13px;
      font-weight: 950;
      cursor: pointer;
      transition: .18s ease;
    }

    .quick-filter-chip:hover,
    .quick-filter-chip.active {
      background: var(--button-hover);
      color: var(--button-hover-text);
      transform: translateY(-1px);
    }

    .filter-dock-body {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr);
      gap: 14px;
      min-height: 260px;
    }

    .filter-dock-tabs {
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 8px;
      border-radius: 22px;
      background: color-mix(in srgb, var(--soft) 58%, transparent);
      border: 1px solid var(--border);
      overflow-y: auto;
    }

    .filter-tab-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      font-weight: 950;
      cursor: pointer;
      transition: .18s ease;
      text-align: left;
    }

    .filter-tab-btn span:first-child {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    .filter-tab-count {
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
    }

    .filter-tab-btn:hover,
    .filter-tab-btn.active {
      background: var(--card-strong);
      border-color: var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    .filter-tab-btn.active .filter-tab-count {
      color: var(--text);
    }

    .filter-dock-content {
      border: 1px solid var(--border);
      border-radius: 24px;
      background: color-mix(in srgb, var(--card) 68%, transparent);
      padding: 15px;
      min-width: 0;
      overflow: hidden;
    }

    .filter-dock-section-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: end;
      margin-bottom: 14px;
    }

    .filter-dock-section-head h4 {
      font-size: 18px;
      letter-spacing: -.3px;
    }

    .filter-dock-section-head p {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-top: 4px;
    }

    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-height: 315px;
      overflow-y: auto;
      padding-right: 6px;
    }

    .filter-tags::-webkit-scrollbar { width: 6px; }
    .filter-tags::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

    .filter-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--soft) 70%, transparent);
      color: var(--text);
      padding: 11px 14px;
      border-radius: 999px;
      font-weight: 950;
      cursor: pointer;
      transition: .18s ease;
      min-height: 43px;
    }

    .filter-tag:hover,
    .filter-tag.active {
      background: var(--button-hover);
      color: var(--button-hover-text);
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .tag-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex: 0 0 auto;
      border: 1px solid rgba(0,0,0,.12);
      background: var(--tag-color, currentColor);
    }

    body.dark .tag-dot {
      border-color: rgba(255,255,255,.18);
    }

    .filter-result-hint {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    @media (max-width: 980px) {
      .tag-filter-panel {
        position: fixed;
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 14px;
        max-height: min(78vh, 700px);
        border-radius: 28px;
      }
      .filter-dock-body { grid-template-columns: 1fr; min-height: 0; }
      .filter-dock-tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
      }
      .filter-tab-btn { flex: 0 0 auto; width: auto; }
      .filter-tags { max-height: 330px; }
    }

    @media (max-width: 620px) {
      .filter-search-row { grid-template-columns: 1fr auto; }
      .filter-clear-mini { display: none; }
      .filter-dock-head { align-items: start; }
      .filter-dock-title p { display: none; }
      .filter-dock-actions { flex-direction: column; align-items: stretch; }
      .filter-done-btn, .clear-filter-btn { padding: 10px 12px; }
      .tag-filter-panel { padding: 12px; }
      .filter-dock-content { padding: 12px; }
      .filter-tags { max-height: 310px; gap: 8px; }
      .filter-tag { padding: 10px 12px; font-size: 14px; }
    }


    /* Clean Explore UX v3 — search-triggered horizontal filter rows */
    #explore { padding-top: 22px; }

    .explore-page-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      margin: 10px 0 18px;
    }

    .explore-page-head h2 {
      font-size: clamp(36px, 5vw, 64px);
      line-height: .95;
      letter-spacing: -2.2px;
      margin-bottom: 10px;
    }

    .explore-page-head p {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
      font-weight: 760;
    }

    .explore-count-badge {
      padding: 13px 17px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
      color: var(--muted);
      font-weight: 950;
      white-space: nowrap;
    }

    .explore-stage.clean-explore-stage {
      overflow: visible;
      padding: 18px;
      border-radius: 32px;
      margin-bottom: 24px;
    }

    .filter-search-wrap {
      position: relative;
      z-index: 40;
    }

    .filter-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin: 0;
    }

    .filter-search-shell { position: relative; }

    .filter-search-shell::before {
      content: '⌕';
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      color: var(--muted);
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }

    .filter-search-row .searchbar {
      height: 62px;
      margin: 0;
      padding-left: 58px;
      padding-right: 22px;
      font-size: 17px;
      border-radius: 999px;
      cursor: text;
    }

    .filter-clear-mini,
    .filter-done-btn,
    .clean-load-more-btn {
      min-height: 56px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 950;
      border: 1px solid var(--border);
      background: var(--button-bg);
      color: var(--text);
      box-shadow: var(--shadow-soft), var(--inset-light);
      cursor: pointer;
      transition: .18s ease;
    }

    .filter-clear-mini:hover,
    .filter-done-btn:hover,
    .clean-load-more-btn:hover { transform: translateY(-1px); }

    .selected-search-tags {
      display: none;
      margin: 12px 0 0;
    }

    .selected-search-tags.show { display: flex; }

    .selected-filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 950;
      padding: 9px 13px;
      border-radius: 999px;
      background: var(--button-hover);
      color: var(--button-hover-text);
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    .selected-filter-pill button {
      border: 0;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      color: currentColor;
      cursor: pointer;
      font-weight: 950;
    }

    .tag-filter-panel {
      position: static;
      height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translate3d(0, -8px, 0);
      padding: 0 18px;
      margin-top: 0;
      border: 0 solid var(--border);
      border-radius: 28px;
      background: color-mix(in srgb, var(--card) 92%, transparent);
      box-shadow: none;
      backdrop-filter: blur(var(--glass-blur)) saturate(145%);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
      will-change: height, opacity, transform;
      contain: layout paint;
      transition:
        height .46s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        transform .34s cubic-bezier(.22, 1, .36, 1),
        padding .34s cubic-bezier(.22, 1, .36, 1),
        margin .34s cubic-bezier(.22, 1, .36, 1),
        border-width .34s cubic-bezier(.22, 1, .36, 1),
        box-shadow .34s ease;
    }

    .tag-filter-panel.open {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      padding: 18px;
      margin-top: 14px;
      border-width: 1px;
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    .tag-filter-panel.is-ready {
      overflow: hidden;
    }

    .tag-filter-panel-inner {
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .22s ease .08s, transform .28s cubic-bezier(.22, 1, .36, 1) .06s;
    }

    .tag-filter-panel.open .tag-filter-panel-inner {
      opacity: 1;
      transform: translateY(0);
    }

    .filter-panel-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
    }

    .filter-panel-top strong {
      display: block;
      font-size: 19px;
      letter-spacing: -.3px;
      margin-bottom: 3px;
    }

    .filter-panel-top span {
      color: var(--muted);
      font-weight: 800;
      font-size: 13px;
    }

    .filter-category-list {
      display: grid;
      gap: 14px;
    }

    .filter-row-group {
      min-width: 0;
    }

    .filter-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 0 8px;
    }

    .filter-row-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 950;
      color: var(--text);
    }

    .filter-row-hint {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .filter-scroll-row {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 2px 10px;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }

    .filter-scroll-row::-webkit-scrollbar { height: 6px; }
    .filter-scroll-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

    .filter-tag {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 10px 15px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--button-bg);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: var(--inset-light), 0 8px 20px rgba(35,45,65,.06);
      scroll-snap-align: start;
      transition: .18s ease;
      white-space: nowrap;
    }

    .filter-tag:hover,
    .filter-tag.active {
      background: var(--button-hover);
      color: var(--button-hover-text);
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    .tag-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--tag-color);
      border: 1px solid rgba(0,0,0,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    }

    .explore-feed-status-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
    }

    .feed-status {
      min-height: 0;
      font-size: 13px;
    }

    .load-more-row {
      display: flex;
      justify-content: center;
      margin: 34px 0 10px;
      padding: 8px 0 22px;
    }

    .load-more-row .btn.primary {
      min-width: 230px;
      min-height: 56px;
      padding: 0 28px;
      border-radius: 999px;
      background: var(--button-hover);
      color: var(--button-hover-text);
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    .load-more-row .btn.primary:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
    }

    #chips,
    .explore-quick-actions,
    .explore-floating-controls {
      display: none !important;
    }

    .masonry {
      columns: 4 245px;
      column-gap: 22px;
    }

    .pin {
      margin-bottom: 22px;
      border-radius: 30px;
    }

    #paletteGrid {
      min-height: 420px;
      content-visibility: auto;
      contain-intrinsic-size: 1200px;
    }

    .pin.appended-card {
      animation: appendPaletteCard .32s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes appendPaletteCard {
      from { opacity: 0; transform: translateY(18px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }


    @media (max-width: 980px) {
      .explore-page-head { align-items: start; flex-direction: column; }
      .filter-search-row { grid-template-columns: 1fr; }
      .filter-clear-mini { width: 100%; justify-content: center; }
    }

    @media (max-width: 620px) {
      .explore-stage.clean-explore-stage { padding: 14px; border-radius: 24px; }
      .tag-filter-panel { padding-left: 14px; padding-right: 14px; }
      .tag-filter-panel.open { padding-top: 14px; padding-bottom: 14px; }
      .filter-panel-top { align-items: start; }
      .filter-done-btn { min-height: 44px; padding: 0 16px; }
      .masonry { columns: 2 160px; column-gap: 14px; }
    }

  
    /* Final Explore search section fix — no extra bottom block */
    .explore-search-section {
      position: relative;
      z-index: 40;
      width: 100%;
      margin: 18px 0 28px !important;
      padding: 0 !important;
      min-height: 0 !important;
      height: auto !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .explore-search-section::before,
    .explore-search-section::after {
      display: none !important;
      content: none !important;
    }

    .explore-search-section .filter-search-wrap {
      position: relative;
      z-index: 41;
      margin: 0 !important;
      padding: 8px !important;
      min-height: 0 !important;
      height: auto !important;
      border-radius: 24px !important;
      background: color-mix(in srgb, var(--card-strong) 82%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
      box-shadow: 0 14px 34px rgba(35,45,65,.09), var(--inset-light) !important;
      backdrop-filter: blur(22px) saturate(145%) !important;
      -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
      overflow: visible !important;
    }

    .explore-search-section .filter-search-row {
      margin: 0 !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 8px !important;
      align-items: center !important;
    }

    .explore-search-section .filter-search-row .searchbar {
      height: 56px !important;
      min-height: 56px !important;
      margin: 0 !important;
      border-radius: 18px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    .explore-search-section .filter-clear-mini {
      height: 56px !important;
      min-height: 56px !important;
      margin: 0 !important;
      border-radius: 18px !important;
      align-self: stretch !important;
    }

    .explore-search-section .selected-search-tags:not(.show) {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .explore-search-section .tag-filter-panel:not(.open) {
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-width: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .explore-search-section #chips,
    .explore-search-section .explore-quick-actions,
    .explore-search-section .explore-floating-controls,
    .explore-search-section .parallax-bg,
    .explore-search-section .color-orb {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .explore-feed-status-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    @media (max-width: 760px) {
      .explore-search-section .filter-search-wrap {
        border-radius: 20px !important;
        padding: 7px !important;
      }

      .explore-search-section .filter-search-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
      }

      .explore-search-section .filter-clear-mini {
        min-width: 72px !important;
        padding: 0 12px !important;
      }
    }

  
    /* Reliable filter panel height + no cut bottom tags */
    .tag-filter-panel {
      box-sizing: border-box !important;
    }

    .tag-filter-panel.open {
      padding: 16px !important;
      margin-top: 10px !important;
      overflow: hidden;
    }

    .tag-filter-panel.open .tag-filter-panel-inner {
      display: block;
      padding-bottom: 2px;
    }

    .filter-category-list {
      padding-bottom: 0 !important;
    }

    .filter-row-group {
      padding-bottom: 0 !important;
    }

    .filter-row-group:last-child {
      margin-bottom: 0 !important;
    }

    .filter-scroll-row {
      padding-top: 2px !important;
      padding-bottom: 12px !important;
      margin-bottom: 0 !important;
    }

    .filter-tag {
      margin-bottom: 0 !important;
    }

  
    /* FINAL FIX: expanded filter panel should never cut bottom tags */
    .explore-search-section,
    .filter-search-wrap,
    .tag-filter-panel.open,
    .tag-filter-panel.open .tag-filter-panel-inner,
    .filter-category-list,
    .filter-row-group {
      overflow: visible !important;
    }

    .tag-filter-panel {
      box-sizing: border-box !important;
      height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-width: 0 !important;
    }

    .tag-filter-panel.open {
      height: auto !important;
      max-height: none !important;
      min-height: fit-content !important;
      margin-top: 10px !important;
      padding: 16px 16px 30px !important;
      border-width: 1px !important;
      overflow: visible !important;
    }

    .tag-filter-panel.open .tag-filter-panel-inner {
      height: auto !important;
      max-height: none !important;
      padding-bottom: 8px !important;
      overflow: visible !important;
    }

    .filter-category-list {
      display: grid !important;
      gap: 18px !important;
      height: auto !important;
      max-height: none !important;
      padding-bottom: 4px !important;
    }

    .filter-row-group {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    .filter-row-group:last-child {
      padding-bottom: 16px !important;
    }

    .filter-scroll-row {
      min-height: 58px !important;
      padding: 2px 2px 14px !important;
      margin-bottom: 0 !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      align-items: center !important;
    }

    .filter-tag {
      flex: 0 0 auto !important;
      min-height: 42px !important;
      margin: 0 !important;
      transform: none;
    }

    .filter-tag:hover,
    .filter-tag.active {
      transform: translateY(-1px);
    }

    /* Make sure the palette grid starts after the whole expanded filter panel */
    #paletteGrid {
      clear: both;
    }

  
    /* Selected filter is shown inside search input only — no separate pill row */
    .selected-search-tags,
    .selected-search-tags.show {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

  
    /* Selected tag shown inside search input with remove button */
    .filter-search-wrap.has-filter .filter-search-row .searchbar {
      padding-left: 56px !important;
      color: transparent !important;
      caret-color: var(--text) !important;
    }

    .filter-search-wrap.has-filter .filter-search-row .searchbar::placeholder {
      color: transparent !important;
    }

    .search-inline-tag {
      display: none;
      position: absolute;
      left: 56px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      max-width: min(420px, calc(100% - 78px));
      align-items: center;
      gap: 9px;
      padding: 8px 10px 8px 14px;
      border-radius: 999px;
      background: var(--button-hover);
      color: var(--button-hover-text);
      box-shadow: var(--shadow-soft), var(--inset-light);
      font-size: 15px;
      font-weight: 950;
      line-height: 1;
      pointer-events: auto;
    }

    .filter-search-wrap.has-filter .search-inline-tag {
      display: inline-flex;
    }

    .search-inline-tag span {
      max-width: 320px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-inline-tag button {
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      color: inherit;
      cursor: pointer;
      font-size: 17px;
      line-height: 1;
      font-weight: 950;
      display: grid;
      place-items: center;
      transition: .16s ease;
    }

    .search-inline-tag button:hover {
      background: rgba(255,255,255,.28);
      transform: scale(1.06);
    }

    @media (max-width: 620px) {
      .search-inline-tag {
        left: 50px;
        max-width: calc(100% - 66px);
        font-size: 14px;
      }

      .search-inline-tag span {
        max-width: 190px;
      }
    }

  
    /* Selected tag inside search bar with cross clear */
    .filter-search-shell {
      position: relative !important;
    }

    .filter-search-wrap.has-filter .filter-search-row .searchbar {
      color: transparent !important;
      caret-color: transparent !important;
    }

    .filter-search-wrap.has-filter .filter-search-row .searchbar::placeholder {
      color: transparent !important;
    }

    .search-inline-tag {
      display: none;
      position: absolute;
      left: 56px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      max-width: min(440px, calc(100% - 76px));
      align-items: center;
      gap: 10px;
      padding: 9px 10px 9px 15px;
      border-radius: 999px;
      background: var(--button-hover);
      color: var(--button-hover-text);
      box-shadow: var(--shadow-soft), var(--inset-light);
      font-size: 15px;
      font-weight: 950;
      line-height: 1;
      pointer-events: auto;
    }

    .filter-search-wrap.has-filter .search-inline-tag {
      display: inline-flex !important;
    }

    .search-inline-tag span {
      max-width: 340px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-inline-tag button {
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.20);
      color: inherit;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
      display: grid;
      place-items: center;
      transition: .16s ease;
    }

    .search-inline-tag button:hover {
      background: rgba(255,255,255,.32);
      transform: scale(1.06);
    }

    .selected-search-tags,
    .selected-search-tags.show {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    @media (max-width: 620px) {
      .search-inline-tag {
        left: 50px;
        max-width: calc(100% - 64px);
        font-size: 14px;
      }

      .search-inline-tag span {
        max-width: 190px;
      }
    }

  
    /* FIX: show selected tag as pill inside search bar */
    .filter-search-shell {
      position: relative !important;
    }

    .search-inline-tag {
      position: absolute !important;
      left: 56px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 50 !important;
      display: none !important;
      align-items: center !important;
      gap: 10px !important;
      max-width: min(440px, calc(100% - 78px)) !important;
      padding: 9px 10px 9px 15px !important;
      border-radius: 999px !important;
      background: var(--button-hover) !important;
      color: var(--button-hover-text) !important;
      box-shadow: var(--shadow-soft), var(--inset-light) !important;
      font-size: 15px !important;
      font-weight: 950 !important;
      line-height: 1 !important;
      pointer-events: auto !important;
    }

    .search-inline-tag.show {
      display: inline-flex !important;
    }

    .search-inline-tag span {
      max-width: 340px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .search-inline-tag button {
      width: 24px !important;
      height: 24px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.20) !important;
      color: inherit !important;
      cursor: pointer !important;
      font-size: 18px !important;
      line-height: 1 !important;
      font-weight: 950 !important;
      display: grid !important;
      place-items: center !important;
    }

    .search-inline-tag button:hover {
      background: rgba(255,255,255,.32) !important;
      transform: scale(1.06) !important;
    }

    .filter-search-wrap.has-filter .searchbar {
      color: transparent !important;
      caret-color: transparent !important;
    }

    .filter-search-wrap.has-filter .searchbar::placeholder {
      color: transparent !important;
    }

    .selected-search-tags,
    .selected-search-tags.show {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    @media (max-width: 620px) {
      .search-inline-tag {
        left: 50px !important;
        max-width: calc(100% - 64px) !important;
        font-size: 14px !important;
      }

      .search-inline-tag span {
        max-width: 190px !important;
      }
    }

  
    /* Load More: append only, no full-grid flicker */
    .pin.appended-card {
      animation: appendPaletteCard .28s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes appendPaletteCard {
      from { opacity: 0; transform: translateY(14px) scale(.99); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .load-more-row .btn[disabled] {
      opacity: .58;
      cursor: not-allowed;
      transform: none !important;
    }

  
    /* FINAL Smooth Scroll Fix:
       Keep already loaded cards painted. Do not virtualize/reveal them again when scrolling back. */
    #paletteGrid {
      content-visibility: visible !important;
      contain: none !important;
      contain-intrinsic-size: auto !important;
      overflow-anchor: none;
    }

    #paletteGrid .pin {
      content-visibility: visible !important;
      contain: none !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #paletteGrid .pin.reveal-card {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    #paletteGrid .pin.appended-card {
      animation: appendPaletteCard .22s cubic-bezier(.22, 1, .36, 1) both !important;
      will-change: opacity, transform;
    }

    #paletteGrid .pin.appended-card.append-done {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      will-change: auto;
    }

    @keyframes appendPaletteCard {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

  
    /* Load More UX: after appending, scroll to the first new palette with header offset */
    #paletteGrid .pin {
      scroll-margin-top: 120px;
    }

    @media (max-width: 760px) {
      #paletteGrid .pin {
        scroll-margin-top: 96px;
      }
    }

  
    /* Smooth Load More scroll behavior */
    html {
      scroll-behavior: auto;
    }

    #paletteGrid,
    .load-more-row {
      overflow-anchor: none;
    }

    #paletteGrid .pin {
      scroll-margin-top: 120px;
    }

    @media (max-width: 760px) {
      #paletteGrid .pin {
        scroll-margin-top: 96px;
      }
    }

  
    /* Load More scroll lock:
       keep viewport stable when new cards are appended above the button */
    html,
    body,
    #paletteGrid,
    .load-more-row,
    #infiniteLoader,
    #infiniteSkeleton {
      overflow-anchor: none !important;
    }

    #paletteGrid {
      content-visibility: visible !important;
      contain: none !important;
      contain-intrinsic-size: auto !important;
    }

    #paletteGrid .pin {
      content-visibility: visible !important;
      contain: none !important;
    }

  
    /* Card UX cleanup: remove hover movement, shadow glow, and arrow/mouse-follow animations */
    .pin,
    .pin:hover,
    .pin:focus,
    .pin:focus-within {
      transform: none !important;
      animation: none !important;
      transition: none !important;
      box-shadow: none !important;
    }

    .pin::before,
    .pin::after {
      display: none !important;
      opacity: 0 !important;
      content: none !important;
      background: none !important;
      animation: none !important;
      transition: none !important;
    }

    .pin:hover::after,
    .pin:hover::before {
      display: none !important;
      opacity: 0 !important;
    }

    .palette-preview,
    .pin:hover .palette-preview {
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }

    .color-block,
    .color-block:hover {
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }

    .pin-top-actions,
    .pin-top-actions:hover {
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }

    .round-action,
    .round-action:hover,
    .round-action:focus {
      transform: none !important;
      animation: none !important;
      transition: none !important;
      box-shadow: none !important;
    }

    .small-btn,
    .small-btn:hover,
    .hex,
    .hex:hover {
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }

    #paletteGrid .pin.reveal-card,
    #paletteGrid .pin.appended-card,
    #paletteGrid .pin.appended-card.append-done {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      will-change: auto !important;
    }

  
    /* Palette color hover: show only HEX code, no highlight/overlay/shadow */
    .palette-preview .color-block {
      position: relative !important;
      overflow: hidden !important;
      transform: none !important;
      filter: none !important;
      box-shadow: none !important;
      transition: none !important;
    }

    .palette-preview .color-block:hover {
      transform: none !important;
      filter: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

    .palette-preview .color-block::before,
    .palette-preview .color-block::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
      background: none !important;
      box-shadow: none !important;
      filter: none !important;
    }

    .palette-preview .color-block:hover::before,
    .palette-preview .color-block:hover::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
    }

    .palette-preview .color-block .hover-hex {
      position: absolute !important;
      inset: 0 !important;
      display: grid !important;
      place-items: center !important;
      opacity: 0 !important;
      pointer-events: none !important;
      background: transparent !important;
      color: #ffffff !important;
      font-size: clamp(18px, 2.2vw, 32px) !important;
      font-weight: 950 !important;
      letter-spacing: .3px !important;
      text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
      transition: opacity .12s ease !important;
    }

    .palette-preview .color-block:hover .hover-hex {
      opacity: 1 !important;
    }

  
    .copy-flash,
    .color-block.copy-flash {
      animation: none !important;
      box-shadow: none !important;
      outline: none !important;
      filter: none !important;
    }

  
    /* Card layout update:
       - remove top-left category badge on palette image
       - show preview/copy/save buttons vertically on top-right side */
    .pin-badge {
      display: none !important;
    }

    .pin-top-actions {
      position: absolute !important;
      top: 18px !important;
      right: 18px !important;
      left: auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 10px !important;
      z-index: 8 !important;
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }

    .pin-top-actions .round-action {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      min-height: 48px !important;
      border-radius: 999px !important;
      display: grid !important;
      place-items: center !important;
      background: color-mix(in srgb, var(--card-strong) 84%, transparent) !important;
      border: 1px solid var(--border) !important;
      color: var(--text) !important;
      box-shadow: var(--inset-light) !important;
      transform: none !important;
      animation: none !important;
      transition: background .16s ease, color .16s ease, border-color .16s ease !important;
    }

    .pin-top-actions .round-action:hover {
      background: var(--button-hover) !important;
      color: var(--button-hover-text) !important;
      transform: none !important;
      box-shadow: var(--inset-light) !important;
    }

    .pin-top-actions .round-action svg {
      width: 20px !important;
      height: 20px !important;
    }

    @media (max-width: 620px) {
      .pin-top-actions {
        top: 12px !important;
        right: 12px !important;
        gap: 8px !important;
      }

      .pin-top-actions .round-action {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
      }
    }

  
    /* Remove like count pills from palette card */
    .pin-meta-line small:has(svg),
    .actions .small-btn:has(svg) {
      display: none !important;
    }

    .pin-meta-line {
      justify-content: flex-start !important;
    }

    .actions {
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

  
    /* Removed features: AI Bot and Pricing */
    .nav-link[onclick*="aiBot"],
    .nav-link[onclick*="pricing"],
    section#aiBot,
    section#pricing {
      display: none !important;
    }

  
    /* Contrast checker live color UI */
    .contrast-color-grid {
      align-items: end;
    }

    .contrast-color-field label {
      display: block;
      margin-bottom: 10px;
      font-weight: 950;
      color: var(--muted);
    }

    .contrast-color-control {
      position: relative;
      display: grid;
      grid-template-columns: 64px 44px minmax(120px, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 62px;
      padding: 8px 14px 8px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      box-shadow: var(--inset-light);
    }

    .contrast-picker {
      width: 54px !important;
      height: 46px !important;
      min-height: 46px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      cursor: pointer;
      box-shadow: none !important;
    }

    .contrast-picker::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: 999px;
    }

    .contrast-picker::-webkit-color-swatch {
      border: 1px solid var(--border);
      border-radius: 999px;
    }

    .contrast-picker::-moz-color-swatch {
      border: 1px solid var(--border);
      border-radius: 999px;
    }

    .contrast-swatch {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--swatch-color, #111111);
      box-shadow: var(--inset-light);
    }

    .contrast-hex {
      font-size: 16px;
      letter-spacing: .4px;
      color: var(--text);
      white-space: nowrap;
    }

    .contrast-live-preview {
      min-height: 280px;
      display: grid;
      place-items: center;
      transition: background .08s linear, color .08s linear;
    }

    .contrast-preview-text {
      padding: 40px;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 950;
      text-align: center;
      line-height: 1.15;
      transition: color .08s linear;
    }

    @media (max-width: 720px) {
      .contrast-color-control {
        grid-template-columns: 58px 38px 1fr;
        border-radius: 24px;
      }

      .contrast-hex {
        font-size: 14px;
      }
    }

  
    /* Attractive Contrast Checker panel */
    .contrast-picker-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 16px;
      align-items: stretch;
      margin-bottom: 22px;
    }

    .contrast-color-card {
      position: relative;
      padding: 18px;
      border-radius: 28px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.62), transparent 36%),
        color-mix(in srgb, var(--card-strong) 86%, transparent);
      box-shadow: 0 18px 50px rgba(35,45,65,.10), var(--inset-light);
      overflow: hidden;
    }

    .contrast-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .contrast-card-head label {
      display: block;
      margin: 0 0 3px;
      font-weight: 950;
      color: var(--text);
      font-size: 17px;
    }

    .contrast-card-head p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .contrast-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: var(--soft);
      border: 1px solid var(--border);
      box-shadow: var(--inset-light);
      font-weight: 950;
      color: var(--text);
      flex: 0 0 auto;
    }

    .contrast-color-control {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) 52px;
      gap: 14px;
      align-items: center;
      padding: 12px;
      border-radius: 24px;
      background: color-mix(in srgb, var(--input-bg) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }

    .contrast-swatch-large {
      width: 70px;
      height: 70px;
      border: 3px solid color-mix(in srgb, white 72%, var(--border));
      border-radius: 22px;
      background: var(--swatch-color, #111111);
      box-shadow: 0 12px 30px rgba(20,28,44,.18), inset 0 1px 0 rgba(255,255,255,.3);
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease;
    }

    .contrast-swatch-large:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 34px rgba(20,28,44,.22), inset 0 1px 0 rgba(255,255,255,.3);
    }

    .contrast-hex-wrap {
      min-width: 0;
    }

    .contrast-hex {
      display: block;
      color: var(--text);
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 950;
      letter-spacing: .4px;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contrast-hex-wrap span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .7px;
    }

    .contrast-picker {
      width: 50px !important;
      height: 50px !important;
      min-height: 50px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      cursor: pointer;
      box-shadow: none !important;
      overflow: hidden;
    }

    .contrast-picker::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: 999px;
    }

    .contrast-picker::-webkit-color-swatch {
      border: 2px solid color-mix(in srgb, white 70%, var(--border));
      border-radius: 999px;
    }

    .contrast-picker::-moz-color-swatch {
      border: 2px solid color-mix(in srgb, white 70%, var(--border));
      border-radius: 999px;
    }

    .contrast-swap-mini {
      width: 58px;
      height: 58px;
      align-self: center;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--button-bg);
      color: var(--text);
      box-shadow: var(--shadow-soft), var(--inset-light);
      font-size: 24px;
      font-weight: 950;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }

    .contrast-swap-mini:hover {
      transform: rotate(180deg);
      background: var(--button-hover);
      color: var(--button-hover-text);
    }

    .contrast-live-preview {
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
    }

    @media (max-width: 860px) {
      .contrast-picker-panel {
        grid-template-columns: 1fr;
      }

      .contrast-swap-mini {
        justify-self: center;
        transform: rotate(90deg);
      }

      .contrast-swap-mini:hover {
        transform: rotate(270deg);
      }
    }

    @media (max-width: 520px) {
      .contrast-color-control {
        grid-template-columns: 62px minmax(0, 1fr) 46px;
        gap: 10px;
      }

      .contrast-swatch-large {
        width: 60px;
        height: 60px;
        border-radius: 18px;
      }

      .contrast-picker {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
      }
    }

  
    /* Simple attractive contrast picker */
    .simple-contrast-panel {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
      gap: 14px !important;
      align-items: center !important;
      margin-bottom: 22px !important;
    }

    .simple-color-control {
      position: relative;
      display: grid;
      grid-template-columns: auto 46px minmax(110px, 1fr) 48px;
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: color-mix(in srgb, var(--card-strong) 84%, transparent);
      box-shadow: 0 14px 34px rgba(35,45,65,.08), var(--inset-light);
      cursor: pointer;
    }

    .simple-color-label {
      font-size: 13px;
      font-weight: 950;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .7px;
      white-space: nowrap;
    }

    .simple-color-dot {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: var(--swatch-color, #111111);
      border: 2px solid color-mix(in srgb, white 70%, var(--border));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
    }

    .simple-color-hex {
      font-size: clamp(18px, 2vw, 24px);
      color: var(--text);
      font-weight: 950;
      letter-spacing: .3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .simple-color-control .contrast-picker {
      width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      cursor: pointer;
    }

    .simple-color-control .contrast-picker::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    .simple-color-control .contrast-picker::-webkit-color-swatch {
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .simple-color-control .contrast-picker::-moz-color-swatch {
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .simple-contrast-panel .contrast-swap-mini {
      width: 54px !important;
      height: 54px !important;
      border-radius: 18px !important;
      border: 1px solid var(--border) !important;
      background: var(--button-bg) !important;
      color: var(--text) !important;
      box-shadow: var(--inset-light) !important;
      font-size: 22px !important;
      font-weight: 950 !important;
      cursor: pointer;
      transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .simple-contrast-panel .contrast-swap-mini:hover {
      background: var(--button-hover) !important;
      color: var(--button-hover-text) !important;
      transform: none !important;
    }

    @media (max-width: 860px) {
      .simple-contrast-panel {
        grid-template-columns: 1fr !important;
      }

      .simple-contrast-panel .contrast-swap-mini {
        justify-self: center;
      }
    }

    @media (max-width: 520px) {
      .simple-color-control {
        grid-template-columns: 1fr 40px 105px 40px;
        gap: 9px;
        padding: 10px;
      }

      .simple-color-label {
        font-size: 12px;
      }

      .simple-color-dot,
      .simple-color-control .contrast-picker {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
      }
    }

  
    /* Contrast picker: show selected color only once */
    .simple-color-control {
      grid-template-columns: auto 46px minmax(110px, 1fr) !important;
    }

    .simple-color-control .contrast-picker {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      opacity: 0 !important;
      cursor: pointer !important;
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      pointer-events: auto !important;
    }

    .simple-color-label,
    .simple-color-dot,
    .simple-color-hex {
      position: relative;
      z-index: 2;
      pointer-events: none;
    }

    @media (max-width: 520px) {
      .simple-color-control {
        grid-template-columns: 1fr 40px 105px !important;
      }
    }

  
    /* Contrast checker: black border for selected color square */
    .simple-color-dot,
    .contrast-swatch,
    .contrast-swatch-large {
      border: 2px solid #000000 !important;
    }

    .simple-color-control .contrast-picker::-webkit-color-swatch,
    .contrast-picker::-webkit-color-swatch {
      border: 2px solid #000000 !important;
    }

    .simple-color-control .contrast-picker::-moz-color-swatch,
    .contrast-picker::-moz-color-swatch {
      border: 2px solid #000000 !important;
    }

  
    /* Simple attractive gradient builder */
    .gradient-simple-card {
      padding: 22px;
    }

    .gradient-top-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, .9fr);
      gap: 14px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .gradient-chip-card,
    .gradient-angle-card {
      display: block;
      padding: 14px;
      border-radius: 24px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 88%, transparent);
      box-shadow: var(--inset-light);
    }

    .gradient-chip-label {
      display: block;
      font-size: 13px;
      font-weight: 900;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 10px;
    }

    .gradient-chip-body {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 18px;
      background: color-mix(in srgb, white 54%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
      position: relative;
      min-height: 60px;
      cursor: pointer;
    }

    .gradient-chip-swatch {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 2px solid #000;
      background: var(--swatch-color, #ff006e);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
      pointer-events: none;
    }

    .gradient-chip-hex {
      font-size: 20px;
      font-weight: 950;
      color: var(--text);
      letter-spacing: .3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
    }

    .gradient-color-input {
      width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
    }

    .gradient-color-input::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    .gradient-color-input::-webkit-color-swatch,
    .gradient-color-input::-moz-color-swatch {
      border: 1px solid var(--border);
      border-radius: 14px;
    }

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

    .gradient-angle-value {
      font-size: 20px;
      font-weight: 950;
      color: var(--text);
    }

    .gradient-angle-range {
      width: 100%;
      accent-color: var(--button-hover);
    }

    .gradient-preview-wrap {
      padding: 8px;
      border-radius: 30px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 84%, transparent);
      box-shadow: var(--inset-light);
      margin-bottom: 18px;
    }

    .simple-gradient-preview {
      min-height: 340px;
      border-radius: 24px;
      border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }

    .gradient-code-box {
      padding: 18px 20px;
      border-radius: 22px;
      margin-bottom: 18px;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.45;
      background: color-mix(in srgb, var(--soft) 92%, transparent);
    }

    .gradient-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    @media (max-width: 980px) {
      .gradient-top-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .gradient-top-grid {
        grid-template-columns: 1fr;
      }

      .gradient-chip-hex {
        font-size: 17px;
      }

      .simple-gradient-preview {
        min-height: 260px;
      }
    }

  
    /* Footer stays at bottom on short pages */
    html,
    body {
      min-height: 100%;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    main {
      flex: 1 0 auto;
    }

    footer {
      margin-top: auto;
      flex-shrink: 0;
    }

    .page {
      min-height: calc(100vh - 260px);
    }

    .page.active {
      display: block;
    }

  
    /* Useful Palette Preview Studio */
    .visualizer-studio-card {
      padding: 22px;
    }

    .visualizer-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .visualizer-toolbar strong {
      display: block;
      font-size: 22px;
      color: var(--text);
      margin-bottom: 4px;
    }

    .visualizer-toolbar span {
      color: var(--muted);
      font-weight: 750;
    }

    .visualizer-toolbar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .visualizer-palette-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      overflow: hidden;
      border-radius: 22px;
      border: 1px solid var(--border);
      height: 72px;
      margin-bottom: 18px;
      box-shadow: var(--inset-light);
    }

    .visualizer-palette-strip button {
      border: 0;
      cursor: pointer;
      color: white;
      font-weight: 950;
      text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    .brand-preview {
      --viz-primary: #264653;
      --viz-secondary: #2A9D8F;
      --viz-accent: #E9C46A;
      --viz-soft: #F4A261;
      --viz-ink: #111827;
      overflow: hidden;
      border-radius: 30px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 86%, transparent);
      box-shadow: var(--shadow-soft), var(--inset-light);
      margin-bottom: 18px;
    }

    .brand-preview-nav {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255,255,255,.28);
      background: color-mix(in srgb, var(--viz-primary) 10%, white);
      color: var(--viz-ink);
    }

    .brand-logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--viz-primary), var(--viz-secondary), var(--viz-accent));
      box-shadow: 0 10px 22px rgba(20,28,44,.16);
    }

    .brand-preview-nav span {
      color: color-mix(in srgb, var(--viz-ink) 72%, transparent);
      font-weight: 850;
      margin-left: auto;
    }

    .brand-preview-nav span + span {
      margin-left: 0;
    }

    .brand-preview-nav button,
    .primary-preview-btn {
      border: 0;
      border-radius: 999px;
      padding: 11px 16px;
      background: var(--viz-primary);
      color: var(--viz-on-primary, #ffffff);
      font-weight: 950;
      cursor: pointer;
    }

    .brand-preview-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
      gap: 24px;
      padding: 42px;
      background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--viz-accent) 40%, transparent), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--viz-primary) 16%, white), color-mix(in srgb, var(--viz-secondary) 12%, white));
      color: var(--viz-ink);
    }

    .brand-kicker {
      display: inline-flex;
      padding: 8px 12px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--viz-accent) 30%, white);
      color: var(--viz-ink);
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 14px;
    }

    .brand-preview-hero h3 {
      font-size: clamp(34px, 5vw, 64px);
      line-height: .96;
      letter-spacing: -2px;
      margin-bottom: 16px;
      max-width: 760px;
    }

    .brand-preview-hero p {
      max-width: 620px;
      color: color-mix(in srgb, var(--viz-ink) 72%, transparent);
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 22px;
      font-weight: 750;
    }

    .brand-preview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .secondary-preview-btn {
      border: 1px solid color-mix(in srgb, var(--viz-primary) 28%, transparent);
      border-radius: 999px;
      padding: 11px 16px;
      background: rgba(255,255,255,.62);
      color: var(--viz-ink);
      font-weight: 950;
      cursor: pointer;
    }

    .brand-preview-panel {
      border-radius: 28px;
      padding: 18px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.75);
      box-shadow: 0 22px 60px rgba(20,28,44,.14);
    }

    .mini-window-top {
      height: 120px;
      border-radius: 20px;
      background: linear-gradient(135deg, var(--viz-primary), var(--viz-secondary));
      margin-bottom: 16px;
    }

    .mini-window-line {
      height: 16px;
      width: 62%;
      border-radius: 999px;
      background: color-mix(in srgb, var(--viz-primary) 22%, white);
      margin-bottom: 10px;
    }

    .mini-window-line.long {
      width: 86%;
      background: color-mix(in srgb, var(--viz-accent) 48%, white);
    }

    .mini-window-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 16px;
    }

    .mini-window-grid span {
      height: 74px;
      border-radius: 18px;
      background: var(--viz-soft);
    }

    .mini-window-grid span:nth-child(2) { background: var(--viz-secondary); }
    .mini-window-grid span:nth-child(3) { background: var(--viz-accent); }

    .brand-preview-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 18px;
      background: color-mix(in srgb, var(--viz-primary) 6%, white);
    }

    .brand-preview-cards article {
      border-radius: 22px;
      padding: 20px;
      min-height: 132px;
      color: var(--viz-ink);
      background: #ffffff;
      border: 1px solid rgba(20,28,44,.08);
      box-shadow: var(--inset-light);
    }

    .brand-preview-cards article:nth-child(1) { border-top: 8px solid var(--viz-primary); }
    .brand-preview-cards article:nth-child(2) { border-top: 8px solid var(--viz-secondary); }
    .brand-preview-cards article:nth-child(3) { border-top: 8px solid var(--viz-accent); }

    .brand-preview-cards strong {
      display: block;
      font-size: 18px;
      margin-bottom: 8px;
    }

    .brand-preview-cards span {
      color: color-mix(in srgb, var(--viz-ink) 70%, transparent);
      line-height: 1.5;
      font-weight: 750;
    }

    .visualizer-token-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }

    .visualizer-token-list button {
      text-align: left;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      background: var(--soft);
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
    }

    .visualizer-token-list span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }

    @media (max-width: 900px) {
      .brand-preview-hero {
        grid-template-columns: 1fr;
        padding: 28px;
      }

      .brand-preview-cards {
        grid-template-columns: 1fr;
      }

      .brand-preview-nav span {
        display: none;
      }
    }

    @media (max-width: 620px) {
      .visualizer-palette-strip {
        height: 54px;
      }

      .brand-preview-hero h3 {
        font-size: 34px;
      }
    }

  
    /* Footer links, legal pages, and cookie banner */
    .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; }
    .footer-inner > div { display:grid; gap:6px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
    .footer-links button { border:1px solid var(--border); background:var(--button-bg); color:var(--text); border-radius:999px; padding:9px 12px; font-weight:850; cursor:pointer; box-shadow:var(--inset-light); }
    .footer-links button:hover { background:var(--button-hover); color:var(--button-hover-text); }
    .legal-page .legal-card { max-width:980px; background:var(--card); border:1px solid var(--border); border-radius:28px; padding:clamp(22px,4vw,38px); box-shadow:var(--shadow-soft), var(--inset-light); }
    .legal-card h3 { font-size:22px; margin:22px 0 8px; }
    .legal-card h3:first-child { margin-top:0; }
    .legal-card p { color:var(--muted); line-height:1.75; font-size:17px; margin-bottom:12px; }
    .legal-card a { color:var(--text); font-weight:900; }

    .cookie-consent { position:fixed; left:18px; right:18px; bottom:18px; z-index:9999; max-width:980px; margin:0 auto; display:none; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px; border-radius:24px; border:1px solid var(--border); background:color-mix(in srgb, var(--card-strong) 92%, transparent); box-shadow:0 22px 70px rgba(20,28,44,.18), var(--inset-light); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
    .cookie-consent.show { display:grid; }
    .cookie-consent strong { display:block; font-size:18px; margin-bottom:4px; }
    .cookie-consent p { margin:0; color:var(--muted); line-height:1.45; font-weight:750; }
    .cookie-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    @media (max-width:720px) { .cookie-consent { grid-template-columns:1fr; } .cookie-actions,.footer-links { justify-content:flex-start; } }

  
    .about-head .subtext {
      max-width: 980px;
    }

    .about-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, .85fr);
      gap: 24px;
      align-items: stretch;
      background:
        radial-gradient(circle at top left, rgba(248,112,96,.08), transparent 28%),
        radial-gradient(circle at right center, rgba(16,37,66,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
        var(--card);
      overflow: hidden;
    }

    .about-kicker {
      display: inline-flex;
      align-items: center;
      margin-bottom: 16px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 88%, transparent);
      font-weight: 850;
      color: var(--text);
      box-shadow: var(--inset-light);
    }

    .about-showcase-copy h3 {
      margin: 0 0 14px;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .about-showcase-copy p {
      font-size: 18px;
      line-height: 1.8;
    }

    .about-stats-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 20px;
    }

    .about-stat-box {
      padding: 16px 18px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 88%, transparent);
      box-shadow: var(--inset-light);
    }

    .about-stat-box strong {
      display: block;
      font-size: 24px;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .about-stat-box span {
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
    }

    .about-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }

    .about-visual-panel {
      display: flex;
      align-items: stretch;
      min-height: 100%;
    }

    .about-mockup-card {
      width: 100%;
      border-radius: 28px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at top right, rgba(111,140,255,.18), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.24)),
        var(--card-strong);
      padding: 22px;
      box-shadow: var(--shadow-soft), var(--inset-light);
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .about-mockup-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .about-mockup-label {
      font-weight: 900;
      font-size: 15px;
      color: var(--muted);
    }

    .about-mockup-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #7bc67b;
      box-shadow: 0 0 0 4px rgba(123,198,123,.15);
    }

    .about-swatch-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      min-height: 120px;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(16,37,66,.08);
    }

    .about-swatch-strip span {
      display:block;
    }

    .about-mini-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .about-mini-tile {
      padding: 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.58);
      box-shadow: var(--inset-light);
    }

    .about-mini-tile strong {
      display:block;
      margin-bottom: 4px;
      font-size: 15px;
    }

    .about-mini-tile p {
      margin:0;
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
    }

    .about-feature-grid,
    .about-content-grid,
    .about-use-cases-grid {
      display: grid;
      gap: 20px;
      margin-top: 12px;
    }

    .about-feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-content-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-use-cases-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-feature-card,
    .about-use-case,
    .about-content-card,
    .about-flow-card {
      max-width: none !important;
    }

    .about-feature-icon {
      width: 46px;
      height: 46px;
      display:grid;
      place-items:center;
      margin-bottom: 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--button-hover);
      color: var(--button-hover-text);
      font-weight: 900;
      box-shadow: var(--inset-light);
    }

    .about-list {
      margin: 12px 0 0;
      padding-left: 20px;
      color: var(--muted);
      line-height: 1.85;
      font-size: 17px;
    }

    .about-flow-card {
      margin-top: 20px;
      background:
        radial-gradient(circle at bottom left, rgba(123,198,123,.09), transparent 22%),
        radial-gradient(circle at top right, rgba(111,140,255,.08), transparent 28%),
        var(--card);
    }

    .about-flow-head {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-end;
      flex-wrap:wrap;
      margin-bottom: 18px;
    }

    .about-flow-head p {
      margin: 0;
      color: var(--muted);
      font-weight: 750;
    }

    .about-flow-grid {
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .about-step {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 88%, transparent);
      box-shadow: var(--inset-light);
    }

    .about-step span {
      display:grid;
      place-items:center;
      width: 34px;
      height: 34px;
      margin-bottom: 12px;
      border-radius: 50%;
      background: var(--button-hover);
      color: var(--button-hover-text);
      font-weight: 900;
      font-size: 14px;
    }

    .about-step strong {
      display:block;
      margin-bottom: 6px;
      font-size: 18px;
    }

    .about-step p {
      margin:0;
      font-size: 15px;
      line-height:1.65;
      color: var(--muted);
    }

    @media (max-width: 1100px) {
      .about-showcase,
      .about-feature-grid,
      .about-content-grid,
      .about-use-cases-grid,
      .about-flow-grid {
        grid-template-columns: 1fr 1fr;
      }
      .about-showcase {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .about-stats-row,
      .about-mini-grid,
      .about-feature-grid,
      .about-content-grid,
      .about-use-cases-grid,
      .about-flow-grid {
        grid-template-columns: 1fr;
      }
      .about-showcase-copy h3 {
        font-size: clamp(28px, 8vw, 40px);
      }
    }

  
    .policy-card {
      max-width: 1080px !important;
    }

    .policy-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }

    .policy-meta span {
      display: inline-flex;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--card-strong) 88%, transparent);
      color: var(--muted);
      font-weight: 850;
      box-shadow: var(--inset-light);
    }

    .policy-list {
      margin: 10px 0 18px;
      padding-left: 22px;
      color: var(--muted);
      line-height: 1.85;
      font-size: 17px;
    }

    .policy-list li + li {
      margin-top: 4px;
    }

    .policy-card h3 {
      padding-top: 10px;
    }

  
    .logo, .nav-link, .btn, .footer-links a {
      text-decoration: none;
    }
    .footer-links a {
      border:1px solid var(--border);
      background:var(--button-bg);
      color:var(--text);
      border-radius:999px;
      padding:9px 12px;
      font-weight:850;
      cursor:pointer;
      box-shadow:var(--inset-light);
    }
    .footer-links a:hover {
      background:var(--button-hover);
      color:var(--button-hover-text);
    }

  
    .palette-detail-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
      gap: 22px;
      align-items: stretch;
    }
    .palette-detail-preview {
      min-height: 440px;
      overflow: hidden;
      border-radius: 30px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft), var(--inset-light);
      display: flex;
    }
    .palette-detail-preview .color-block {
      flex: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 950;
      text-shadow: 0 2px 12px rgba(0,0,0,.35);
      font-size: clamp(18px, 2.5vw, 34px);
    }
    .palette-detail-info {
      display: grid;
      gap: 14px;
      align-content: start;
    }
    .palette-detail-info h3 {
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: -1.4px;
    }
    .palette-detail-info p {
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
      font-weight: 750;
    }
    .palette-detail-hex-list {
      display: grid;
      gap: 10px;
    }
    .palette-detail-hex-list button {
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 13px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--button-bg);
      color: var(--text);
      font-weight: 950;
      cursor: pointer;
      box-shadow: var(--inset-light);
    }
    .palette-detail-hex-list span {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.16);
      flex: 0 0 auto;
    }
    .filter-seo-intro {
      margin-bottom: 18px;
      max-width: 900px;
    }
    .filter-seo-intro p {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.7;
      font-weight: 750;
    }
    @media (max-width: 900px) {
      .palette-detail-card {
        grid-template-columns: 1fr;
      }
      .palette-detail-preview {
        min-height: 320px;
      }
    }

  
    /* Palette detail clean preview */
    .palette-detail-preview {
      display: grid !important;
      grid-template-columns: repeat(var(--palette-cols, 5), minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(150px, 1fr);
      min-height: 420px;
      overflow: hidden;
    }

    .palette-detail-preview .color-block {
      min-width: 0;
      min-height: 150px;
      display: block !important;
    }

    .palette-detail-preview .color-block::after {
      display: none !important;
      content: none !important;
    }

    .palette-detail-hex-list {
      max-height: 420px;
      overflow: auto;
      padding-right: 4px;
    }

    @media (max-width: 700px) {
      .palette-detail-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-height: 360px;
      }
    }

  
    /* Palette detail: keep all colors in one horizontal stack */
    .palette-detail-preview {
      display: flex !important;
      flex-direction: row !important;
      grid-template-columns: none !important;
      grid-auto-rows: unset !important;
      min-height: 420px;
      overflow: hidden;
    }

    .palette-detail-preview .color-block {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      min-height: 420px !important;
      display: block !important;
    }

    .palette-detail-preview .color-block::after,
    .palette-detail-preview .color-block:hover::after {
      display: none !important;
      content: none !important;
      background: transparent !important;
    }

    @media (max-width: 700px) {
      .palette-detail-preview {
        min-height: 340px;
      }
      .palette-detail-preview .color-block {
        min-height: 340px !important;
      }
    }

  
/* About, authorship, and trust information */
.about-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.about-trust-card{display:flex;flex-direction:column;gap:12px}.about-trust-card .trust-label{display:inline-flex;width:max-content;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--soft);font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.about-trust-card h3{font-size:1.25rem;margin:0}.about-trust-card p{margin:0;line-height:1.7}.about-standards{margin-top:22px}.about-standards-head{max-width:760px;margin-bottom:20px}.about-standards-head p{color:var(--muted);line-height:1.7;margin-top:8px}.about-standards-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.about-standard{padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--soft-2)}.about-standard strong{display:block;margin-bottom:7px}.about-standard p{margin:0;color:var(--muted);line-height:1.6}.about-contact-panel{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px}.about-contact-panel p{color:var(--muted);line-height:1.65;margin-top:6px}.about-contact-actions{display:flex;gap:10px;flex-wrap:wrap}.about-updated{margin-top:16px;color:var(--muted);font-size:.9rem}.author-principles{margin-top:22px}.author-principles ul{margin:14px 0 0 20px;display:grid;gap:9px;color:var(--muted);line-height:1.6}@media(max-width:900px){.about-trust-grid{grid-template-columns:1fr}.about-standards-list{grid-template-columns:1fr}.about-contact-panel{align-items:flex-start;flex-direction:column}}

/* About page trust layout correction */
#about .about-trust-grid,
#about .about-standards,
#about .author-principles,
#about .about-contact-panel {
  width: 100%;
  max-width: none;
}
#about .about-trust-grid {
  margin-top: 20px;
}
#about .about-trust-card {
  min-width: 0;
  padding: 26px;
}
#about .about-trust-card h3 {
  overflow-wrap: anywhere;
}
#about .about-standards,
#about .author-principles,
#about .about-contact-panel {
  margin-top: 20px;
}
#about .about-contact-panel > div:first-child {
  max-width: 680px;
}
#about .about-contact-actions {
  flex: 0 0 auto;
  align-items: center;
}
@media (max-width: 1100px) {
  #about .about-trust-grid { grid-template-columns: 1fr 1fr; }
  #about .about-trust-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #about .about-trust-grid { grid-template-columns: 1fr; }
  #about .about-trust-card:last-child { grid-column: auto; }
  #about .about-contact-actions { width: 100%; }
  #about .about-contact-actions .btn { flex: 1 1 180px; text-align: center; }
}