:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #14181d;
  --surface: #1b2026;
  --line: #2b323a;
  --text: #f1f3f5;
  --muted: #929ca7;
  --orange: #ff913f;
  --green: #78d5a0;
  --red: #ff8585;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 50% -24%, #29221c 0%, var(--bg) 50%);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.shell { width: min(850px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 0 27px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:11px; color:var(--text); font-size:12px; font-weight:800; letter-spacing:.13em; text-decoration:none; }
.mark { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--orange); border-radius:9px; color:var(--orange); font-size:16px; }
.wordmark-muted,.secure-indicator { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.secure-indicator { display:flex; align-items:center; gap:8px; }
.secure-indicator i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px #78d5a088; }
.intro { max-width:670px; padding:49px 0 29px; }
.eyebrow { color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:13px 0 15px; font-size:clamp(42px,7vw,66px); line-height:1.03; letter-spacing:-.055em; font-weight:760; }
h1 span { color:var(--orange); }
.intro p,.stage-heading p { max-width:620px; margin:6px 0 0; color:var(--muted); font-size:14px; }
.trust-points { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; color:#aab4bd; font-size:11px; }
.trust-points span { display:flex; align-items:center; gap:7px; }
.trust-points i { color:var(--green); font-style:normal; font-weight:800; }
.workflow { margin:0 0 24px; }
.progress-track { height:3px; overflow:hidden; border-radius:8px; background:#252c33; }
#progressFill { width:0; height:100%; background:linear-gradient(90deg,var(--orange),var(--green)); transition:width .55s cubic-bezier(.2,.8,.2,1); }
.steps { display:flex; justify-content:space-between; padding-top:12px; }
.step { display:flex; align-items:center; gap:9px; color:#646e78; font-size:12px; transition:color .3s ease; }
.step b { font-size:10px; letter-spacing:.1em; }
.step.active { color:var(--orange); }
.step.done { color:var(--green); }
.stage {
  position:relative;
  margin:0 0 15px;
  padding:clamp(19px,3.8vw,29px);
  border:1px solid #343b43;
  border-radius:17px;
  background:#14181d;
  box-shadow:0 14px 42px #0003;
  scroll-margin-top:25px;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .35s ease,filter .35s ease;
}
.stage.current {
  background:linear-gradient(145deg,#28221e,#1c1d20 72%);
  border-color:#a96536;
  box-shadow:0 16px 48px #0005,0 0 0 1px #ff913f20;
  opacity:1;
  filter:none;
}
.stage.complete {
  background:linear-gradient(145deg,#17231d,#151c19 78%);
  border-color:#37664a;
  box-shadow:0 12px 34px #0003, inset 3px 0 0 #69c78f;
  opacity:1;
  filter:none;
}
.stage.locked {
  background:#11151a;
  border-color:#252b32;
  opacity:.58;
  filter:saturate(.55);
}
.stage.locked .stage-content { pointer-events:none; }
.stage.highlight-pulse { animation:stagePulse .95s ease; }
@keyframes stagePulse {
  0% { box-shadow:0 0 0 0 #ff913f55,0 18px 55px #0007; }
  45% { box-shadow:0 0 0 5px #ff913f22,0 18px 55px #0007; }
  100% { box-shadow:0 16px 48px #0005,0 0 0 1px #ff913f20; }
}
.stage-top { display:flex; align-items:center; gap:16px; }
.stage-number { display:grid; place-items:center; flex:0 0 42px; height:42px; border:1px solid #514237; border-radius:12px; color:var(--orange); font-size:12px; font-weight:800; transition:all .3s ease; }
.stage.current .stage-number { background:#38271c; border-color:#a96536; color:#ffb278; }
.stage.complete .stage-number { background:#1d3828; border-color:#43835b; color:var(--green); }
.stage-heading { flex:1; min-width:0; }
.stage-heading h2 { margin:3px 0 0; font-size:22px; letter-spacing:-.035em; }
.stage-state { color:#87919b; font-size:9px; letter-spacing:.12em; white-space:nowrap; }
.stage.current .stage-state { color:var(--orange); }
.stage.complete .stage-state { color:var(--green); }
.stage-content { margin:24px 0 0 58px; }
label { display:block; margin-bottom:9px; color:#d9dee3; font-size:12px; font-weight:650; }
textarea {
  display:block; width:100%; min-height:168px; resize:vertical; outline:none;
  padding:15px; border:1px solid #39434d; border-radius:10px;
  background:#0d1115; color:var(--text);
  font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
textarea:focus { border-color:#bb793f; box-shadow:0 0 0 3px #ff913f1c; }
textarea::placeholder { color:#65717d; }
textarea:disabled { opacity:.72; cursor:not-allowed; }
.field-foot { display:flex; justify-content:space-between; gap:12px; margin-top:9px; color:#7f8a95; font-size:10px; }
.actions { display:flex; gap:10px; margin-top:19px; }
.button {
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:43px; padding:11px 17px; border:1px solid transparent; border-radius:9px;
  font-family:inherit; font-size:12px; font-weight:750; line-height:1.2; letter-spacing:.01em; cursor:pointer;
  transition:transform .18s,background .2s,border-color .2s,opacity .2s,box-shadow .2s;
}
.button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 7px 20px #0004; }
.button:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.primary { color:#1d1209; background:var(--orange); }
.primary:hover:not(:disabled) { background:#ffab68; }
.secondary { color:var(--text); background:#222930; border-color:#3c4650; }
.secondary:hover:not(:disabled) { border-color:#788590; }
.button-arrow { font-size:15px; transition:transform .2s; }
.primary:hover:not(:disabled) .button-arrow { transform:translate(2px,-2px); }
.button-label { display:inline-block; transition:opacity .12s,transform .12s; }
.button-label.label-changed { animation:labelPop .2s ease; }
@keyframes labelPop { 0% { opacity:.45; transform:translateY(3px); } 100% { opacity:1; transform:translateY(0); } }
.is-working .button-label { opacity:.7; }

.live-status {
  display:flex; align-items:center; gap:9px; margin-top:13px;
  color:#8c98a3; font-size:10px; transition:color .2s ease;
}
.live-dot {
  width:7px; height:7px; flex:0 0 7px; border-radius:50%;
  background:#87919b; box-shadow:0 0 0 3px #87919b18;
}
.live-status.working { color:#e6b184; }
.live-status.working .live-dot {
  background:var(--orange); box-shadow:0 0 0 3px #ff913f22;
  animation:livePulse 1.1s ease-in-out infinite;
}
.live-status.ready { color:#9ddbb1; }
.live-status.ready .live-dot {
  background:var(--green); box-shadow:0 0 0 3px #78d5a022;
}
.live-status.failed { color:#ff9b9b; }
.live-status.failed .live-dot { background:var(--red); }
@keyframes livePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.45; transform:scale(.82); }
}

.notice { margin-top:14px; padding:11px 13px; border:1px solid #30483a; border-radius:8px; background:#17221b; color:#a9d5b7; font-size:11px; }
.notice.error { border-color:#63383a; background:#291a1c; color:#ffb0b0; }
.hidden { display:none!important; }
.ciphertext { min-height:190px; color:#c9d9d0; font-size:12px; }
.encrypted-summary { display:flex; align-items:center; gap:11px; margin-bottom:20px; padding:12px 14px; border:1px solid #315b40; border-radius:10px; background:#18251d; }
.encrypted-check { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:50%; background:#254b33; color:#9de0b2; font-weight:850; }
.encrypted-summary strong { font-size:12px; color:#c5efd1; }
.encrypted-summary p { margin:2px 0 0; color:#93b49d; font-size:10px; }
.manual-fallback { margin-top:18px; border-top:1px solid #303941; padding-top:13px; }
.manual-fallback summary { width:fit-content; color:#b4bec7; font-size:11px; cursor:pointer; }
.manual-fallback summary:hover { color:var(--orange); }
.manual-fallback p { max-width:600px; margin:10px 0 12px; color:var(--muted); font-size:11px; }
.fallback-actions { display:flex; align-items:center; flex-wrap:wrap; gap:13px; }
.fallback-actions .button { min-height:37px; padding:9px 13px; }
.text-link { color:#d6a77f; font-size:11px; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.delivery-card { display:flex; align-items:flex-start; gap:13px; padding:16px; border:1px solid #3d454d; border-radius:11px; background:#191f25; }
.delivery-icon { display:grid; place-items:center; flex:0 0 35px; height:35px; border-radius:9px; background:#3a291e; color:#ffb278; font-size:19px; }
.delivery-card strong { font-size:12px; }
.delivery-card p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.send-button { min-width:190px; }
.success-panel { display:flex; align-items:center; gap:14px; margin-top:18px; padding:18px; border:1px solid #376b4b; border-radius:11px; background:#17251c; animation:rise .35s ease both; }
.success-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#245235; color:#a6e8ba; font-weight:850; }
.success-panel strong { color:#c6efd1; font-size:13px; }
.success-panel p { margin:3px 0 0; color:#a0bba8; font-size:11px; }
.text-button { margin-top:15px; padding:5px 0; border:0; background:none; color:#b9c2ca; cursor:pointer; font-size:11px; }
.text-button:hover { color:var(--orange); }
footer { padding-top:25px; }
.footer-line { height:1px; margin-bottom:15px; background:var(--line); }
.footer-content { display:flex; justify-content:space-between; gap:15px; color:#78838d; font-size:9px; letter-spacing:.11em; }
.disclaimer { max-width:700px; margin-top:13px; color:#69747e; font-size:10px; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:650px) {
  .shell { width:min(100% - 28px,850px); padding-top:19px; }
  .secure-indicator { font-size:8px; }
  .intro { padding:38px 0 25px; }
  .stage-top { align-items:flex-start; gap:11px; }
  .stage-number { flex-basis:35px; height:35px; }
  .stage-state { font-size:8px; }
  .stage-content { margin-left:0; }
  .field-foot,.footer-content { flex-direction:column; gap:5px; }
  .actions { flex-direction:column; align-items:stretch; }
  .actions .button { width:100%; }
  .fallback-actions { align-items:stretch; flex-direction:column; }
  .text-link { padding:5px 0; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* V5: the live ciphertext is a preview; explicit user action advances the workflow. */
.live-status.preview { color:#e5b17f; }
.live-status.preview .live-dot {
  background:var(--orange);
  box-shadow:0 0 0 3px #ff913f20;
}
.encrypt-actions { align-items:center; flex-wrap:wrap; }
.encrypt-actions .button { min-width:190px; }
.encrypt-hint { color:#87919b; font-size:10px; }
.stage.locked .stage-content { pointer-events:none; }

.encrypted-check.preview-mark {
  background:#3a291e;
  color:#ffb278;
}
.encrypted-check.preview-mark.confirmed {
  background:#245235;
  color:#a6e8ba;
}

.encrypted-check.preview-mark {
  background:#3a291e;
  color:#ffb278;
}
.encrypted-check.preview-mark.confirmed {
  background:#245235;
  color:#a6e8ba;
}