:root {
  --panel: rgba(7, 14, 27, 0.92);
  --panel-soft: rgba(10, 18, 34, 0.82);
  --line: rgba(100, 140, 220, 0.16);
  --line-strong: rgba(65, 224, 255, 0.32);
  --ink: #f2f7ff;
  --muted: #96a8c8;
  --accent: #28d7ff;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(32, 228, 255, 0.16), transparent 24%),
    radial-gradient(circle at top right, rgba(13, 88, 255, 0.14), transparent 20%),
    linear-gradient(180deg, #04070f 0%, #050a15 28%, #060c18 100%);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
}

button,
select,
input,
textarea {
  font: inherit;
}

button {
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.18), rgba(14, 98, 181, 0.18));
  color: var(--ink);
  padding: 0.78rem 1.05rem;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

button:hover {
  transform: translateY(-1px);
  border-color: rgba(40, 215, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.14), 0 0 24px rgba(40, 215, 255, 0.12);
}

button.ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line);
  color: var(--muted);
}

.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
  min-height: 100vh;
  gap: 1.2rem;
  padding: 1.2rem;
  transition: grid-template-columns 180ms ease;
}

.shell.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

.sidebar,
.page-hero,
.viewer-panel,
.scan-panel,
.log-panel,
.info-panel,
.devices-page-panel,
.coming-card,
.docs-page-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.sidebar {
  padding: 1.1rem;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease, padding 180ms ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shell.sidebar-collapsed .sidebar {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
  padding-left: 0;
  padding-right: 0;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.sidebar-reveal {
  align-self: start;
}

.sidebar-reveal.hidden {
  display: none;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

.page.hidden {
  display: none;
}

.page.active {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#editorPage {
  overflow: hidden;
}


.brand {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.brand h1,
.page-hero h2,
.viewer-head h3,
.panel-head h2,
.coming-card h2 {
  margin: 0;
  font-family: "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 700;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.subtle {
  color: var(--muted);
  margin: 0.25rem 0 0;
}

.sidebar-toggle {
  width: 100%;
}

.sidebar-nav {
  display: grid;
  gap: 0.75rem;
  overflow: auto;
  padding-right: 0.1rem;
}

.sidebar-nav-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-weight: 600;
}

.sidebar-nav-btn.active {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(14, 32, 58, 0.92), rgba(9, 18, 36, 0.98));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.1), 0 0 24px rgba(40, 215, 255, 0.12);
}

.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(40, 215, 255, 0.14);
  background: rgba(40, 215, 255, 0.08);
  color: var(--accent);
  font-size: 0.8rem;
}

.section-count.muted {
  color: var(--muted);
}

.sidebar-hidden-tabs {
  position: relative;
  margin-top: auto;
  padding-top: 1rem;
}

.sidebar-hidden-tabs-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-hidden-tabs-menu,
.sidebar-tab-context-menu {
  position: fixed;
  z-index: 1400;
  display: grid;
  gap: 0.45rem;
  min-width: 190px;
  padding: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(7, 14, 27, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

.sidebar-hidden-tabs-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.55rem);
}

.sidebar-hidden-restore,
.sidebar-tab-context-menu button {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
}

.sidebar-hidden-empty {
  color: var(--muted);
  font-size: 0.86rem;
  padding: 0.55rem 0.65rem;
}

.page-hero,
.viewer-panel,
.scan-panel,
.log-panel,
.info-panel,
.devices-page-panel,
.coming-card,
.docs-page-panel {
  padding: 1rem 1.1rem;
}

.viewer-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.viewer-panel.control-panel-shell {
  overflow: auto;
}

.panel-head,
.viewer-head,
.control-connect-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.control-connect-bar {
  margin-top: 0.15rem;
  flex-wrap: wrap;
}

.control-panel-shell {
  display: grid;
  gap: 1rem;
}

.model-dashboard-shell {
  align-content: start;
}

.iphone-mirror-shell {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#mirrorPage.active {
  height: 100%;
  overflow: hidden;
}

.panel-dashboard-view {
  display: grid;
  gap: 1rem;
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(145, 191, 255, 0.16);
  background: rgba(20, 34, 52, 0.78);
}

.dashboard-hero h2 {
  margin: 0.1rem 0 0;
  color: #4e8cff;
}

.dashboard-connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.dashboard-connection-pill::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.8);
}

.dashboard-connection-pill.is-connected::before {
  background: #10d58b;
  box-shadow: 0 0 14px rgba(16, 213, 139, 0.45);
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0.75rem;
}

.dashboard-stat-card {
  display: grid;
  gap: 0.2rem;
  min-height: 92px;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(20, 34, 52, 0.72);
}

.dashboard-stat-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-stat-value {
  font-size: 1.75rem;
  line-height: 1;
  color: #4e8cff;
}

.dashboard-stat-card.tone-green .dashboard-stat-value {
  color: #10d58b;
}

.dashboard-stat-card.tone-yellow .dashboard-stat-value {
  color: #f4c84a;
}

.dashboard-stat-card.tone-red .dashboard-stat-value {
  color: #ff5b67;
}

.dashboard-stat-caption {
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: end;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(145, 191, 255, 0.1);
  background: rgba(8, 16, 30, 0.72);
}

.dashboard-search-wrap {
  display: grid;
  gap: 0.35rem;
}

.dashboard-overview-btn {
  min-width: 112px;
}

.control-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.control-panel-card {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.control-panel-session-card,
.control-panel-selection-card {
  align-content: start;
}

.control-panel-models-card {
  grid-column: 1 / -1;
  align-content: start;
}

.control-selection-body {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(240px, 1fr);
  gap: 1rem;
  align-items: start;
}

.iphone-mirror-shell .control-panel-selection-card {
  min-height: 0;
  height: 100%;
  align-content: center;
  overflow: hidden;
}

.iphone-mirror-shell .control-panel-selection-card > .eyebrow,
.iphone-mirror-shell .stacked-meta,
.iphone-mirror-shell .control-screen-meta {
  display: none;
}

.iphone-mirror-shell .control-selection-body {
  grid-template-columns: minmax(420px, min-content) minmax(360px, 420px);
  justify-content: center;
  gap: 1.8rem;
  align-items: center;
  height: 100%;
  min-height: 0;
}

.panel-max-iphone .control-selection-body {
  grid-template-columns: minmax(320px, min-content) minmax(270px, 340px);
  justify-content: start;
}

.control-viewer-column {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.panel-max-iphone .control-viewer-column {
  min-width: 0;
}

.control-screen-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

.panel-viewer-mount {
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: 0;
}

.panel-viewer-mount .phone-frame {
  width: min(100%, 520px, calc(46.2dvh - 3.3rem));
}

.iphone-mirror-shell .panel-viewer-mount .phone-frame {
  max-width: none;
  width: min(520px, calc(46.2dvh - 3.3rem), calc(100vw - 760px));
}

.panel-max-iphone .panel-viewer-mount {
  justify-items: stretch;
}

.panel-max-iphone .panel-viewer-mount .phone-frame {
  width: min(100%, 430px, calc(46.2dvh - 74px));
  max-width: none;
}

.panel-remote-shell {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 375 / 812;
  box-sizing: border-box;
  border-radius: clamp(22px, 10%, 38px);
  overflow: hidden;
  background: #09111f;
  box-shadow: 0 0 0 1px rgba(145, 191, 255, 0.16), 0 16px 50px rgba(0, 0, 0, 0.46), 0 0 45px rgba(40, 215, 255, 0.14);
}

.iphone-mirror-shell .panel-remote-shell {
  width: min(520px, calc(46.2dvh - 3.3rem), calc(100vw - 760px));
  max-width: none;
}

.panel-max-iphone .panel-remote-shell {
  width: min(100%, 430px, calc(46.2dvh - 74px));
  max-width: none;
}

.panel-max-iphone .panel-remote-shell.panel-remote-shell-direct .panel-remote-frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.panel-remote-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #09111f;
  pointer-events: auto;
}

.panel-remote-shell.panel-remote-shell-direct .panel-remote-frame {
  /* Full-fit: the shell's aspect-ratio (375/812) matches the device
     (1125/2436), so the snapshot's own "contain" render fills the shell
     edge-to-edge with ~0 letterbox while showing the WHOLE screen — the iOS
     status bar (time / signal / 4G / battery) at the top and the dock at the
     bottom. The previous values oversized the iframe and shifted it up 88px,
     which cropped the status bar off (the "zoomed, can't see 4G/battery"
     report). This matches the Max-iPhone variant above, which already renders
     this frame at full size. */
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}

.panel-remote-shell.panel-remote-shell-relay .panel-remote-frame {
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel-remote-shell.panel-remote-shell-editor {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 375 / 812;
  border-radius: 48px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(19, 30, 47, 0.92), rgba(4, 9, 17, 0.96));
  border: 1px solid rgba(145, 191, 255, 0.16);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.46), 0 0 45px rgba(40, 215, 255, 0.14);
}

.panel-remote-shell.panel-remote-shell-editor .panel-remote-frame {
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border-radius: 36px;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
}

.panel-remote-motion,
.panel-remote-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round clamp(22px, 10%, 38px));
}

.panel-remote-motion {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.panel-remote-overlay {
  background: transparent;
  outline: none;
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.panel-remote-shell.panel-remote-shell-relay .panel-remote-motion,
.panel-remote-shell.panel-remote-shell-relay .panel-remote-overlay {
  inset: 1px;
}

.panel-remote-shell.panel-remote-shell-editor .panel-remote-motion,
.panel-remote-shell.panel-remote-shell-editor .panel-remote-overlay {
  inset: 12px;
  border-radius: 36px;
  clip-path: inset(0 round 36px);
}

.control-command-card {
  min-height: 100%;
  align-content: start;
}

.iphone-mirror-shell .control-command-card {
  width: min(420px, 100%);
  min-height: auto;
  padding: 1.05rem;
}

.iphone-mirror-shell .control-grid {
  gap: 0.65rem;
}

.iphone-mirror-shell .control-grid .dock-btn {
  min-height: 46px;
  font-size: 0.94rem;
  font-weight: 800;
}

.iphone-mirror-shell .panel-text-input {
  min-height: 96px;
  font-size: 0.94rem;
}

.iphone-mirror-shell .panel-text-composer .dock-btn,
.iphone-mirror-shell .panel-transport-buttons .ghost {
  min-height: 42px;
  font-size: 0.92rem;
}

.panel-text-composer {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.panel-transport-switcher {
  display: grid;
  gap: 0.45rem;
}

.panel-transport-buttons {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.transport-toggle-btn.active {
  border-color: rgba(40, 215, 255, 0.34);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.18), rgba(14, 98, 181, 0.18));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.1), 0 0 20px rgba(40, 215, 255, 0.12);
}

.panel-max-iphone-btn.active {
  border-color: rgba(40, 215, 255, 0.34);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.18), rgba(14, 98, 181, 0.18));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.1), 0 0 20px rgba(40, 215, 255, 0.12);
}

