:root {
      --bg: #0a0c10;
      --surface: #141820;
      --surface-elevated: #1c2230;
      --border: #2a3348;
      --text: #eef1f8;
      --muted: #8b95ad;
      --accent: #6b9fff;
      --accent-hover: #8ab4ff;
      --accent-glow: rgba(107, 159, 255, 0.35);
      --success: #3dd68c;
      --warning: #f5a623;
      --danger: #f2555a;
      --edit-overlay: rgba(107, 159, 255, 0.14);
      --header-h: 52px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      overflow: hidden;
      font-family: "Segoe UI", system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      background: var(--bg);
    }

    #app-layout {
      display: flex;
      flex: 1;
      min-height: 0;
      min-width: 0;
    }

    .deck-column {
      flex: 1;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #chat-dock {
      display: none;
      flex-direction: column;
      flex-shrink: 0;
      width: var(--chat-dock-width, 340px);
      min-height: 0;
      min-width: 0;
      background: var(--surface);
      z-index: 12;
    }

    #chat-dock:not([hidden]) { display: flex; }

    body.chat-dock-left #chat-dock { border-right: 1px solid var(--border); }
    body.chat-dock-right #chat-dock { border-left: 1px solid var(--border); }

    body.chat-full-height #chat-dock,
    body.chat-full-height #chat-dock .chat-widget {
      height: 100%;
      min-height: 0;
    }

    #chat-dock .chat-widget,
    #chat-dock .twitch-chat-widget {
      flex: 1;
      width: 100%;
      min-height: 0;
      border-left: none;
      border-right: none;
    }

    body.chat-dock-active {
      --header-h: 44px;
      --deck-toolbar-pad: 6px;
    }

    body.chat-dock-active header.app-header {
      height: var(--header-h);
      padding: 0 10px;
      gap: 8px;
    }

    body.chat-dock-active #deck-toolbar {
      padding: var(--deck-toolbar-pad, 6px) 10px;
    }

    body.chat-dock-active .deck-nav-btn,
    body.chat-dock-active #deck-page-select,
    body.chat-dock-active .btn-add-deck-page,
    body.chat-dock-active .btn-page-settings {
      min-height: 40px;
      min-width: 40px;
    }

    body.chat-dock-active .deck-nav-btn { min-width: 44px; }

    #app:fullscreen {
      width: 100%;
      height: 100%;
    }

    header.app-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 16px;
      height: var(--header-h);
      flex-shrink: 0;
      flex-wrap: nowrap;
      background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
      position: relative;
      z-index: 40;
    }

    header.app-header::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), #a78bfa, transparent);
      opacity: 0.7;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-shrink: 0;
    }

    .header-status {
      display: flex;
      align-items: center;
      padding: 4px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      flex-shrink: 0;
      position: relative;
    }

    .status-compact-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: default;
    }

    .status-compact-group {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      line-height: 1;
    }

    .status-compact-sep {
      color: var(--border);
      font-weight: 300;
      user-select: none;
    }

    .status-tooltip {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 200px;
      max-width: 320px;
      padding: 10px 12px;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
      z-index: 80;
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--text);
      pointer-events: none;
    }

    .status-compact-wrap:hover .status-tooltip,
    .status-compact-wrap:focus-within .status-tooltip { display: block; }

    .status-tooltip strong {
      display: block;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin: 8px 0 4px;
    }

    .status-tooltip strong:first-child { margin-top: 0; }

    .status-tooltip ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .status-tooltip li {
      padding: 3px 0;
      color: var(--text);
    }

    .twitch-header-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      color: #9146ff;
      cursor: pointer;
      font-size: 1rem;
      min-height: 36px;
      flex-shrink: 0;
    }

    .twitch-header-btn:hover {
      border-color: #9146ff;
      background: rgba(145, 70, 255, 0.12);
    }

    .twitch-header-btn .status-dot { width: 8px; height: 8px; }

    .brand-logo {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 2px 10px rgba(107, 159, 255, 0.4));
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }

    .brand-text strong {
      font-family: "Orbitron", "Segoe UI", system-ui, sans-serif;
      font-size: 1.05rem;
      letter-spacing: 0.08em;
      font-weight: 800;
      text-transform: uppercase;
      background: linear-gradient(90deg, #eef1f8 0%, #b8c8ff 55%, #a78bfa 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-text span {
      font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      margin-left: auto;
      flex-shrink: 1;
      min-width: 0;
      justify-content: flex-end;
    }

    .header-menu-wrap {
      position: relative;
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .header-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 200px;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 6px;
      z-index: 60;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }

    .header-dropdown.open { display: block; }

    .header-dropdown button {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 12px 14px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 0.88rem;
      border-radius: 8px;
      cursor: pointer;
      min-height: 44px;
    }

    .header-dropdown button:hover { background: var(--edit-overlay); }

    .header-dropdown .menu-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .header-dropdown .menu-row input[type="number"] {
      width: 44px;
      padding: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
    }

    .header-dropdown .menu-sep {
      height: 1px;
      background: var(--border);
      margin: 4px 6px;
    }

    @media (max-width: 720px) {
      .brand-text span { display: none; }
    }

    .mode-toggle {
      display: flex;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      padding: 2px;
    }

    .mode-toggle button {
      padding: 6px 18px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
    }

    .mode-toggle button.active {
      background: linear-gradient(135deg, var(--accent), #7c5cff);
      color: #fff;
      box-shadow: 0 2px 10px var(--accent-glow);
    }

    .edit-toolbar {
      display: none;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 4px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    body.edit-mode .edit-only-menu { display: flex; }
    body:not(.edit-mode) .edit-only-menu { display: none !important; }
    .header-dropdown .menu-row.edit-only-menu { display: none; }
    body.edit-mode .header-dropdown .menu-row.edit-only-menu { display: flex; }

    .edit-toolbar label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      color: var(--muted);
    }

    .edit-toolbar input[type="number"] {
      width: 48px;
      padding: 4px 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.82rem;
    }

    .btn-icon, .btn-sm {
      padding: 6px 10px;
      font-size: 0.78rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

    .btn-icon {
      width: 34px;
      height: 34px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }

    .btn-sm:hover, .btn-icon:hover {
      border-color: var(--accent);
      color: var(--accent-hover);
      background: var(--surface-elevated);
    }

    #deck-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .deck-page-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .deck-nav-btn {
      min-width: 52px;
      min-height: 52px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
      font-size: 1.15rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
    }

    .deck-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .deck-nav-btn:not(:disabled):active { transform: scale(0.96); background: var(--edit-overlay); }

    #deck-page-select {
      flex: 1;
      min-width: 0;
      min-height: 52px;
      padding: 0 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }

    .btn-add-deck-page {
      min-height: 52px;
      padding: 0 16px;
      border: 1px dashed var(--accent);
      border-radius: 12px;
      background: var(--edit-overlay);
      color: var(--accent);
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      touch-action: manipulation;
    }

    .btn-add-deck-page:active { opacity: 0.85; }

    .btn-page-settings {
      min-width: 52px;
      min-height: 52px;
      padding: 0;
      border: 1px dashed var(--accent);
      border-radius: 12px;
      background: var(--edit-overlay);
      color: var(--accent);
      font-size: 1.15rem;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: manipulation;
    }

    .btn-page-settings:active { opacity: 0.85; }

    .page-settings-delete-wrap {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .page-settings-delete-wrap .btn-danger {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      line-height: 1.25;
      min-height: 35px;
    }

    #folder-bar {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      background: var(--surface-elevated);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    #folder-bar.visible { display: flex; }

    .folder-exit-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1px solid var(--accent);
      border-radius: 10px;
      background: var(--edit-overlay);
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    .folder-exit-btn:active { opacity: 0.85; }

    .deck-btn.kind-folder .sub { color: #c9a8ff; }

    #grid-wrap {
      flex: 1;
      min-height: 0;
      position: relative;
    }

    #grid {
      display: grid;
      width: 100%;
      height: 100%;
      gap: 0;
    }

    .cell {
      position: relative;
      border: 1px solid var(--border);
      min-height: 0;
      min-width: 0;
      overflow: hidden;
    }

    .cell.drop-target {
      background: var(--edit-overlay);
      outline: 2px dashed var(--accent);
      outline-offset: -2px;
    }

    .cell.empty-edit {
      cursor: pointer;
      background: var(--bg);
    }

    body:not(.edit-mode) .cell.empty-edit { display: none; }

    .cell.empty-edit:hover { background: var(--edit-overlay); }

    .cell.empty-edit::after {
      content: "+";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--muted);
      opacity: 0.45;
      pointer-events: none;
    }

    .deck-btn {
      width: 100%;
      height: 100%;
      border: none;
      color: var(--text);
      font-size: clamp(0.55rem, 1.1vw, 0.82rem);
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      word-break: break-word;
      line-height: 1.15;
      transition: filter 0.15s, transform 0.1s;
      display: grid;
      grid-template: 1fr / 1fr;
      position: relative;
      overflow: hidden;
      container-type: size;
    }

    .deck-btn::before {
      content: "";
      grid-area: 1 / 1;
      opacity: 0.12;
      background: radial-gradient(circle at 30% 20%, #fff, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    .deck-btn-bg-icon {
      grid-area: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
      pointer-events: none;
      color: #fff;
      opacity: var(--bg-icon-opacity, 0.52);
    }

    .deck-btn-bg-icon i {
      font-size: 72cqmin;
      line-height: 1;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    }

    .deck-btn-bg-icon .deck-btn-bg-logo {
      width: 78%;
      height: 78%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      opacity: 1;
      filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
    }

    .deck-btn-bg-icon.icon-tinted,
    .deck-btn-split-icons .split-half.icon-tinted {
      color: var(--btn-icon-color, #fff);
    }

    .deck-btn-bg-icon.icon-tinted i,
    .deck-btn-split-icons .split-half.icon-tinted i {
      color: var(--btn-icon-color, #fff);
      opacity: var(--bg-icon-opacity, 0.52);
    }

    .deck-btn-bg-icon.icon-tinted .deck-btn-bg-logo,
    .deck-btn-split-icons .split-half.icon-tinted .deck-btn-bg-logo {
      filter: var(--btn-icon-img-filter, drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)));
      opacity: var(--bg-icon-opacity, 0.52);
    }

    .icon-color-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }

    .icon-color-swatch {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }

    .icon-color-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

    .icon-color-swatch[data-color="none"] {
      background: linear-gradient(135deg, var(--surface-elevated) 45%, var(--border) 45%, var(--border) 55%, var(--surface-elevated) 55%);
    }

    .icon-color-custom-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    .icon-color-custom-row input[type="color"] {
      width: 40px;
      height: 32px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
    }

    .deck-btn-content {
      grid-area: 1 / 1;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 5px 6px;
      min-height: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      pointer-events: none;
    }

    .deck-btn.align-bottom-left .deck-btn-content { justify-content: flex-end; align-items: flex-start; text-align: left; }
    .deck-btn.align-bottom-center .deck-btn-content { justify-content: flex-end; align-items: center; text-align: center; }
    .deck-btn.align-bottom-right .deck-btn-content { justify-content: flex-end; align-items: flex-end; text-align: right; }
    .deck-btn.align-middle-left .deck-btn-content { justify-content: center; align-items: flex-start; text-align: left; }
    .deck-btn.align-middle-center .deck-btn-content { justify-content: center; align-items: center; text-align: center; }
    .deck-btn.align-middle-right .deck-btn-content { justify-content: center; align-items: flex-end; text-align: right; }
    .deck-btn.align-top-left .deck-btn-content { justify-content: flex-start; align-items: flex-start; text-align: left; }
    .deck-btn.align-top-center .deck-btn-content { justify-content: flex-start; align-items: center; text-align: center; }
    .deck-btn.align-top-right .deck-btn-content { justify-content: flex-start; align-items: flex-end; text-align: right; }

    .deck-btn-hotkey {
      position: absolute;
      top: 4px;
      right: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.75);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      z-index: 2;
    }

    .hotkey-capture-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }

    .hotkey-capture-row input {
      flex: 1;
      min-width: 0;
    }

    .deck-btn-label {
      position: relative;
      white-space: pre-line;
      max-width: 100%;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.5);
    }

    .deck-btn-label-wrap {
      display: flex;
      flex-direction: column;
      align-items: inherit;
      max-width: 100%;
      width: 100%;
    }

    .deck-btn-bitrate {
      display: block;
      font-size: 0.72em;
      font-weight: 700;
      margin-top: 4px;
      line-height: 1.1;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    }

    .deck-btn-bitrate[hidden] { display: none; }

    .deck-btn-bitrate.bitrate-good { color: #7dffb8; }
    .deck-btn-bitrate.bitrate-warn { color: #ffb84d; }
    .deck-btn-bitrate.bitrate-bad { color: #ff7070; }
    .deck-btn-bitrate.bitrate-unknown { color: var(--muted); }

    .deck-btn .sub {
      display: block;
      font-size: 0.58em;
      font-weight: 400;
      opacity: 0.82;
      margin-top: 2px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }

    .deck-btn .sub[hidden] {
      display: none;
    }

    .deck-btn-split-icons {
      grid-area: 1 / 1;
      position: relative;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      isolation: isolate;
    }

    /* Scene toggle only: diagonal divider (bottom-left → top-right) */
    .deck-btn-split-icons:not(.deck-btn-volume-split-icons)::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: no-repeat center / 100% 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='rgba(255%2C255%2C255%2C0.42)' stroke-width='1.25' vector-effect='non-scaling-stroke'/%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='rgba(0%2C0%2C0%2C0.5)' stroke-width='2.5' vector-effect='non-scaling-stroke' opacity='0.55'/%3E%3C/svg%3E");
    }

    .split-half {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      color: #fff;
      opacity: 0.2;
      transition: opacity 0.2s ease;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .split-half.active { opacity: 0.92; }
    .split-half.dim { opacity: 0.16; }

    .split-half.split-tl {
      clip-path: polygon(0 0, 100% 0, 0 100%);
      align-items: flex-start;
      justify-content: flex-start;
      padding: 14% 0 0 16%;
    }

    .split-half.split-br {
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      align-items: flex-end;
      justify-content: flex-end;
      padding: 0 16% 14% 0;
    }

    .split-half i {
      font-size: 44cqmin;
      line-height: 1;
      max-width: 100%;
      max-height: 100%;
    }

    .split-half .deck-btn-bg-logo {
      width: 46%;
      height: 46%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .sb-cycle-step-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
    }

    .sb-cycle-step-tab {
      flex: 1;
      min-width: 3.5rem;
      padding: 8px 10px;
      font-size: 0.78rem;
      border: 2px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
      text-align: center;
    }

    .sb-cycle-step-tab.active {
      border-color: var(--accent);
      color: var(--text);
      background: var(--edit-overlay);
    }

    .toggle-icon-targets {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
    }

    .toggle-icon-slot {
      flex: 1;
      padding: 8px 10px;
      font-size: 0.78rem;
      border: 2px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
      text-align: center;
    }

    .toggle-icon-slot.active {
      border-color: var(--accent);
      color: var(--text);
      background: var(--edit-overlay);
    }

    #modal-column-icons.toggle-assign-mode .icon-assign-hint {
      display: block;
      font-size: 0.75rem;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .icon-assign-hint { display: none; }

    .deck-btn.deck-btn-volume-split {
      position: relative;
    }

    .deck-btn-volume-split-icons {
      grid-area: 1 / 1;
      position: relative;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      isolation: isolate;
      container-type: size;
    }

    .deck-btn-volume-split-icons::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: 50%;
      height: 1px;
      transform: translateY(-50%);
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35) 15%,
        rgba(255, 255, 255, 0.35) 85%,
        transparent
      );
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    }

    .volume-half {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      display: flex;
      color: #fff;
      opacity: 0.7;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: opacity 0.14s ease, background 0.14s ease;
    }

    .volume-half-top {
      top: 0;
      height: 50%;
      align-items: center;
      justify-content: center;
      padding: 4% 8% 0;
    }

    .volume-half-bottom {
      bottom: 0;
      height: 50%;
      align-items: center;
      justify-content: center;
      padding: 0 8% 4%;
    }

    .volume-half.lit {
      opacity: 1;
      z-index: 1;
      background: rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.14);
    }

    .volume-half.lit i,
    .volume-half.lit .deck-btn-bg-logo {
      filter: brightness(1.15);
    }

    .volume-half.dim {
      opacity: 0.32;
    }

    .volume-half i {
      font-size: 62cqmin;
      line-height: 1;
      max-width: 100%;
      max-height: 100%;
    }

    .volume-half .deck-btn-bg-logo {
      width: 62%;
      height: 62%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Single-action volume (up / down / mute) — slightly larger watermark */
    .deck-btn[data-obs-volume="1"]:not(.deck-btn-volume-split) .deck-btn-bg-icon i {
      font-size: 80cqmin;
    }

    .deck-btn[data-obs-volume="1"]:not(.deck-btn-volume-split) .deck-btn-bg-icon .deck-btn-bg-logo {
      width: 86%;
      height: 86%;
    }

    .deck-btn-volume-meter {
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 22%;
      height: 6px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.35);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 2;
    }

    .deck-btn-volume-meter.visible {
      opacity: 1;
    }

    .deck-btn-volume-meter.pulse {
      box-shadow: 0 0 12px rgba(232, 184, 74, 0.45);
    }

    .deck-btn-volume-fill {
      display: block;
      height: 100%;
      width: 50%;
      background: linear-gradient(90deg, var(--accent), #8fd4ff);
      border-radius: 4px;
      transition: width 0.08s linear;
    }

    .deck-btn-volume-db {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 4px);
      transform: translateX(-50%);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
      pointer-events: none;
    }

    .deck-btn.theme-slate { background: linear-gradient(145deg, #2a3142 0%, #1a1f2b 100%); }
    .deck-btn.theme-ocean { background: linear-gradient(145deg, #1e4a7a 0%, #0f2847 100%); }
    .deck-btn.theme-ember { background: linear-gradient(145deg, #8b3a2a 0%, #4a1810 100%); }
    .deck-btn.theme-forest { background: linear-gradient(145deg, #2a6b4a 0%, #143828 100%); }
    .deck-btn.theme-violet { background: linear-gradient(145deg, #5a3d8c 0%, #2e1f4a 100%); }
    .deck-btn.theme-sunset { background: linear-gradient(145deg, #b85c28 0%, #6b3018 100%); }
    .deck-btn.theme-ice { background: linear-gradient(145deg, #2a7a8c 0%, #143840 100%); }
    .deck-btn.theme-rose { background: linear-gradient(145deg, #9c3d6b 0%, #4a1830 100%); }
    .deck-btn.theme-gold { background: linear-gradient(145deg, #9a7b2a 0%, #4a3810 100%); }
    .deck-btn.theme-midnight { background: linear-gradient(145deg, #1a1a2e 0%, #0a0a14 100%); }
    .deck-btn.theme-go { background: linear-gradient(145deg, #28a85a 0%, #166b38 100%); }
    .deck-btn.theme-stop { background: linear-gradient(145deg, #d64545 0%, #8b2222 100%); }
    .deck-btn.theme-mint { background: linear-gradient(145deg, #3eb88a 0%, #1f6b52 100%); }
    .deck-btn.theme-ruby { background: linear-gradient(145deg, #c23a5a 0%, #6e1f38 100%); }
    .deck-btn.theme-sky { background: linear-gradient(145deg, #3a8fd4 0%, #1e5280 100%); }
    .deck-btn.theme-grape { background: linear-gradient(145deg, #7b52c4 0%, #3f2878 100%); }
    .deck-btn.theme-charcoal { background: linear-gradient(145deg, #4a4f5c 0%, #252830 100%); }
    .deck-btn.theme-custom { background: var(--btn-theme-gradient, linear-gradient(145deg, #2a3142, #1a1f2b)); }

    @keyframes obs-stream-live-pulse {
      0%, 100% {
        filter: brightness(1);
        box-shadow: inset 0 0 0 0 rgba(255, 120, 120, 0);
      }
      50% {
        filter: brightness(1.14);
        box-shadow: inset 0 0 0 2px rgba(255, 150, 150, 0.5), 0 0 16px rgba(214, 69, 69, 0.28);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      body:not(.edit-mode) .deck-btn.obs-stream-live-pulse {
        animation: obs-stream-live-pulse 2.2s ease-in-out infinite;
      }
    }

    .deck-btn:hover { filter: brightness(1.12); }
    .deck-btn:active { transform: scale(0.98); }

    .deck-btn.flash { filter: brightness(1.4) saturate(1.2); outline: 2px solid var(--accent); }
    .deck-btn.error-flash { filter: brightness(1.2); outline: 2px solid var(--danger); }

    body.edit-mode .deck-btn {
      cursor: grab;
      outline: 2px solid transparent;
    }

    body.edit-mode .deck-btn:active { cursor: grabbing; }
    body.edit-mode .deck-btn:hover { outline-color: var(--accent); }
    body.edit-mode .deck-btn.dragging { opacity: 0.45; }

    body.edit-mode .grid-edit-container {
      position: relative;
    }

    body.edit-mode .grid-edit-handles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 30;
    }

    body.edit-mode .grid-edit-edge {
      position: absolute;
      pointer-events: auto;
      z-index: 31;
      touch-action: none;
    }

    body.edit-mode .grid-edit-edge-n {
      top: 0;
      left: 10px;
      right: 10px;
      height: 10px;
      cursor: ns-resize;
    }

    body.edit-mode .grid-edit-edge-s {
      bottom: 0;
      left: 10px;
      right: 10px;
      height: 10px;
      cursor: ns-resize;
    }

    body.edit-mode .grid-edit-edge-e {
      top: 10px;
      right: 0;
      bottom: 10px;
      width: 10px;
      cursor: ew-resize;
    }

    body.edit-mode .grid-edit-edge-w {
      top: 10px;
      left: 0;
      bottom: 10px;
      width: 10px;
      cursor: ew-resize;
    }

    body.edit-mode .grid-edit-edge-ne {
      top: 0;
      right: 0;
      width: 14px;
      height: 14px;
      cursor: nesw-resize;
    }

    body.edit-mode .grid-edit-edge-nw {
      top: 0;
      left: 0;
      width: 14px;
      height: 14px;
      cursor: nwse-resize;
    }

    body.edit-mode .grid-edit-edge-se {
      bottom: 0;
      right: 0;
      width: 14px;
      height: 14px;
      cursor: nwse-resize;
    }

    body.edit-mode .grid-edit-edge-sw {
      bottom: 0;
      left: 0;
      width: 14px;
      height: 14px;
      cursor: nesw-resize;
    }

    body.edit-mode .grid-edit-container .deck-btn,
    body.edit-mode .grid-edit-container.stream-widget-cell,
    body.edit-mode .grid-edit-container.chat-widget,
    body.edit-mode .grid-edit-container.twitch-chat-widget,
    body.edit-mode .grid-edit-container.multichat-widget,
    body.edit-mode .grid-edit-container.youtube-chat-widget {
      cursor: grab;
    }

    body.edit-mode .grid-item-moving .deck-btn,
    body.edit-mode .grid-item-moving.stream-widget-cell,
    body.edit-mode .grid-item-moving.chat-widget,
    body.edit-mode .grid-item-moving.twitch-chat-widget {
      cursor: grabbing;
    }

    body.edit-mode .grid-item-moving,
    body.edit-mode .grid-item-resizing {
      outline: 2px dashed var(--accent);
      outline-offset: -2px;
      z-index: 25;
    }

    body.edit-mode .grid-edit-edge:hover {
      background: rgba(145, 70, 255, 0.35);
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 0.72rem;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--danger);
      flex-shrink: 0;
    }

    .status-dot.connecting { background: var(--warning); }
    .status-dot.connected { background: var(--success); }
    #context-menu {
      display: none;
      position: fixed;
      z-index: 300;
      min-width: 160px;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px 0;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    #context-menu.open { display: block; }

    #context-menu button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 0.85rem;
      cursor: pointer;
    }

    #context-menu button:hover:not(:disabled) { background: var(--edit-overlay); }
    #context-menu button:disabled { opacity: 0.4; cursor: not-allowed; }
    #context-menu .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

    .context-menu-group {
      position: relative;
    }

    .context-menu-parent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      text-align: left;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 0.85rem;
      cursor: pointer;
      min-height: 40px;
    }

    .context-menu-parent:hover { background: var(--edit-overlay); }

    .context-menu-parent .fa-chevron-right {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .context-menu-submenu {
      display: none;
      position: absolute;
      left: calc(100% - 4px);
      top: 0;
      min-width: 200px;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px 0;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
      z-index: 310;
    }

    .context-menu-group.open .context-menu-submenu,
    .context-menu-group:hover .context-menu-submenu { display: block; }

    .context-menu-submenu button {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 14px;
      min-height: 40px;
    }

    .context-menu-submenu button i {
      flex-shrink: 0;
      width: 1.15rem;
      margin-inline-end: 2px;
      text-align: center;
      color: #9146ff;
    }

    .context-menu-submenu button i.fa-youtube {
      color: #ff0000;
    }

    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      z-index: 100;
      align-items: center;
      justify-content: center;
      padding: 2vh 2vw;
    }

    .modal-backdrop.open { display: flex; }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: min(920px, 96vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }

    .modal.modal-deck {
      max-width: none;
      width: min(90vw, 1200px);
      height: min(90vh, 900px);
      max-height: 90vh;
    }

    .modal-deck-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .modal-deck-head h2 {
      font-size: 1.15rem;
      margin: 0;
      padding: 0;
      border: none;
    }

    .modal-close-x {
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      color: var(--muted);
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
    }

    .modal-close-x:hover { color: var(--text); border-color: var(--accent); }

    .modal-deck-tabs {
      display: flex;
      gap: 4px;
      padding: 10px 16px 0;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      background: var(--bg);
    }

    .modal-deck-tabs button {
      padding: 10px 18px;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: -1px;
    }

    .modal-deck-tabs button.active {
      color: var(--accent-hover);
      border-bottom-color: var(--accent);
    }

    .modal-deck-body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .modal-deck-panel {
      display: none;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 18px 20px;
    }

    .modal-deck-panel.active {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
      gap: 20px 28px;
      align-content: start;
    }

    .modal-deck-panel[data-panel="action"].active,
    .modal-deck-panel[data-panel="general"].active,
    .modal-deck-panel[data-panel="look"].active {
      grid-template-columns: 1fr;
    }

    .modal-general-panel,
    .modal-look-panel {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }

    .modal-look-panel {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .appearance-section {
      padding: 18px 0;
      margin: 0;
    }

    .appearance-section:first-child {
      padding-top: 4px;
    }

    .appearance-section:last-child {
      padding-bottom: 4px;
    }

    .appearance-section + .appearance-section {
      border-top: 1px solid var(--border);
    }

    .appearance-section-title {
      margin: 0 0 10px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .appearance-section-lead {
      margin: 0 0 12px !important;
    }

    .appearance-section-theme .field {
      margin-bottom: 0;
    }

    .appearance-single-theme-hint {
      margin: 0 0 12px !important;
    }

    #appearance-section-cycle .sb-cycle-step-tabs {
      margin-bottom: 0;
    }

    #appearance-section-cycle .sb-cycle-step-tab {
      min-width: 4.5rem;
      padding: 10px 12px;
      font-size: 0.82rem;
    }

    .appearance-section-assign .field {
      margin-bottom: 14px;
    }

    .appearance-section-assign .field:last-child {
      margin-bottom: 0;
    }

    .appearance-section-picker .modal-icon-field {
      margin-bottom: 0;
    }

    .appearance-section-picker #field-icon-color {
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }

    .modal-deck-panel[data-panel="general"].active {
      overflow-x: auto;
    }

    .modal-general-row {
      display: flex;
      align-items: stretch;
      gap: 0;
      width: 100%;
      min-width: min(100%, 680px);
    }

    .modal-general-col-divider,
    .modal-general-inner-divider {
      flex-shrink: 0;
      width: 1px;
      background: var(--border);
      align-self: stretch;
    }

    .modal-general-col-divider {
      margin: 0 18px;
    }

    .modal-general-inner-divider {
      margin: 0 16px;
    }

    .modal-general-col-name {
      flex: 1.4 1 0;
      min-width: 200px;
    }

    .modal-name-align-group {
      display: flex;
      align-items: flex-start;
      height: 100%;
      min-width: 0;
    }

    .modal-general-col-name .field-label-align {
      flex: 1 1 0;
      min-width: 0;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .modal-general-col-name .field-label-align label,
    .modal-general-col-name .field-align-picker label {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      margin-bottom: 6px;
      flex-shrink: 0;
    }

    .modal-general-col-name .field-align-picker {
      flex: 0 0 auto;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
    }

    .field-label-align .btn-name-input {
      display: block;
      width: 100%;
      flex: 1 1 auto;
      min-height: 84px;
      max-height: 120px;
      margin: 0;
      padding: 8px 10px 8px 12px;
      resize: vertical;
      font: inherit;
      line-height: 1.35;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      box-sizing: border-box;
    }

    .field-align-picker .align-grid-modal {
      width: 84px;
      max-width: 84px;
      gap: 3px;
    }

    .field-align-picker .align-grid-modal .align-option {
      border-width: 1.5px;
      border-radius: 4px;
    }

    .field-align-picker .align-grid-modal .align-option::after {
      width: 4px;
      height: 4px;
    }

    .modal-general-col-pos {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      padding-top: 0;
    }

    .modal-pos-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 122px;
    }

    .modal-pos-pair {
      display: flex;
      gap: 10px;
    }

    .modal-pos-field label {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .modal-pos-field input {
      width: 56px;
      padding: 6px 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.85rem;
      box-sizing: border-box;
    }

    .modal-pos-field select {
      width: 100%;
      padding: 6px 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.85rem;
      box-sizing: border-box;
      cursor: pointer;
    }

    .modal-general-col-meta {
      flex: 1 1 0;
      min-width: 180px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: flex-start;
    }

    .modal-general-col-meta .field-general-compact {
      margin-bottom: 0;
    }

    .modal-general-col-meta .field-general-hotkey {
      flex: 1 1 auto;
      min-width: 0;
    }

    .modal-general-col-meta .field-general-hotkey label {
      font-size: 0.72rem;
      margin-bottom: 4px;
    }

    .modal-general-col-meta .hotkey-capture-row {
      flex-wrap: wrap;
      gap: 6px;
    }

    .modal-general-col-meta .hotkey-capture-row input {
      flex: 1 1 100px;
      min-width: 0;
    }

    .modal-general-col-meta .field-hint {
      font-size: 0.68rem;
      line-height: 1.3;
      margin-top: 4px;
    }

    .modal-general-panel > .action-kind-hint {
      margin-top: 12px;
    }

    .action-kind-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .action-kind-pill {
      padding: 10px 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
    }

    .action-kind-pill.active {
      border-color: var(--accent);
      color: var(--text);
      background: var(--edit-overlay);
    }

    .obs-toggle-mode-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 14px;
    }

    .obs-toggle-mode-pill {
      padding: 8px 12px;
      font-size: 0.78rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
    }

    .obs-toggle-mode-pill.active {
      border-color: var(--accent);
      color: var(--text);
      background: var(--edit-overlay);
    }

    .action-panel-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
    }

    .obs-cmd-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
    }

    .obs-cmd-option {
      text-align: left;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 0.8rem;
      cursor: pointer;
    }

    .obs-cmd-option:hover { border-color: var(--accent); }
    .obs-cmd-option.selected { border-color: var(--accent); background: var(--edit-overlay); }

    .stream-widget-cell {
      position: relative;
      width: 100%;
      height: 100%;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      text-align: left;
      padding: 10px 12px;
      background: #1a1030;
      color: var(--text);
      overflow: hidden;
      isolation: isolate;
    }

    .stream-widget-cell .sw-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .stream-widget-cell .sw-bg-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.58;
    }

    .stream-widget-cell .sw-bg-art[hidden] { display: none; }

    .stream-widget-cell .sw-bg-tint {
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(61, 42, 107, 0.72) 0%, rgba(26, 16, 48, 0.76) 100%);
    }

    .stream-widget-cell.accent-ocean .sw-bg-tint { background: linear-gradient(145deg, rgba(30, 74, 122, 0.72) 0%, rgba(15, 40, 71, 0.76) 100%); }
    .stream-widget-cell.accent-ember .sw-bg-tint { background: linear-gradient(145deg, rgba(139, 58, 42, 0.72) 0%, rgba(74, 24, 16, 0.76) 100%); }
    .stream-widget-cell.accent-forest .sw-bg-tint { background: linear-gradient(145deg, rgba(42, 107, 74, 0.72) 0%, rgba(20, 56, 40, 0.76) 100%); }
    .stream-widget-cell.accent-violet .sw-bg-tint { background: linear-gradient(145deg, rgba(90, 61, 140, 0.72) 0%, rgba(46, 31, 74, 0.76) 100%); }
    .stream-widget-cell.accent-sunset .sw-bg-tint { background: linear-gradient(145deg, rgba(184, 92, 40, 0.72) 0%, rgba(107, 48, 24, 0.76) 100%); }
    .stream-widget-cell.accent-ice .sw-bg-tint { background: linear-gradient(145deg, rgba(42, 122, 140, 0.72) 0%, rgba(20, 56, 64, 0.76) 100%); }
    .stream-widget-cell.accent-rose .sw-bg-tint { background: linear-gradient(145deg, rgba(156, 61, 107, 0.72) 0%, rgba(74, 24, 48, 0.76) 100%); }
    .stream-widget-cell.accent-gold .sw-bg-tint { background: linear-gradient(145deg, rgba(154, 123, 42, 0.72) 0%, rgba(74, 56, 16, 0.76) 100%); }
    .stream-widget-cell.accent-midnight .sw-bg-tint { background: linear-gradient(145deg, rgba(26, 26, 46, 0.74) 0%, rgba(10, 10, 20, 0.78) 100%); }
    .stream-widget-cell.accent-ruby .sw-bg-tint { background: linear-gradient(145deg, rgba(194, 58, 90, 0.72) 0%, rgba(110, 31, 56, 0.76) 100%); }
    .stream-widget-cell.accent-sky .sw-bg-tint { background: linear-gradient(145deg, rgba(58, 143, 212, 0.72) 0%, rgba(30, 82, 128, 0.76) 100%); }
    .stream-widget-cell.accent-grape .sw-bg-tint { background: linear-gradient(145deg, rgba(123, 82, 196, 0.72) 0%, rgba(63, 40, 120, 0.76) 100%); }
    .stream-widget-cell.accent-charcoal .sw-bg-tint { background: linear-gradient(145deg, rgba(74, 79, 92, 0.74) 0%, rgba(37, 40, 48, 0.78) 100%); }

    .stream-widget-cell .sw-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      min-height: 0;
    }

    .stream-widget-cell .sw-game {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.78);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }

    .stream-widget-cell .sw-title {
      font-size: clamp(0.65rem, 1.2vw, 0.9rem);
      font-weight: 700;
      line-height: 1.2;
      text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }

    .stream-widget-cell .sw-hint {
      font-size: 0.62rem;
      color: var(--muted);
      margin-top: 6px;
    }

    body.edit-mode .stream-widget-cell { outline: 2px solid var(--accent); outline-offset: -2px; }

    .modal h2 {
      font-size: 1.1rem;
      padding: 16px 20px 12px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }

    .modal-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px 20px;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.15fr);
      gap: 16px 24px;
      align-content: start;
    }

    .modal-icon-field {
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      width: 100%;
    }

    .modal-icon-field .icon-picker-panel {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 240px;
      max-height: min(420px, 50vh);
      overflow: hidden;
    }

    .modal-icon-field .icon-picker-toolbar,
    .modal-icon-field .icon-category-bar {
      flex: 0 0 auto;
    }

    .modal-icon-field .icon-category-bar .icon-category-tabs {
      flex-wrap: wrap;
      overflow-x: visible;
      overflow-y: auto;
      max-height: min(132px, 22vh);
      -webkit-overflow-scrolling: touch;
    }

    .modal-icon-field .icon-picker-grid {
      flex: 1 1 auto;
      min-height: 100px;
      max-height: none;
      overflow-y: auto;
      grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    }

    #panel-streamerbot,
    #panel-obs,
    #panel-obs-toggle,
    #panel-obs-volume,
    #panel-obs-connection,
    #panel-obs-studio-intro,
    #panel-slobs,
    #panel-slobs-toggle,
    #panel-slobs-volume,
    #panel-slobs-connection,
    #panel-slobs-studio-intro {
      grid-column: 1 / -1;
    }

    .action-kind-hint {
      font-size: 0.72rem;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.35;
    }

    .field { margin-bottom: 14px; }

    .field label {
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .field label:has(input[type="checkbox"]) {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0;
      color: var(--text);
      font-size: 0.88rem;
      cursor: pointer;
      user-select: none;
    }

    .field input:not([type="checkbox"]), .field select {
      width: 100%;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.9rem;
    }

    .field input[type="checkbox"] {
      width: 1.05rem;
      height: 1.05rem;
      margin: 0;
      flex-shrink: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .sb-args-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sb-args-list:empty {
      display: none;
    }

    .sb-args-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .sb-args-row .sb-arg-name {
      flex: 0 0 38%;
    }

    .sb-args-row .sb-arg-value {
      flex: 1 1 auto;
    }

    .sb-args-row .sb-arg-remove {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
    }

    .sb-args-row .sb-arg-remove:hover {
      border-color: var(--accent);
      color: var(--accent-hover);
      background: var(--surface-elevated);
    }

    .sb-args-add {
      margin-top: 6px;
    }

    .field-hint {
      font-size: 0.72rem;
      color: var(--warning);
      margin-top: 4px;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
      gap: 4px;
      max-width: 100%;
    }

    .picker-swatch, .picker-icon {
      aspect-ratio: 1;
      width: 100%;
      min-height: 0;
      border: 1.5px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      padding: 0;
      font-size: 0.85rem;
      background: var(--bg);
      color: var(--text);
    }

    .picker-swatch.selected, .picker-icon.selected {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-glow);
    }

    .icon-picker-panel {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
    }

    .icon-picker-toolbar {
      display: flex;
      gap: 6px;
      padding: 8px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      align-items: center;
    }

    #icon-search {
      flex: 1;
      min-width: 120px;
      padding: 6px 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.85rem;
    }

    .icon-category-tabs {
      display: flex;
      gap: 4px;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      flex-shrink: 0;
      min-height: 32px;
    }

    .icon-category-tabs button {
      flex-shrink: 0;
      padding: 4px 10px;
      font-size: 0.72rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
    }

    .icon-category-tabs button.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .icon-category-bar {
      flex: 0 0 auto;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .icon-category-label {
      display: block;
      padding: 6px 10px 0;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .icon-category-bar .icon-category-tabs {
      border-bottom: none;
      padding-top: 4px;
    }

    .icon-picker-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
      padding: 8px;
      max-height: 200px;
      overflow-y: auto;
    }

    .picker-icon {
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
    }

    .picker-icon i { pointer-events: none; }

    .picker-icon .picker-logo-img {
      width: 70%;
      height: 70%;
      object-fit: contain;
      pointer-events: none;
    }

    .align-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      max-width: 160px;
    }

    .align-option {
      aspect-ratio: 1;
      border: 2px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      cursor: pointer;
      position: relative;
      padding: 0;
    }

    .align-option.selected {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-glow);
    }

    .align-option::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 1px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    }

    .align-option[data-align="top-left"]::after { top: 2px; left: 2px; }
    .align-option[data-align="top-center"]::after { top: 2px; left: 50%; transform: translateX(-50%); }
    .align-option[data-align="top-right"]::after { top: 2px; right: 2px; }
    .align-option[data-align="middle-left"]::after { top: 50%; left: 2px; transform: translateY(-50%); }
    .align-option[data-align="middle-center"]::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .align-option[data-align="middle-right"]::after { top: 50%; right: 2px; transform: translateY(-50%); }
    .align-option[data-align="bottom-left"]::after { bottom: 2px; left: 2px; }
    .align-option[data-align="bottom-center"]::after { bottom: 2px; left: 50%; transform: translateX(-50%); }
    .align-option[data-align="bottom-right"]::after { bottom: 2px; right: 2px; }

    .picker-swatch.theme-slate { background: linear-gradient(145deg, #2a3142, #1a1f2b); }
    .picker-swatch.theme-ocean { background: linear-gradient(145deg, #1e4a7a, #0f2847); }
    .picker-swatch.theme-ember { background: linear-gradient(145deg, #8b3a2a, #4a1810); }
    .picker-swatch.theme-forest { background: linear-gradient(145deg, #2a6b4a, #143828); }
    .picker-swatch.theme-violet { background: linear-gradient(145deg, #5a3d8c, #2e1f4a); }
    .picker-swatch.theme-sunset { background: linear-gradient(145deg, #b85c28, #6b3018); }
    .picker-swatch.theme-ice { background: linear-gradient(145deg, #2a7a8c, #143840); }
    .picker-swatch.theme-rose { background: linear-gradient(145deg, #9c3d6b, #4a1830); }
    .picker-swatch.theme-gold { background: linear-gradient(145deg, #9a7b2a, #4a3810); }
    .picker-swatch.theme-midnight { background: linear-gradient(145deg, #1a1a2e, #0a0a14); }
    .picker-swatch.theme-go { background: linear-gradient(145deg, #28a85a, #166b38); }
    .picker-swatch.theme-stop { background: linear-gradient(145deg, #d64545, #8b2222); }
    .picker-swatch.theme-mint { background: linear-gradient(145deg, #3eb88a, #1f6b52); }
    .picker-swatch.theme-ruby { background: linear-gradient(145deg, #c23a5a, #6e1f38); }
    .picker-swatch.theme-sky { background: linear-gradient(145deg, #3a8fd4, #1e5280); }
    .picker-swatch.theme-grape { background: linear-gradient(145deg, #7b52c4, #3f2878); }
    .picker-swatch.theme-charcoal { background: linear-gradient(145deg, #4a4f5c, #252830); }

    .toggle-theme-pickers { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
    .toggle-theme-pickers .field-hint { margin: 0 0 4px; }
    .toggle-theme-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
      gap: 12px 14px;
      align-items: start;
    }
    .toggle-theme-divider {
      background: var(--border);
      width: 1px;
      min-height: 100%;
      margin-top: 2px;
    }
    .toggle-theme-col { min-width: 0; }
    .toggle-theme-section-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0; }
    .toggle-theme-col-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; line-height: 1.35; }
    .toggle-theme-col .picker-grid { margin-bottom: 8px; }
    .toggle-theme-col .theme-custom-row { margin-top: 4px; }
    .theme-custom-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .theme-custom-row .theme-custom-label {
      font-size: 0.78rem;
      color: var(--muted);
      margin: 0;
    }
    .theme-custom-row input[type="color"] {
      width: 40px;
      height: 32px;
      padding: 2px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      cursor: pointer;
    }
    .theme-custom-clear {
      font-size: 0.75rem;
      padding: 4px 8px;
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      flex-shrink: 0;
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      background: var(--surface-elevated);
    }

    .modal-actions button {
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.85rem;
    }

    .btn-primary { background: var(--accent); color: #fff; }
    .btn-cancel { background: transparent; border: 1px solid var(--border) !important; color: var(--muted); }
    .btn-danger { background: transparent; border: 1px solid var(--danger) !important; color: var(--danger); }

    #action-search { margin-bottom: 6px; }

    #action-list {
      max-height: 120px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }

    .action-option {
      padding: 8px 10px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }

    .action-option:last-child { border-bottom: none; }
    .action-option:hover { background: var(--edit-overlay); }
    .action-option.selected { background: var(--accent); color: #fff; }
    .action-option .group { font-size: 0.75rem; opacity: 0.75; }

    #toast {
      position: fixed;
      bottom: 56px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 0.85rem;
      z-index: 200;
      opacity: 0;
      transition: transform 0.25s, opacity 0.25s;
      pointer-events: none;
      max-width: 90vw;
      text-align: center;
    }

    #toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    #toast.interactive {
      pointer-events: auto;
    }

    #toast .toast-undo {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
    }

    #toast .toast-undo:hover {
      color: #fff;
    }

    #toast.error { border-color: var(--danger); color: var(--danger); }

    input[type="file"] { display: none; }

    .chat-widget,
    .twitch-chat-widget {
      --tc-scale: 1;
      position: relative;
      z-index: 8;
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0;
      overflow: hidden;
      touch-action: manipulation;
    }

    body.edit-mode .chat-widget,
    body.edit-mode .twitch-chat-widget {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .tc-platform-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      vertical-align: middle;
      flex-shrink: 0;
      user-select: none;
      background: transparent;
    }

    .tc-channel-pill {
      display: inline-flex;
      align-items: center;
      font-size: 0.72em;
      font-weight: 700;
      line-height: 1.2;
      color: #d4b8ff;
      background: rgba(145, 70, 255, 0.22);
      border: 1px solid rgba(145, 70, 255, 0.4);
      border-radius: 4px;
      padding: 1px 5px;
      margin-right: 5px;
      vertical-align: middle;
      flex-shrink: 0;
      user-select: none;
    }
    .tc-platform-logo-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .tc-composer-multichat .tc-send-group {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .tc-composer-multichat .tc-send.tc-send-twitch {
      background: linear-gradient(135deg, #9146ff, #6441a4);
      color: #fff;
    }

    .tc-composer-multichat .tc-send.tc-send-yt {
      background: linear-gradient(135deg, #ff4444, #cc0000);
      color: #fff;
    }

    .tc-composer-multichat .tc-send.tc-send-both.tc-send-both-platforms {
      background: linear-gradient(90deg, #9146ff 0%, #6441a4 50%, #ff4444 50%, #cc0000 100%);
      color: #fff;
    }
    .tc-line.tc-yt-super { color: #ffd54f; }
    .tc-yt-amount { font-weight: 700; color: #4caf50; }
    .chat-emote-yt, .tc-feed img.chat-emote {
      height: 1.25em;
      width: auto;
      vertical-align: -0.2em;
      margin: 0 1px;
    }
    .youtube-chat-widget .tc-title { color: #ff4444; }
    .multichat-widget .tc-title { color: var(--text); }
    .tc-status-yt.on { background: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.55); }

    .youtube-header-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-elevated);
      color: #ff4444;
      cursor: pointer;
      min-height: 36px;
    }
    .youtube-header-btn:hover { border-color: #ff4444; }
    .status-item[data-key="youtube"] .status-dot.on { background: #ff4444; }

    .widget-chat-source-field {
      text-align: center;
    }

    .widget-chat-source-field > label {
      display: block;
      width: 100%;
      text-align: center;
    }

    .widget-chat-source-field .twitch-settings-note {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .widget-chat-mode-pills,
    .widget-enter-send-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
      justify-content: center;
      width: 100%;
    }

    .widget-mode-pill {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      min-width: 108px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.82rem;
      text-align: center;
      cursor: pointer;
      background: var(--bg);
    }

    .widget-mode-pill input[type="radio"] {
      margin: 0;
    }
    .widget-mode-pill:has(input:checked) {
      border-color: var(--accent);
      background: var(--edit-overlay);
    }

    .widget-modal-tabs {
      display: flex;
      gap: 4px;
      padding: 0 20px;
      margin: 0;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      background: var(--bg);
    }

    .widget-modal-tab {
      padding: 10px 18px;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: -1px;
    }

    .widget-modal-tab.active {
      color: var(--accent-hover);
      border-bottom-color: var(--accent);
    }

    .widget-modal-panel { display: none; }
    .widget-modal-panel.active { display: block; }

    .widget-extra-primary-channel {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
    }

    .widget-extra-channels-list {
      list-style: none;
      margin: 0 0 10px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 24px;
    }

    .widget-extra-channels-list[data-empty="true"]::after {
      content: 'No extra channels yet';
      display: block;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .widget-extra-channels-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.88rem;
    }

    .widget-extra-channels-add {
      display: flex;
      gap: 8px;
    }

    .widget-extra-channels-add input {
      flex: 1;
      min-width: 0;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.9rem;
    }

    .tc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      flex-shrink: 0;
      background: var(--surface-elevated);
      border-bottom: 1px solid var(--border);
      min-height: 44px;
    }

    .tc-title {
      font-size: 0.82rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #9146ff;
      min-width: 0;
    }

    .tc-channel { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .tc-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

    .tc-zoom {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .tc-zoom-label {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--muted);
      min-width: 2.4rem;
      text-align: center;
      user-select: none;
    }

    .tc-status-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .tc-status-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .tc-status-logo .tc-platform-logo-svg {
      width: 100%;
      height: 100%;
    }
    .tc-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--muted);
      flex-shrink: 0;
    }

    .tc-status-dot.on { background: var(--success); box-shadow: 0 0 8px var(--success); }
    .tc-status-dot.pending { background: var(--warning); }
    .tc-status-dot.off { background: var(--danger); }

    .tc-btn-icon {
      min-width: 40px;
      min-height: 40px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tc-feed {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px 10px;
      font-size: calc(clamp(0.72rem, 1.4vw, 0.88rem) * var(--tc-scale, 1));
      line-height: 1.35;
      -webkit-overflow-scrolling: touch;
    }

    .tc-line { margin-bottom: 3px; word-break: break-word; position: relative; }

    .tc-reply-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 5px;
      background: var(--surface-elevated, rgba(0, 0, 0, 0.55));
      color: var(--muted);
      font-size: 0.72rem;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.12s ease, color 0.12s ease;
    }

    .tc-line:hover .tc-reply-btn,
    .tc-reply-btn:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .tc-reply-btn:hover {
      color: #9146ff;
    }

    .tc-line.tc-system { color: var(--muted); font-size: 0.78rem; }

    .tc-event-tag {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(145, 70, 255, 0.25);
      color: #c9a8ff;
      margin-right: 6px;
      vertical-align: middle;
    }

    .tc-user {
      border: none;
      background: none;
      padding: 2px 4px 2px 0;
      margin-right: 4px;
      font-weight: 700;
      font-size: inherit;
      cursor: pointer;
      min-height: 28px;
      touch-action: manipulation;
    }

    .tc-user:active { opacity: 0.75; }

    .tc-line.tc-action {
      font-style: italic;
    }

    .tc-action-user {
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      font: inherit;
      font-style: italic;
      font-weight: 700;
      color: inherit;
      cursor: pointer;
      vertical-align: baseline;
    }

    .tc-action-user:active { opacity: 0.75; }

    .tc-line.tc-action .tc-text { color: inherit; }

    .chat-cheermote {
      height: 1.35em;
      vertical-align: middle;
    }

    .tc-cheer .chat-cheermote {
      filter: drop-shadow(0 0 3px var(--cheer-color, #9c36ff));
    }

    .chat-emote {
      height: 1.4em;
      max-width: 8em;
      vertical-align: middle;
      margin: 0 1px;
      object-fit: contain;
    }

    .chat-emote-animated {
      image-rendering: auto;
    }

    .tc-line.tc-announcement {
      padding: 6px 10px;
      margin: 2px 0;
      border-radius: 8px;
      border-left: 3px solid #9146ff;
      background: rgba(145, 70, 255, 0.12);
    }

    .tc-line.tc-announce-primary { border-left-color: #9146ff; }
    .tc-line.tc-announce-blue { border-left-color: #1f69ff; background: rgba(31, 105, 255, 0.1); }
    .tc-line.tc-announce-green { border-left-color: #00c853; background: rgba(0, 200, 83, 0.1); }
    .tc-line.tc-announce-orange { border-left-color: #ff9800; background: rgba(255, 152, 0, 0.1); }
    .tc-line.tc-announce-purple { border-left-color: #9c27b0; background: rgba(156, 39, 176, 0.1); }

    .tc-event-announce { background: rgba(145, 70, 255, 0.35); margin-right: 6px; }

    .tc-type-watch_streak .tc-text { font-style: italic; }

    .tc-line.tc-watch-streak-share {
      padding-left: 12px;
      border-left: 2px solid rgba(145, 70, 255, 0.35);
      margin-left: 4px;
    }

    .tc-line.tc-watch-streak-share .tc-user {
      font-weight: 500;
    }

    .tc-badges {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-right: 4px;
      vertical-align: middle;
    }

    .tc-badge {
      height: 1.1em;
      width: auto;
      vertical-align: middle;
      border-radius: 2px;
    }

    .tc-yt-role-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.05em;
      height: 1.05em;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .tc-yt-role-badge i {
      font-size: 0.95em;
      line-height: 1;
    }

    .tc-yt-role-owner i,
    .tc-yt-role-mod i {
      color: #3ea6ff;
    }

    .tc-input:disabled,
    .tc-send:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .tc-bits { color: #9c36ff; font-weight: 600; }

    .tc-dev-panel {
      flex-shrink: 0;
      border-top: 1px dashed var(--border);
      padding: 8px 10px;
      background: rgba(145, 70, 255, 0.08);
      font-size: 0.72rem;
    }

    .tc-dev-head {
      font-weight: 700;
      color: #9146ff;
      margin-bottom: 6px;
    }

    .tc-dev-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tc-dev-btns button {
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-size: 0.7rem;
    }

    .tc-dev-btns button:hover { border-color: #9146ff; color: #9146ff; }

    .tc-composer {
      flex-shrink: 0;
      border-top: 1px solid var(--border);
      padding: 8px;
      background: var(--bg);
      position: relative;
      overflow: visible;
      z-index: 2;
    }

    .tc-channel-tabs {
      flex-shrink: 0;
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      padding: 6px 8px;
      border-top: 1px solid var(--border);
      background: var(--surface-elevated);
      overflow-x: auto;
      min-height: 0;
    }

    .tc-channel-tab {
      flex: 0 0 auto;
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      line-height: 1.2;
      white-space: nowrap;
    }

    .tc-channel-tab:hover {
      color: var(--text);
      border-color: rgba(145, 70, 255, 0.45);
    }

    .tc-channel-tab.active {
      color: #e4d4ff;
      border-color: #9146ff;
      background: rgba(145, 70, 255, 0.2);
    }

    .tc-input-row { display: flex; gap: 8px; align-items: flex-end; }

    .tc-input {
      flex: 1;
      min-height: 44px;
      max-height: 100px;
      resize: none;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--text);
      font-size: calc(0.9rem * var(--tc-scale, 1));
      font-family: inherit;
    }

    .tc-send {
      min-width: 48px;
      min-height: 48px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, #9146ff, #6441a4);
      color: #fff;
      cursor: pointer;
      font-size: 1rem;
    }

    /* Twitch-only default + explicit Twitch send */
    .tc-send.tc-send-twitch {
      background: linear-gradient(135deg, #9146ff, #6441a4);
      color: #fff;
    }

    /* YouTube-only send (single-panel + multichat YouTube button) */
    .tc-send.tc-send-yt {
      background: linear-gradient(135deg, #ff4444, #cc0000);
      color: #fff;
    }

    /* Multichat: send to both — half Twitch purple, half YouTube red */
    .tc-send.tc-send-both.tc-send-both-platforms {
      background: linear-gradient(90deg, #9146ff 0%, #6441a4 50%, #ff4444 50%, #cc0000 100%);
      color: #fff;
    }

    .chat-widget > .tc-autocomplete,
    .twitch-chat-widget > .tc-autocomplete,
    .tc-composer > .tc-autocomplete {
      position: absolute;
      left: 8px;
      right: auto;
      bottom: auto;
      max-height: 160px;
      overflow-y: auto;
      padding: 4px;
      background: var(--surface-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
      z-index: 50;
      pointer-events: auto;
    }

    .tc-autocomplete[hidden] {
      display: none !important;
    }

    .tc-ac-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      font-size: 0.88rem;
      cursor: pointer;
      min-height: 44px;
      transition: background 0.12s ease, box-shadow 0.12s ease;
    }

    .tc-ac-item:hover:not(.tc-ac-item-active) {
      background: rgba(255, 255, 255, 0.06);
    }

    .tc-ac-item.tc-ac-item-active,
    .tc-ac-item.tc-ac-item-active:hover {
      background: rgba(145, 70, 255, 0.28);
    }

    .tc-ac-item.tc-ac-item-active .tc-ac-label {
      font-weight: 700;
      color: #fff;
    }

    .tc-ac-item.tc-ac-item-active .tc-ac-hint {
      color: rgba(255, 255, 255, 0.72);
    }

    .tc-ac-item-mention.tc-ac-item-active,
    .tc-ac-item-mention.tc-ac-item-active:hover {
      background: rgba(0, 203, 254, 0.18);
    }

    .tc-ac-emote {
      width: 28px;
      height: 28px;
      max-width: 28px;
      object-fit: contain;
      flex-shrink: 0;
      margin: 0;
    }

    .tc-ac-item .chat-emote {
      height: 28px;
    }

    .tc-ac-label { flex: 1; min-width: 0; }

    .tc-ac-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
      flex-shrink: 0;
      max-width: 45%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .conn-section-title {
      font-size: 0.85rem;
      font-weight: 700;
      margin: 0 0 8px;
      color: var(--text);
    }

    .twitch-settings-note + .conn-section-title {
      margin-top: 18px;
    }

    .conn-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

    .conn-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      background: var(--bg);
    }

    .conn-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .conn-card-head .conn-label { flex: 1; }

    .conn-remove {
      border: 1px solid var(--danger);
      background: transparent;
      color: var(--danger);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 0.75rem;
      cursor: pointer;
      min-height: 36px;
    }

    .conn-add-btn { margin-bottom: 4px; }

    .tc-feed[data-text-align="center"] { text-align: center; }
    .tc-feed[data-text-align="right"] { text-align: right; }
    .tc-feed[data-text-align="left"] { text-align: left; }

    .widget-dock-only[hidden] { display: none !important; }

    .user-sheet-backdrop, .confirm-mod-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 150;
      background: rgba(0, 0, 0, 0.55);
      align-items: flex-end;
      justify-content: center;
      padding: 12px;
    }

    .user-sheet-backdrop.open, .confirm-mod-backdrop.open { display: flex; }

    .user-sheet {
      width: 100%;
      max-width: 480px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px 16px 12px 12px;
      padding: 16px;
      max-height: 70vh;
      overflow-y: auto;
    }

    .user-sheet h3 { font-size: 1rem; margin-bottom: 12px; }

    .user-sheet-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .user-sheet-actions button {
      min-height: 48px;
      padding: 12px 16px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
    }

    .user-sheet-actions button.primary {
      background: linear-gradient(135deg, #9146ff, #6441a4);
      border-color: transparent;
      color: #fff;
    }

    .user-sheet-actions button.danger {
      border-color: var(--danger);
      color: var(--danger);
    }

    .user-sheet-actions button.warn {
      border-color: var(--warning);
      color: var(--warning);
    }

    .user-sheet-sep {
      height: 1px;
      background: var(--border);
      margin: 6px 0;
    }

    .chatter-roll-backdrop,
    .stream-alerts-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 155;
      background: rgba(0, 0, 0, 0.6);
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .chatter-roll-backdrop.open,
    .stream-alerts-backdrop.open { display: flex; }

    .chatter-roll-panel,
    .stream-alerts-panel {
      width: min(540px, 100%);
      max-height: min(88vh, 760px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    }

    .chatter-roll-head,
    .stream-alerts-head {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .chatter-roll-head h3,
    .stream-alerts-head h3 {
      font-size: 1.05rem;
      margin: 0 0 4px;
    }

    .chatter-roll-meta,
    .stream-alerts-meta {
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .chatter-roll-toolbar,
    .stream-alerts-toolbar {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      flex-wrap: wrap;
      align-items: center;
    }

    .chatter-roll-toolbar input[type="search"],
    .stream-alerts-toolbar input[type="search"] {
      flex: 1;
      min-width: 140px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.88rem;
    }

    .chatter-roll-list,
    .stream-alerts-list {
      flex: 1;
      min-height: 120px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .chatter-roll-empty,
    .stream-alerts-empty {
      padding: 28px 16px;
      text-align: center;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .stream-alerts-type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px 12px;
      margin-top: 8px;
    }

    .stream-alerts-type-option {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      cursor: pointer;
      user-select: none;
    }

    .stream-alerts-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: start;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
    }

    .stream-alerts-type {
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--accent, #9146ff);
      background: rgba(145, 70, 255, 0.12);
      border-radius: 6px;
      padding: 4px 8px;
      white-space: nowrap;
      margin-top: 2px;
    }

    .stream-alerts-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .stream-alerts-name {
      font-weight: 600;
      font-size: 0.9rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .stream-alerts-text {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.35;
      word-break: break-word;
    }

    .stream-alerts-time {
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
      text-align: right;
    }

    .chatter-roll-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
    }

    .chatter-roll-row.shouted {
      opacity: 0.55;
    }

    .chatter-roll-row .cr-user {
      flex: 1;
      min-width: 0;
      text-align: left;
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      padding: 4px 0;
    }

    .chatter-roll-row .cr-name {
      display: block;
      font-weight: 600;
      font-size: 0.9rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chatter-roll-row .cr-login {
      display: block;
      font-size: 0.75rem;
      color: var(--muted);
    }

    .chatter-roll-row .cr-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .chatter-roll-row .cr-actions button {
      min-height: 36px;
      padding: 6px 10px;
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
    }

    .chatter-roll-row .cr-actions button.cr-so {
      background: linear-gradient(135deg, #9146ff, #6441a4);
      border-color: transparent;
      color: #fff;
    }

    .chatter-roll-row .cr-actions button.cr-more[aria-expanded="true"] {
      border-color: var(--accent);
      color: var(--accent-hover);
    }

    .chatter-roll-row .cr-extra {
      flex: 1 1 100%;
      display: none;
      flex-wrap: wrap;
      gap: 6px;
      padding-top: 6px;
    }

    .chatter-roll-row.expanded .cr-extra {
      display: flex;
    }

    .chatter-roll-foot,
    .stream-alerts-foot {
      display: flex;
      gap: 8px;
      padding: 12px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    .chatter-roll-foot button,
    .stream-alerts-foot button {
      flex: 1;
      min-height: 44px;
    }

    .raider-list-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 155;
      background: rgba(0, 0, 0, 0.6);
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .raider-list-backdrop.open { display: flex; }

    .raider-list-panel {
      width: min(560px, 100%);
      max-height: min(88vh, 780px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    }

    .raider-list-head {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .raider-list-head h3 {
      font-size: 1.05rem;
      margin: 0 0 4px;
    }

    .raider-list-meta {
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .raider-list-toolbar {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      align-items: center;
    }

    .raider-list-toolbar input[type="search"] {
      flex: 1;
      min-width: 140px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.88rem;
    }

    .raider-list-scroll {
      flex: 1;
      min-height: 140px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .raider-list-empty {
      padding: 28px 16px;
      text-align: center;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .raider-list-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      border-bottom: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      font: inherit;
    }

    .raider-list-row:hover {
      background: var(--edit-overlay);
    }

    .raider-list-thumb {
      width: 88px;
      height: 50px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--bg);
    }

    .raider-list-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .raider-list-name {
      font-weight: 600;
      font-size: 0.95rem;
    }

    .raider-list-sub {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .raider-list-stream-title {
      font-size: 0.8rem;
      color: var(--text);
      opacity: 0.85;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .raider-list-raid-label {
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #9146ff;
      padding: 6px 10px;
      border: 1px solid rgba(145, 70, 255, 0.45);
      border-radius: 8px;
      background: rgba(145, 70, 255, 0.12);
    }

    .raider-list-foot {
      display: flex;
      gap: 8px;
      padding: 12px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    .deck-btn-raider-preview-wrap {
      grid-area: 1 / 1;
      z-index: 0;
      position: relative;
      overflow: hidden;
      pointer-events: none;
    }

    .deck-btn-raider-preview-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.38;
      filter: blur(1px) saturate(1.1);
      transform: scale(1.06);
    }

    .deck-btn-raider-preview-avatar {
      position: absolute;
      left: 50%;
      top: 38%;
      transform: translate(-50%, -50%);
      width: min(42cqmin, 52%);
      height: min(42cqmin, 52%);
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      z-index: 1;
    }

    .deck-btn.deck-btn-raider-preview .deck-btn-content {
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    }

    .deck-btn.deck-btn-raider-preview .sub {
      opacity: 0.95;
    }

    .raider-list-foot button {
      flex: 1;
      min-height: 44px;
    }

    .confirm-mod {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border: 2px solid var(--danger);
      border-radius: 14px;
      padding: 20px;
      text-align: center;
    }

    .confirm-mod p { margin: 12px 0 20px; line-height: 1.4; }

    .confirm-mod-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .confirm-mod-actions button {
      min-height: 52px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
    }

    .confirm-mod-actions button.confirm-danger {
      background: var(--danger);
      border-color: var(--danger);
      color: #fff;
    }

    .twitch-settings-note {
      font-size: 0.75rem;
      color: var(--muted);
      line-height: 1.4;
      margin-top: 6px;
    }

    .twitch-settings-note a { color: var(--accent); }

    .stream-edit-category-row {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin-top: 6px;
    }

    .stream-edit-game-poster-wrap {
      flex-shrink: 0;
      width: 108px;
      aspect-ratio: 3 / 4;
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg);
      border: 1px solid var(--border);
      position: relative;
    }

    .stream-edit-game-poster {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .stream-edit-game-poster[hidden] {
      display: none;
    }

    .stream-edit-game-poster-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 1.75rem;
      background: linear-gradient(160deg, #2a2540 0%, #141018 100%);
    }

    .stream-edit-game-poster-placeholder[hidden] {
      display: none;
    }

    .stream-edit-category-fields {
      flex: 1;
      min-width: 0;
    }

    .stream-edit-category-fields select {
      width: 100%;
      min-height: 120px;
      margin-top: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.88rem;
    }

    .status-item[data-key="twitch"] .status-dot.on { background: #9146ff; }

    #file-protocol-banner {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      padding: 12px 16px;
      background: #3d2208;
      border-bottom: 2px solid var(--warning);
      color: #ffe8c8;
      font-size: 0.85rem;
      line-height: 1.4;
      text-align: center;
    }

    #file-protocol-banner.visible { display: block; }

    #file-protocol-banner strong { color: #fff; }

    body.has-file-banner #app { margin-top: 56px; }

    .multi-action-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 10px;
      max-height: 220px;
      overflow-y: auto;
    }

    .multi-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .multi-action-row.selected {
      border-color: var(--accent);
      background: var(--surface-elevated);
    }

    .multi-action-row-label {
      flex: 1;
      font-size: 0.82rem;
      line-height: 1.3;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .multi-action-row-controls {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .multi-action-row-delete:hover {
      border-color: #c44;
      color: #f88;
    }

    .multi-action-add-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .multi-action-add-row select {
      flex: 1;
      min-width: 0;
    }

    .multi-action-editor {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .multi-action-editor-title {
      font-size: 0.85rem;
      font-weight: 600;
      margin: 0 0 10px;
      color: var(--text);
    }

    /* Enhancement plan UI */
    .last-action-strip {
      font-size: 0.72rem;
      color: var(--muted);
      padding: 2px 12px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .last-action-strip.last-action-error {
      color: #f88;
    }

    .quick-action-bar {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      border-top: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.25);
      overflow-x: auto;
    }

    .quick-bar-btn {
      min-width: 72px;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid var(--border);
      padding: 6px 10px;
      cursor: pointer;
    }

    .quick-bar-label {
      font-size: 0.75rem;
      font-weight: 600;
    }

    .templates-list {
      display: grid;
      gap: 12px;
    }

    .template-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
    }

    .template-card h3 {
      margin: 0 0 6px;
      font-size: 1rem;
    }

    .template-card-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .template-req {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .profiles-list {
      display: grid;
      gap: 6px;
    }

    .profile-row {
      text-align: left;
      width: 100%;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
    }

    .modal.onboard-modal {
      max-width: 480px;
    }

    .onboard-modal > h2,
    .onboard-head h2 {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 1.1rem;
    }

    .onboard-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .onboard-progress {
      display: flex;
      gap: 6px;
      padding: 12px 20px 0;
      flex-shrink: 0;
    }

    .onboard-progress-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 8px 6px;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: default;
    }

    .onboard-progress-item .onboard-progress-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.72rem;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--muted);
    }

    .onboard-progress-item.active {
      color: var(--text);
      border-color: var(--border);
      background: var(--bg);
    }

    .onboard-progress-item.active .onboard-progress-num {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .onboard-progress-item.done .onboard-progress-num {
      background: var(--bg);
      border-color: var(--accent);
      color: var(--accent);
    }

    .onboard-modal .modal-body {
      display: block;
    }

    .onboard-step[hidden] {
      display: none !important;
    }

    .onboard-step {
      display: grid;
      gap: 12px;
    }

    .onboard-step h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
    }

    .onboard-step p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .onboard-tips {
      margin: 0;
      padding-left: 1.1em;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .onboard-tips li + li {
      margin-top: 4px;
    }

    .onboard-step-cta {
      justify-self: start;
      margin-top: 4px;
    }

    .onboard-modal .modal-actions {
      align-items: center;
    }

    .onboard-nav {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }

    .diag-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }

    .diag-detail {
      font-size: 0.82rem;
      color: var(--muted);
      text-align: right;
    }

    .diag-warn {
      color: #f5a623;
    }

    .diag-code {
      display: block;
      word-break: break-all;
      font-size: 0.78rem;
      padding: 8px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 6px;
    }

    .changelog-entry {
      margin-bottom: 16px;
    }

    .changelog-entry:last-child {
      margin-bottom: 0;
    }

    .changelog-entry-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 0 0 8px;
      font-size: 1rem;
    }

    .changelog-version {
      font-weight: 700;
    }

    .changelog-date {
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 400;
    }

    .changelog-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }

    .changelog-list li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 0.88rem;
      line-height: 1.35;
    }

    .changelog-chip {
      flex: 0 0 auto;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--border);
      color: var(--muted);
    }

    .changelog-chip-added {
      border-color: rgba(80, 200, 120, 0.45);
      color: #6dca8f;
    }

    .changelog-chip-fixed {
      border-color: rgba(245, 166, 35, 0.45);
      color: #f5a623;
    }

    .changelog-chip-improved {
      border-color: rgba(107, 159, 255, 0.45);
      color: #6b9fff;
    }

    .stream-timer-widget,
    .recent-alerts-widget {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      background:
        linear-gradient(165deg, rgba(28, 34, 48, 0.98) 0%, rgba(16, 20, 28, 0.98) 100%);
      border: 1px solid rgba(107, 159, 255, 0.18);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .stream-timer-widget .stw-glow {
      position: absolute;
      inset: -40% -20% auto;
      height: 70%;
      background: radial-gradient(ellipse at 50% 0%, rgba(107, 159, 255, 0.22), transparent 65%);
      pointer-events: none;
    }

    .stream-timer-widget.stw-mode-countdown .stw-glow {
      background: radial-gradient(ellipse at 50% 0%, rgba(245, 166, 35, 0.28), transparent 65%);
    }

    .stream-timer-widget.stw-urgent .stw-glow {
      background: radial-gradient(ellipse at 50% 0%, rgba(242, 85, 90, 0.35), transparent 65%);
    }

    .stream-timer-widget.stw-done .stw-glow {
      background: radial-gradient(ellipse at 50% 0%, rgba(61, 214, 140, 0.28), transparent 65%);
    }

    .stw-header,
    .raw-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.74rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      padding: 10px 12px 6px;
      color: var(--text);
    }

    .stw-icon,
    .raw-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      background: rgba(107, 159, 255, 0.16);
      color: var(--accent);
      font-size: 0.7rem;
      flex-shrink: 0;
    }

    .stream-timer-widget.stw-mode-countdown .stw-icon {
      background: rgba(245, 166, 35, 0.18);
      color: var(--warning);
    }

    .stw-title,
    .raw-title {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .raw-count {
      min-width: 1.4rem;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      background: rgba(107, 159, 255, 0.18);
      color: var(--accent);
      text-align: center;
    }

    .raw-count:empty { display: none; }

    .stw-display {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(1.35rem, 3.4vw, 2.25rem);
      font-weight: 750;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      line-height: 1;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    .stream-timer-widget.stw-urgent .stw-display {
      color: #ffb4b7;
      animation: stw-pulse 1s ease-in-out infinite;
    }

    .stream-timer-widget.stw-done .stw-display {
      color: var(--success);
    }

    @keyframes stw-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.72; }
    }

    .stw-sub {
      position: relative;
      z-index: 1;
      font-size: 0.7rem;
      text-align: center;
      color: var(--muted);
      padding: 0 10px 8px;
    }

    .stw-progress {
      position: relative;
      z-index: 1;
      height: 4px;
      margin: 0 10px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .stream-timer-widget.stw-mode-uptime .stw-progress {
      opacity: 0;
      height: 0;
      margin: 0;
    }

    .stw-progress-bar {
      display: block;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #f5a623, #ffd27a);
      transition: width 0.25s linear;
    }

    .stream-timer-widget.stw-urgent .stw-progress-bar {
      background: linear-gradient(90deg, #f2555a, #ff9a9d);
    }

    .stream-timer-widget.stw-done .stw-progress-bar {
      background: var(--success);
    }

    .recent-alerts-widget {
      border-color: rgba(145, 112, 255, 0.2);
    }

    .recent-alerts-widget .raw-icon {
      background: rgba(145, 112, 255, 0.18);
      color: #c4b0ff;
    }

    .raw-feed {
      flex: 1;
      overflow: auto;
      padding: 4px 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .raw-line {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 8px;
      width: 100%;
      text-align: left;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }

    .raw-line:hover {
      border-color: rgba(107, 159, 255, 0.45);
      background: rgba(107, 159, 255, 0.08);
      transform: translateY(-1px);
    }

    .raw-type {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: 999px;
      align-self: start;
      background: rgba(107, 159, 255, 0.16);
      color: var(--accent);
    }

    .raw-type-follow { background: rgba(61, 214, 140, 0.16); color: #7eebb3; }
    .raw-type-cheer { background: rgba(145, 112, 255, 0.18); color: #c4b0ff; }
    .raw-type-sub,
    .raw-type-gift { background: rgba(245, 166, 35, 0.16); color: #ffd27a; }
    .raw-type-raid { background: rgba(242, 85, 90, 0.16); color: #ff9a9d; }
    .raw-type-redeem { background: rgba(107, 159, 255, 0.16); color: #9fc0ff; }
    .raw-type-streak { background: rgba(255, 180, 90, 0.16); color: #ffc98a; }

    .raw-user {
      font-weight: 650;
      font-size: 0.82rem;
      align-self: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .raw-msg {
      grid-column: 1 / -1;
      font-size: 0.74rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .raw-empty {
      margin: auto;
      padding: 18px 12px;
      text-align: center;
      color: var(--muted);
    }

    .raw-empty i {
      display: block;
      font-size: 1.25rem;
      margin-bottom: 8px;
      opacity: 0.55;
    }

    .raw-empty p {
      font-size: 0.78rem;
    }

    body.compact-ui .deck-btn {
      min-height: 52px;
    }

    body.compact-ui .grid-edit-edge {
      min-width: 14px;
      min-height: 14px;
    }

    body.compact-ui #deck-toolbar .btn-sm,
    body.compact-ui .header-actions .btn-sm {
      padding: 8px 12px;
    }

    .deck-btn.flash::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.25);
      pointer-events: none;
      animation: btn-flash-fade 0.35s ease-out;
    }

    @keyframes btn-flash-fade {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .deck-btn.error-flash {
      animation: btn-error-flash 0.5s ease-out;
    }

    @keyframes btn-error-flash {
      0%, 100% { box-shadow: none; }
      50% { box-shadow: inset 0 0 0 2px #f44; }
    }