/* Redox-specific styles; shared production assets stay unchanged. */
.zsa.zsa-rx { max-width: 1100px; color: #2c3e50; }
.zsa-rx h2 { font-size: 1.3rem; }
.zsa-rx h3 { font-size: 1.05rem; margin-top: 0; }
.zsa-rx .zsa-card { margin-bottom: 1.1rem; }
.zsa-rx button, .zsa-rx select, .zsa-rx input { min-height: 44px; font: inherit; }
.zsa-rx button { touch-action: manipulation; }
.zsa-rx button:disabled { opacity: .45; cursor: default; }
.zsa-rx-formula { white-space: nowrap; }
.zsa-rx select, .zsa-rx input { border: 1px solid #879faf; border-radius: 8px; padding: .5rem; background: white; color: #2c3e50; }
.zsa-rx select { max-width: 100%; min-width: 0; }
.zsa-rx button:focus-visible, .zsa-rx select:focus-visible, .zsa-rx input:focus-visible { outline: 3px solid #ad6500; outline-offset: 3px; }
.zsa-rx .zsa-btn--primary { background: #3498db; border-color: #2474a8; color: #102a3d; font-weight: 750; }
.zsa-rx .zsa-btn--primary:hover:not(:disabled) { background: #78bce8; color: #102a3d; }
.zsa-rx-topline { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.zsa-rx-topline h2 { margin: 0 auto 0 0; }
.zsa-rx-badge { display: inline-block; background: #e7f4fc; color: #176494; border-radius: 20px; padding: .25rem .8rem; font-size: .85rem; }
.zsa-rx-small { color: #526778; font-size: .9rem; }
.zsa-rx-net { font-size: 1.4rem; padding: .8rem 0; text-align: center; }
.zsa-rx-progress { display: flex; gap: .4rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.zsa-rx-progress li { flex: 1; border-top: 5px solid #dce5ed; padding-top: .5rem; font-size: .78rem; }
.zsa-rx-progress li[aria-current] { border-color: #3498db; font-weight: 750; }
.zsa-rx-progress .zsa-rx-done { border-color: #2ecc71; }
.zsa-rx-half { border: 1px solid #cbd8e1; border-radius: 12px; padding: 1rem; margin-top: 1rem; }
.zsa-rx-equation { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: .5rem; align-items: center; }
.zsa-rx-arrow { text-align: center; font-size: 1.6rem; }
.zsa-rx-side { min-width: 0; padding: .7rem; background: #f3f7fa; border-radius: 10px; }
.zsa-rx-side-title { display: block; font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .45rem; }
.zsa-rx-tokens { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; min-height: 44px; }
.zsa-rx-token { display: inline-flex; align-items: baseline; gap: .2rem; padding: .5rem .7rem; border: 1px solid #9cb1c0; border-radius: 8px; background: white; color: #2c3e50; font-size: 1.12rem; white-space: nowrap; }
button.zsa-rx-token { cursor: pointer; }
button.zsa-rx-token:hover { background: #e7f4fc; }
.zsa-rx-token[aria-pressed="true"] { outline: 3px solid #2474a8; background: #e7f4fc; }
.zsa-rx-token[draggable="true"] { cursor: grab; }
.zsa-rx-drop { width: 100%; min-height: 65px; border: 2px dashed #829daf; border-radius: 8px; background: white; color: #2c3e50; cursor: pointer; margin-bottom: .5rem; }
.zsa-rx-drop:hover { border-color: #2474a8; background: #e7f4fc; }
.zsa-rx-tools { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.zsa-rx-tools button { padding: .4rem .6rem; }
.zsa-rx-charge { color: #176494; margin: .6rem 0 0; font-size: .9rem; }
.zsa-rx-counts { color: #526778; font-size: .85rem; margin: .5rem 0 0; }
.zsa-rx-multiplier { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.zsa-rx-multiplier input { width: 100px; }
.zsa-rx-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.zsa-rx-footer { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; align-items: center; border-top: 1px solid #dce5ed; padding-top: 1rem; margin-top: 1rem; }
.zsa-rx-footer .zsa-rx-toolbar { margin: 0; }
.zsa-rx-feedback { min-height: 3em; color: #9c352b; font-weight: 650; margin-top: 1rem; }
.zsa-rx-feedback.zsa-rx-ok { color: #16723e; }
.zsa-rx-hint { background: #edf6fc; border-left: 4px solid #3498db; padding: .75rem 1rem; border-radius: 5px; }
.zsa-rx-success { border-top: 6px solid #2ecc71; }
.zsa-rx-success h2 { color: #16723e; }
.zsa-rx-cancelled { color: #9c352b; text-align: center; animation: zsa-rx-fade 2s forwards; }
.zsa-rx-cancelled s { margin: 0 .7rem; }
.zsa-rx-shake { animation: zsa-rx-shake .28s ease-in-out; }
@keyframes zsa-rx-shake { 25%,75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes zsa-rx-fade { 0%,60% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 600px) {
  .zsa-rx-progress span { display: none; }
  .zsa-rx-equation { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: .25rem; }
  .zsa-rx-side { padding: .5rem; }
  .zsa-rx-half { padding: .6rem; }
  .zsa-rx-token { font-size: 1rem; padding: .4rem; }
  .zsa-rx-net { font-size: 1.15rem; }
  .zsa-rx-topline { align-items: stretch; }
}
@media (max-width: 360px) {
  .zsa-rx-equation { grid-template-columns: minmax(0, 1fr); }
  .zsa-rx-arrow { line-height: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zsa-rx-shake, .zsa-rx-cancelled { animation: none; }
  .zsa-rx-cancelled { display: none; }
}

/* Header, Instructions and Share match the Ionic Reaction Builder. */
.zsa-rx-header {position:relative;margin-bottom:28px;}
.zsa-rx-header-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:0 0 20px;border-bottom:1px solid #dde4ed;}
.zsa-rx-identity {display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 400px;}
.zsa-rx .zsa-rx-brand {display:inline-flex;align-items:center;flex-shrink:0;min-height:52px;min-width:52px;text-decoration:none;color:var(--zsa-navy);}
.zsa-rx-brand img {display:block;flex-shrink:0;}
.zsa-rx-header-tools {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:16px;max-width:100%;margin-left:auto;}
.zsa-rx-header-buttons {display:flex;align-items:center;gap:8px;}
.zsa-rx .zsa-rx-share-toggle {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;min-height:44px;background:white;}
.zsa-rx-icon {width:18px;height:18px;flex-shrink:0;}
.zsa-rx-instructions-open {flex-shrink:0;}
.zsa-rx h1 {min-width:0;font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem);letter-spacing:-.035em;line-height:1.15;margin:0;font-weight:650;}
.zsa-rx-share-panel {margin-top:14px;padding:20px;border:1px solid #cdd9e9;border-radius:12px;background:white;box-shadow:0 7px 20px rgba(11,42,91,.06);}
.zsa-rx-share-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px;}
.zsa-rx-share-heading h2 {font-size:18px;font-weight:600;}
.zsa-rx .zsa-rx-icon-button {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #d5deea;border-radius:8px;background:#f7f9fc;color:#425a7b;font-size:24px;padding:0;line-height:1;}
.zsa-rx-share-label {display:block;margin:14px 0 6px;font-size:12px;font-weight:600;color:#536075;}
.zsa-rx-share-link {display:flex;gap:8px;align-items:stretch;}
.zsa-rx-share-link input {display:block;flex:1 1 200px;min-width:0;min-height:46px;width:100%;border:1px solid #b8c8dc;border-radius:8px;padding:9px 11px;background:#f8fafd;color:#334e72;font-size:13px;}
.zsa-rx-share-options {display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;}
.zsa-rx-share-options a {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #d8e1ed;border-radius:8px;color:#355579;font-size:13px;text-decoration:none;background:white;}
.zsa-rx-share-options a:hover {background:#f0f5fd;}
.zsa-rx-share-status {min-height:21px;margin-top:10px!important;font-size:12px;color:#38623e;}
.zsa-rx-instructions {width:calc(100% - 32px);max-width:720px;max-height:85vh;overflow:auto;padding:24px;border:1px solid #c5d3e4;border-radius:15px;background:white;color:var(--zsa-slate);box-shadow:0 18px 60px rgba(11,42,91,.2);font-size:15px;line-height:1.6;}
.zsa-rx-instructions::backdrop {background:rgba(11,27,51,.45);}
.zsa-rx-instructions-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.zsa-rx-instructions-heading h2 {font-size:23px;line-height:1.25;font-weight:600;}
.zsa-rx-instructions-heading button {flex-shrink:0;}
.zsa-rx-instructions-steps {margin:18px 0;padding-left:23px;}
.zsa-rx-instructions-steps li {padding-left:4px;margin:12px 0;}
.zsa-rx-header-row h1 {margin:0;}
.zsa-rx-header-tools .zsa-btn {background:white;}
.zsa-rx [data-zsa-chrome][hidden], .zsa-rx-share-panel[hidden], .zsa-rx-share-options button[hidden] {display:none;}
.zsa-rx-instructions {box-sizing:border-box;}
.zsa-rx-instructions-heading h2 {margin:0;}
@media (max-width:740px) {
  .zsa-rx-identity {gap:10px;flex-basis:100%;}
  .zsa-rx .zsa-rx-brand {min-width:44px;min-height:44px;}
  .zsa-rx-brand img {width:43px;height:auto;}
  .zsa-rx-header-tools {width:100%;justify-content:flex-end;}
  .zsa-rx .zsa-rx-instructions-open, .zsa-rx .zsa-rx-share-toggle {padding:8px 10px;}
  .zsa-rx-share-panel {padding:15px;}
  .zsa-rx-share-link {flex-wrap:wrap;}
  .zsa-rx-share-link input {flex-basis:100%;}
  .zsa-rx-share-link .zsa-btn {width:100%;}
  .zsa-rx-share-options a {flex:1 1 95px;}
  .zsa-rx-instructions {padding:18px 15px;font-size:14px;}
  .zsa-rx-instructions-heading h2 {font-size:20px;}
}