.transport-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.panel-text-input {
  min-height: 88px;
  resize: vertical;
}

.control-panel-fields {
  display: grid;
  gap: 0.85rem;
}

.control-panel-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.control-panel-model-form {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.control-panel-model-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.control-panel-model-sections {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
}

.panel-unused-device-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.panel-unused-device-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(145, 191, 255, 0.14);
  background: rgba(145, 191, 255, 0.07);
  color: var(--ink);
  font-size: 0.88rem;
}

.panel-model-assignments-list {
  display: grid;
  gap: 0.65rem;
}

.panel-model-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.022);
}

.panel-model-assignment-info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.panel-models-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
}

@media (min-width: 1500px) {
  .panel-models-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.dashboard-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(145, 191, 255, 0.16);
}

.dashboard-model-card {
  display: grid;
  gap: 0.78rem;
  min-height: 270px;
  padding: 0.95rem;
  border-radius: 13px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(20, 34, 52, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dashboard-model-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: start;
}

.dashboard-model-title-wrap {
  min-width: 0;
}

.dashboard-model-title {
  margin: 0;
  color: #4e8cff;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-model-platform {
  display: block;
  margin-top: 2px;
  color: #4e8cff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-model-card-instagram .dashboard-model-title,
.dashboard-model-card-instagram .dashboard-model-platform {
  color: #7aa8ff;
}

.dashboard-model-phone-count {
  border: 0;
  align-self: start;
  justify-self: end;
  padding: 0.28rem 0.48rem;
  border-radius: 8px;
  background: rgba(145, 191, 255, 0.12);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-model-phone-count:hover {
  color: var(--ink);
  background: rgba(40, 215, 255, 0.16);
}

.dashboard-model-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dashboard-model-actions .dock-btn,
.dashboard-model-actions .ghost {
  min-height: 34px;
  padding: 0.45rem 0.6rem;
}

.panel-model-info-btn {
  border: 0;
  background: linear-gradient(135deg, #1fb6d8, #2563eb);
  color: #fff;
  box-shadow: none;
}

.dashboard-model-actions .ghost {
  border-color: rgba(255, 91, 103, 0.25);
  color: #ffb4bc;
}

.dashboard-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.45rem;
  min-height: 54px;
}

.dashboard-device-tile {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.08rem;
  min-height: 54px;
  padding: 0.55rem 0.45rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(145, 191, 255, 0.1);
  background: rgba(113, 132, 155, 0.22);
  color: var(--text);
  cursor: grab;
  user-select: none;
}

.dashboard-device-tile:hover,
.dashboard-device-tile.selected {
  border-color: rgba(40, 215, 255, 0.32);
  background: rgba(40, 215, 255, 0.12);
}

.dashboard-device-tile:active {
  cursor: grabbing;
}

.dashboard-device-label {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-device-time {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.1;
  white-space: nowrap;
}

.dashboard-device-dot {
  position: absolute;
  top: 0.36rem;
  right: 0.36rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #94a3b8;
}

.dashboard-device-tile.tone-running .dashboard-device-dot,
.dashboard-device-tile.tone-fresh .dashboard-device-dot {
  background: #10d58b;
  box-shadow: 0 0 12px rgba(16, 213, 139, 0.55);
}

.dashboard-device-tile.tone-watch .dashboard-device-dot {
  background: #f4c84a;
  box-shadow: 0 0 12px rgba(244, 200, 74, 0.45);
}

.dashboard-device-tile.tone-stale .dashboard-device-dot {
  background: #ff5b67;
  box-shadow: 0 0 12px rgba(255, 91, 103, 0.5);
}

/* 2026-05-24: second status dot, sits to the LEFT of the online dot.
   Color reflects the XXTouch control-WS bridge health — green when
   the bridge is alive (atomic gestures work), orange when in
   cooldown (HTTP-fallback mode = slower / less reliable), red when
   not responding, grey when unknown / not applicable.  Hover the
   dot to read a tooltip explaining the state. */
.dashboard-device-ws-dot {
  position: absolute;
  top: 0.36rem;
  right: 0.86rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #94a3b8;  /* unknown — default */
}

.dashboard-device-ws-dot.dashboard-device-ws-ok {
  background: #10d58b;
  box-shadow: 0 0 10px rgba(16, 213, 139, 0.55);
}

.dashboard-device-ws-dot.dashboard-device-ws-cooldown {
  background: #f4a64a;
  box-shadow: 0 0 10px rgba(244, 166, 74, 0.55);
}

.dashboard-device-ws-dot.dashboard-device-ws-down {
  background: #ff5b67;
  box-shadow: 0 0 10px rgba(255, 91, 103, 0.55);
}

.dashboard-device-ws-dot.dashboard-device-ws-unknown {
  background: #6b7588;
}

/* 2026-05-24: WS Bridge tab inside the Reddit/IG device modal. Shows
   live bridge state + reconnect button. */
.ws-bridge-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ws-bridge-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ws-bridge-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.ws-bridge-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #6b7588;
}

.ws-bridge-status-pill[data-status="ok"] .ws-bridge-status-dot {
  background: #10d58b;
  box-shadow: 0 0 10px rgba(16, 213, 139, 0.55);
}
.ws-bridge-status-pill[data-status="cooldown"] .ws-bridge-status-dot {
  background: #f4a64a;
  box-shadow: 0 0 10px rgba(244, 166, 74, 0.55);
}
.ws-bridge-status-pill[data-status="down"] .ws-bridge-status-dot {
  background: #ff5b67;
  box-shadow: 0 0 10px rgba(255, 91, 103, 0.55);
}

.ws-bridge-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.9rem;
}

.ws-bridge-details .ws-bridge-detail-key {
  color: var(--muted);
  font-weight: 600;
}

.ws-bridge-details .ws-bridge-detail-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}

.ws-bridge-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ws-bridge-result {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.ws-bridge-result.is-success {
  background: rgba(16, 213, 139, 0.12);
  border-color: rgba(16, 213, 139, 0.45);
  color: #b6efd2;
}

.ws-bridge-result.is-error {
  background: rgba(255, 91, 103, 0.12);
  border-color: rgba(255, 91, 103, 0.45);
  color: #ffd1d6;
}

.ws-bridge-result.is-busy {
  background: rgba(40, 215, 255, 0.10);
  border-color: rgba(40, 215, 255, 0.35);
  color: #cdeefb;
}

.ws-bridge-events h5 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.ws-bridge-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}

.ws-bridge-event-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem;
  line-height: 1.45;
}

.ws-bridge-event-row .ws-bridge-event-ts {
  color: var(--muted);
}

.ws-bridge-event-row.ws-bridge-event-error .ws-bridge-event-msg {
  color: #ffd1d6;
}

.ws-bridge-event-row.ws-bridge-event-success .ws-bridge-event-msg {
  color: #b6efd2;
}

.dashboard-device-tile.is-dragging {
  opacity: 0.48;
}

.dashboard-device-tile.is-drop-target {
  border-color: rgba(40, 215, 255, 0.45);
}

.dashboard-device-tile.drop-before {
  box-shadow: inset 3px 0 0 rgba(40, 215, 255, 0.65);
}

.dashboard-device-tile.drop-after {
  box-shadow: inset -3px 0 0 rgba(40, 215, 255, 0.65);
}

.dashboard-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-status-head strong {
  color: var(--text);
}

.dashboard-status-bar {
  display: flex;
  height: 24px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.18);
}

.dashboard-status-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  border: 0;
  padding: 0;
  color: #06111f;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  transition: filter 120ms ease, transform 120ms ease;
}

.dashboard-status-segment:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.dashboard-status-segment:focus-visible,
.dashboard-legend-item:focus-visible {
  outline: 2px solid rgba(40, 215, 255, 0.75);
  outline-offset: 2px;
}

.dashboard-status-segment.status-active,
.dashboard-legend-dot.status-active {
  background: #10d58b;
}

.dashboard-status-segment.status-attention,
.dashboard-legend-dot.status-attention {
  background: #f4c84a;
}

.dashboard-status-segment.status-disabled,
.dashboard-legend-dot.status-disabled {
  background: #ff5b67;
}

.dashboard-status-segment.is-empty {
  background: rgba(148, 163, 184, 0.35);
}

.dashboard-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.dashboard-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dashboard-legend-item:hover {
  color: var(--text);
}

.dashboard-legend-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
}

.dashboard-model-run-row {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 0.1rem;
}

.dashboard-run-reddit-btn,
.dashboard-run-ig-btn {
  min-height: 38px;
  border: 0;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #4d7cff, #8e5cff);
  box-shadow: none;
}

.dashboard-run-ig-btn {
  background: linear-gradient(135deg, #f14f8f, #8e5cff);
  box-shadow: none;
}

.dashboard-run-reddit-btn:hover,
.dashboard-run-ig-btn:hover {
  transform: translateY(-1px);
}

.dashboard-run-reddit-btn.is-running,
.dashboard-run-ig-btn.is-running,
.dashboard-run-reddit-btn.is-stopping,
.dashboard-run-ig-btn.is-stopping {
  background: linear-gradient(135deg, #ff5b67, #ff8f3d);
  box-shadow: none;
}

.panel-workflow-view {
  display: grid;
  gap: 1rem;
}

.panel-workflow-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(145, 191, 255, 0.16);
  background: rgba(20, 34, 52, 0.78);
}

.panel-workflow-hero h2 {
  margin: 0.1rem 0 0;
  color: #4e8cff;
}

.panel-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.panel-workflow-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.55rem;
  border-radius: 16px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(8, 16, 30, 0.72);
}

