/* SignalSolid UI v3 secure workflow surfaces */
.ss3-action-page {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 58px 0 82px;
}
.ss3-action-card {
  position: relative;
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid var(--ss3-border);
  border-radius: var(--ss3-radius-lg);
  background: var(--ss3-surface);
  box-shadow: var(--ss3-shadow-md);
  overflow: hidden;
}
.ss3-action-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -150px;
  top: -150px;
  border: 1px solid var(--ss3-border);
  border-radius: 50%;
  box-shadow: 0 0 0 50px color-mix(in srgb, var(--ss3-border), transparent 65%);
  pointer-events: none;
}
.ss3-action-card > * { position: relative; z-index: 1; }
.ss3-action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--ss3-primary), transparent 62%);
  border-radius: 15px;
  background: var(--ss3-primary-soft);
  color: var(--ss3-primary);
  font-size: 1rem;
}
.ss3-action-icon--danger {
  border-color: color-mix(in srgb, var(--ss3-red), transparent 62%);
  background: var(--ss3-red-soft);
  color: var(--ss3-red);
}
.ss3-action-card h1 {
  max-width: 650px;
  margin: 11px 0 12px;
  color: var(--ss3-text);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.ss3-action-card > p {
  margin: 0;
  color: var(--ss3-muted);
  font-size: .78rem;
  line-height: 1.72;
}
.ss3-action-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}
.ss3-action-summary > div {
  padding: 14px;
  border: 1px solid var(--ss3-border);
  border-radius: 12px;
  background: var(--ss3-surface-2);
}
.ss3-action-summary span,
.ss3-action-summary strong { display: block; }
.ss3-action-summary span { color: var(--ss3-muted-2); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ss3-action-summary strong { margin-top: 6px; color: var(--ss3-text-soft); font-size: .7rem; overflow-wrap: anywhere; }
.ss3-secret-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 24px 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ss3-primary), transparent 55%);
  border-radius: 14px;
  background: var(--ss3-primary-soft);
}
.ss3-secret-box code {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--ss3-border);
  border-radius: 10px;
  background: var(--ss3-bg-elevated);
  color: var(--ss3-text);
  font: 750 clamp(.72rem, 2vw, .92rem)/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.ss3-workflow-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--ss3-blue), transparent 68%);
  border-radius: 12px;
  background: var(--ss3-blue-soft);
  color: var(--ss3-muted);
  font-size: .66rem;
  line-height: 1.6;
}
.ss3-workflow-note i { margin-top: 2px; color: var(--ss3-blue); }
.ss3-workflow-note--warning {
  border-color: color-mix(in srgb, var(--ss3-amber), transparent 68%);
  background: var(--ss3-amber-soft);
}
.ss3-workflow-note--warning i { color: var(--ss3-amber); }
.ss3-workflow-note--danger {
  border-color: color-mix(in srgb, var(--ss3-red), transparent 68%);
  background: var(--ss3-red-soft);
}
.ss3-workflow-note--danger i { color: var(--ss3-red); }
.ss3-file-meta {
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid var(--ss3-border);
  border-radius: 8px;
  background: var(--ss3-surface-2);
  color: var(--ss3-muted);
  font-size: .58rem;
  overflow-wrap: anywhere;
}
.ss3-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ss3-danger-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid color-mix(in srgb, var(--ss3-red), transparent 50%);
  border-radius: 12px;
  background: var(--ss3-red-soft);
  color: var(--ss3-red);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.ss3-danger-button:hover { border-color: var(--ss3-red); background: color-mix(in srgb, var(--ss3-red-soft), var(--ss3-red) 7%); }
.ss3-danger-button:disabled { opacity: .58; cursor: wait; }
.ss3-copy-button.is-copied { border-color: var(--ss3-green) !important; background: var(--ss3-green-soft) !important; color: var(--ss3-green) !important; }

@media (max-width: 620px) {
  .ss3-action-page { width: min(100% - 22px, 760px); padding-top: 24px; }
  .ss3-action-card { padding: 24px 19px; }
  .ss3-action-summary { grid-template-columns: 1fr; }
  .ss3-secret-box { grid-template-columns: 1fr; }
  .ss3-secret-box .ss-button { width: 100%; }
  .ss3-confirm-actions { display: grid; }
  .ss3-confirm-actions > * { width: 100%; }
}