  <style>
    /* ════════════════════════════════════════════════════════════════
       PINTEREST MARKETING WORKSTATION — Industrial Dark Mode
       Slate-900 foundation · Cobalt Blue accents · 20px radii
       ════════════════════════════════════════════════════════════════ */

    :root {
      --pin-bg-0:        #0f172a;            /* slate-900 foundation */
      --pin-bg-1:        #111c33;            /* card surface */
      --pin-bg-2:        #18243f;            /* elevated / hover  */
      --pin-border:      #1e293b;            /* slate-800 1px borders */
      --pin-border-soft: rgba(30, 41, 59, .6);
      --pin-cobalt:      #2563eb;            /* primary accent     */
      --pin-cobalt-2:    #3b82f6;
      --pin-cobalt-soft: rgba(37, 99, 235, .12);
      --pin-text:        #f1f5f9;
      --pin-text-2:      #94a3b8;
      --pin-text-3:      #64748b;
      --pin-success:     #10b981;
      --pin-danger:      #ef4444;
      --pin-radius:      20px;
      --pin-radius-sm:   12px;
    }

    .pin-shell { background: var(--pin-bg-0); color: var(--pin-text); }

    /* ── Sub-navigation ─────────────────────────────────────────── */
    .pin-subnav {
      display: flex; align-items: center; gap: 4px;
      padding: 8px; background: var(--pin-bg-1);
      border: 1px solid var(--pin-border); border-radius: var(--pin-radius);
    }
    .pin-subnav-item {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px; border-radius: 14px;
      font-size: 13px; font-weight: 500; color: var(--pin-text-2);
      background: transparent; border: 1px solid transparent;
      cursor: pointer; transition: all 160ms ease;
    }
    .pin-subnav-item:hover { color: var(--pin-text); background: var(--pin-bg-2); }
    .pin-subnav-item.is-active {
      color: #fff; background: var(--pin-cobalt);
      border-color: var(--pin-cobalt-2);
      box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .55);
    }

    /* ── Tab brand chip (Pinterest) ────────────────────────────── */
    .pin-brand-chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 12px; border-radius: 999px;
      background: rgba(37, 99, 235, .08);
      border: 1px solid rgba(37, 99, 235, .35);
      font-size: 12px; font-weight: 600; color: var(--pin-cobalt-2);
    }
    .pin-brand-chip .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--pin-cobalt-2);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
    }

    /* ── Cards ──────────────────────────────────────────────────── */
    .pin-card {
      background: var(--pin-bg-1);
      border: 1px solid var(--pin-border);
      border-radius: var(--pin-radius);
      padding: 20px; transition: border-color 160ms ease, transform 160ms ease;
    }
    .pin-card:hover { border-color: rgba(37, 99, 235, .35); }

    /* ── KPI Cards ──────────────────────────────────────────────── */
    .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px)  { .kpi-grid { grid-template-columns: 1fr; } }

    .kpi-card {
      position: relative; overflow: hidden;
      background: var(--pin-bg-1);
      border: 1px solid var(--pin-border);
      border-radius: var(--pin-radius);
      padding: 20px 20px 16px;
    }
    .kpi-card::before {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
      background: linear-gradient(90deg, var(--pin-cobalt) 0%, #60a5fa 100%);
      opacity: .9;
    }
    .kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pin-text-3); }
    .kpi-value { font-size: 28px; font-weight: 700; color: var(--pin-text); margin-top: 6px; letter-spacing: -.02em; }
    .kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
    .kpi-delta--up   { color: var(--pin-success); background: rgba(16, 185, 129, .1); }
    .kpi-delta--down { color: var(--pin-danger);  background: rgba(239, 68, 68, .1); }
    .kpi-spark { margin-top: 12px; height: 40px; width: 100%; }

    /* ── Section header ─────────────────────────────────────────── */
    .pin-section-h {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .pin-section-h h3 { font-size: 13px; font-weight: 600; color: var(--pin-text); letter-spacing: -.01em; }
    .pin-section-h .meta { font-size: 11px; color: var(--pin-text-3); }

    /* ── Buttons ────────────────────────────────────────────────── */
    .btn-publish {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: 14px;
      background: var(--pin-cobalt); color: #fff;
      font-size: 13px; font-weight: 600; letter-spacing: -.01em;
      border: 1px solid var(--pin-cobalt-2);
      box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .55);
      cursor: pointer;
      transition: transform 120ms ease, background 140ms ease, box-shadow 140ms ease;
    }
    .btn-publish:hover  { background: #1d4ed8; }
    .btn-publish:active { transform: scale(0.97); }
    /* Spec compliance: persistent pressed-state scale on primary marketing buttons */
    .btn-publish.is-engaged { transform: scale(0.97); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 12px;
      background: transparent; color: var(--pin-text-2);
      font-size: 12px; font-weight: 500;
      border: 1px solid var(--pin-border);
      cursor: pointer; transition: all 140ms ease;
    }
    .btn-ghost:hover { color: var(--pin-text); border-color: var(--pin-cobalt-2); background: var(--pin-cobalt-soft); }

    /* ── View transitions ───────────────────────────────────────── */
    .pin-view { display: none; }
    .pin-view.is-active { display: block; animation: pin-fade-in 200ms ease-out; }
    @keyframes pin-fade-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Channel pane visibility ────────────────────────────────── */
    .channel-pane { display: none; }
    .channel-pane.is-active { display: block; }

