/* Axiom "Share PnL" overlay — values measured from axiom.trade's own DOM. */
.ax-root {
  --ax-blue: #526fff; --ax-blue-hover: #6683ff; --ax-stroke: #22242d; --ax-stroke2: #323542;
  --ax-bg3: #18181a; --ax-tp: #fcfcfc; --ax-ts: #c8c9d1; --ax-tt: #777a8c; --ax-bg: #06070b;
  --ax-g15: rgba(107, 114, 128, .15); --ax-g20: rgba(107, 114, 128, .2); --ax-g30: rgba(107, 114, 128, .3);
  font-family: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ax-tp);
}
.ax-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; overflow-x: hidden; background: rgba(5, 5, 5, .8);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  animation: ax-fade .35s cubic-bezier(.23, .01, .32, 1) both;
}
.ax-overlay.closing { animation: ax-fade-out .25s cubic-bezier(.23, .01, .32, 1) both; }
@keyframes ax-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ax-fade-out { from { opacity: 1 } to { opacity: 0 } }
.ax-shell { margin: auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ax-zoom { display: flex; flex-direction: column; align-items: center; width: max-content; }

.ax-f1 { position: relative; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: -36px; border: 1px solid transparent; border-radius: 20px; }
.ax-f2 { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px solid transparent; border-radius: 16px; }
.ax-f3 { position: relative; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid transparent; border-radius: 8px; }
.ax-ring { pointer-events: none; position: absolute; inset: 0; border-radius: 8px; border: 1px solid var(--ax-stroke); animation: pulse-migrate 2s cubic-bezier(.4, 0, .6, 1) infinite; animation-delay: var(--delay, 0ms); }
.ax-ring.half { border-color: rgba(34, 36, 45, .5); }
@keyframes pulse-migrate { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

.ax-card { position: relative; animation: ax-card-in .45s cubic-bezier(.23, .01, .32, 1) both; }
@keyframes ax-card-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.ax-card-inner { position: relative; overflow: hidden; border-radius: 8px; }
.ax-card-edge { pointer-events: none; position: absolute; inset: 0; z-index: 10; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); }
.ax-card img.ax-shot { display: block; width: 720px; height: 480px; border-radius: 8px; }
.ax-card .ax-media { position: relative; width: 720px; height: 480px; border-radius: 8px; overflow: hidden; }
.ax-card .ax-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-card .ax-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ax-empty { display: flex; width: 720px; height: 480px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(252, 252, 252, .1); font-size: 12px; line-height: 16px; color: var(--ax-tt); }
.ax-spin { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(82, 111, 255, .2); border-top-color: var(--ax-blue); animation: ax-rot 1s linear infinite; }
@keyframes ax-rot { to { transform: rotate(360deg); } }

.ax-controls { position: relative; z-index: 10002; display: flex; width: 100%; flex-direction: column; gap: 8px; padding: 0 44px; animation: ax-ctrl-in .3s cubic-bezier(.23, .01, .32, 1) .25s both; }
@keyframes ax-ctrl-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.ax-row { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 8px; }
.ax-row3 { display: flex; min-height: 32px; height: 32px; width: 100%; flex-wrap: nowrap; align-items: center; justify-content: space-between; column-gap: 16px; row-gap: 8px; }
.ax-left { display: flex; align-items: center; gap: 16px; }
.ax-right { margin-left: auto; display: flex; gap: 8px; }

.ax-seg { display: flex; height: 32px; align-items: center; border-radius: 9999px; background: var(--ax-g15); padding: 4px; }
.ax-seg button { display: flex; height: 100%; align-items: center; gap: 8px; border-radius: 9999px; padding: 0 10px 0 8px; font-size: 14px; font-weight: 500; line-height: 21px; border: 0; background: transparent; color: rgba(255, 255, 255, .5); transition: all .125s ease-in-out; }
.ax-seg button:hover { color: rgba(255, 255, 255, .8); }
.ax-seg button.on { background: var(--ax-g30); color: rgba(255, 255, 255, .8); }
.ax-seg i { font-size: 14px; }

.ax-btn { display: flex; height: 32px; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; background: var(--ax-g15); padding: 0 10px 0 8px; border: 0; transition: all .125s ease-in-out; color: rgba(255, 255, 255, .8); }
.ax-btn:hover { background: var(--ax-g20); }
.ax-btn.pill { border-radius: 9999px; }
.ax-btn i { font-size: 14px; color: rgba(255, 255, 255, .8); }
.ax-btn span { font-size: 14px; font-weight: 500; line-height: 21px; color: rgba(255, 255, 255, .8); }
.ax-btn[disabled] { cursor: not-allowed; opacity: .6; }
.ax-switch { display: flex; height: 14px; width: 24px; align-items: center; border-radius: 9999px; padding: 2px; background: rgba(255, 255, 255, .3); transition: background-color .15s ease-in-out; }
.ax-switch.on { background: var(--ax-blue); }
.ax-switch b { height: 10px; width: 10px; border-radius: 9999px; background: #fff; transition: transform .15s ease-in-out; }
.ax-switch.on b { transform: translateX(10px); }

.ax-row2 { display: flex; height: 80px; min-height: 80px; width: 100%; align-items: center; justify-content: space-between; gap: 16px; }
.ax-thumbs-wrap { display: flex; min-width: 0; gap: 16px; }
.ax-thumbs-clip { position: relative; display: flex; min-width: 0; width: 420px; max-width: 420px; gap: 8px; }
.ax-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ax-thumbs::-webkit-scrollbar { display: none; }
.ax-arrow { pointer-events: none; position: absolute; top: 0; z-index: 10; display: flex; height: 100%; align-items: center; }
.ax-arrow.l { left: 0; } .ax-arrow.r { right: 0; justify-content: flex-end; }
.ax-arrow button { pointer-events: auto; display: flex; height: 24px; width: 24px; align-items: center; justify-content: center; border: 0; background: none; color: var(--ax-ts); font-size: 24px; padding: 0; }
.ax-arrow button:hover { color: var(--ax-tp); }
.ax-thumb { position: relative; display: flex; height: 80px; width: 118px; flex-shrink: 0; cursor: pointer; border-radius: 4px; overflow: hidden; }
.ax-thumb .edge { position: absolute; inset: 0; border-radius: 4px; border: 1px solid rgba(34, 36, 45, .5); transition: all .125s ease-in-out; z-index: 1; }
.ax-thumb:hover .edge { border-color: rgba(34, 36, 45, .8); background: rgba(34, 36, 45, .1); }
.ax-thumb.on .edge { border-color: var(--ax-blue-hover); background: rgba(34, 36, 45, .1); }
.ax-thumb img, .ax-thumb video { height: 100%; width: 100%; border-radius: 4px; object-fit: cover; filter: grayscale(30%); }
.ax-thumb.on img, .ax-thumb.on video { filter: none; }
.ax-upload { display: flex; height: 80px; width: 118px; flex-shrink: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 4px; border: 1px solid rgba(107, 114, 128, .15); background: rgba(107, 114, 128, .15); backdrop-filter: blur(3px); transition: all .125s ease-in-out; }
.ax-upload:hover { border-color: rgba(107, 114, 128, .2); background: rgba(107, 114, 128, .2); }
.ax-upload i { font-size: 17px; line-height: 25.5px; color: rgba(255, 255, 255, .8); }
.ax-upload span { font-size: 11px; font-weight: 500; line-height: 16.5px; color: rgba(255, 255, 255, .8); }
.ax-upload input { display: none; }

.ax-scrub { display: flex; height: 32px; flex: 1; align-items: center; gap: 10px; border-radius: 16px; background: var(--ax-g15); padding: 0 12px 0 6px; }
.ax-scrub button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: rgba(255, 255, 255, .8); display: grid; place-items: center; font-size: 16px; padding: 0; }
.ax-scrub .t { font-size: 12px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; min-width: 32px; }
.ax-scrub input[type=range] { flex: 1; accent-color: var(--ax-blue); height: 4px; }

/* Customize PNL Colors modal */
.ax-cz-back { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; background: rgba(9, 9, 9, .8); animation: ax-fade .2s ease both; }
.ax-cz { display: flex; min-height: 200px; width: 364px; max-width: calc(100% - 16px); flex-direction: column; border-radius: 4px; border: 1px solid var(--ax-stroke2); background: var(--ax-bg3); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 8px 0 rgba(0, 0, 0, .45); animation: ax-pop .2s cubic-bezier(.23, .01, .32, 1) both; }
@keyframes ax-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.ax-cz-head { display: flex; height: 44px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ax-stroke2); padding: 0 12px 0 16px; }
.ax-cz-head span { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.02em; color: var(--ax-tp); }
.ax-x { display: flex; height: 24px; width: 24px; align-items: center; justify-content: center; border-radius: 4px; padding: 4px; border: 0; background: none; transition: background-color .15s; }
.ax-x:hover { background: rgba(50, 53, 66, .2); }
.ax-x i { font-size: 16px; color: var(--ax-ts); }
.ax-x:hover i { color: var(--ax-tp); }
.ax-cz-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 20px; }
.ax-cz-sec { display: flex; flex-direction: column; gap: 8px; }
.ax-cz-sec.g16 { gap: 16px; }
.ax-cz h3 { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ax-tp); }
.ax-cz-row { display: flex; align-items: center; justify-content: space-between; }
.ax-cz-label { font-size: 12px; line-height: 16px; color: var(--ax-ts); }
.ax-color { position: relative; display: flex; height: 32px; width: 120px; cursor: text; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid var(--ax-stroke2); padding: 0 7px; transition: all .15s ease-in-out; }
.ax-color:hover, .ax-color:focus-within { border-color: rgba(50, 53, 66, .8); background: rgba(50, 53, 66, .2); }
.ax-color .sw { position: relative; width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.ax-color .sw input { position: absolute; inset: -4px; width: 24px; height: 24px; border: 0; padding: 0; opacity: 0; cursor: pointer; }
.ax-color input[type=text] { width: 100%; background: transparent; border: 0; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--ax-tp); outline: none; }
.ax-color button { display: flex; height: 16px; width: 16px; flex-shrink: 0; align-items: center; justify-content: center; border: 0; background: none; padding: 0; color: var(--ax-tt); }
.ax-color button:hover { color: var(--ax-tp); }
.ax-color button i { font-size: 14px; }
.ax-tog { display: flex; height: 20px; width: 40px; align-items: center; border-radius: 9999px; padding: 2px; border: 0; background: var(--ax-stroke2); transition: background-color .15s; }
.ax-tog.on { background: var(--ax-blue); }
.ax-tog b { height: 16px; width: 16px; border-radius: 9999px; background: #fff; transition: transform .15s; }
.ax-tog.on b { transform: translateX(20px); }
.ax-cz-note { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ax-tt); }
.ax-cz-foot { display: flex; height: 68px; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid rgba(50, 53, 66, .5); padding: 16px 16px 20px; }
.ax-continue { display: flex; height: 32px; flex: 1; align-items: center; justify-content: center; border-radius: 9999px; border: 0; background: var(--ax-blue); padding: 0 12px; transition: all .15s; }
.ax-continue:hover { background: rgba(82, 111, 255, .8); filter: brightness(1.1); }
.ax-continue span { font-size: 14px; font-weight: 700; color: var(--ax-bg); }