.panel-workflow-tab {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(145, 191, 255, 0.06);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.panel-workflow-tab.active {
  border-color: rgba(40, 215, 255, 0.34);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.18), rgba(14, 98, 181, 0.18));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.1), 0 0 20px rgba(40, 215, 255, 0.12);
}

.panel-workflow-mount {
  min-width: 0;
}

.panel-model-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.panel-model-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
}

.panel-model-card-title-wrap {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.panel-model-card-title {
  margin: 0;
  font-size: 1rem;
}

.panel-model-card-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.panel-model-card-toggle,
.panel-model-info-btn {
  white-space: nowrap;
}

.panel-model-card-assigned {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.018);
}

.panel-model-card-body {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-model-assigned-device-list {
  display: grid;
  gap: 0.7rem;
}

.panel-model-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.022);
  cursor: grab;
  user-select: none;
}

.panel-model-device-row.is-disconnected {
  opacity: 0.72;
}

.panel-model-device-row:active {
  cursor: grabbing;
}

.panel-model-device-row.is-dragging {
  opacity: 0.5;
}

.panel-model-device-row.is-drop-target {
  border-color: rgba(40, 215, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(40, 215, 255, 0.16);
}

.panel-model-device-row.drop-before {
  box-shadow: inset 0 2px 0 rgba(40, 215, 255, 0.5);
}

.panel-model-device-row.drop-after {
  box-shadow: inset 0 -2px 0 rgba(40, 215, 255, 0.5);
}

.panel-model-device-main {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
  justify-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-model-device-main:disabled {
  cursor: default;
  opacity: 0.78;
}

.panel-model-device-name {
  font-weight: 700;
}

.panel-model-device-subtitle {
  color: var(--muted);
  font-size: 0.84rem;
}

.panel-model-device-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.panel-model-device-toggle,
.panel-model-device-label-btn,
.panel-model-device-run-btn {
  white-space: nowrap;
}

.panel-model-textarea {
  min-height: 74px;
  resize: vertical;
}

.panel-device-table {
  display: grid;
  gap: 0.7rem;
}

.panel-device-table-head,
.panel-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 108px 122px 92px 144px 62px 144px 62px;
  gap: 0.6rem;
  align-items: center;
}

.panel-device-table-head {
  padding: 0 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel-device-list {
  display: grid;
  gap: 0.55rem;
}

.panel-device-empty {
  margin: 0;
  padding: 0.9rem 0.2rem 0.2rem;
}

.panel-device-row {
  padding: 0.7rem 0.75rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.panel-device-row.is-disconnected {
  opacity: 0.56;
  border-color: rgba(255, 255, 255, 0.035);
  background: rgba(255, 255, 255, 0.014);
  box-shadow: none;
}

.panel-device-row.selected {
  border-color: rgba(40, 215, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.24);
}

.panel-device-row.is-disconnected.selected {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.panel-device-main {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}

.panel-device-name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
}

.panel-device-subtitle {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-device-cell {
  display: flex;
  align-items: center;
}

.panel-device-status {
  justify-content: flex-start;
}

.panel-device-toggle,
.panel-device-label-btn,
.panel-device-run-btn {
  width: 100%;
}

.panel-device-run-btn.is-running {
  background: linear-gradient(180deg, rgba(255, 121, 86, 0.24), rgba(201, 67, 38, 0.28));
  border-color: rgba(255, 121, 86, 0.3);
}

.panel-device-run-btn.is-stopping {
  opacity: 0.75;
}

.panel-device-toggle.is-disconnect {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

.panel-device-cell-reddit,
.panel-device-cell-instagram {
  justify-content: flex-end;
}

.panel-device-reddit-btn {
  width: 44px;
  min-width: 44px;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 111, 44, 0.28);
  background: linear-gradient(180deg, rgba(255, 111, 44, 0.95), rgba(255, 78, 35, 0.92));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(255, 88, 35, 0.2);
}

.panel-device-instagram-btn {
  width: 44px;
  min-width: 44px;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(252, 135, 77, 0.28);
  background: radial-gradient(circle at 30% 107%, rgba(255, 220, 128, 0.98), rgba(245, 96, 64, 0.96) 34%, rgba(188, 42, 141, 0.96) 63%, rgba(88, 81, 219, 0.96));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(188, 42, 141, 0.2);
}

.panel-device-reddit-btn svg,
.panel-device-instagram-btn svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.panel-device-reddit-btn:hover {
  transform: translateY(-1px);
}

.panel-device-instagram-btn:hover {
  transform: translateY(-1px);
}

.selector-wrap {
  display: block;
  min-width: min(420px, 100%);
}

.selector-label {
  color: var(--muted);
  font-size: 0.86rem;
}

.device-select,
.rename-input,
.text-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(7, 14, 27, 0.92);
  color: var(--ink);
  padding: 0.8rem 0.95rem;
}

.device-select:focus,
.rename-input:focus,
.text-input:focus {
  outline: 2px solid rgba(40, 215, 255, 0.18);
  border-color: rgba(40, 215, 255, 0.34);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.viewer-stats,
.health,
.log,
.docs-scroll code {
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
}

.viewer-stats {
  color: var(--muted);
}

.experience {
  margin-top: 0.2rem;
  display: grid;
  grid-template-columns: clamp(160px, 26%, 360px) 1fr;
  grid-template-rows: 1fr;
  gap: 0.85rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.device-stage {
  display: contents;
}

.device-stage::before {
  content: none;
}

.phone-frame {
  position: relative;
  z-index: 1;
  align-self: start;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 375 / 812;
  border-radius: 48px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(19, 30, 47, 0.92), rgba(4, 9, 17, 0.96));
  border: 1px solid rgba(145, 191, 255, 0.16);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.46), 0 0 45px rgba(40, 215, 255, 0.14);
  overflow: hidden;
}

.phone-top {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 35%;
  height: 27px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(6, 11, 19, 0.95);
  z-index: 3;
}

.phone-frame img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 36px;
  display: block;
  background: #0b1120;
  user-select: none;
  -webkit-user-drag: none;
}

.phone-home-indicator {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 32%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(245, 250, 255, 0.82);
  z-index: 3;
}

.viewer-overlay {
  position: absolute;
  inset: 12px;
  border-radius: 36px;
  pointer-events: none;
  background:
    linear-gradient(transparent 49.8%, rgba(40, 215, 255, 0.12) 50%, transparent 50.2%),
    linear-gradient(90deg, transparent 49.8%, rgba(40, 215, 255, 0.12) 50%, transparent 50.2%);
}

.viewer-overlay.hidden {
  display: none;
}

.script-builder {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.builder-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  min-height: 0;
  padding: 0.9rem;
  background: rgba(11, 20, 36, 0.82);
  border: 1px solid var(--line);
  border-radius: 26px;
}

.builder-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.builder-title {
  margin: 0;
}

.builder-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: end;
}

.builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: start;
}

.builder-toolbar-group {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.builder-submenu-block {
  min-width: 520px;
  padding: 20px 22px;
  gap: 14px;
}

#uiScanActionPanel {
  left: 0;
  transform: none;
  min-width: min(680px, calc(100vw - 120px));
  max-width: min(680px, calc(100vw - 120px));
  max-height: min(70vh, 620px);
  overflow: auto;
}

.builder-tool-btn {
  min-width: 110px;
  font-size: 0.9rem;
}

.builder-submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  min-width: 260px;
  background: rgba(8, 15, 30, 0.97);
  border: 1px solid rgba(145, 191, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.builder-submenu > button.ghost {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  color: var(--muted, #bbb);
  background: transparent;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.builder-submenu > button.ghost:hover {
  background: rgba(145, 191, 255, 0.1);
  color: #fff;
}

.builder-submenu > .random-wait-builder {
  padding: 8px 12px;
}

.builder-submenu-label {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #aaa);
  margin: 0;
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.builder-submenu-divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.3rem 0;
}

.builder-submenu-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1.05rem;
  color: var(--text-secondary, #aaa);
}

.builder-submenu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.builder-submenu-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
}

.builder-submenu-check input[type="checkbox"],
.builder-submenu-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #5b8cff);
}

.builder-submenu-actions {
  width: 100%;
  display: flex;
  gap: 0.6rem;
  margin-top: 6px;
}

.builder-submenu-actions > button.ghost {
  font-size: 1.05rem;
  padding: 0.65rem 1.1rem;
}

.ghost-dim {
  opacity: 0.65;
}
.ghost-dim:hover {
  opacity: 1;
}

.jump-percent-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.jump-percent-row select {
  flex: 1;
  min-width: 140px;
}

.jump-percent-row input[type="number"] {
  width: 80px;
  text-align: center;
}

.jump-percent-row .ghost {
  padding: 0.35rem 0.6rem;
  font-size: 1rem;
  color: #f87171;
  flex-shrink: 0;
}

.builder-text-input {
  min-height: 168px;
  font-size: 1.05rem;
}

#textCustomPanel {
  min-width: min(680px, calc(100vw - 2rem));
}

#textCustomPanel .builder-submenu-actions {
  flex-wrap: wrap;
}

.builder-keyboard-mode-group,
.editor-keyboard-mode-group {
  width: 100%;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(40, 215, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.builder-keyboard-mode-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.builder-submenu .rename-input,
.builder-submenu .text-input {
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
}

.builder-shortcut-btn {
  min-width: 148px;
  justify-content: flex-start;
  text-align: left;
}

.random-wait-builder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
}

.random-wait-label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.random-wait-input {
  width: 120px;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-size: 1.05rem;
}

.builder-table-head,
.script-row {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 1.2fr) 44px;
  gap: 0.45rem;
  align-items: center;
}

.builder-table-head {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0.15rem;
}

.script-rows {
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  gap: 0.4rem;
  overflow: auto;
  align-content: start;
}

