/* ===================================================================
     COMPONENT: copy from .ctn-wrap (inclusive) down to use elsewhere.
     All variables and classes are prefixed "ctn-" to avoid collisions
     with your existing site styles.
  =================================================================== */

  .ctn-wrap {
    --ctn-ink-soft: #4B5563;
    --ctn-paper: #FFFFFF;
    --ctn-bg: #FAFAF9;
    --ctn-hairline: #E4E7EB;
    --ctn-accent: #0F4B70;
    --ctn-accent-tint: #C4F8FF;
    --ctn-tag: #8A93A1;
    --ctn-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ctn-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ctn-radius: 8px;

    background: var(--ctn-bg);
    border: 1px solid var(--ctn-hairline);
    border-radius: 10px;
    padding: 12px 14px;
  }

  .ctn-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--ctn-font-sans);
  }

  .ctn-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ctn-tag {
    font-family: var(--ctn-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ctn-tag);
    padding-right: 4px;
    user-select: none;
  }

  .ctn-divider {
    width: 1px;
    height: 22px;
    background: var(--ctn-hairline);
    margin: 0 8px;
    flex-shrink: 0;
  }

  .ctn-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--ctn-radius);
    background: var(--ctn-paper);
    border: 1px solid var(--ctn-hairline);
    color: var(--ctn-ink-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }

  .ctn-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--ctn-ink-soft);
    transition: stroke .15s ease;
  }

  .ctn-btn:hover {
    background: var(--ctn-accent-tint);
    border-color: var(--ctn-accent);
    color: var(--ctn-accent);
    transform: translateY(-1px);
  }

  .ctn-btn:hover svg {
    stroke: var(--ctn-accent);
  }

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

  .ctn-btn:focus-visible {
    outline: 2px solid var(--ctn-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ctn-btn { transition: none; }
  }

  @media (max-width: 640px) {
    .ctn-divider { display: none; }
    .ctn-group {
      width: 100%;
      padding-bottom: 8px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--ctn-hairline);
    }
    .ctn-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  }