.squareoff-wrap {
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.squareoff-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sqf-algo-picker { position: relative; }

#sqf-algo-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  text-align: left;
}
#sqf-algo-btn:hover { border-color: #58a6ff; }
.sqf-caret { color: #6e7681; font-size: 0.7rem; }

.sqf-algo-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px;
  width: 320px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sqf-algo-popup input[type=text] {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.sqf-algo-popup-actions {
  display: flex;
  gap: 6px;
}
.sqf-algo-popup-actions button {
  flex: 1;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.74rem;
  cursor: pointer;
}
.sqf-algo-popup-actions button:hover { border-color: #58a6ff; }
#sqf-algo-options {
  overflow-y: auto;
  flex: 1;
}
.sqf-algo-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 0.80rem;
  color: #c9d1d9;
  cursor: pointer;
  border-radius: 4px;
}
.sqf-algo-option:hover { background: #161b22; }
.sqf-algo-option input { accent-color: #58a6ff; }

.sqf-summary {
  color: #8b949e;
  font-size: 0.78rem;
}

.sqf-execute-btn {
  background: #da3633;
  border: 1px solid #f85149;
  color: white;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.sqf-execute-btn:hover:not(:disabled) { background: #f85149; }
.sqf-execute-btn:disabled {
  background: #30363d;
  border-color: #30363d;
  color: #6e7681;
  cursor: not-allowed;
}

#sqf-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sqf-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
}

.sqf-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  background: #0d1117;
}
.sqf-card-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: #c9d1d9;
}
.sqf-card-count {
  color: #8b949e;
  font-size: 0.76rem;
}
.sqf-card-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.sqf-card-actions button {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}
.sqf-card-actions button:hover { border-color: #58a6ff; color: #c9d1d9; }
.sqf-card-remove {
  color: #6e7681;
  font-size: 1.05rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}
.sqf-card-remove:hover { color: #f85149; }

.sqf-clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.80rem;
}
.sqf-clients-table th {
  background: #0d1117;
  color: #8b949e;
  font-weight: 500;
  text-align: left;
  padding: 6px 12px;
  border-bottom: 1px solid #21262d;
}
.sqf-clients-table td {
  padding: 5px 12px;
  border-bottom: 1px solid #161b22;
  color: #c9d1d9;
}
.sqf-clients-table tr:last-child td { border-bottom: none; }
.sqf-clients-table tr.dimmed td {
  color: #6e7681;
  text-decoration: line-through;
}
.sqf-clients-table tr {
  cursor: pointer;
}
.sqf-clients-table tr:hover { background: #1c2129; }
.sqf-chk-col { width: 30px; text-align: center; }
.sqf-clients-table input[type=checkbox] { accent-color: #58a6ff; }

.sqf-empty {
  color: #6e7681;
  text-align: center;
  padding: 30px;
  font-size: 0.84rem;
}

.sqf-result {
  margin-top: 16px;
}
.sqf-result-summary {
  font-size: 0.84rem;
  color: #c9d1d9;
  margin-bottom: 8px;
}
.sqf-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.sqf-result-row.ok { border-color: #2ea04333; }
.sqf-result-row.fail { border-color: #f8514933; }
.sqf-result-badge {
  font-weight: 600;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
}
.sqf-result-badge.ok { background: #2ea04333; color: #3fb950; }
.sqf-result-badge.fail { background: #f8514933; color: #f85149; }
.sqf-result-meta { color: #8b949e; font-size: 0.74rem; }