/* ==========================================================================
       DESIGN TOKENS (konsisten dengan index.html)
       ========================================================================== */
    :root {
      --color-primary: #0047BB;
      --color-royal-dark: #001489;
      --color-horizon-light: #6CACE4;

      --color-gold-bronze: #CBA052;
      --color-gold-earth: #886B25;
      --color-gold-chalky: #ECD898;

      --color-frosted-black: #101820;
      --color-grey-olive: #8A8D8F;
      --color-bright-snow: #F8F8F8;
      --color-shade-light: #E2E8F0;
      --color-card-light: #FFFFFF;
      --color-shade-dark: #182430;
      --color-card-dark: #2A3847;

      --color-body-text: #334155;
      --color-on-primary: #FFFFFF;
      --color-on-brand: #FFFFFF;
      --color-on-gold: #101820;
      --color-header-bg: rgba(255, 255, 255, 0.98);
      --color-glass-bg: rgba(255, 255, 255, 0.88);

      /* Gradients */
      --grad-blue: linear-gradient(135deg, #6CACE4 0%, #0047BB 50%, #001489 100%);

      --font-heading: 'Readex Pro', sans-serif;
      --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-arabic: 'Noto Naskh Arabic', serif;

      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 16px;
      --space-md: 24px;
      --space-lg: 40px;
      --space-xl: 64px;
      --space-2xl: 96px;

      --radius-full: 9999px;
      --radius-card: 26px;
      --radius-surface: 18px;
      --radius-sm: 12px;
      --radius-badge: 22px;

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(16, 24, 32, 0.05);
      --shadow-hover: 0 16px 24px -4px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(16, 24, 32, 0.06);
      --shadow-btn: 0 4px 14px rgba(0, 71, 187, 0.22);
      --shadow-btn-hover: 0 6px 20px rgba(0, 71, 187, 0.32);

      --header-height: 76px;
      --container-max: 1200px;
      --container-wide: 1360px;
      --container-current: var(--container-max);
      --container-current-wide: var(--container-wide);
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --color-primary: #6FA8E4;
      --color-royal-dark: #9CC3F0;
      --color-horizon-light: #A9CDF2;
      --color-gold-bronze: #D9B87A;
      --color-gold-earth: #CBAF79;
      --color-gold-chalky: #E8CF97;
      --color-frosted-black: #EAF1FA;
      --color-grey-olive: #9FB0C6;
      --color-bright-snow: #0B1220;
      --color-shade-light: #26344A;
      --color-card-light: #141D2E;
      --color-shade-dark: #05090F;
      --color-card-dark: #1D2A3E;
      --color-body-text: #C3D0E0;
      --color-on-primary: #0B1220;
      --color-on-brand: #FFFFFF;
      --color-on-gold: #101820;
      --color-header-bg: rgba(11, 18, 32, 0.92);
      --color-glass-bg: rgba(20, 29, 46, 0.82);
      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
      --shadow-hover: 0 16px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    @media (prefers-color-scheme: dark) {
      html[data-theme="auto"] {
        color-scheme: dark;
        --color-primary: #6FA8E4;
        --color-royal-dark: #9CC3F0;
        --color-horizon-light: #A9CDF2;
        --color-gold-bronze: #D9B87A;
        --color-gold-earth: #CBAF79;
        --color-gold-chalky: #E8CF97;
        --color-frosted-black: #EAF1FA;
        --color-grey-olive: #9FB0C6;
        --color-bright-snow: #0B1220;
        --color-shade-light: #26344A;
        --color-card-light: #141D2E;
        --color-shade-dark: #05090F;
        --color-card-dark: #1D2A3E;
        --color-body-text: #C3D0E0;
        --color-on-primary: #0B1220;
        --color-on-brand: #FFFFFF;
        --color-on-gold: #101820;
        --color-header-bg: rgba(11, 18, 32, 0.92);
        --color-glass-bg: rgba(20, 29, 46, 0.82);
        --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
        --shadow-hover: 0 16px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
      }
    }


    /* ==========================================================================
       RESET & BASE
       ========================================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: var(--color-bright-snow);
      color: var(--color-frosted-black);
    }

    body {
      font-family: var(--font-body);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: var(--color-bright-snow);
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1.25;
      font-weight: 700;
      color: var(--color-frosted-black);
    }

    a { color: inherit; text-decoration: none; }

    img, svg { display: block; max-width: 100%; }

    .icon {
      width: 1.25rem;
      height: 1.25rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .container {
      width: 100%;
      max-width: var(--container-current);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }

    .container-wide {
      width: 100%;
      max-width: var(--container-current-wide);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }

    /* ==========================================================================
       KOMPONEN (Badge, Tombol)
       ========================================================================== */
    .badge-gold {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      background-color: var(--color-gold-chalky);
      color: var(--color-on-gold);
      border: 1px solid var(--color-gold-bronze);
      border-radius: var(--radius-full);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-family: var(--font-body);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: var(--radius-full);
      padding: 10px 22px;
      font-size: 0.875rem;
      font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    .btn-primary {
      background-color: var(--color-primary);
      color: var(--color-card-light);
      border-color: var(--color-primary);
      box-shadow: var(--shadow-btn);
    }
    .btn-primary:hover {
      background-color: var(--color-royal-dark);
      border-color: var(--color-royal-dark);
      color: var(--color-on-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-btn-hover);
    }

    .btn-secondary {
      background-color: var(--color-card-light);
      color: var(--color-frosted-black);
      border-color: var(--color-shade-light);
    }
    .btn-secondary:hover {
      background-color: var(--color-bright-snow);
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    /* ==========================================================================
       HERO
       ========================================================================== */
    .page-hero {
      background: linear-gradient(135deg, #6CACE4 0%, #0047BB 50%, #001489 100%);
      color: #FFFFFF;
      padding-top: clamp(48px, 7vw, 88px);
      padding-bottom: clamp(44px, 6vw, 76px);
      text-align: center;
    }
    .page-hero .badge-gold {
      background-color: rgba(236, 216, 152, 0.2);
      color: #FFFFFF;
      border-color: rgba(236, 216, 152, 0.6);
      backdrop-filter: blur(8px);
    }
    .page-hero h1 {
      color: #FFFFFF;
      font-size: clamp(1.9rem, 4vw, 3rem);
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .page-hero p {
      max-width: 720px;
      margin: 0 auto var(--space-lg);
      color: rgba(255, 255, 255, 0.92);
      font-size: clamp(1rem, 1.6vw, 1.125rem);
      line-height: 1.7;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      justify-content: center;
    }
    .page-hero .btn-secondary {
      background-color: transparent;
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.5);
    }
    .page-hero .btn-secondary:hover {
      background-color: rgba(255, 255, 255, 0.12);
      border-color: #FFFFFF;
      color: #FFFFFF;
    }

    /* ==========================================================================
       TOOLBAR (Cari + Latar Pratinjau)
       ========================================================================== */
    .toolbar-section {
      position: sticky;
      top: var(--header-height);
      z-index: 900;
      background-color: var(--color-glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-shade-light);
      padding: 14px 0;
    }
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      flex-wrap: wrap;
    }

    .search-field {
      position: relative;
      flex: 1 1 260px;
      max-width: 420px;
    }
    .search-field .icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-grey-olive);
      width: 18px;
      height: 18px;
    }
    .search-field input {
      width: 100%;
      padding: 10px 14px 10px 42px;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-shade-light);
      background-color: var(--color-card-light);
      color: var(--color-frosted-black);
      font-family: var(--font-body);
      font-size: 0.875rem;
    }
    .search-field input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 71, 187, 0.15);
    }

    .preview-control {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .preview-control > span {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-grey-olive);
      font-family: var(--font-heading);
    }
    .preview-seg {
      display: inline-flex;
      padding: 3px;
      gap: 2px;
      background-color: var(--color-bright-snow);
      border: 1px solid var(--color-shade-light);
      border-radius: var(--radius-full);
    }
    .preview-seg button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
      color: var(--color-frosted-black);
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .preview-seg button:hover { color: var(--color-primary); }
    .preview-seg button[aria-pressed="true"] {
      background-color: var(--color-primary);
      color: var(--color-card-light);
    }
    .swatch {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      flex-shrink: 0;
    }
    .swatch-light { background: #F1F5F9; }
    .swatch-dark { background: #0B1220; }
    .swatch-checker {
      background-color: #F1F5F9;
      background-image:
        linear-gradient(45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(-45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #CBD5E1 75%),
        linear-gradient(-45deg, transparent 75%, #CBD5E1 75%);
      background-size: 8px 8px;
      background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    }

    /* ==========================================================================
       GALERI LOGO
       ========================================================================== */
    .gallery-wrap { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }

    .logo-group { margin-bottom: var(--space-2xl); }
    .logo-group[hidden] { display: none; }

    .group-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-md);
      flex-wrap: wrap;
      padding-bottom: var(--space-sm);
      margin-bottom: var(--space-md);
      border-bottom: 2px solid var(--color-shade-light);
    }
    .group-head h2 {
      font-size: clamp(1.25rem, 2.2vw, 1.6rem);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .group-head h2::before {
      content: "";
      width: 6px;
      height: 26px;
      border-radius: var(--radius-full);
      background: linear-gradient(180deg, var(--color-gold-bronze), var(--color-primary));
    }
    .group-head p {
      color: var(--color-body-text);
      font-size: 0.9375rem;
      margin-top: 4px;
    }
    .group-count {
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--color-primary);
      background-color: rgba(0, 71, 187, 0.08);
      border: 1px solid rgba(0, 71, 187, 0.18);
      padding: 4px 12px;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }
    html[data-theme="dark"] .group-count {
      background-color: rgba(111, 168, 228, 0.14);
      border-color: rgba(111, 168, 228, 0.3);
    }

    .logo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
      gap: var(--space-md);
    }

    .logo-card {
      display: flex;
      flex-direction: column;
      background-color: var(--color-card-light);
      border: 1px solid var(--color-shade-light);
      border-radius: var(--radius-surface);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .logo-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: var(--color-primary);
    }
    .logo-card[hidden] { display: none; }

    .logo-preview {
      position: relative;
      height: 168px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      border-bottom: 1px solid var(--color-shade-light);
      transition: background-color 0.25s ease;
    }
    .preview-zoom {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0;
      border: none;
      background: none;
      cursor: zoom-in;
    }
    .logo-preview img {
      max-width: 88%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }
    .preview-open {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: var(--radius-full);
      background-color: var(--color-card-light);
      color: var(--color-frosted-black);
      border: 1px solid var(--color-shade-light);
      box-shadow: var(--shadow-sm);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .preview-open .icon { width: 16px; height: 16px; }
    .logo-preview:hover .preview-open,
    .preview-open:focus-visible { opacity: 1; transform: translateY(0); }
    .preview-open:hover { color: var(--color-primary); border-color: var(--color-primary); }
    @media (hover: none) {
      .preview-open { opacity: 0.94; transform: none; }
    }

    .gallery-wrap[data-preview="light"] .logo-preview { background-color: #F1F5F9; }
    .gallery-wrap[data-preview="dark"] .logo-preview { background-color: #0B1220; }
    .gallery-wrap[data-preview="checker"] .logo-preview {
      background-color: #F1F5F9;
      background-image:
        linear-gradient(45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(-45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #CBD5E1 75%),
        linear-gradient(-45deg, transparent 75%, #CBD5E1 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    }
    /*.gallery-wrap .logo-preview[data-preview-theme="dark"] {
      background-color: #0B1220;
      background-image: none;
    }*/

    .logo-info {
      padding: var(--space-sm) var(--space-md) var(--space-xs);
      flex: 1;
    }
    .logo-info h3 {
      font-size: 1rem;
      margin-bottom: 4px;
      letter-spacing: 0.01em;
    }
    .logo-note {
      color: var(--color-body-text);
      font-size: 0.8125rem;
      line-height: 1.5;
    }
    .logo-tag {
      display: inline-block;
      margin-top: 8px;
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-gold-earth);
      background-color: rgba(203, 160, 82, 0.15);
      border-radius: var(--radius-badge);
      padding: 2px 10px;
    }
    html[data-theme="dark"] .logo-tag { color: var(--color-gold-chalky); }

    .logo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: var(--space-sm) var(--space-md) var(--space-md);
      border-top: 1px solid var(--color-shade-light);
      margin-top: var(--space-xs);
    }
    .dl-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--color-primary);
      background-color: rgba(0, 71, 187, 0.07);
      border: 1px solid rgba(0, 71, 187, 0.2);
      border-radius: var(--radius-full);
      padding: 6px 14px;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .dl-btn:hover {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-card-light);
      transform: translateY(-1px);
    }
    .dl-btn .icon { width: 14px; height: 14px; }
    html[data-theme="dark"] .dl-btn {
      background-color: rgba(111, 168, 228, 0.12);
      border-color: rgba(111, 168, 228, 0.28);
    }
    html[data-theme="dark"] .dl-btn:hover {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-card-light);
    }

    .empty-state {
      text-align: center;
      padding: var(--space-2xl) var(--space-md);
      color: var(--color-body-text);
    }
    .empty-state .icon {
      width: 48px;
      height: 48px;
      margin: 0 auto var(--space-sm);
      color: var(--color-grey-olive);
    }
    .empty-state[hidden] { display: none; }

    /* ==========================================================================
       LIGHTBOX (Popup Pratinjau + Zoom)
       ========================================================================== */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      background-color: rgba(8, 12, 20, 0.84);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .lightbox[hidden] { display: none; }

    .lightbox-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      padding: 12px 16px;
      color: #FFFFFF;
      background-color: rgba(8, 12, 20, 0.6);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .lightbox-title {
      font-family: var(--font-heading);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lightbox-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .lb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      border: 1px solid rgba(255, 255, 255, 0.25);
      background-color: rgba(255, 255, 255, 0.08);
      color: #FFFFFF;
      cursor: pointer;
      transition: background-color 0.18s ease, border-color 0.18s ease;
    }
    .lb-btn:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); }
    .lb-btn .icon { width: 16px; height: 16px; }
    .lb-zoom {
      min-width: 54px;
      text-align: center;
      font-size: 0.8rem;
      font-variant-numeric: tabular-nums;
    }

    .lightbox-stage {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: grab;
      touch-action: none;
    }
    .lightbox-stage.dragging { cursor: grabbing; }
    .lightbox-stage[data-preview="light"] { background-color: #F1F5F9; }
    .lightbox-stage[data-preview="dark"] { background-color: #0B1220; }
    .lightbox-stage[data-preview="checker"] {
      background-color: #F1F5F9;
      background-image:
        linear-gradient(45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(-45deg, #CBD5E1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #CBD5E1 75%),
        linear-gradient(-45deg, transparent 75%, #CBD5E1 75%);
      background-size: 24px 24px;
      background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    }
    .lightbox-stage img {
      max-width: 92%;
      max-height: 92%;
      width: auto;
      height: auto;
      object-fit: contain;
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: center center;
      will-change: transform;
    }
    .lightbox-hint {
      padding: 10px var(--space-md);
      text-align: center;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.72);
      background-color: rgba(8, 12, 20, 0.6);
    }
    @media (max-width: 600px) {
      .lightbox-title { display: none; }
      .lightbox-hint { display: none; }
    }

    /* ==========================================================================
       CATATAN PENGGUNAAN LOGO (khusus halaman ini, di atas footer)
       ========================================================================== */
    .usage-note { padding-bottom: var(--space-2xl); }
    .usage-note-card {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      background-color: var(--color-card-light);
      border: 1px solid var(--color-shade-light);
      border-left: 4px solid var(--color-gold-bronze);
      border-radius: var(--radius-surface);
      padding: var(--space-lg);
      box-shadow: var(--shadow-card);
    }
    .usage-note-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-full);
      background-color: rgba(0, 71, 187, 0.08);
      color: var(--color-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .usage-note-title {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      color: var(--color-frosted-black);
      margin-bottom: 6px;
    }
    .usage-note-text {
      color: var(--color-body-text);
      font-size: 0.9rem;
      line-height: 1.6;
      max-width: 68ch;
    }
    .usage-note-actions { margin-top: var(--space-md); }
    @media (max-width: 640px) {
      .usage-note-card { flex-direction: column; }
    }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (max-width: 768px) {
      .toolbar { gap: 12px; }
      .preview-control { width: 100%; justify-content: space-between; }
      .logo-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
      .logo-preview { height: 140px; }
    }

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