.script-row {
  padding: 0.45rem 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(40, 215, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.script-row.selected-script-row {
  border-color: rgba(40, 215, 255, 0.26);
  background: linear-gradient(180deg, rgba(16, 75, 112, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.08);
}

.script-row.active-script-row {
  border-color: rgba(40, 215, 255, 0.45);
  background: linear-gradient(180deg, rgba(20, 136, 170, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.16), 0 0 28px rgba(40, 215, 255, 0.08);
}

.script-row.dragging-script-row {
  opacity: 0.45;
}

.script-row.drop-before {
  box-shadow: inset 0 3px 0 rgba(40, 215, 255, 0.85);
}

.script-row.drop-after {
  box-shadow: inset 0 -3px 0 rgba(40, 215, 255, 0.85);
}

.script-empty {
  margin: 0;
  padding: 1rem;
  border-radius: 18px;
  border: 1px dashed rgba(40, 215, 255, 0.18);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.script-cell {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.script-cell-label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.script-action-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* 1-based action number prefix shown at the start of every script row's
   action-name cell.  Used for cross-referencing actions in Telegram
   reports + device logs, so the user can say "step 12" and know exactly
   which row that is. */
.script-action-number {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  background: rgba(40, 215, 255, 0.12);
  color: rgba(190, 235, 255, 0.92);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  min-width: 1.6rem;
  text-align: center;
}

.script-value {
  margin: 0;
  color: #d9f6ff;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.8rem;
  line-height: 1.2;
  word-break: break-word;
}

.script-inline-input {
  width: 100%;
  border: 1px solid rgba(40, 215, 255, 0.1);
  border-radius: 10px;
  background: rgba(5, 11, 22, 0.76);
  color: var(--ink);
  padding: 0.38rem 0.55rem;
  font-size: 0.84rem;
}

.script-inline-input:focus {
  outline: 2px solid rgba(40, 215, 255, 0.18);
  border-color: rgba(40, 215, 255, 0.28);
}

.script-delete-btn {
  align-self: center;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 10px;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 7, 14, 0.72);
}

.modal-shell-front {
  z-index: 140;
}

.modal-card {
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(6, 14, 28, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

.modal-shell.inline-workflow {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  background: transparent;
}

.modal-shell.inline-workflow .modal-card {
  width: 100%;
  max-height: none;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.modal-shell.inline-workflow .modal-head {
  display: none;
}

.modal-shell.inline-workflow .modal-body {
  overflow: visible;
}

.action-editor-card {
  width: min(1160px, calc(100vw - 2rem));
}

.script-debug-card {
  width: min(980px, calc(100vw - 2rem));
}

.script-debug-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.script-debug-body {
  gap: 1rem;
  max-height: min(72vh, calc(100vh - 10rem));
  overflow: auto;
}

.script-debug-groups {
  display: grid;
  gap: 0.95rem;
}

.script-debug-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(80, 116, 159, 0.22);
  background: rgba(7, 17, 31, 0.48);
}

.script-debug-group-head h4 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.script-debug-error {
  border-color: rgba(255, 91, 103, 0.25);
}

.script-debug-warning {
  border-color: rgba(245, 183, 62, 0.25);
}

.script-debug-suggestion {
  border-color: rgba(70, 168, 255, 0.22);
}

.script-debug-issue {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(80, 116, 159, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.script-debug-issue strong {
  font-size: 0.95rem;
}

.script-debug-issue span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.script-debug-issue:hover {
  border-color: rgba(40, 215, 255, 0.28);
  background: rgba(40, 215, 255, 0.05);
}

.script-debug-issue:disabled {
  cursor: default;
  opacity: 0.7;
}

.script-debug-empty {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(80, 116, 159, 0.22);
  background: rgba(7, 17, 31, 0.48);
}

.script-debug-empty strong {
  font-size: 1rem;
}

.modal-head,
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.modal-head h3 {
  margin: 0.18rem 0 0;
}

.modal-body {
  display: grid;
  gap: 0.9rem;
  overflow: auto;
}

.model-info-modal-card {
  width: min(760px, calc(100vw - 2rem));
  border-color: rgba(93, 92, 255, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(40, 215, 255, 0.08);
}

.model-info-modal-head {
  padding-bottom: 0.2rem;
}

.model-info-modal-body {
  gap: 1rem;
}

.model-info-modal-actions {
  justify-content: flex-end;
  padding-top: 0.4rem;
}

.model-primary-btn,
.model-secondary-btn {
  min-height: 42px;
  border-radius: 10px;
  padding: 0.72rem 1.15rem;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
}

.model-primary-btn {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #4d7cff, #8e5cff);
  box-shadow: 0 12px 28px rgba(93, 92, 255, 0.28);
}

.model-secondary-btn {
  border: 1px solid rgba(145, 191, 255, 0.18);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.model-primary-btn:hover,
.model-secondary-btn:hover {
  transform: translateY(-1px);
}

.device-assign-modal-card,
.device-info-modal-card {
  width: min(820px, calc(100vw - 2rem));
}

.dashboard-status-modal-card {
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(780px, calc(100vh - 2rem));
}

.dashboard-status-modal-body {
  display: grid;
  gap: 0.9rem;
  overflow: hidden;
}

.dashboard-status-modal-list {
  display: grid;
  gap: 0.35rem;
  max-height: min(580px, calc(100vh - 14rem));
  overflow: auto;
  padding-right: 0.2rem;
}

.dashboard-status-account-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) 76px 88px 60px 72px minmax(130px, 1fr) minmax(180px, 1.35fr) minmax(140px, 1fr) minmax(160px, 1.1fr);
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(80, 116, 159, 0.28);
  border-radius: 8px;
  background: rgba(7, 17, 31, 0.48);
  color: var(--text);
  font-size: 0.8rem;
}

.dashboard-status-account-row > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-status-account-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #07111f;
  border-color: rgba(40, 215, 255, 0.32);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.dashboard-status-account-row .status-cell {
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.dashboard-status-account-row .status-cell.is-active {
  background: rgba(16, 213, 139, 0.16);
  color: #6ff0bf;
}

.dashboard-status-account-row .status-cell.is-disabled {
  background: rgba(255, 91, 103, 0.16);
  color: #ff9ba3;
}

.dashboard-status-modal-empty {
  padding: 1rem;
  border: 1px solid rgba(80, 116, 159, 0.28);
  border-radius: 8px;
  background: rgba(7, 17, 31, 0.48);
}

.reddit-overview-modal-card {
  width: min(1320px, calc(100vw - 2rem));
  max-height: min(860px, calc(100vh - 2rem));
  overflow: hidden;
}

.reddit-overview-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.reddit-overview-date-select {
  min-width: 170px;
}

.reddit-overview-modal-body {
  /* Flex column, NOT grid.  As a grid, when the total content exceeded
     max-height the grid algorithm squished the .reddit-overview-grid
     track (which had min-height:0) — and because that inner grid is
     overflow:visible, its ~400px of section content spilled out below
     the squished track and overlapped the "Last Actions" panel.
     Flex column + flex-shrink:0 on every child means each child keeps
     its natural height and the body simply scrolls — nothing squishes,
     nothing overlaps. */
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-height: calc(100vh - 8.5rem);
  overflow: auto;
  padding-right: 0.15rem;
}

.reddit-overview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
  flex-shrink: 0;
}

.reddit-overview-summary-card,
.reddit-overview-section {
  border: 1px solid rgba(145, 191, 255, 0.12);
  border-radius: 12px;
  background: rgba(7, 17, 31, 0.48);
}

.reddit-overview-summary-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
}

.reddit-overview-summary-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reddit-overview-summary-card strong {
  font-size: 1.45rem;
  color: #4e8cff;
}

.reddit-overview-summary-card.tone-green strong {
  color: #10d58b;
}

.reddit-overview-summary-card.tone-yellow strong {
  color: #f4c84a;
}

.reddit-overview-summary-card.tone-red strong {
  color: #ff5b67;
}

.reddit-overview-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
  gap: 0.9rem;
  align-items: start;
  /* flex-shrink:0 — this is a flex item of .reddit-overview-modal-body
     now.  It must NOT be squished by the flex container; if it shrinks,
     its overflow:visible content spills out and overlaps Last Actions.
     (The old `min-height: 0` here was what *permitted* that squish.) */
  flex-shrink: 0;
}

.reddit-overview-section {
  /* Flex column (header on top, scrollable table/list below) is more
     predictable here than grid: the inner .reddit-overview-table /
     .reddit-overview-events is a flex item with min-height:0, so its
     own max-height + overflow:auto are honoured and it scrolls inside
     the section instead of spilling out. `overflow: hidden` was
     removed because the inner element now owns its own scroll — the
     old grid + overflow:hidden combo let the Account Details table
     render at full content height and overlap the Last Actions panel
     below it. */
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  min-height: 0;
  padding: 0.8rem;
  /* When this is the standalone "Last Actions" section (a direct flex
     child of .reddit-overview-modal-body) it must keep its natural
     height — no squish.  Harmless for the two sections inside
     .reddit-overview-grid, which are grid items (flex-shrink is ignored
     on grid items). */
  flex-shrink: 0;
}

.reddit-overview-section-head h4 {
  margin: 0.15rem 0 0;
}

.reddit-overview-table,
.reddit-overview-events {
  display: grid;
  gap: 0.35rem;
  max-height: min(360px, calc(100vh - 22rem));
  overflow: auto;
  padding-right: 0.2rem;
  min-width: 0;
  /* min-height: 0 is the actual fix — without it, a grid/flex item's
     default `min-height: auto` (= content size) OVERRIDES `max-height`,
     so a 140-row Account Details table ignored the 360px cap, rendered
     full-height, and overlapped the Last Actions panel. With min-height
     0 the max-height is respected and the table scrolls internally. */
  min-height: 0;
  width: 100%;
}

.reddit-overview-row {
  display: grid;
  gap: 0.45rem;
  align-items: center;
  padding: 0.52rem 0.6rem;
  border: 1px solid rgba(80, 116, 159, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  font-size: 0.78rem;
}

.reddit-overview-row.device-row {
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 0.9fr) repeat(5, minmax(56px, 0.55fr));
}

.reddit-overview-row.account-row {
  grid-template-columns: minmax(80px, 0.8fr) 62px minmax(110px, 1.2fr) repeat(4, minmax(56px, 0.5fr)) minmax(120px, 1fr);
}

.reddit-overview-row.event-row {
  grid-template-columns: 92px 90px 70px minmax(90px, 1fr) minmax(160px, 1.5fr);
}

.reddit-overview-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reddit-overview-row.is-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #07111f;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reddit-overview-empty {
  margin: 0;
  padding: 0.9rem;
  color: var(--muted);
  border: 1px dashed rgba(145, 191, 255, 0.15);
  border-radius: 10px;
}

@media (max-width: 980px) {
  .dashboard-status-account-row {
    grid-template-columns: 1fr 0.65fr 0.7fr;
  }

  .dashboard-status-account-row > div:nth-child(n+4) {
    white-space: normal;
  }

  .reddit-overview-summary,
  .reddit-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .reddit-overview-grid {
    grid-template-columns: 1fr;
  }
}

.device-assign-modal-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.device-assign-section {
  display: grid;
  gap: 0.75rem;
  min-height: 280px;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(145, 191, 255, 0.04);
}

.device-assign-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: start;
}

.device-assign-section-head h4 {
  margin: 0.1rem 0 0;
}

.device-assign-source-select {
  width: min(220px, 100%);
}

.device-assign-list {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  max-height: min(54vh, 430px);
  overflow: auto;
}

.device-assign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(145, 191, 255, 0.12);
  background: rgba(6, 14, 28, 0.72);
}

.device-assign-row > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.device-assign-row strong,
.device-assign-row span {
  min-width: 0;
}

.device-assign-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.device-assign-empty {
  margin: 0;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px dashed rgba(145, 191, 255, 0.16);
  color: var(--muted);
}

@media (max-width: 820px) {
  .device-assign-modal-body {
    grid-template-columns: 1fr;
  }
}

.ui-scan-modal-card {
  width: min(1280px, calc(100vw - 2rem));
}

.ui-scan-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.6rem;
  align-items: center;
}

.ui-scan-modal-body {
  gap: 1rem;
}

.ui-scan-mode-row {
  grid-template-columns: minmax(220px, 320px);
}

.ui-scan-helper-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ui-scan-modal-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: 0.9rem;
  min-height: 0;
}

.ui-scan-pane {
  align-content: start;
  min-height: 0;
}

.ui-scan-pane-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.ui-scan-pane-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.6rem;
  align-items: center;
}

.ui-scan-filter-toggle span {
  font-size: 0.84rem;
}

.ui-scan-pane-head h4 {
  margin: 0;
}

.ui-scan-text-dump {
  min-height: 320px;
  resize: none;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.84rem;
  line-height: 1.45;
}

.builder-ui-scan-btn {
  min-width: 110px;
}

.ui-search-helper-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.subreddit-detect-test-result {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82rem;
}

.ui-detect-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ui-detect-mode-btn.is-active {
  border-color: rgba(40, 215, 255, 0.4);
  background: linear-gradient(180deg, rgba(24, 83, 120, 0.92), rgba(10, 53, 84, 0.94));
  color: #f5fbff;
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.08) inset;
}

