/* Fogo Wallet UI · ported from @fogo/sessions-sdk-react 0.1.17
 * Mirrors the official Fogo session button + panel pixel-for-pixel.
 * Brand: #ff3d00 orange, #66ceff accent, "Funnel Display" font.
 */
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");

/* ─────────────────  Connect button (12rem x 2.5rem)  ───────────────── */
.fw-btn,
.fw-btn::before,
.fw-btn::after {
  box-sizing: border-box;
}
.fw-btn {
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color-scheme: dark;
  width: 12rem;
  height: 2.5rem;
  padding: 0.25rem;
  display: inline-flex;
  flex-flow: row nowrap;
  gap: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  background-color: #333;
  outline: 2px solid transparent;
  outline-offset: 0.125rem;
  align-items: center;
  transition: background-color 50ms linear, outline-color 50ms linear;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}
.fw-btn:hover { background-color: #404144; }
.fw-btn:active { background-color: #3a3a3b; }
.fw-btn:focus-visible { outline-color: #66ceff; }
.fw-btn[data-fw-open=""] { background-color: #3a3a3b; }

.fw-btn[data-fw-compact=""] {
  width: auto;
  padding-right: 0.75rem;
}

.fw-btn .fw-logo-wrap {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  border-radius: 0.25rem;
  background-color: #ff3d00;
  transition: background-color 50ms linear;
}
.fw-btn .fw-logo-wrap .fw-logo {
  width: 0.7rem;
  height: 1rem;
  color: #fff;
  fill: currentColor;
  transition: opacity 50ms linear;
}
.fw-btn .fw-contents {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  flex-grow: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fw-btn[data-fw-signed-out=""] .fw-contents {
  font-family: "Funnel Display", sans-serif;
  letter-spacing: 0;
}
.fw-btn .fw-arrow {
  width: 1.5rem;
  display: none;
  place-content: center;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 300ms;
  transform-origin: center;
}
.fw-btn[data-fw-signed-in=""] .fw-arrow { display: grid; }
.fw-btn[data-fw-signed-in=""][data-fw-open=""] .fw-arrow { transform: rotateX(180deg); }
.fw-btn .fw-arrow svg { width: 1rem; height: 1rem; fill: currentColor; }
.fw-btn .fw-lock {
  font-size: 1rem;
  color: #fff;
  width: 1rem;
  height: 1rem;
}

/* Pending (spinner ring around logo) */
.fw-btn[data-fw-pending=""] {
  cursor: wait;
  background-color: rgba(185, 186, 217, 0.25);
}
.fw-btn[data-fw-pending=""] .fw-contents {
  color: rgba(185, 186, 217, 0.45);
}
.fw-btn[data-fw-pending=""] .fw-logo-wrap {
  background: transparent;
  position: relative;
}
.fw-btn[data-fw-pending=""] .fw-logo-wrap::after {
  content: "";
  display: block;
  border: 1px solid rgba(185, 186, 217, 0.45);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: fw-spin 1s linear infinite;
  position: absolute;
  inset: 0.5rem;
}
.fw-btn[data-fw-pending=""] .fw-logo { opacity: 0; }
@keyframes fw-spin {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(40deg); }
  80%  { transform: rotate(320deg); }
  100% { transform: rotate(360deg); }
}

/* ─────────────────  Sign-in modal (when not connected)  ───────────────── */
.fw-modal-overlay,
.fw-modal-overlay::before,
.fw-modal-overlay::after {
  box-sizing: border-box;
}
.fw-modal-overlay {
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  color-scheme: dark;
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100dvw;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: start;
  overflow: auto;
  z-index: 999997;
}
.fw-modal-overlay[data-fw-show=""] { display: grid; }
.fw-modal-overlay *::selection { color: #000; background: #66ceff; }
.fw-modal {
  margin-top: min(10dvh, 10rem);
  margin-bottom: min(10dvh, 10rem);
  background-color: #1f1f24;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #33333d;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
  width: 23.5rem;
  max-width: 90dvw;
  color: rgba(255, 255, 255, 0.9);
  display: grid;
  gap: 1.5rem;
  position: relative;
  animation: fw-modal-in 0.18s ease-out;
}
@keyframes fw-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fw-modal .fw-heading {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Funnel Display", sans-serif;
}
.fw-modal .fw-msg {
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.8);
}
.fw-modal .fw-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-content: center;
  background-color: transparent;
  border: none;
  border-radius: 0.375rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  font-family: inherit;
  transition: background-color 50ms linear;
}
.fw-modal .fw-close:hover { background-color: rgba(185, 186, 217, 0.1); }

/* wallet list */
.fw-modal .fw-wallets {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}
.fw-wallet {
  height: 2.5rem;
  padding: 0 0.75rem;
  background-color: transparent;
  border: 1px solid #3e3e47;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Funnel Display", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 50ms linear, border-color 50ms linear;
  flex-shrink: 0;
}
.fw-wallet:hover  { background-color: rgba(185, 186, 217, 0.1); border-color: #4a4a55; }
.fw-wallet:active { background-color: rgba(195, 196, 213, 0.05); }
.fw-wallet[data-fw-not-installed=""] { opacity: 0.55; }
.fw-wallet .fw-wallet-left {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  align-items: center;
}
.fw-wallet .fw-wallet-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  display: inline-grid;
  place-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
}
.fw-wallet .fw-wallet-tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
  background-color: rgba(185, 186, 217, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.fw-wallet .fw-wallet-tag[data-fw-recommended=""] {
  background-color: rgba(255, 61, 0, 0.16);
  color: #ff8a5c;
}
.fw-wallet .fw-wallet-tag[data-fw-detected=""] {
  background-color: rgba(102, 206, 255, 0.16);
  color: #66ceff;
}

.fw-modal .fw-legal {
  font-size: 0.75rem;
  font-weight: 300;
  margin: 0;
  text-align: center;
  width: 15rem;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.65);
  line-height: 140%;
}
.fw-modal .fw-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ─────────────────  Connected panel (popover-style)  ───────────────── */
.fw-panel-overlay {
  box-sizing: border-box;
  font-family: "Funnel Display", sans-serif;
  color-scheme: dark;
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100dvw;
  display: none;
  z-index: 999996;
}
.fw-panel-overlay[data-fw-show=""] { display: block; }
.fw-panel-overlay .fw-panel-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.fw-panel {
  position: absolute;
  width: 22rem;
  max-width: calc(100vw - 16px);
  height: 37rem;
  max-height: 80dvh;
  top: 80px;
  right: 16px;
  background: #1f1f24;
  border: 1px solid #33333d;
  border-radius: 0.75rem;
  display: grid;
  grid-template-rows: 3rem 1fr 3rem;
  overflow: hidden;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.9);
  animation: fw-panel-in 200ms ease-out;
}
@keyframes fw-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .fw-panel {
    width: 100%;
    height: auto;
    max-height: 85dvh;
    top: unset;
    right: 0;
    bottom: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    border-bottom: none;
    animation: fw-panel-up 280ms cubic-bezier(.2,.7,.3,1);
  }
  @keyframes fw-panel-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

.fw-panel .fw-header {
  border-bottom: 1px solid #3e3e47;
  display: flex;
  flex-flow: row nowrap;
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  gap: 0.6rem;
  align-items: center;
  background: linear-gradient(180deg, #1f1f24 0%, #1a1a1f 100%);
}
.fw-panel .fw-title-badge {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, #ff3d00 0%, #ff6638 100%);
  display: inline-grid;
  place-content: center;
  box-shadow: 0 1px 6px rgba(255,61,0,.35), inset 0 -1px 0 rgba(0,0,0,.18);
}
.fw-panel .fw-title-badge .fw-logo {
  width: 0.85rem;
  height: 1.2rem;
  color: #fff;
  fill: currentColor;
  display: block;
}
.fw-panel .fw-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  flex-grow: 1;
  font-family: "Funnel Display", sans-serif;
  letter-spacing: -0.01em;
  line-height: 1;
}
.fw-panel .fw-panel-close {
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.25rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  display: inline-grid;
  place-content: center;
  transition: background-color 50ms linear;
}
.fw-panel .fw-panel-close:hover { background-color: rgba(185, 186, 217, 0.1); }

.fw-panel .fw-tab-panel {
  overflow: auto;
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.85rem;
}

/* Balance card (hero on the connected panel) */
.fw-panel .fw-balance-card {
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  background-color: #1a1a1f;
  background-image: linear-gradient(180deg, rgba(255,61,0,0.10) 0%, rgba(255,61,0,0) 100%);
  border: 1px solid #3e3e47;
  display: block;
}
.fw-panel .fw-balance-label {
  display: block;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.55rem 0;
}
.fw-panel .fw-balance-label .fw-logo-mini { margin-right: 0.4rem; vertical-align: middle; }
.fw-panel .fw-logo-mini {
  width: 0.7rem;
  height: 1rem;
  color: #ff3d00;
  display: inline-flex;
  align-items: center;
}
.fw-panel .fw-logo-mini .fw-logo {
  width: 0.7rem; height: 1rem; fill: currentColor;
}
.fw-panel .fw-balance-amount {
  display: block;
  font-family: "Funnel Display", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffb38c;
  line-height: 1.25;
  margin: 0 0 0.65rem 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.fw-panel .fw-balance-addr {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.fw-panel .fw-balance-addr code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
}
.fw-panel .fw-balance-addr .fw-copy {
  margin-left: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}

.fw-panel .fw-section-label {
  font-size: 0.65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #2a2a32;
  font-weight: 500;
}

/* Session pill grid */
.fw-panel .fw-session-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.fw-panel .fw-pill {
  background: rgba(185, 186, 217, 0.05);
  border: 1px solid #2a2a32;
  border-radius: 0.5rem;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  position: relative;
  transition: border-color 80ms linear;
}
.fw-panel .fw-pill:hover { border-color: #3e3e47; }
.fw-panel .fw-pill .fw-pill-label {
  font-size: 0.62rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.fw-panel .fw-pill .fw-pill-val {
  font-size: 0.82rem;
  font-family: "Funnel Display", sans-serif;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fw-panel .fw-pill .fw-pill-dot {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: #ff3d00;
  box-shadow: 0 0 6px rgba(255,61,0,.6);
}
.fw-panel .fw-pill .fw-status-dot {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: #38e97c;
  box-shadow: 0 0 0 3px rgba(56,233,124,.16);
  animation: fw-dot-pulse 2s ease-in-out infinite;
}
.fw-panel .fw-pill-net .fw-pill-val { color: #ff8a5c; }
.fw-panel .fw-pill-status .fw-pill-val { color: #38e97c; }

/* Tokens list */
.fw-panel .fw-tokens-list {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.4rem;
}
.fw-panel .fw-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  background: rgba(185, 186, 217, 0.05);
  border: 1px solid #2a2a32;
  transition: background-color 80ms linear, border-color 80ms linear;
}
.fw-panel .fw-token-row:hover {
  background: rgba(185, 186, 217, 0.09);
  border-color: #3e3e47;
}
.fw-panel .fw-token-left {
  display: flex; align-items: center; gap: 0.65rem;
}
.fw-panel .fw-token-icon {
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.4rem;
  display: inline-grid;
  place-content: center;
  color: #fff;
  font-family: "Funnel Display", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}
.fw-panel .fw-token-symbol {
  font-family: "Funnel Display", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.fw-panel .fw-token-amount {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
}
.fw-panel .fw-net-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 61, 0, 0.14);
  color: #ff8a5c;
  font-size: 0.7rem;
  font-family: "Funnel Display", sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.fw-panel .fw-net-pill::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: #ff3d00;
  box-shadow: 0 0 6px rgba(255,61,0,.7);
}
.fw-panel .fw-status-on {
  color: #38e97c !important;
  display: flex; align-items: center; gap: 0.35rem;
}
.fw-panel .fw-status-dot {
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: #38e97c;
  box-shadow: 0 0 0 3px rgba(56,233,124,.16);
  animation: fw-dot-pulse 2s ease-in-out infinite;
}
@keyframes fw-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(56,233,124,.16); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(56,233,124,.06); }
}
.fw-panel .fw-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #2a2a32;
  font-size: 0.875rem;
}
.fw-panel .fw-row:last-of-type { border-bottom: none; }
.fw-panel .fw-row .fw-row-label {
  color: rgba(255, 255, 255, 0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fw-panel .fw-row .fw-row-value {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  display: flex;
  flex-flow: row nowrap;
  gap: 0.5rem;
  align-items: center;
}
.fw-panel .fw-row .fw-row-value code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.95);
}
.fw-panel .fw-row .fw-row-value a {
  color: #66ceff;
  text-decoration: none;
  font-size: 0.8rem;
}
.fw-panel .fw-row .fw-row-value a:hover { text-decoration: underline; }
.fw-panel .fw-copy {
  background-color: rgba(185, 186, 217, 0.12);
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-family: ui-monospace, Menlo, monospace;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 50ms linear;
}
.fw-panel .fw-copy:hover { background-color: rgba(102, 206, 255, 0.16); color: #66ceff; }

.fw-panel .fw-action-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.fw-panel .fw-action {
  height: 4rem;
  background-color: rgba(185, 186, 217, 0.08);
  border: 1px solid #3e3e47;
  border-radius: 0.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Funnel Display", sans-serif;
  cursor: pointer;
  transition: background-color 50ms linear, border-color 50ms linear;
}
.fw-panel .fw-action:hover {
  background-color: rgba(185, 186, 217, 0.14);
  border-color: #4a4a55;
}
.fw-panel .fw-action[data-fw-disabled=""] { opacity: 0.4; cursor: not-allowed; }
.fw-panel .fw-action-emoji {
  font-size: 1.25rem;
  line-height: 1;
}

.fw-panel .fw-footer {
  border-top: 1px solid #3e3e47;
  background: #141418;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  padding-left: 1rem;
  gap: 0.5rem;
}
.fw-panel .fw-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  font-family: "Funnel Display", sans-serif;
}
.fw-panel .fw-footer-brand .fw-logo {
  width: 0.6rem;
  height: 0.85rem;
  color: #ff3d00;
  fill: currentColor;
}
.fw-panel .fw-logout {
  background-color: transparent;
  border: 1px solid #3e3e47;
  color: #ff5227;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: "Funnel Display", sans-serif;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 50ms linear, border-color 50ms linear;
}
.fw-panel .fw-logout:hover {
  background-color: rgba(255, 82, 39, 0.12);
  border-color: rgba(255, 82, 39, 0.5);
}

/* ─────────────────  Toast  ───────────────── */
.fw-toast-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  z-index: 999999;
  pointer-events: none;
  font-family: "Funnel Display", sans-serif;
}
.fw-toast {
  background: #1f1f24;
  border: 1px solid #3e3e47;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: fw-toast-in 200ms ease-out;
}
.fw-toast.fw-toast-success { border-color: #38e97c; }
.fw-toast.fw-toast-error { border-color: #ff5227; }
@keyframes fw-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fw-toast.fw-fade { opacity: 0; transition: opacity 250ms; }

@media (max-width: 640px) {
  .fw-btn { width: auto; padding-right: 0.75rem; }
  .fw-toast-stack { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; }
  .fw-toast { font-size: 0.8rem; }
  .fw-modal { padding: 1.25rem; gap: 1.25rem; }
}