/* =========================================================
   TWEAKS PANEL
   ========================================================= */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 300px;
  padding: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--gold-dim);
  z-index: 100;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform 300ms var(--ease-cinema), opacity 300ms;
}
.tweaks-panel.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tweaks-panel h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--gold-hi); text-transform: uppercase; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.tweaks-panel h6 .x { font-size: 16px; color: var(--gold-dim); cursor: pointer; }
.tweaks-panel .tweak { margin-bottom: 16px; }
.tweaks-panel .tweak label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--gold-dim); display: block; margin-bottom: 6px; text-transform: uppercase; }
.tweaks-panel input[type="range"] { width: 100%; accent-color: var(--gold); }
.tweaks-panel input[type="checkbox"] { accent-color: var(--gold); }
.tweaks-panel .value { color: var(--gold-hi); float: right; font-family: var(--serif); font-style: italic; }

/* =========================================================
   TOKEN TOP-BAR BUTTON
   ========================================================= */
.sys-link-inline.tokenbtn {
  background: none; border: 1px solid rgba(232,196,124,0.3);
  color: var(--gold-hi); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; padding: 4px 10px; cursor: pointer;
  border-radius: 2px; transition: all 160ms ease;
}
.sys-link-inline.tokenbtn:hover {
  background: rgba(232,196,124,0.08);
  border-color: rgba(232,196,124,0.55);
}

/* =========================================================
   LINKLIKE (alt CTA primitive)
   ========================================================= */
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gold-hi); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px dashed rgba(232,196,124,0.4);
  transition: color 160ms ease, border-color 160ms ease;
}
.linklike:hover { color: #F4D78A; border-color: rgba(232,196,124,0.8); }

/* =========================================================
   TOAST
   ========================================================= */
.bg-toast-region {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 500; pointer-events: none;
  width: max-content; max-width: min(440px, 92vw);
}
.bg-toast {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  pointer-events: auto;
  background: rgba(20, 14, 8, 0.97);
  border: 1px solid rgba(232,196,124,0.4);
  color: var(--parchment);
  padding: 12px 14px 12px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  border-radius: 2px;
  animation: toastIn 360ms var(--ease-out-long) both;
}
.bg-toast .bg-toast-mark {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--serif); font-style: italic;
}
.bg-toast .bg-toast-msg { flex: 1 1 auto; }
.bg-toast .bg-toast-x {
  flex: 0 0 auto; color: inherit; opacity: 0.6;
  font-size: 14px; line-height: 1; padding: 2px 4px;
  transition: opacity 160ms;
}
.bg-toast .bg-toast-x:hover { opacity: 1; }
.bg-toast .bg-toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; transform-origin: left;
  background: currentColor; opacity: 0.5;
  animation: toastBar 4000ms linear both;
}
.bg-toast.ok { border-color: rgba(232,196,124,0.6); color: var(--gold-hi); }
.bg-toast.ok .bg-toast-mark { background: rgba(232,196,124,0.15); color: var(--gold-hi); }
.bg-toast.err { border-color: rgba(224,123,107,0.6); color: #E07B6B; }
.bg-toast.err .bg-toast-mark { background: rgba(224,123,107,0.15); color: #E07B6B; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastBar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}