.editor-field-span-2 {
  grid-column: span 2;
}

.ui-image-template-preview {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
  border-radius: 14px;
  border: 1px solid rgba(40, 215, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}

.ui-image-template-preview img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #05080f;
  object-fit: contain;
}

.ui-search-config-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reddit-device-modal-card {
  width: min(1640px, calc(100vw - 1rem));
}

.reddit-device-modal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.6rem;
  align-items: center;
}

.reddit-device-modal-body {
  gap: 1rem;
  min-height: min(78vh, 860px);
}

.reddit-device-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reddit-device-tab-btn {
  min-width: 150px;
}

.reddit-device-tab-btn.active {
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.2), rgba(13, 91, 171, 0.24));
  border-color: rgba(40, 215, 255, 0.28);
  color: var(--ink);
}

.reddit-list-mode-btn.active {
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.2), rgba(13, 91, 171, 0.24));
  border-color: rgba(40, 215, 255, 0.28);
  color: var(--ink);
}

.reddit-device-tab-panel {
  display: grid;
  gap: 0.9rem;
  min-height: min(68vh, 760px);
  align-content: start;
}

.reddit-log-placeholder h4,
.reddit-account-table-head h4,
.reddit-account-manager-head h4 {
  margin: 0;
}

.reddit-device-log-card {
  gap: 0.95rem;
}

.reddit-device-log-head {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  align-items: start;
}

.reddit-device-log-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: end;
}

.reddit-device-log-current {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(40, 215, 255, 0.18);
  background: rgba(40, 215, 255, 0.08);
  color: #c7e9ff;
  font-size: 0.88rem;
  font-weight: 700;
}

.reddit-device-log-current span {
  color: var(--muted);
  font-weight: 600;
}

.reddit-device-log-list {
  display: grid;
  gap: 0.65rem;
  max-height: min(60vh, 690px);
  overflow: auto;
  padding-right: 0.2rem;
}

.reddit-device-log-empty {
  border: 1px dashed rgba(83, 121, 167, 0.3);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  color: var(--muted);
  background: rgba(6, 14, 28, 0.48);
}

.reddit-device-log-entry {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(83, 121, 167, 0.22);
  background: rgba(6, 14, 28, 0.72);
}

.reddit-device-log-entry.is-success {
  border-color: rgba(65, 211, 164, 0.28);
}

.reddit-device-log-entry.is-warn {
  border-color: rgba(247, 194, 89, 0.28);
}

.reddit-device-log-entry.is-error {
  border-color: rgba(244, 94, 94, 0.32);
}

/* "Moves" rows in the Reddit / IG device-log toggle — slightly tinted
   accent so the user can tell at a glance they're looking at the
   move-level audit trail and not the task summary. */
.reddit-device-log-entry.is-move {
  border-color: rgba(120, 170, 240, 0.32);
  background: rgba(8, 18, 36, 0.78);
}
.reddit-device-log-entry.is-move .reddit-device-log-time {
  color: rgba(160, 200, 245, 0.75);
}

/* Active state for the "Show Moves" / "Show Tasks" toggle button. */
.reddit-device-log-actions button.is-active {
  border-color: rgba(120, 170, 240, 0.55);
  color: rgba(190, 215, 250, 1);
}

.reddit-device-log-time {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.reddit-device-log-text {
  color: var(--ink);
  line-height: 1.45;
  word-break: break-word;
}

.reddit-account-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reddit-account-manager {
  gap: 0.9rem;
}

.reddit-account-manager-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.reddit-account-manager-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 0.9rem;
  align-items: end;
}

.reddit-account-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.reddit-content-config-card,
.reddit-content-table-card,
.reddit-content-entry-card,
.reddit-thresholds-summary-card,
.reddit-thresholds-table-card,
.reddit-task-manager-overview-card,
.reddit-task-stage-editor-card {
  gap: 0.95rem;
}

.reddit-content-config-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 0.9rem;
  align-items: end;
}

.reddit-content-list-group {
  display: grid;
  gap: 0.45rem;
}

.editor-field-label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reddit-list-mode-group,
.reddit-content-toolbar,
.reddit-content-bulk-actions,
.reddit-content-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reddit-content-quick-actions {
  align-items: center;
}

.reddit-list-mode-btn {
  min-width: 136px;
}

.reddit-content-selection-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem 1.2rem;
  align-items: start;
}

.reddit-content-selection-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
}

.reddit-thresholds-summary-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem 1.2rem;
  align-items: start;
}

.reddit-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.reddit-inline-check input {
  width: 18px;
  height: 18px;
  accent-color: #27d980;
}

.reddit-account-table-card {
  gap: 0.9rem;
}

.reddit-account-table-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.reddit-account-table-wrap {
  overflow: auto;
  max-height: min(66vh, 780px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 10, 20, 0.72);
}

.reddit-content-table-wrap {
  max-height: min(52vh, 620px);
}

.reddit-thresholds-table-wrap {
  max-height: min(56vh, 700px);
}

.reddit-account-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.reddit-content-table {
  width: 100%;
  min-width: 100%;
}

.reddit-thresholds-table {
  width: 100%;
  min-width: 100%;
}

.reddit-account-table th,
.reddit-account-table td {
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.reddit-account-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10, 18, 34, 0.98);
  color: var(--muted);
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.reddit-account-table td {
  background: rgba(255, 255, 255, 0.012);
}

.reddit-account-table tbody tr.is-test-selected td {
  background: linear-gradient(180deg, rgba(24, 170, 255, 0.08), rgba(20, 88, 138, 0.06));
}

.reddit-account-id-cell {
  font-weight: 700;
  white-space: nowrap;
}

.reddit-account-empty {
  text-align: center;
  color: var(--muted);
}

.reddit-content-name {
  font-weight: 600;
}

.reddit-subreddit-status {
  min-width: 94px;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.1;
}

.reddit-subreddit-status.is-ready {
  border-color: rgba(40, 215, 255, 0.16);
  background: rgba(28, 72, 124, 0.24);
}

.reddit-subreddit-status.is-used {
  border-color: rgba(255, 191, 64, 0.24);
  background: linear-gradient(180deg, rgba(255, 191, 64, 0.2), rgba(116, 76, 12, 0.22));
}

.reddit-text-input {
  min-width: 148px;
}

.reddit-number-input {
  width: 92px;
  text-align: center;
}

.reddit-used-cell {
  text-align: center;
}

.reddit-used-toggle {
  width: 18px;
  height: 18px;
  accent-color: #27d980;
}

.reddit-row-select-toggle {
  width: 18px;
  height: 18px;
  accent-color: #18ddff;
}

.reddit-status-toggle {
  min-width: 112px;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.1;
}

.reddit-status-toggle.is-active {
  border-color: rgba(50, 215, 110, 0.22);
  background: linear-gradient(180deg, rgba(50, 215, 110, 0.18), rgba(20, 96, 58, 0.2));
}

.reddit-status-toggle.is-suspended {
  border-color: rgba(255, 102, 102, 0.24);
  background: linear-gradient(180deg, rgba(255, 108, 108, 0.2), rgba(115, 24, 24, 0.22));
}

/* 2026-05-26 STATUS-BADGE UX FIX: rows with status="active" but an empty
   username are "pending creation" — neither active nor banned. Show a
   neutral gray badge so the user can tell at a glance the row needs a
   username before any status toggle will make visible sense. */