.ax-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(6px); z-index: 10050; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--ax-stroke2); background: var(--ax-bg3); color: var(--ax-tp); font-size: 13px; box-shadow: 0 4px 4px rgba(0, 0, 0, .3), 0 8px 8px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.ax-toast.show { opacity: 1; transform: translateX(-50%); }
.ax-toast i { font-size: 16px; color: var(--ax-blue); }
.ax-toast.err i { color: #ec397a; }
.ax-periods { display: flex; gap: 8px; }
.ax-period { display: flex; height: 32px; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; padding: 0 8px; border: 0; background: rgba(107, 114, 128, .05); transition: all .125s ease-in-out; }
.ax-period:hover { background: rgba(107, 114, 128, .1); }
.ax-period.on { background: rgba(107, 114, 128, .25); }
.ax-period span { font-size: 14px; font-weight: 500; color: #9ca3af; }
.ax-period.on span { color: rgba(255, 255, 255, .8); }

/* Small screens — mirrors Axiom's non-"sm:" classes */
@media (max-width: 639px) {
  .ax-shell, .ax-zoom { width: 100%; }
  .ax-f1 { width: 100%; padding: 12px; margin-bottom: -20px; }
  .ax-f2 { width: 100%; padding: 8px; }
  .ax-f3, .ax-card { width: 100%; }
  .ax-card img.ax-shot { width: 100%; height: auto; }
  .ax-card .ax-media, .ax-empty { width: 100%; height: auto !important; aspect-ratio: 840 / 570; }
  .ax-controls { padding: 0 24px 24px; }
  .ax-row2 { height: 48px; min-height: 48px; }
  .ax-thumbs-wrap { gap: 8px; flex: 1; }
  .ax-thumbs-clip { width: auto; max-width: 571px; flex: 1; }
  .ax-thumb, .ax-upload { height: 48px; width: 71px; }
  .ax-upload .lbl { display: none; }
  .ax-upload span { font-size: 9px; }
  .ax-upload i { font-size: 15px; line-height: 18px; }
  .hide-sm { display: none !important; }
  .ax-row3 { flex-wrap: wrap; height: auto; }
  .ax-left { gap: 8px; flex-wrap: wrap; }
  .ax-periods { gap: 6px; }
  .ax-cz { width: calc(100% - 16px); }
}