/* Stream Deck & macros: a channel-strip list, one row per action/preset,
   like the labelled strips on a broadcast patch bay. */
.deck2 { display: grid; gap: 20px; }

.dk-head h2 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dk-head p { margin-top: 8px; max-width: 62ch; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.dk-head details.guide { margin-top: 14px; max-width: 62ch; }

.dk-warn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(239,68,68,.35); border-radius: 10px; background: var(--danger-soft); color: #fca5a5; font-size: 13px; }
.dk-warn svg { width: 18px; height: 18px; stroke: #f87171; flex: none; }

.dk-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.02); animation: riseIn .5s .05s var(--ease) both; }
.dk-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); position: relative; }
.dk-row:last-child { border-bottom: none; }
.dk-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); opacity: .55; }

.dk-badge { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.05); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--accent); }
.dk-badge.ico { color: var(--text-2); }
.dk-badge.ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dk-name { font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text); width: 160px; flex: none; }

.dk-divider { padding: 10px 16px; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); background: rgba(255,255,255,.02); border-bottom: 1px solid var(--line); }

.dk-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .dk-row { flex-wrap: wrap; }
  .dk-name { width: auto; }
  .dk-row .copyf { flex-basis: 100%; }
}