.reddit-status-toggle.is-pending {
  border-color: rgba(160, 170, 185, 0.28);
  background: linear-gradient(180deg, rgba(140, 150, 165, 0.18), rgba(60, 70, 85, 0.24));
  color: rgba(220, 226, 236, 0.85);
  cursor: default;
  opacity: 0.85;
}

.context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid rgba(70, 200, 255, 0.18);
  background: rgba(8, 14, 28, 0.98);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.context-menu-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.context-menu-item:hover {
  background: rgba(24, 170, 255, 0.12);
}

.reddit-content-bulk {
  min-height: 132px;
  resize: vertical;
}

.reddit-content-input-modal-card {
  width: min(720px, calc(100vw - 2rem));
}

.reddit-thresholds-modal-card {
  width: min(760px, calc(100vw - 2rem));
}

.reddit-thresholds-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.reddit-task-manager-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem 1.2rem;
  align-items: end;
}

.reddit-task-manager-account-group {
  display: grid;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: 0.9rem;
  align-items: end;
  flex: 1 1 520px;
}

.reddit-task-manager-meta-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.reddit-task-manager-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.6rem;
  align-items: center;
}

.reddit-phase-mode-toggle {
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  white-space: nowrap;
}

.reddit-phase-threshold-input {
  text-align: center;
}

.reddit-task-stage-shell {
  display: grid;
  gap: 0.7rem;
}

.reddit-task-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.reddit-task-stage-btn {
  min-width: 156px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 0.8rem 0.95rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.reddit-task-stage-btn.active {
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.2), rgba(13, 91, 171, 0.24));
  border-color: rgba(40, 215, 255, 0.28);
  color: var(--ink);
}

.reddit-task-stage-btn.is-drop-target {
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.16), 0 0 24px rgba(40, 215, 255, 0.12);
}

.reddit-task-stage-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(40, 215, 255, 0.14);
  background: rgba(40, 215, 255, 0.08);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.reddit-task-stage-label {
  font-weight: 700;
}

.reddit-task-sections-grid {
  display: grid;
  gap: 0.9rem;
}

.reddit-task-section-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.016);
}

.reddit-task-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.reddit-task-section-head h5 {
  margin: 0.18rem 0 0;
  font-size: 1rem;
}

.reddit-task-list {
  display: grid;
  gap: 0.55rem;
}

.reddit-task-list-item {
  width: 100%;
  display: grid;
  gap: 0.18rem;
  text-align: left;
  padding: 0.82rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.018);
}

.reddit-task-list-item.selected {
  border-color: rgba(40, 215, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.1);
  background: linear-gradient(180deg, rgba(16, 75, 112, 0.16), rgba(255, 255, 255, 0.03));
}

.reddit-task-list-title,
.reddit-task-random-title {
  font-weight: 700;
}

.reddit-task-list-meta,
.reddit-task-random-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.reddit-task-empty {
  margin: 0;
}

.reddit-task-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.reddit-task-range-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: end;
}

.reddit-task-random-table-wrap {
  overflow: auto;
  max-height: min(34vh, 360px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 10, 20, 0.72);
}

.reddit-task-random-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}

.reddit-task-random-table th,
.reddit-task-random-table td {
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.reddit-task-random-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10, 18, 34, 0.98);
  color: var(--muted);
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.reddit-task-random-table td {
  background: rgba(255, 255, 255, 0.012);
}

.reddit-task-random-table tr.selected td {
  background: linear-gradient(180deg, rgba(16, 75, 112, 0.16), rgba(255, 255, 255, 0.03));
}

.reddit-task-random-name {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.reddit-task-script-modal-card {
  width: min(720px, calc(100vw - 2rem));
}

.reddit-task-script-random-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.editor-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.editor-inline-actions-compact {
  gap: 0.45rem;
}

.editor-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.editor-group-card {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.editor-ui-search-section {
  gap: 0.8rem;
}

.editor-ui-search-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}

.editor-ui-search-card {
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
}

.editor-ui-search-card--search,
.editor-ui-search-card--click,
.editor-ui-search-card--logic {
  grid-column: span 4;
}

.editor-ui-search-card--retry,
.editor-ui-search-card--region,
.editor-ui-search-card--repeat {
  grid-column: span 6;
}

.editor-ui-search-region-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
}

.editor-ui-search-region-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-group-head {
  display: grid;
  gap: 0.18rem;
}

.editor-group-kicker {
  margin: 0;
  color: var(--accent, #28d7ff);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editor-group-title {
  margin: 0;
  font-size: 1rem;
}

.editor-section {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(40, 215, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.editor-common-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-field {
  display: grid;
  gap: 0.32rem;
}

.editor-field > span,
.editor-toggle > span {
  color: var(--muted);
  font-size: 0.9rem;
}

.editor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.editor-swipe-bias-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.editor-swipe-bias-toggle {
  width: 100%;
  justify-content: flex-start;
  padding: 0.78rem 0.92rem;
  border-radius: 14px;
  border: 1px solid rgba(145, 191, 255, 0.16);
  background: rgba(10, 18, 31, 0.58);
}

.editor-textarea {
  min-height: 110px;
}

.script-preview {
  min-height: 300px;
  resize: vertical;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.83rem;
  line-height: 1.45;
}

.builder-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.3rem;
}

.builder-footer-spacer {
  flex: 1;
}

.builder-log-btn {
  background: linear-gradient(180deg, rgba(40, 215, 255, 0.12), rgba(11, 69, 132, 0.18));
}

.builder-log-btn.active {
  background: linear-gradient(180deg, rgba(40, 215, 255, 0.28), rgba(11, 69, 132, 0.35));
  border-color: rgba(40, 215, 255, 0.4);
  box-shadow: 0 0 12px rgba(40, 215, 255, 0.15);
}

.builder-log-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.builder-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.5rem;
}

.builder-log-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.builder-log-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink, #e6e6e6);
  letter-spacing: 0.02em;
}

.builder-log-content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 1rem;
}

.builder-side-stack {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.builder-ai-chat-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: rgba(5, 10, 18, 0.36);
  overflow: hidden;
  flex: 1;
}

.builder-ai-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.builder-ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.builder-ai-chat-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #e6e6e6);
}

.builder-ai-chat-entries {
  min-height: 220px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem;
  contain: content;
}

.builder-ai-chat-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 0.85rem;
  padding: 0.85rem 0.9rem 0;
  align-items: end;
}

.builder-ai-chat-ocr-toggle {
  align-self: center;
  padding-bottom: 0.25rem;
}

.builder-ai-chat-empty {
  color: rgba(210, 226, 255, 0.62);
  font-size: 0.92rem;
  line-height: 1.45;
}

.builder-ai-chat-entry {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(14, 22, 35, 0.72);
  content-visibility: auto;
  contain-intrinsic-size: 92px;
}

.builder-ai-chat-entry.role-user {
  border-color: rgba(40, 215, 255, 0.22);
}

.builder-ai-chat-entry.role-assistant {
  border-color: rgba(78, 222, 128, 0.22);
}

.builder-ai-chat-entry.role-system {
  border-color: rgba(255, 196, 90, 0.22);
}

.builder-ai-chat-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.builder-ai-chat-role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(210, 226, 255, 0.82);
}

.builder-ai-chat-time {
  font-size: 0.75rem;
  color: rgba(170, 192, 228, 0.58);
}

.builder-ai-chat-body {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(236, 242, 255, 0.92);
}

.builder-ai-chat-compose {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 8, 16, 0.28);
}

.builder-ai-chat-input {
  resize: vertical;
  min-height: 96px;
  margin-top: 0.85rem;
}

.builder-ai-chat-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.builder-log-feed {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: rgba(5, 10, 18, 0.36);
  overflow: hidden;
}

.builder-log-entries {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted, #bbb);
}

.builder-log-entry {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: pre-wrap;
  word-break: break-word;
}

.builder-log-entry:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015);
}

.builder-log-entry .log-time {
  color: rgba(40, 215, 255, 0.6);
  margin-right: 0.5rem;
}

.builder-log-entry.log-error {
  color: #f87171;
}

.builder-log-entry.log-success {
  color: #4ade80;
}

.motion-tracker-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.motion-tracker-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.motion-tracker-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink, #e6e6e6);
}

.motion-tracker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 0.55rem;
}

.motion-tracker-toggle {
  margin: 0;
}

.motion-tracker-stage {
  position: relative;
  width: min(100%, 360px);
  align-self: center;
  aspect-ratio: var(--motion-tracker-aspect, 375 / 812);
  border-radius: 30px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(145, 191, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 40px rgba(0, 0, 0, 0.38);
}

.motion-tracker-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.motion-tracker-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(196, 212, 236, 0.55);
  pointer-events: none;
}

.dock-card {
  background: rgba(11, 20, 36, 0.82);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 0.75rem;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.dock-btn {
  min-height: 42px;
  border-radius: 14px;
  text-align: center;
  padding: 0.45rem;
  font-size: 0.86rem;
  line-height: 1;
  background: linear-gradient(180deg, rgba(18, 221, 255, 0.14), rgba(11, 69, 132, 0.2));
}

.icon-btn {
  display: grid;
  place-items: center;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.stacked-meta,
.type-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(40, 215, 255, 0.12);
  background: rgba(40, 215, 255, 0.06);
  color: #a9dfff;
  font-size: 0.86rem;
}

.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
}

.ui-scan-list,
.docs-scroll {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
  max-height: 340px;
  overflow: auto;
}

.ui-scan-pane .ui-scan-list {
  margin-top: 0;
  max-height: min(58vh, 660px);
}

.docs-page-panel .docs-scroll {
  max-height: none;
}

.docs-software-card {
  gap: 1rem;
}

.docs-software-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.docs-software-head h3 {
  margin: 0.18rem 0 0;
}

.docs-software-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.docs-value {
  min-height: 48px;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(7, 14, 27, 0.72);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
}

.docs-value-list {
  white-space: pre-wrap;
}

.docs-manifest {
  min-height: 260px;
  resize: vertical;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}

.docs-preflight {
  min-height: 128px;
  white-space: pre-wrap;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
}

