/* TMS Hub — Social Posting module.
   Matches the live hub.travelmarketingsystems.com chrome from the screenshot:
   white top bar, teal wordmark, light-grey page, teal primary + orange CTA,
   rounded white cards. Builds on product tokens in ../../colors_and_type.css. */

:root {
  /* Hub-specific shades sampled from the live poster module screenshot */
  --hub-teal:        #0C7B8A;
  --hub-teal-hover:  #096676;
  --hub-teal-50:     #E7F3F4;
  --hub-teal-100:    #CFE7E9;
  --hub-orange:      #E8703A;   /* the "Add to Queue" CTA */
  --hub-orange-hover:#D25F2C;
  --hub-bg:          #EEF1F3;
  --hub-border:      #E3E7EA;
  --hub-ink:         #1B2A2E;
  --hub-muted:       #5C6B70;
  --hub-soft:        #8A979C;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hub-bg);
  color: var(--hub-ink);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sp-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   Buttons.
   ============================================================ */
.sp-btn {
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms, opacity 120ms;
}
.sp-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.sp-btn--teal { background: var(--hub-teal); color: white; }
.sp-btn--teal:hover { background: var(--hub-teal-hover); }
.sp-btn--orange { background: var(--hub-orange); color: white; }
.sp-btn--orange:hover { background: var(--hub-orange-hover); }
.sp-btn--orange:disabled { background: #E7C3B2; cursor: not-allowed; }
.sp-btn--ghost { background: white; color: var(--hub-ink); border: 1.5px solid var(--hub-border); }
.sp-btn--ghost:hover { background: var(--hub-bg); }
.sp-btn--soft { background: var(--hub-teal-50); color: var(--hub-teal); }
.sp-btn--soft:hover { background: var(--hub-teal-100); }
.sp-btn--sm { padding: 8px 14px; font-size: 13px; }
.sp-btn--lg { padding: 13px 24px; font-size: 15px; }
.sp-btn--block { width: 100%; justify-content: center; }
.sp-btn .is-spin { animation: sp-spin 800ms linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hub-border);
  background: white; color: var(--hub-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-icon-btn:hover:not(:disabled) { background: var(--hub-bg); }
.sp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-icon-btn svg { width: 17px; height: 17px; }

/* ============================================================
   Top bar (TMS Hub) + sub-header.
   ============================================================ */
.sp-topbar {
  background: white; border-bottom: 1px solid var(--hub-border);
  height: 60px; display: flex; align-items: center;
  position: sticky; top: 0; z-index: 30;
}
.sp-topbar-inner { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 28px; display: flex; align-items: center; gap: 16px; }
.sp-burger { width: 34px; height: 34px; border: 0; background: transparent; color: var(--hub-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sp-burger svg { width: 22px; height: 22px; }
.sp-wordmark { font: 800 21px/1 var(--font-display, 'DM Sans'); letter-spacing: -0.02em; color: var(--hub-teal); }
.sp-topbar-spacer { flex: 1; }
.sp-topbar-acct { font: 500 14px/1 var(--font-body); color: var(--hub-muted); }

.sp-subhead {
  background: white; border-bottom: 1px solid var(--hub-border);
  padding: 18px 0;
}
.sp-subhead-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sp-subhead-left { display: flex; align-items: center; gap: 14px; }
.sp-subhead-logo { height: 38px; width: auto; display: block; }
.sp-subhead-title { font: 700 22px/1 var(--font-display); letter-spacing: -0.015em; color: var(--hub-ink); }
.sp-subhead-right { font: 400 13px/1.4 var(--font-body); color: var(--hub-muted); text-align: right; }
.sp-subhead-right b { color: var(--hub-ink); font-weight: 600; }

/* ============================================================
   Page body.
   ============================================================ */
.sp-page { padding: 24px 0 64px; }
.sp-crumb { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 20px; }
.sp-crumb a { color: var(--hub-teal); text-decoration: none; }
.sp-crumb a:hover { text-decoration: underline; }
.sp-crumb span { color: var(--hub-soft); }
.sp-crumb .is-current { color: var(--hub-ink); font-weight: 600; }

/* Tabs */
.sp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hub-border); margin-bottom: 22px; }
.sp-tab {
  background: transparent; border: 0; cursor: pointer;
  font: 700 13px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hub-muted); padding: 14px 18px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.sp-tab:hover:not(.is-on) { color: var(--hub-ink); }
.sp-tab.is-on { color: var(--hub-teal); border-bottom-color: var(--hub-teal); }
.sp-tab svg { width: 15px; height: 15px; }

/* Search + filters card */
.sp-search-card {
  background: white; border: 1px solid var(--hub-border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px;
}
.sp-search-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sp-search-label { font: 700 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-muted); }
.sp-search-input {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 0 14px; height: 42px; background: white;
}
.sp-search-input:focus-within { border-color: var(--hub-teal); box-shadow: 0 0 0 3px rgba(12,123,138,0.15); }
.sp-search-input svg { width: 16px; height: 16px; color: var(--hub-soft); }
.sp-search-input input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 15px; color: var(--hub-ink); }
.sp-offers-count { margin-left: auto; font: 500 14px/1 var(--font-body); color: var(--hub-muted); }
.sp-offers-count b { color: var(--hub-ink); font-weight: 700; }

.sp-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sp-filter { display: flex; flex-direction: column; gap: 6px; }
.sp-filter label { font: 600 13px/1 var(--font-display); color: var(--hub-ink); }
.sp-filter select, .sp-filter input {
  height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hub-border);
  background: white; font-family: inherit; font-size: 14px; color: var(--hub-ink); outline: none;
}
.sp-filter select:focus, .sp-filter input:focus { border-color: var(--hub-teal); }

/* Brand-voice banner */
.sp-voice-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--hub-teal-50); border: 1px solid var(--hub-teal-100);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
  font-size: 14px; color: #0A5663;
}
.sp-voice-banner svg { width: 18px; height: 18px; color: var(--hub-teal); flex-shrink: 0; }
.sp-voice-banner b { font-weight: 700; }
.sp-voice-banner .spacer { flex: 1; }
.sp-voice-banner a { color: var(--hub-teal); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-voice-banner a:hover { text-decoration: underline; }

/* ============================================================
   Promotions table.
   ============================================================ */
.sp-table-card { background: white; border: 1px solid var(--hub-border); border-radius: 14px; overflow: hidden; }
.sp-thead, .sp-row {
  display: grid;
  grid-template-columns: 44px 80px 1.5fr 1fr 1fr 2.2fr;
  align-items: center; gap: 16px; padding: 14px 22px;
}
.sp-thead { background: #F7F9FA; border-bottom: 1px solid var(--hub-border); }
.sp-th { font: 700 11px/1.3 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-muted); }
.sp-th input, .sp-td-check input { width: 18px; height: 18px; accent-color: var(--hub-teal); cursor: pointer; }

.sp-rows { list-style: none; margin: 0; padding: 0; }
.sp-row { border-bottom: 1px solid #EFF2F3; transition: background 120ms; }
.sp-row:last-child { border-bottom: 0; }
.sp-row:hover { background: #F7F9FA; }
.sp-row.is-selected { background: var(--hub-teal-50); }

.sp-td-id { font: 500 13px/1 var(--font-mono); color: var(--hub-muted); }
.sp-td-title b { display: block; font: 600 15px/1.3 var(--font-display); color: var(--hub-ink); }
.sp-td-title span { display: block; font: 400 13px/1.2 var(--font-body); color: var(--hub-muted); margin-top: 3px; }
.sp-td-op, .sp-td-dest { font-size: 14px; color: var(--hub-muted); }
.sp-td-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 11px/1 var(--font-display); letter-spacing: 0.04em; }
.sp-pill--posted { background: #DDF1E6; color: #1B6B43; }
.sp-pill--queued { background: #FCE9DF; color: #9C4A22; }

/* ============================================================
   Sticky batch bar.
   ============================================================ */
.sp-batchbar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: calc(100% - 56px); max-width: 1080px;
  animation: sp-bar-in 200ms var(--ease-out, ease);
}
@keyframes sp-bar-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sp-batchbar-inner {
  background: var(--hub-ink); color: white; border-radius: 14px;
  padding: 12px 16px 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 18px 40px -10px rgba(27,42,46,0.5);
}
.sp-batchbar-count { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.sp-batchbar-count svg { width: 16px; height: 16px; color: #6FD0D8; }
.sp-batchbar-count b { font: 700 18px/1 var(--font-display); }
.sp-batchbar-left { display: inline-flex; align-items: center; gap: 20px; }
.sp-batchbar .sp-link { background: transparent; border: 0; color: #9FD8DE; cursor: pointer; font: 600 13px/1 var(--font-display); }
.sp-batchbar .sp-link:hover { color: white; }

/* ============================================================
   Composer (full-screen overlay) — split editor / preview.
   ============================================================ */
.sp-modal-bg {
  position: fixed; inset: 0; background: rgba(27,42,46,0.55);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 28px;
  backdrop-filter: blur(6px); animation: sp-fade 200ms ease;
}
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-modal {
  background: var(--hub-bg); border-radius: 18px; width: 100%; max-width: 1180px;
  height: calc(100vh - 32px); max-height: 1100px;
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  box-shadow: 0 32px 64px -16px rgba(27,42,46,0.45);
}
.sp-modal-head {
  background: white; border-bottom: 1px solid var(--hub-border);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sp-modal-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sp-modal-thumb { width: 46px; height: 46px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--hub-border); flex-shrink: 0; }
.sp-modal-head h2 { margin: 0; font: 700 17px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--hub-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
.sp-modal-head .sub { font: 400 13px/1 var(--font-body); color: var(--hub-muted); margin-top: 3px; }
.sp-modal-nav { display: inline-flex; align-items: center; gap: 8px; }
.sp-modal-nav .counter { font: 500 13px/1 var(--font-body); color: var(--hub-muted); min-width: 64px; text-align: center; }
.sp-modal-nav .counter b { color: var(--hub-ink); font-weight: 700; }

.sp-composer { display: grid; grid-template-columns: 1fr 440px; overflow: hidden; }
.sp-compose-left { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.sp-compose-right { background: white; border-left: 1px solid var(--hub-border); overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }

.sp-card { background: white; border: 1px solid var(--hub-border); border-radius: 12px; padding: 18px; }
.sp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sp-card-head h3 { margin: 0; font: 700 14px/1 var(--font-display); letter-spacing: 0.02em; color: var(--hub-ink); display: inline-flex; align-items: center; gap: 8px; }
.sp-card-head h3 svg { width: 16px; height: 16px; color: var(--hub-teal); }

/* Channel selector */
.sp-channels { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-channel {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1.5px solid var(--hub-border); border-radius: 10px; background: white; cursor: pointer;
  font: 600 13px/1 var(--font-display); color: var(--hub-muted);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.sp-channel .sp-channel-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: white; }
.sp-channel .sp-channel-ico svg { width: 12px; height: 12px; }
.sp-channel.is-on { border-color: var(--hub-teal); background: var(--hub-teal-50); color: var(--hub-ink); }
.sp-channel .check { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--hub-border); display: inline-flex; align-items: center; justify-content: center; }
.sp-channel.is-on .check { background: var(--hub-teal); border-color: var(--hub-teal); }
.sp-channel.is-on .check svg { width: 10px; height: 10px; color: white; }
.sp-channel:not(.is-on) .check svg { display: none; }
.ico-facebook { background: #1877F2; }
.ico-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.ico-x { background: #111; }
.ico-linkedin { background: #0A66C2; }

/* Message editor */
.sp-msg-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--hub-border); }
.sp-msg-tab {
  background: transparent; border: 0; cursor: pointer;
  font: 600 12px/1 var(--font-display); color: var(--hub-muted);
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-msg-tab.is-on { color: var(--hub-teal); border-bottom-color: var(--hub-teal); }
.sp-msg-tab .dot { width: 14px; height: 14px; border-radius: 5px; }
.sp-msg-tab.override::after { content: '•'; color: var(--hub-orange); margin-left: 2px; }

.sp-textarea {
  width: 100%; min-height: 150px; resize: vertical;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--hub-ink); outline: none;
}
.sp-textarea:focus { border-color: var(--hub-teal); box-shadow: 0 0 0 3px rgba(12,123,138,0.15); }
.sp-msg-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--hub-muted); }
.sp-msg-meta .over { color: var(--hub-orange); font-weight: 600; }
.sp-msg-actions { display: flex; gap: 8px; align-items: center; }

/* AI rewrite */
.sp-ai { background: linear-gradient(120deg, #EAF6F7 0%, #F3EFFA 100%); border: 1px solid #CFE7E9; border-radius: 12px; padding: 16px 18px; }
.sp-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sp-ai-head .badge { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-display); color: var(--hub-teal); }
.sp-ai-head .badge svg { width: 14px; height: 14px; }
.sp-ai-head .brandtag { margin-left: auto; font: 500 11.5px/1 var(--font-body); color: var(--hub-muted); display: inline-flex; align-items: center; gap: 5px; }
.sp-ai-head .brandtag svg { width: 12px; height: 12px; }
.sp-ai-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sp-preset {
  background: white; border: 1px solid var(--hub-border); border-radius: 999px;
  padding: 6px 12px; font: 500 12.5px/1 var(--font-body); color: var(--hub-ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.sp-preset:hover { border-color: var(--hub-teal); background: var(--hub-teal-50); }
.sp-preset svg { width: 12px; height: 12px; color: var(--hub-teal); }
.sp-ai-prompt { position: relative; }
.sp-ai-prompt textarea {
  width: 100%; min-height: 56px; resize: none;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 11px 44px 11px 12px;
  font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--hub-ink); outline: none; background: white;
}
.sp-ai-prompt textarea:focus { border-color: var(--hub-teal); }
.sp-ai-send {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: var(--hub-teal); color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sp-ai-send:disabled { background: #B5CFD3; cursor: not-allowed; }
.sp-ai-send svg { width: 14px; height: 14px; }
.sp-ai-thinking { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hub-teal); margin-top: 10px; }
.sp-ai-thinking svg { width: 14px; height: 14px; }

/* Schedule */
.sp-sched-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sp-sched-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border: 1.5px solid var(--hub-border); border-radius: 10px; background: white; cursor: pointer;
  font: 600 13.5px/1 var(--font-display); color: var(--hub-ink);
}
.sp-sched-tabs button.is-on { border-color: var(--hub-teal); background: var(--hub-teal-50); color: var(--hub-teal); }
.sp-sched-tabs svg { width: 15px; height: 15px; }
.sp-sched-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-sched-fields .sp-filter { gap: 5px; }
.sp-besttime {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--hub-teal-50); border-radius: 8px; font-size: 12.5px; color: #0A5663;
}
.sp-besttime svg { width: 14px; height: 14px; color: var(--hub-teal); flex-shrink: 0; }
.sp-besttime b { font-weight: 700; }
.sp-besttime button { margin-left: auto; background: transparent; border: 0; color: var(--hub-teal); font: 600 12px/1 var(--font-display); cursor: pointer; white-space: nowrap; }
.sp-besttime button:hover { text-decoration: underline; }

/* Live preview (right column) */
.sp-preview-head { display: flex; align-items: center; justify-content: space-between; }
.sp-preview-head h3 { margin: 0; font: 700 13px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-muted); }
.sp-preview-switch { display: inline-flex; gap: 4px; }
.sp-preview-switch button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hub-border); background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--hub-muted); }
.sp-preview-switch button .sp-channel-ico { width: 20px; height: 20px; }
.sp-preview-switch button.is-on { border-color: var(--hub-teal); box-shadow: 0 0 0 2px rgba(12,123,138,0.18); }

/* social card mock */
.sp-social {
  border: 1px solid var(--hub-border); border-radius: 12px; overflow: hidden; background: white;
}
.sp-social-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.sp-social-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--hub-teal); color: white; font: 700 14px/1 var(--font-display); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-social-meta b { display: block; font: 700 13.5px/1.2 var(--font-display); color: var(--hub-ink); }
.sp-social-meta span { display: block; font: 400 11.5px/1.2 var(--font-body); color: var(--hub-muted); margin-top: 2px; }
.sp-social-body { padding: 0 14px 12px; font-size: 14px; line-height: 1.5; color: var(--hub-ink); white-space: pre-wrap; word-break: break-word; }
.sp-social-img { width: 100%; aspect-ratio: 1.91 / 1; background-size: cover; background-position: center; background-color: var(--hub-border); }
.sp-social-img--ig { aspect-ratio: 1 / 1; }
.sp-social-foot { display: flex; gap: 18px; padding: 10px 14px; border-top: 1px solid #EFF2F3; color: var(--hub-soft); }
.sp-social-foot svg { width: 17px; height: 17px; }
.sp-social-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.sp-social--x .sp-social-body { font-size: 15px; }

/* Footer of composer */
.sp-compose-foot {
  border-top: 1px solid var(--hub-border); padding-top: 14px; margin-top: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--hub-teal-50); border-radius: 8px; font-size: 13px; color: #0A5663; }
.sp-summary svg { width: 14px; height: 14px; color: var(--hub-teal); flex-shrink: 0; }

/* Toast */
.sp-toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--hub-ink); color: white; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; display: inline-flex; align-items: center; gap: 9px; z-index: 200;
  animation: sp-bar-in 200ms ease; box-shadow: 0 10px 28px rgba(27,42,46,0.3);
}
.sp-toast svg { width: 15px; height: 15px; color: #6FD0D8; }

/* Floating "Post queue" tab (mirrors the live "Print queue") */
.sp-queue-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50;
  background: var(--hub-teal); color: white; border: 0; cursor: pointer;
  padding: 16px 10px; border-radius: 12px 0 0 12px;
  writing-mode: vertical-rl; font: 700 13px/1 var(--font-display); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: -4px 0 12px -2px rgba(27,42,46,0.2);
}
.sp-queue-tab svg { width: 16px; height: 16px; writing-mode: horizontal-tb; }
.sp-queue-tab .badge { writing-mode: horizontal-tb; background: var(--hub-orange); color: white; border-radius: 999px; padding: 2px 7px; font-size: 11px; }

@media (max-width: 1080px) {
  .sp-filters { grid-template-columns: repeat(2, 1fr); }
  .sp-composer { grid-template-columns: 1fr; }
  .sp-compose-right { border-left: 0; border-top: 1px solid var(--hub-border); }
  .sp-thead, .sp-row { grid-template-columns: 40px 60px 1.4fr 1.6fr; }
  .sp-th-op, .sp-td-op, .sp-th-dest, .sp-td-dest { display: none; }
}