.docs-software-actions {
  display: flex;
  gap: 0.8rem;
  align-items: end;
  flex-wrap: wrap;
}

.docs-software-actions .editor-field {
  flex: 1 1 320px;
}

.docs-software-actions--stacked .editor-field {
  flex: 1 1 240px;
}

.docs-software-actions .dock-btn {
  min-width: 150px;
}

.docs-remove-btn.is-live {
  border-color: rgba(255, 122, 89, 0.36);
  background: linear-gradient(180deg, rgba(255, 142, 89, 0.22), rgba(148, 48, 36, 0.28));
  box-shadow: 0 0 0 1px rgba(255, 122, 89, 0.14), 0 0 26px rgba(255, 122, 89, 0.12);
}

.ui-scan-empty {
  margin: 0;
  color: var(--muted);
}

.ui-scan-warning {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 184, 77, 0.28);
  border-radius: 14px;
  background: rgba(255, 184, 77, 0.08);
  color: #ffd58f;
}

.ui-item,
.device-admin-card,
.saved-script-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.95rem 1rem;
}

.device-admin-card.is-disconnected {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.045);
  background: rgba(255, 255, 255, 0.012);
}

.ui-item-head,
.device-admin-head,
.saved-script-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: start;
}

.automation-grid {
  display: grid;
  gap: 0.9rem;
}

.device-assignments-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.device-assignments-list {
  display: grid;
  gap: 0.5rem;
}

.device-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}

.device-assignment-row.is-running {
  border-color: rgba(120, 200, 120, 0.55);
  background: rgba(120, 200, 120, 0.06);
}

.device-assignment-row.is-failed {
  border-color: rgba(220, 90, 90, 0.55);
  background: rgba(220, 90, 90, 0.06);
}

.device-assignment-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.device-assignment-name .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-assignment-name .udid {
  font-size: 0.75rem;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-assignment-select {
  width: 100%;
  min-width: 0;
}

.device-assignment-status {
  font-size: 0.78rem;
  opacity: 0.75;
  min-width: 7rem;
  text-align: right;
  white-space: nowrap;
}

.device-assignment-empty {
  padding: 1rem;
  opacity: 0.7;
  font-style: italic;
}

@media (max-width: 720px) {
  .device-assignment-row {
    grid-template-columns: 1fr;
  }
  .device-assignment-status {
    text-align: left;
  }
}

.automation-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.automation-trash-toggle.active {
  border-color: rgba(255, 91, 103, 0.35);
  color: #ffb4ba;
  background: rgba(255, 91, 103, 0.08);
}

.automation-trash-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 91, 103, 0.22);
  border-radius: 18px;
  background: rgba(255, 91, 103, 0.045);
}

.automation-trash-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.automation-trash-list {
  display: grid;
  gap: 0.55rem;
}

.automation-trash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(5, 11, 22, 0.45);
}

.automation-trash-row.is-folder {
  border-color: rgba(40, 215, 255, 0.16);
}

.automation-trash-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.automation-trash-copy strong,
.automation-trash-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

.folder-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.folder-toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.75rem;
  transition: background 120ms;
}

.folder-toggle:hover {
  background: rgba(40, 215, 255, 0.1);
}

.folder-chevron {
  display: inline-block;
}

.folder-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.folder-name {
  font-size: 1rem;
  margin: 0;
}

.folder-body {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.85rem 0.85rem;
}

.folder-body .saved-script-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.06);
}

.nested-folder-card {
  margin-left: min(0.85rem, calc(var(--folder-depth, 1) * 0.22rem));
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(40, 215, 255, 0.12);
}

.folder-move-select {
  max-width: 160px;
  padding: 0.42rem 0.6rem;
  font-size: 0.82rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  border: 1px solid var(--line);
}

/*
 * Dropdown <option> readability in dark mode.
 *
 * Native <select> opens an OS-rendered <option> list. With no explicit
 * styling, Chromium picks a default that often comes out as light-grey text
 * on a near-white background — exactly the "all-white, can't read the
 * folder names" the user reported on the folder-move dropdown. Setting
 * background-color + color directly on <option> elements forces a dark
 * surface with light text, restoring contrast.
 *
 * Scoped to the dropdowns we render programmatically (folder move, generic
 * inline inputs, and the named selects that follow the same dark theme)
 * so we don't accidentally restyle any native form selects elsewhere.
 * Limitations: this works in Chromium-based browsers (Chrome, Edge — what
 * NewPhone runs in). Firefox and Safari ignore most <option> styling.
 */
.folder-move-select option,
.script-inline-input option,
.reddit-overview-date-select option,
.device-assign-source-select option,
.device-assignment-select option,
.svc-chat-model-select option,
.subsheet-status-select option {
  background-color: #0b1424;
  color: var(--fg);
}

.folder-move-select option:checked,
.script-inline-input option:checked,
.reddit-overview-date-select option:checked,
.device-assign-source-select option:checked,
.device-assignment-select option:checked,
.svc-chat-model-select option:checked,
.subsheet-status-select option:checked {
  background: linear-gradient(rgba(40, 215, 255, 0.18), rgba(40, 215, 255, 0.18));
  color: #ffffff;
}

.bio-text-block {
  margin: 0.6rem 0 0;
  padding: 0.75rem 0.85rem;
  background: rgba(5, 11, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}

.bio-edit-form {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.5rem;
}

.bio-edit-textarea {
  min-height: 80px;
  resize: vertical;
}

.bio-add-form,
.bio-bulk-form {
  display: grid;
  gap: 0.65rem;
}

.bio-card.bio-editing {
  padding-bottom: 0.5rem;
}

.bio-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.service-card {
  display: grid;
  gap: 0.75rem;
}

/* 2026-05-17: AI / Tools page top toolbar with pause-all / resume-all */
.tools-pause-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(56, 71, 99, 0.18);
  border: 1px solid rgba(146, 168, 200, 0.18);
  margin-bottom: 0.25rem;
}
.tools-pause-banner {
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(228, 232, 240, 0.92);
}
.tools-pause-banner strong { color: #f3f5fa; }
.tools-pause-banner.is-paused {
  color: #ffd58a;
  background: rgba(255, 152, 0, 0.08);
  border-left: 3px solid #ffa726;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.tools-pause-banner.is-paused strong { color: #ffba5a; }
.tools-pause-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.tools-pause-all-btn {
  background: #c64141 !important;
  color: #fff !important;
}
.tools-pause-all-btn:hover:not(:disabled) {
  background: #d65656 !important;
}
.tools-resume-all-btn {
  background: #2e8b57 !important;
  color: #fff !important;
}
.tools-resume-all-btn:hover:not(:disabled) {
  background: #3aa569 !important;
}

.svc-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.svc-running {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.svc-starting {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.svc-stopped {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.svc-error {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}

.svc-nokey {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.svc-error-msg {
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.15);
  border-radius: 10px;
  color: #f87171;
  font-size: 0.82rem;
  word-break: break-word;
}

.svc-config-form {
  display: grid;
  gap: 0.6rem;
}

.svc-field-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.svc-key-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.svc-key-input {
  flex: 1 1 auto;
}

.svc-key-toggle {
  flex-shrink: 0;
  min-width: 52px;
  font-size: 0.78rem;
  padding: 0.38rem 0.55rem;
}

.svc-config-field {
  display: grid;
  gap: 0.25rem;
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

.svc-stop-btn {
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.svc-stop-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.5);
}

/* ── Account Logins ── */

.acct-platform-card .folder-head {
  gap: 0.5rem;
}

.acct-plat-actions {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
  flex-shrink: 0;
}

.acct-plat-actions button {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
}

.acct-platform-body {
  gap: 0.5rem;
}

.acct-entry-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acct-entry-fields {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.acct-entry-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.acct-entry-label {
  color: var(--text-secondary, #aaa);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 80px;
  flex-shrink: 0;
}

.acct-entry-value {
  color: var(--text-primary, #e5e7eb);
  word-break: break-all;
}

.acct-reveal-btn {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
}

.acct-entry-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.acct-entry-actions button {
  font-size: 0.8rem;
}

.acct-entry-actions .folder-move-select {
  font-size: 0.78rem;
  margin-left: auto;
}

.acct-inuse-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  margin-top: 0.3rem;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fbbf24;
}

.acct-release-btn {
  font-size: 0.72rem !important;
  padding: 0.15rem 0.5rem !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 4px;
  margin-left: auto;
}

.acct-new-platform-form,
.acct-add-form,
.acct-edit-form {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acct-field-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.acct-notes-row .acct-entry-value {
  font-style: italic;
}

.acct-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(40, 215, 255, 0.15);
  color: var(--accent, #28d7ff);
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.4rem;
  flex-shrink: 0;
}

.acct-bulk-heading {
  margin: 0;
  font-size: 0.95rem;
}

.acct-bulk-example {
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.78rem;
  opacity: 0.6;
}

.acct-bulk-textarea {
  width: 100%;
  resize: vertical;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  min-height: 120px;
  box-sizing: border-box;
}

.acct-bulk-textarea:focus {
  outline: none;
  border-color: rgba(147, 197, 253, 0.4);
}

.acct-bulk-preview {
  font-size: 0.82rem;
  color: #777;
  padding: 0.2rem 0;
}

.acct-bulk-preview-active {
  color: var(--accent, #28d7ff);
  font-weight: 600;
}

.svc-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.svc-collapse-toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--accent, #28d7ff);
  flex-shrink: 0;
  transition: background 120ms;
}

.svc-collapse-toggle:hover {
  background: rgba(40, 215, 255, 0.1);
}

.svc-chevron {
  display: inline-block;
}

.svc-title-wrap {
  flex: 1;
  min-width: 0;
}

.svc-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-collapsed .svc-card-body {
  display: none;
}

.svc-chat-toggle {
  margin-left: auto;
}

.svc-chat-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.svc-chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-chat-model-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #aaa);
}

.svc-chat-model-select {
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.svc-chat-clear {
  font-size: 0.8rem;
}

.svc-chat-log {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.8rem;
  min-height: 280px;
  max-height: 450px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}

.svc-chat-msg {
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

.svc-chat-msg:last-child {
  margin-bottom: 0;
}

.svc-chat-system {
  color: #888;
  font-style: italic;
}

.svc-chat-user {
  color: #d1d5db;
}

.svc-chat-assistant {
  color: #93c5fd;
}

.svc-chat-ts {
  color: #666;
  font-size: 0.78rem;
  margin-right: 0.3rem;
}

.svc-chat-model-tag {
  font-size: 0.75rem;
  color: #777;
  font-weight: normal;
}

.svc-chat-code {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

.svc-chat-assistant code {
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.82rem;
}

.svc-chat-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.svc-chat-input-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.svc-chat-textarea {
  width: 100%;
  resize: vertical;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  min-height: 60px;
  box-sizing: border-box;
}

.svc-chat-textarea:focus {
  outline: none;
  border-color: rgba(147, 197, 253, 0.4);
}

.svc-chat-bottom-bar {
  display: flex;
  justify-content: flex-end;
}

.svc-chat-send {
  min-width: 80px;
}

/* 2026-05-20: image attachment for vision-capable chat (grok-4.3 / gpt-4o). */
.svc-chat-attach-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.svc-chat-attach-btn {
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
}

.svc-chat-attach-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.svc-chat-attach-thumb {
  max-width: 80px;
  max-height: 80px;
  border-radius: 6px;
  object-fit: cover;
}

.svc-chat-attach-name {
  font-size: 0.8rem;
  color: var(--text-secondary, #aaa);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-chat-attach-remove {
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
}

.svc-chat-msg-image {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  margin-top: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.saved-script-title {
  margin: 0;
  font-size: 1rem;
}

.saved-script-notes {
  margin: 0.85rem 0 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.saved-script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.compact-actions {
  margin-top: 0;
}

.save-script-card {
  max-width: 640px;
}

.ui-item-title,
.device-admin-title {
  margin: 0;
  font-weight: 700;
}

.ui-type,
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(40, 215, 255, 0.08);
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-pill.offline {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.status-pill.detected {
  background: rgba(255, 198, 76, 0.09);
  color: #ffd58f;
}

.ui-item-body,
.device-admin-body {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.devices-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.rename-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.device-host-row {
  align-items: start;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.batch-target-card {
  display: grid;
  gap: 0.9rem;
}

.batch-device-list,
.batch-result-list {
  display: grid;
  gap: 0.65rem;
}

.batch-device-row,
.batch-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.018);
}

.batch-device-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.batch-device-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  flex: 1 1 auto;
}

.batch-device-name {
  font-weight: 600;
}

.batch-result-panel {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.65rem;
}

.health,
.log {
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 18px;
  padding: 0.9rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.health {
  min-height: 180px;
}

.log {
  min-height: 220px;
  max-height: 420px;
}

.log-entry {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.log-entry:last-child {
  border-bottom: 0;
}

.coming-card {
  min-height: 320px;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  text-align: center;
}

.coming-card p {
  margin: 0;
  color: var(--muted);
}

.subsheet-panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: calc(100vh - 2.4rem);
}

.subsheet-head {
  align-items: flex-start;
}

.subsheet-save-actions {
  align-items: center;
}

.subsheet-toolbar,
.subsheet-bulk-panel,
.subsheet-analyzer-panel,
.subsheet-log-panel {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}

.subsheet-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
}

.subsheet-analyzer-panel {
  grid-template-columns: minmax(260px, 420px) auto minmax(260px, 1fr);
  align-items: end;
}

.subsheet-job-status {
  margin-top: 0.35rem;
}

.subsheet-scraper-actions {
  display: grid;
  gap: 0.6rem;
  align-content: end;
}

.subsheet-scrape-users,
.subsheet-ban-text {
  min-height: 92px;
  resize: vertical;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.88rem;
}

.subsheet-log-panel {
  max-height: 210px;
}

.subsheet-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--accent);
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.subsheet-job-log {
  display: grid;
  gap: 0.35rem;
  max-height: 150px;
  overflow: auto;
  padding-right: 0.25rem;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82rem;
  color: #b9c8e5;
}

.subsheet-log-row {
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.subsheet-log-row-warn {
  color: #ffd26f;
}

.subsheet-log-row-error {
  color: #ff7b8f;
}

.subsheet-search-wrap {
  min-width: 0;
}

.subsheet-bulk-panel {
  grid-template-columns: minmax(220px, 0.7fr) minmax(360px, 1.4fr) auto;
  align-items: stretch;
}

.subsheet-bulk-copy {
  align-self: center;
}

.subsheet-bulk-text {
  min-height: 112px;
  resize: vertical;
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.88rem;
}

.subsheet-bulk-actions {
  align-content: center;
}

.subsheet-table-shell {
  margin-top: 1rem;
  flex: 1 1 auto;
  min-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(4, 8, 17, 0.42);
}

.subsheet-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
}

.subsheet-table th,
.subsheet-table td {
  border-bottom: 1px solid rgba(100, 140, 220, 0.12);
  padding: 0.45rem 0.55rem;
  vertical-align: middle;
}

.subsheet-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 15, 30, 0.98);
  color: #b9c8e5;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.subsheet-select-col {
  width: 46px;
  text-align: center;
}

.subsheet-row-number-col {
  width: 72px;
  text-align: right;
}

.subsheet-row-number {
  color: var(--muted);
  font-family: "Menlo", "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82rem;
}

.subsheet-clickable-head {
  cursor: pointer;
  user-select: none;
}

.subsheet-clickable-head:hover {
  color: var(--accent);
}

.subsheet-name-highlight {
  margin-bottom: 0.28rem;
  color: #c9d7f2;
  font-size: 0.82rem;
  line-height: 1.2;
  word-break: break-word;
}

.subsheet-search-mark {
  border-radius: 4px;
  background: rgba(255, 216, 87, 0.95);
  color: #08101e;
  padding: 0 0.12rem;
}

.subsheet-cell-input,
.subsheet-status-select {
  width: 100%;
  border: 1px solid rgba(100, 140, 220, 0.14);
  border-radius: 10px;
  background: rgba(7, 14, 27, 0.78);
  color: var(--ink);
  padding: 0.55rem 0.65rem;
}

.subsheet-cell-input:focus,
.subsheet-status-select:focus {
  outline: 2px solid rgba(40, 215, 255, 0.16);
  border-color: rgba(40, 215, 255, 0.34);
}

.subsheet-empty {
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}

.hidden {
  display: none !important;
}

code {
  color: #c7efff;
}

@media (max-width: 1180px) {
  .experience,
  .lower-grid,
  .control-panel-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-model-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-model-phone-count,
  .dashboard-model-actions {
    justify-self: start;
  }

  .builder-log-content {
    grid-template-columns: 1fr;
  }

  .ui-scan-modal-grid {
    grid-template-columns: 1fr;
  }

  .editor-ui-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.editor-ui-search-card--search,
.editor-ui-search-card--click,
.editor-ui-search-card--logic,
.editor-ui-search-card--retry,
.editor-ui-search-card--region,
.editor-ui-search-card--repeat {
  grid-column: span 1;
}

  .editor-ui-search-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reddit-account-manager-grid {
    grid-template-columns: 1fr;
  }

  .reddit-content-config-grid {
    grid-template-columns: 1fr;
  }

  .reddit-thresholds-form-grid {
    grid-template-columns: 1fr;
  }

  .reddit-task-manager-account-group,
  .reddit-task-script-random-fields {
    grid-template-columns: 1fr;
  }

  .control-selection-body {
    grid-template-columns: 1fr;
  }

  .control-panel-model-form-grid,
  .control-panel-model-sections,
  .panel-model-assignment-row {
    grid-template-columns: 1fr;
  }

  .docs-software-grid {
    grid-template-columns: 1fr;
  }

  .panel-viewer-mount {
    justify-items: start;
  }

  .script-builder {
    min-width: 0;
  }
}

@media (max-width: 960px) {
  .shell,
  .shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 1rem;
  }

  .control-connect-bar {
    align-items: stretch;
  }

  .selector-wrap {
    min-width: 100%;
  }

  .panel-device-table-head {
    display: none;
  }

  .panel-device-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-models-list {
    grid-template-columns: 1fr;
  }

  .panel-model-device-row {
    grid-template-columns: 1fr;
  }

  .panel-model-device-actions {
    justify-content: stretch;
  }

  .panel-device-main {
    grid-column: 1 / -1;
  }

  .panel-device-cell-reddit,
  .panel-device-cell-instagram {
    justify-content: stretch;
  }

  .panel-device-reddit-btn,
  .panel-device-instagram-btn {
    width: 100%;
  }

  .reddit-device-modal-head {
    justify-content: start;
  }

  .reddit-account-toolbar,
  .reddit-account-manager-actions,
  .reddit-list-mode-group,
  .reddit-content-toolbar,
  .reddit-content-bulk-actions,
  .reddit-content-quick-actions,
  .reddit-content-selection-modes,
  .reddit-task-manager-toolbar,
  .reddit-task-button-row,
  .reddit-task-range-row {
    flex-direction: column;
    align-items: stretch;
  }

  .reddit-device-tab-btn {
    width: 100%;
  }

  .reddit-list-mode-btn {
    width: 100%;
  }

  .reddit-task-stage-btn {
    width: 100%;
  }

  .device-stage {
    display: contents;
  }

  .phone-frame {
    max-width: min(360px, 92vw);
  }

  .panel-viewer-mount {
    justify-items: center;
  }

  .builder-toolbar-actions {
    margin-left: 0;
  }

  .builder-status {
    justify-content: start;
  }

  .builder-table-head {
    display: none;
  }

  .script-row {
    grid-template-columns: 1fr;
  }

  .editor-grid,
  .editor-swipe-bias-grid,
  .editor-common-grid,
  .editor-group-grid {
    grid-template-columns: 1fr;
  }

  .editor-ui-search-grid,
  .editor-ui-search-region-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-hero,
  .dashboard-toolbar,
  .panel-workflow-hero {
    align-items: stretch;
  }

  .dashboard-hero,
  .panel-workflow-hero {
    flex-direction: column;
  }

  .dashboard-toolbar,
  .dashboard-stats-grid,
  .panel-workflow-tabs {
    grid-template-columns: 1fr;
  }
}