:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0px;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container[data-stacked='true'] {
    width: 100vw;
  }
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.page {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #f1f5f9;
    font-family: var(--font-sans);
    box-sizing: border-box;
    overflow: hidden;
}

.window,
.static-auth-window {
    width: 100%;
    max-width: 980px;
    height: 600px;
    max-height: calc(100dvh - 32px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.connect-window,
.demo-window {
    height: 600px;
    max-height: calc(100dvh - 32px);
}

.body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.content {
    flex: 1;
    min-height: 0;
    padding: 16px 36px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.form-fade-wrapper {
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: formFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes formFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.99) translateY(4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------- Responsive Tablet Breakpoints (641px to 1024px) ---------- */
@media (max-width: 1024px) {
    .page {
        padding: 16px;
        align-items: center;
        background: #f1f5f9;
    }

    .window,
    .static-auth-window,
    .connect-window,
    .demo-window {
        width: 100%;
        max-width: 96vw;
        height: 600px;
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    }

    .body {
        flex-direction: row;
    }

    .content {
        padding: 14px 20px;
        align-items: center;
    }
}

/* ---------- Responsive Mobile Breakpoints (<= 640px) ---------- */
@media (max-width: 640px) {
    .page {
        padding: 10px;
        align-items: center;
    }

    .window,
    .static-auth-window,
    .connect-window,
    .demo-window {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
    }

    .body {
        flex-direction: column;
        overflow-y: auto;
    }

    .content {
        padding: 14px 12px;
        overflow-y: auto;
    }
}.header {
    height: 64px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-sizing: border-box;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
    position: relative;
}

.header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.header h1::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #3b82f6;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #3b82f6, 0 0 4px #60a5fa;
    animation: headerPulse 2.5s infinite ease-in-out;
}

.header.no-dot h1::before {
    display: none;
}

@keyframes headerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .header {
        height: 56px;
        padding: 0 20px;
    }

    .header h1 {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .header {
        height: 52px;
        padding: 0 16px;
    }

    .header h1 {
        font-size: 15px;
    }
}
.sidebar {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f8fbff 0%, #f5f9ff 100%);
    color: #0f172a;
    border-right: 1px solid #dbeafe;
    overflow: hidden;
    font-family: var(--font-sans);
    container-type: inline-size;
    container-name: sidebar;
}

.sidebar-watchlist {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-order-panel {
    padding: 0;
}

.watchlist-container {
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
}

.watchlist-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.watchlist-heading h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.watchlist-heading p {
    margin: 2px 0 0 0;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
}

.watchlist-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.watchlist-search input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 12px;
    font-weight: 400;
    color: #0f172a;
}

.watchlist-category-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.watchlist-categories {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
    padding: 6px 4px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.watchlist-categories::-webkit-scrollbar {
    display: none;
}

.category-scroll-button {
    flex: 0 0 24px;
    height: 28px;
    padding: 0;
    border: 0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.category-scroll-button:hover {
    color: #2962ff;
    background: #f8fafc;
}

.watchlist-category {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 400;
    cursor: pointer;
}

.watchlist-category:hover {
    background: #f1f5f9;
    color: #2962ff;
}

.watchlist-category.active {
    background: #eef4ff;
    color: #2962ff;
    font-weight: 500;
}

.watchlist-items-wrapper {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.watchlist-items {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.watchlist-items::-webkit-scrollbar {
    width: 6px;
}

.watchlist-items::-webkit-scrollbar-track {
    background: transparent;
}

.watchlist-items::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.watchlist-items::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.watchlist-scroll-down-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
}

.watchlist-scroll-down-btn {
    pointer-events: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.watchlist-scroll-down-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.watchlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    background: #ffffff;
    transition: background 0.15s ease, border-left-color 0.15s ease;
    will-change: transform;
}

.watchlist-item:hover {
    background: #f8fafc;
}

.watchlist-item.selected {
    background: #f0f7ff;
    border-left: 3px solid #2563eb;
}

.watchlist-item.is-dragging {
    z-index: 30;
    background: #eef4ff !important;
    border-left: 3px solid #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
}

.manage-folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: grab;
    touch-action: none;
    user-select: none;
    position: relative;
    will-change: transform;
}

.manage-folder-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.manage-folder-item.selected {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.manage-folder-item.is-dragging {
    z-index: 30;
    background: #dbeafe !important;
    border: 1px solid #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
}

.watchlist-category-tab-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border-radius: 6px;
    padding: 2px 4px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    will-change: transform;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.watchlist-category-tab-item.active {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.watchlist-category-tab-item.is-dragging {
    z-index: 30;
    background: #eff6ff !important;
    border: 1px solid #2563eb !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

.watchlist-symbol {
    color: #020617;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.watchlist-type {
    margin-top: 2px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 400;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    flex-shrink: 0;
}

.watchlist-prices {
    text-align: right;
    flex-shrink: 0;
    min-width: max-content;
}

.watchlist-value {
    color: #0f172a;
    font-size: 12px;
    font-weight: 400;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, transform 0.2s ease;
}

.watchlist-value.flash-up {
    color: #10b981;
    animation: flashGreen 0.65s ease-out;
}

.watchlist-value.flash-down {
    color: #ef4444;
    animation: flashRed 0.65s ease-out;
}

@keyframes flashGreen {
    0% {
        color: #10b981;
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes flashRed {
    0% {
        color: #ef4444;
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.watchlist-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 500;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.watchlist-remove-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.watchlist-item:hover .watchlist-remove-btn {
    opacity: 1;
    visibility: visible;
}

.watchlist-change.up {
    color: #10b981;
}

.watchlist-change.down {
    color: #ef4444;
}

.watchlist-favourite {
    background: none;
    border: none;
    padding: 4px;
    margin-left: 6px;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.watchlist-favourite:hover {
    color: #f59e0b;
    transform: scale(1.15);
}

.watchlist-favourite.active {
    color: #f59e0b;
}

.watchlist-drag-grip {
    cursor: grab;
    transition: color 0.15s ease;
}

.watchlist-drag-grip:hover {
    color: #64748b !important;
}

.watchlist-drag-grip:active {
    cursor: grabbing !important;
}


@media (max-width: 1000px) {
    .sidebar {
        width: 220px;
        min-width: 220px;
    }
}

/* Full width on Mobile & Tablet (<= 1024px) */
@media (max-width: 1024px) {

    /* Full width on mobile — fills the screen when Watchlist tab is active */
    .sidebar {
        width: 100% !important;
        min-width: 100% !important;
        border-right: none;
    }

    /* Make Watchlist edge-to-edge */
    .sidebar-watchlist {
        padding: 0;
    }

    .watchlist-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    /* Slightly more padding for better touch targets */
    .watchlist-item {
        padding: 13px 14px;
    }

    /* Bigger symbol and type text for readability on small screens */
    .watchlist-symbol {
        font-size: 14px;
    }

    .watchlist-type {
        font-size: 12px;
    }

    .watchlist-value {
        font-size: 13px;
    }

    .watchlist-change {
        font-size: 11px;
    }

    /* Larger star/favourite button for easier tapping */
    .watchlist-favourite {
        padding: 8px;
        font-size: 14px;
    }

    /* Category bar pills - make them taller for tap targets */
    .watchlist-category {
        padding: 7px 10px;
        font-size: 12px;
    }

    /* Watchlist header text size */
    .watchlist-heading h3 {
        font-size: 16px;
    }

    /* Search input height for touch */
    .watchlist-search {
        padding: 10px 14px;
    }

    .watchlist-search input {
        font-size: 14px;
        height: 20px;
    }
}

/* ==========================================================================
   Accounts Page Navigation Sidebar
   ========================================================================== */
.accounts-sidebar {
    width: 300px;
    min-width: 300px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-right: 1px solid #e2e8f0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.accounts-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
}

.accounts-sidebar-item span {
    white-space: nowrap;
}

.accounts-sidebar-item svg {
    font-size: 16px;
    color: #64748b;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.accounts-sidebar-item:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.accounts-sidebar-item:hover svg {
    color: #2563eb;
    transform: scale(1.1);
}

.accounts-sidebar-item.active {
    background: #ffffff;
    color: #2563eb;
    font-weight: 700;
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.accounts-sidebar-item.active svg {
    color: #2563eb;
}

.accounts-sidebar-item.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 20%;
    bottom: 20%;
    width: 4px;
    background: #2563eb;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 8px rgba(37, 99, 235, 0.4);
}

.accounts-sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accounts-sidebar-footer p {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
}

.accounts-sidebar-footer a {
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
}

.accounts-sidebar-footer a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Responsive accounts sidebar for Tablet (641px to 1024px) */
@media (max-width: 1024px) and (min-width: 641px) {
    .accounts-sidebar {
        width: 220px;
        min-width: 200px;
        padding: 16px 10px;
        gap: 8px;
    }

    .accounts-sidebar-item {
        font-size: 13px;
        padding: 10px 10px;
    }
}

/* Responsive accounts sidebar for Mobile (<= 640px) */
@media (max-width: 640px) {
    .accounts-sidebar {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 10px;
        gap: 6px;
        background: #f8fafc;
        flex-shrink: 0;
    }

    .accounts-sidebar-item {
        flex: 1;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        min-width: 0;
        border: 1px solid transparent;
        background: transparent;
        color: #64748b;
    }

    .accounts-sidebar-item.active {
        background: #ffffff;
        color: #2563eb;
        border-color: #cbd5e1;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
        font-weight: 700;
    }

    .accounts-sidebar-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .accounts-sidebar-item.active::before {
        display: none;
    }

    .accounts-sidebar-footer {
        display: none;
    }
}.connect-form {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    font-family: var(--font-sans);
}

.connect-form h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 26px;
}

.connect-credentials-form {
    width: 100%;
}

.login-error-text {
    margin: 0 0 14px 0;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.connect-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.connect-row label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.connect-row input,
.connect-row select {
    width: 100%;
    height: 46px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.connect-row input::placeholder {
    color: #94a3b8;
}

.connect-row input:focus,
.connect-row select:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.password-box {
    display: flex;
    align-items: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
}

.password-box:focus-within {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.password-box input {
    border: none;
    background: transparent;
    flex: 1;
    height: 44px;
    padding: 0 14px;
    outline: none;
    box-shadow: none !important;
}

.eye-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-left: 1px solid #e2e8f0;
    font-size: 16px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.eye-btn:hover {
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
}

/* ---------- Save Password + Forgot Password ---------- */
.options-row {
    margin-top: 4px;
    margin-bottom: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.save-password {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #475569;
    user-select: none;
}

.save-password input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #2563eb;
    border-radius: 4px;
    cursor: pointer;
}

.forgot-password {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

/* ---------- Buttons ---------- */
.button-group {
    display: flex;
    width: 100%;
}

.login-btn {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.oauth-divider {
    display: flex;
    align-items: center;
    margin: 22px 0;
}

.oauth-divider::before {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.oauth-divider span {
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.google-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

.google-login-container > div {
    width: 100% !important;
    max-width: 400px !important;
    display: flex !important;
    justify-content: center !important;
}

.google-login-container iframe {
    max-width: 100% !important;
    margin: 0 auto !important;
}

.register-account {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.register-link {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.register-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 16px;
    overflow-y: auto;
    animation: fadeIn 0.25s ease;
}

.twofa-modal {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: popup 0.3s ease;
    font-family: var(--font-sans);
}

.shield-icon {
    font-size: 36px;
    color: #0f172a;
    margin-bottom: 16px;
}

.twofa-modal h2 {
    font-size: 24px;
    color: #0f172a;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.twofa-modal p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.twofa-options-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.twofa-option-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.twofa-option-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.option-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 16px;
}

.option-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.option-text h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #0f172a;
    font-weight: 600;
}

.option-text span {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.skip-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.skip-btn:hover {
    color: #0f172a;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .connect-form h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .connect-row input,
    .connect-row select {
        height: 44px;
        font-size: 14px;
    }

    .options-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
    }

    .save-password {
        font-size: 12px;
    }

    .forgot-password {
        font-size: 12px;
    }
}

.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
.demo-form {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
}

.demo-form h2 {
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 6px;
}

.row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.row label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.double-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.demo-form input,
.demo-form select {
    width: 100%;
    height: 36px;
    border: 1.5px solid #cbd5e1;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.demo-form input::placeholder {
    color: #94a3b8;
}

.demo-form input:focus,
.demo-form select:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.checkbox-row {
    margin: 2px 0 5px 0;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    accent-color: #2563eb;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.kyc-opt-checkbox {
    align-items: flex-start;
    text-align: left;
}

.kyc-opt-checkbox input[type="checkbox"] {
    margin-top: 2px;
}

.kyc-opt-text {
    font-size: 11px;
    line-height: 1.4;
    color: #334155;
}

.kyc-opt-text strong {
    color: #0f172a;
    font-weight: 700;
}

.kyc-opt-hint {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: #64748b;
    margin-top: 2px;
}

.button-row {
    display: flex;
    width: 100%;
    margin-top: 4px;
}

.create-account-btn {
    width: 100%;
    height: 38px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-account-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.create-account-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.password-box {
    position: relative;
    width: 100%;
}

.password-box input {
    width: 100%;
    padding-right: 40px;
}

.eye-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.eye-btn:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.password-success {
    margin: 2px 0 6px 0;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
}

.password-error {
    margin: 2px 0 6px 0;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

.login-account {
    margin-top: 6px;
    text-align: center;
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.login-link {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.login-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.phone-container {
    width: 100%;
}

.phone-container .form-control,
.phone-container .phone-input,
.phone-container .react-international-phone-input {
    width: 100% !important;
    height: 36px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

.phone-container .form-control:focus,
.phone-container .phone-input:focus,
.phone-container .react-international-phone-input:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.phone-container .flag-dropdown,
.phone-container .phone-button,
.phone-container .react-international-phone-country-selector-button {
    height: 36px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    background: #f8fafc !important;
}

.phone-container .selected-flag {
    border-radius: 8px 0 0 8px !important;
}

.phone-container .country-list {
    font-family: var(--font-sans);
    font-size: 13px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 700px) {
    .double-input {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .demo-form h2 {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .demo-form input,
    .demo-form select {
        height: 44px;
        font-size: 14px;
    }

    .checkbox {
        font-size: 12px;
        align-items: flex-start;
    }

    .checkbox input[type="checkbox"] {
        margin-top: 2px;
    }
}.forgot-page {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f5f9;
    padding: 20px 16px;
    font-family: var(--font-sans);
}

.forgot-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.forgot-card-body {
    padding: 32px 32px 36px;
}

.forgot-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.forgot-card h2 {
    text-align: center;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
}

.subtitle {
    text-align: center;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 24px;
    font-size: 14px;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    font-size: 14px;
}

.input-group label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #334155;
}

.input-group input {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.recover-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    transition: all 0.2s ease;
}

.recover-btn:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    transform: translateY(-1px);
}

.security-note {
    margin-top: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.back-btn {
    width: 100%;
    margin-top: 16px;
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.back-btn:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .forgot-card {
        padding: 24px 20px;
    }
}
.inline-form-message-slot {
    width: 100%;
}

.inline-form-message-slot.is-reserved {
    min-height: 0;
}

.inline-form-message {
    width: 100%;
    box-sizing: border-box;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    margin: 4px 0 10px 0;
    overflow-wrap: anywhere;
    text-align: inherit;
}

.inline-form-message--error {
    color: #ef4444;
}

.inline-form-message--success {
    color: #16a34a;
}

.inline-form-message--info {
    color: #2563eb;
}
.votp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow-y: auto;
    animation: fadeIn 0.2s ease-out;
}

.votp-modal-container {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    border: 1px solid #e2e8f0;
    font-family: var(--font-sans);
    animation: slideUp 0.25s ease-out;
}

.votp-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.votp-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.votp-modal-container .votp-two-column {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 440px;
}

.votp-modal-container .votp-single-column {
    display: block;
}

.votp-qr-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 28px 20px;
    text-align: center;
}

.votp-qr-section h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0 8px;
    color: #ffffff;
}

.votp-qr-section p {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 16px;
}

.votp-qr-image {
    width: 140px;
    height: 140px;
    background: #ffffff;
    padding: 8px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.votp-setup-key {
    margin: 4px 0 0;
    font-size: 11px;
    font-family: var(--font-mono);
    word-break: break-all;
    opacity: 1;
}

.votp-setup-key-wrap {
    width: 100%;
    margin-top: 12px;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.votp-setup-key-wrap > span {
    font-size: 11px;
    font-weight: 700;
}

.votp-copy-key {
    justify-self: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 5px 10px;
    cursor: pointer;
}

.votp-expired-state {
    max-width: 440px;
    padding: 40px 32px;
    text-align: center;
}

.votp-expired-state h2 {
    color: #0f172a;
    margin: 0 0 8px;
}

.votp-expired-state p {
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 24px;
}

.votp-modal-container .votp-otp-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
}

.votp-icon {
    width: 52px;
    height: 52px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin: 0 auto 14px;
}

.votp-otp-section h2 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
    color: #0f172a;
}

.votp-subtitle {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 400px;
}

.votp-email-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 0 auto 20px;
    max-width: 400px;
    word-break: break-all;
}

.votp-email-box svg {
    font-size: 14px;
    color: #2563eb;
    flex-shrink: 0;
}

.votp-email-box span {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.votp-modal-container .votp-otp-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 24px;
}

.votp-modal-container .votp-otp-container input {
    width: clamp(34px, 8vw, 44px);
    height: clamp(40px, 10vw, 52px);
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
}

.votp-otp-container input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.votp-verify-btn {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
    padding: 12px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    transition: all 0.2s ease;
}

.votp-verify-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    transform: translateY(-1px);
}

.votp-verify-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.votp-bottom-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.votp-text-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.votp-text-btn:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 768px) {
    .votp-modal-container .votp-two-column {
        grid-template-columns: 1fr;
    }

    .votp-modal-container .votp-otp-section {
        padding: 28px 20px;
    }

    .votp-modal-container {
        max-width: 100%;
        border-radius: 14px;
    }

    .votp-modal-container .votp-otp-container {
        gap: 6px;
    }
}
.headerr {
    height: 44px;
    background: #ffffff;
    color: #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    font-family: var(--font-sans);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.logo-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.logo-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-title {
    white-space: nowrap;
}

.logo-subtitle {
    color: #2563eb;
    font-weight: 600;
}

.header-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 18px;
}

.header-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-nav-item:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.header-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.header-nav-item svg {
    font-size: 13px;
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.notification-icon {
    position: relative;
    color: #64748b;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.notification-icon:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    font-family: var(--font-mono);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    padding: 2px 10px 2px 2px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.user-profile:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}


/* Standalone Account Switcher Menu in Header */
.account-switcher-menu {
    position: relative;
}

.account-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.account-switcher-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.account-mode-text {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: #334155;
    white-space: nowrap;
}

.account-mode-mobile {
    display: none;
}

.account-chevron {
    color: #94a3b8;
    margin-left: 2px;
}

.account-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    min-width: 180px;
    width: max-content;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-dropdown-title {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    font-family: var(--font-sans);
}

.account-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    transition: all 0.15s ease;
}

.account-dropdown-item:hover {
    background: #f8fafc;
}

.account-dropdown-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.account-item-label {
    flex: 1;
    text-align: left;
}

.check-icon.live {
    color: #059669;
}

.check-icon.demo {
    color: #d97706;
}

.profile-dropdown-menu {
    position: relative;
}

.logout-menu-item {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #dc2626;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s;
}

.logout-menu-item:hover {
    background: #fef2f2;
}

/* Mobile Account Switcher Component inside Header Drawer */
.mobile-account-switch-wrap {
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-sans);
}

.mobile-account-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mobile-account-btns {
    display: flex;
    gap: 8px;
}

.mobile-acc-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-sans);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-acc-btn.active.live {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.mobile-acc-btn.active.demo {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}

@media (min-width: 1025px) {
    .mobile-account-switch-wrap {
        display: none !important;
    }
}

/* ---------- Responsive Breakpoints (Tablets & Mobile <= 1024px) ---------- */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .header-navigation {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        z-index: 99;
    }

    .header-navigation.mobile-open {
        display: flex;
    }

    .header-nav-item {
        height: 42px;
        padding: 0 14px;
        justify-content: flex-start;
        font-size: 14px;
        border-radius: 8px;
    }

    .logo-subtitle {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-left {
        gap: 8px;
    }

    .header-right {
        gap: 6px;
    }

    .account-switcher-btn {
        min-height: 30px;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 15px;
    }

    .account-mode-desktop {
        display: none;
    }

    .account-mode-mobile {
        display: inline;
        max-width: 104px;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .headerr {
        padding: 0 12px;
    }

    .user-name-text {
        display: none;
    }

    .user-profile {
        padding: 4px 8px;
        border-radius: 16px;
    }

    .profile-chevron {
        display: block;
    }
}

@media (max-width: 360px) {
    .headerr {
        padding: 0 8px;
    }

    .logo-title {
        display: none;
    }

    .account-switcher-btn {
        padding-inline: 6px;
    }

    .account-mode-mobile {
        max-width: 88px;
        font-size: 10.5px;
    }
}


.account-switch-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    min-width: 180px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.account-switch-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #334155;
    font: 600 12px var(--font-sans);
    text-align: left;
    cursor: pointer;
}

.account-switch-menu-item:hover:not(:disabled) {
    background: #f1f5f9;
}

.account-switch-menu-item:disabled {
    cursor: default;
    color: #94a3b8;
}

.account-switch-group-label {
    padding: 7px 10px 3px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.account-manage-link {
    margin-top: 5px;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 7px 7px;
    color: #2563eb;
}

.header-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

.header-confirm-dialog {
    width: min(430px, 100%);
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    text-align: center;
}

.header-confirm-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #2563eb;
    font-size: 20px;
}

.header-confirm-dialog h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
}

.header-confirm-dialog p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.header-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 21px;
}

.header-confirm-actions button {
    min-height: 42px;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 700;
    cursor: pointer;
}

.header-confirm-cancel {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
}

.header-confirm-submit {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.header-confirm-cancel:hover {
    background: #f8fafc;
}

.header-confirm-submit:hover {
    background: #1d4ed8;
}
.admin-notification-root,
.notification-center {
  position: relative;
}

.admin-notification-bell,
.notification-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 9px;
  background: var(--bg-secondary, #fff);
  color: var(--text-secondary, #64748b);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-notification-bell:hover,
.notification-bell:hover {
  background: var(--bg-tertiary, #f8fafc);
  color: var(--text-primary, #0f172a);
  border-color: #cbd5e1;
}

.admin-notification-bell > span,
.notification-bell > span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.admin-notification-panel,
.notification-drawer {
  position: absolute;
  right: 0;
  top: 42px;
  width: min(340px, calc(100vw - 20px));
  max-height: min(450px, calc(100vh - 80px));
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: clientNotifyDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

@keyframes clientNotifyDropdown {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-notification-heading,
.notification-drawer__head {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  flex-shrink: 0;
}

.admin-notification-heading > div,
.notification-drawer__head > div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.admin-notification-heading strong,
.notification-drawer__head strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
}

.admin-notification-heading small,
.notification-drawer__head small {
  color: #64748b;
  font-size: 11px;
}

.admin-notification-heading button,
.notification-drawer__head button {
  border: 0;
  background: none;
  color: #0771c7;
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background 0.12s ease;
}

.admin-notification-heading button:hover,
.notification-drawer__head button:hover {
  background: rgba(7, 113, 199, 0.08);
}

.admin-notification-list,
.notification-list {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-notification-list::-webkit-scrollbar,
.notification-list::-webkit-scrollbar {
  width: 5px;
}

.admin-notification-list::-webkit-scrollbar-track,
.notification-list::-webkit-scrollbar-track {
  background: transparent;
}

.admin-notification-list::-webkit-scrollbar-thumb,
.notification-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.admin-notification-list::-webkit-scrollbar-thumb:hover,
.notification-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.admin-notification-item,
.notification-item {
  position: relative;
  padding: 9px 30px 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid #cbd5e1;
  transition: background 0.12s ease;
  cursor: default;
}

.admin-notification-item:last-child,
.notification-item:last-child {
  border-bottom: 0;
}

.admin-notification-item.unread,
.notification-item.unread {
  background: #f0f7ff;
  border-left-color: #0771c7;
  cursor: pointer;
}

.admin-notification-item.unread:hover,
.notification-item.unread:hover {
  background: #e5f1fd;
}

.admin-notification-item.severity-error,
.admin-notification-item.severity-critical,
.notification-item.severity-error,
.notification-item.severity-critical {
  border-left-color: #ef4444;
}

.admin-notification-item.severity-warning,
.notification-item.severity-warning {
  border-left-color: #f59e0b;
}

.admin-notification-item.severity-success,
.notification-item.severity-success {
  border-left-color: #10b981;
}

.admin-notification-copy,
.notification-item__body {
  display: flex;
  flex-direction: column;
}

.admin-notification-copy-header,
.notification-item__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.admin-notification-copy-header strong,
.notification-item__top strong {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.admin-notification-copy-header time,
.notification-item__top time {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-notification-copy p,
.notification-item__body p {
  margin: 3px 0 2px 0;
  color: #334155;
  font-size: 11.5px;
  line-height: 1.35;
}

.admin-notification-resolution,
.notification-resolution {
  display: block;
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 2px;
}

.admin-notification-action-btn,
.notification-action {
  align-self: flex-start;
  margin-top: 5px;
  border: 0;
  background: #eaf4fc;
  color: #075eaa;
  border-radius: 5px;
  padding: 3px 8px;
  font-weight: 600;
  font-size: 10.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.admin-notification-action-btn:hover,
.notification-action:hover {
  background: #d8ecfb;
}

.admin-notification-dismiss,
.notification-dismiss {
  position: absolute;
  right: 8px;
  top: 9px;
  border: 0;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: color 0.12s ease, background 0.12s ease;
}

.admin-notification-dismiss:hover,
.notification-dismiss:hover {
  color: #475569;
  background: rgba(0, 0, 0, 0.05);
}

.admin-notification-empty,
.notification-empty {
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
}

@media (max-width: 640px) {
  .admin-notification-panel,
  .notification-drawer {
    position: fixed;
    top: 52px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100vh - 70px);
  }
}
.left-nav {
    width: 40px;
    min-width: 40px;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    z-index: 20;
    flex-shrink: 0;
    transition: width 180ms ease, min-width 180ms ease;
}

.left-nav-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.left-nav--expanded {
    width: 210px;
    min-width: 210px;
}

.left-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 30px;
    min-height: 30px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    flex-shrink: 0;
}

.left-nav-toggle:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.left-nav-toggle:focus-visible,
.left-nav-item:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.left-nav--expanded .left-nav-toggle,
.left-nav--expanded .left-nav-item {
    width: calc(100% - 16px);
    justify-content: flex-start;
    padding: 0 10px;
    gap: 10px;
}

.left-nav--expanded .left-nav-items {
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 4px;
}

.left-nav--expanded .left-nav-icon {
    flex-shrink: 0;
}

.left-nav--expanded .left-nav-tooltip,
.left-nav--expanded .left-nav-item:hover .left-nav-tooltip {
    position: static;
    transform: none;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    animation: navigation-label-in 160ms ease both;
}

@keyframes navigation-label-in {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .left-nav { transition: none; }
    .left-nav--expanded .left-nav-tooltip,
    .left-nav--expanded .left-nav-item:hover .left-nav-tooltip { animation: none; }
}

.left-nav--expanded .left-nav-tooltip::before {
    display: none;
}

.left-nav-item {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.left-nav-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.left-nav-item:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.left-nav-item:hover .left-nav-icon {
    transform: scale(1.1);
}

.left-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 0 0 0 1.5px #2563eb;
}

/* Hover Tooltip Badge */
.left-nav-tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

/* Tooltip Little Arrow */
.left-nav-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #0f172a;
}

.left-nav-item:hover .left-nav-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 1024px) {
    .left-nav {
        display: none;
    }
}
.quick-trade-widget {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    user-select: none;
}

.quick-trade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.15s ease;
    outline: none;
}

.quick-trade-btn.sell {
    background: #ef4444;
}

.quick-trade-btn.sell:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.quick-trade-btn.sell:active {
    transform: translateY(0);
}

.quick-trade-btn.buy {
    background: #10b981;
}

.quick-trade-btn.buy:hover {
    background: #059669;
    transform: translateY(-1px);
}

.quick-trade-btn.buy:active {
    transform: translateY(0);
}

.btn-action-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    opacity: 0.95;
    line-height: 1;
    margin-bottom: 2px;
}

.btn-price-val {
    font-size: 11.5px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    line-height: 1.1;
}

/* Professional Lot Size Stepper */
.lot-stepper-container {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px;
    height: 36px;
    box-sizing: border-box;
}

.lot-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.lot-step-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.lot-step-btn:active {
    background: #dbeafe;
}

.lot-size-input {
    width: 48px;
    height: 30px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono, monospace);
    outline: none;
    padding: 0 2px;
    box-sizing: border-box;
}

/* Hide Spin Buttons */
.lot-size-input::-webkit-outer-spin-button,
.lot-size-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lot-size-input[type=number] {
    -moz-appearance: textfield;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .quick-trade-widget {
        top: 38px;
        left: 8px;
        padding: 3px;
        gap: 3px;
    }

    .quick-trade-btn {
        min-width: 58px;
        padding: 4px 8px;
    }

    .btn-action-label {
        font-size: 9px;
    }

    .btn-price-val {
        font-size: 10.5px;
    }

    .lot-stepper-container {
        height: 32px;
    }

    .lot-step-btn {
        width: 18px;
        height: 26px;
        font-size: 11px;
    }

    .lot-size-input {
        width: 42px;
        height: 26px;
        font-size: 11px;
    }
}
.price-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    flex-wrap: wrap;
}

.price-info-bar::-webkit-scrollbar {
    display: none;
}

.price-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.price-info-symbol {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.01em;
    font-family: var(--font-sans, sans-serif);
}

.timeframe-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.timeframe-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #eff6ff;
    color: #2563eb;
    border: none;
    border-radius: 6px;
    padding: 4px 22px 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    font-family: var(--font-sans, sans-serif);
}

.timeframe-dropdown:hover,
.timeframe-dropdown:focus {
    background: #dbeafe;
}

.dropdown-arrow {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #2563eb;
    pointer-events: none;
    font-weight: 600;
}

.chart-type-toggle-group {
    display: flex;
    gap: 2px;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 6px;
    border: none;
}

.chart-type-btn {
    background: transparent;
    color: #64748b;
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chart-type-btn.active {
    background: #ffffff;
    color: #2563eb;
    border: none;
    box-shadow: none;
}

/* One Click Trade Toggle Button */
.one-click-trade-btn {
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    cursor: pointer !important;
    user-select: none;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

.one-click-trade-btn:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 0.85;
    cursor: pointer !important;
}

.one-click-trade-btn:focus,
.one-click-trade-btn:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.one-click-trade-btn.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.one-click-trade-btn,
.one-click-trade-btn *,
.oct-switch,
.oct-switch-thumb {
    cursor: pointer !important;
}

.oct-switch {
    width: 24px;
    height: 13px;
    background-color: #cbd5e1;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.one-click-trade-btn.active .oct-switch {
    background-color: #2563eb;
}

.oct-switch-thumb {
    width: 9px;
    height: 9px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.one-click-trade-btn.active .oct-switch-thumb {
    left: 13px;
}

.indicator-menu-wrap {
    position: relative;
}

.indicator-menu-trigger {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #dbe3ee;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.indicator-menu-trigger:hover,
.indicator-menu-trigger.active {
    border-color: #93b4ff;
    background: #eff6ff;
    color: #2563eb;
}

.indicator-menu-chevron {
    color: #94a3b8;
    font-size: 10px;
}

.indicator-menu {
    position: absolute;
    z-index: 10020;
    top: calc(100% + 6px);
    left: 0;
    width: 290px;
    padding: 7px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.indicator-menu-search { width: calc(100% - 14px); margin: 2px 7px 6px; box-sizing: border-box; border: 1px solid #dbe3ee; border-radius: 6px; padding: 7px 8px; font-size: 11.5px; outline: none; }
.indicator-menu-search:focus { border-color: #93b4ff; box-shadow: 0 0 0 2px #dbeafe; }
.indicator-menu-list { max-height: 310px; overflow-y: auto; }
.indicator-menu-category { padding: 7px 7px 3px; color: #64748b; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.indicator-menu-wrap--right .indicator-menu {
    left: auto;
    right: 0;
}

.indicator-menu-heading,
.indicator-menu-footer {
    padding: 5px 7px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
}

.indicator-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
}

.indicator-menu-item:hover { background: #f1f5f9; }
.indicator-menu-item:disabled { cursor: not-allowed; opacity: 0.5; }
.indicator-menu-item > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.indicator-menu-item strong { font-size: 11.5px; font-weight: 600; }
.indicator-menu-item small { color: #94a3b8; font-size: 10px; }
.indicator-menu-item.edit { border-top: 1px solid #eef2f7; border-radius: 0 0 6px 6px; }
.indicator-menu-check {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #ffffff;
}
.indicator-menu-check.selected { background: #2962ff; border-color: #2962ff; }

.price-info-ohlc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 0 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    white-space: nowrap;
}

.ohlc-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ohlc-label {
    font-weight: 500;
    color: #64748b;
    font-size: 10.5px;
}

.ohlc-val {
    font-weight: 600;
    color: inherit;
    font-size: 11.5px;
}

.price-info-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ws-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Mobile Adjustments (iPhone 12 Pro, 390px Viewport) */
@media (max-width: 768px) {
    .price-info-bar {
        padding: 6px 10px;
        gap: 6px;
    }

    .price-info-symbol {
        font-size: 13px;
    }

    .timeframe-dropdown {
        padding: 3px 18px 3px 8px;
        font-size: 10.5px;
    }

    .price-info-ohlc-pill {
        display: none !important;
    }

    .indicator-menu-trigger span:not(.indicator-menu-chevron) { display: none; }
    .indicator-menu-trigger { padding: 0 7px; }
    .indicator-menu { left: auto; right: 0; width: min(250px, calc(100vw - 24px)); }
}
.trading-chart-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-toggle-btn {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.chart-toggle-btn.active {
  background: #2962FF;
  color: #fff;
  border-color: #2962FF;
}

/* Tooltip overlay */
.chart-tooltip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-color, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-color, #131722);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.chart-tooltip-label {
  color: #64748b;
  font-weight: 500;
}

.chart-tooltip-value {
  font-weight: 600;
}

.mobile-canvas-ohlc-pill {
  display: none;
}

.chart-script-workspace {
  position: relative;
  flex: 0 0 240px;
  min-height: 160px;
  border-top: 1px solid #dce3ec;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.chart-script-workspace.is-collapsed {
  flex-basis: 42px !important;
  min-height: 42px;
}

.chart-script-workspace.is-maximized {
  flex: 1 1 auto;
  min-height: 65%;
}

.chart-script-workspace__resize {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 4;
  cursor: row-resize;
  touch-action: none;
}

.chart-script-workspace__resize::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin: 4px auto;
  border-radius: 99px;
  background: #cbd5e1;
}

.chart-script-workspace__header {
  min-height: 42px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #172033;
  font-size: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.chart-script-workspace__header>div:first-child {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.chart-script-workspace__header span {
  color: #64748b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-script-workspace__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.chart-script-workspace button {
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font: 600 11px Inter, sans-serif;
  padding: 5px 8px;
  cursor: pointer;
}

.chart-script-workspace button.primary {
  background: #2962ff;
  border-color: #2962ff;
  color: #fff;
}

.chart-script-workspace button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.chart-script-workspace__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 28%);
}

.chart-script-editor__code {
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: #ffffffff;
  color: #000000;
}

.chart-script-editor__code .cm-editor {
  height: 100%;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chart-script-editor__code .cm-scroller {
  overflow: auto;
}

.chart-script-editor__code .cm-gutters {
  background: #ffffff;
  color: #64748b;
  border-right-color: #26354e;
}

.chart-script-workspace__review {
  overflow: auto;
  padding: 10px;
  border-left: 1px solid #dce3ec;
  background: #fff;
  color: #475569;
  font-size: 11px;
}

.chart-script-workspace__review strong,
.chart-script-workspace__review span {
  display: block;
  margin-bottom: 6px;
}

.chart-script-workspace__review code {
  display: block;
  max-height: 100px;
  overflow: auto;
  padding: 6px;
  background: #f1f5f9;
  white-space: pre-wrap;
  font: 10px/1.35 ui-monospace, monospace;
}

.chart-script-workspace__review p {
  margin: 7px 0;
  line-height: 1.4;
}

.chart-script-workspace__review p.error {
  color: #b91c1c;
}

.chart-script-workspace__footer {
  min-height: 28px;
  padding: 5px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 10.5px;
}

.chart-script-workspace__footer details {
  flex: 0 0 auto;
}

.chart-script-workspace__footer summary {
  cursor: pointer;
}

.chart-script-workspace__footer code {
  display: block;
  max-width: 500px;
  white-space: normal;
}

.chart-script-workspace__loading {
  padding: 12px;
  color: #64748b;
  font-size: 12px;
}

.chart-quote-stale {
  position: absolute;
  z-index: 12;
  top: 9px;
  right: 10px;
  border-radius: 5px;
  padding: 5px 8px;
  background: rgba(127, 29, 29, .92);
  color: #fff;
  font: 600 11px Inter, sans-serif;
}

@media (max-width: 768px) {
  .chart-script-workspace {
    flex-basis: min(62vh, 440px) !important;
    min-height: 160px;
  }

  .chart-script-workspace.is-maximized {
    flex-basis: 72vh !important;
  }

  .chart-script-workspace__header {
    align-items: flex-start;
    padding: 7px 8px;
  }

  .chart-script-workspace__header>div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .chart-script-workspace__actions {
    gap: 3px;
  }

  .chart-script-workspace button {
    padding: 4px 6px;
    font-size: 10px;
  }

  .chart-script-workspace__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 1fr) auto;
  }

  .chart-script-workspace__review {
    max-height: 112px;
    border-left: 0;
    border-top: 1px solid #dce3ec;
  }

  .chart-script-workspace__footer {
    padding: 4px 8px;
  }

  .mobile-canvas-ohlc-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .mobile-canvas-ohlc-pill .ohlc-item {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .mobile-canvas-ohlc-pill .ohlc-label {
    font-weight: 600;
    color: #64748b;
    font-size: 9.5px;
  }

  .mobile-canvas-ohlc-pill .ohlc-val {
    font-weight: 700;
    font-size: 10.5px;
  }
}

.custom-table-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.custom-table-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.custom-table-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.custom-table-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Order Badge HTML Overlay matching trading reference */
.chart-order-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 22px;
  z-index: 25;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  user-select: none;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: none !important;
}

.chart-order-badge-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  box-sizing: border-box;
}

/* SELL Badge Styles */
.chart-order-badge.sell .seg-side {
  background: #ffffff;
  border: 1px solid #f87171;
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 0 7px;
  color: #0f172a;
  font-weight: 700;
  gap: 5px;
}

.chart-order-badge.sell .seg-side-accent {
  width: 2.5px;
  height: 11px;
  background-color: #ef4444;
  border-radius: 1px;
}

.chart-order-badge.sell .seg-lot {
  background: #ef4444;
  border: 1px solid #ef4444;
  color: #ffffff;
  font-weight: 700;
  padding: 0 7px;
}

.chart-order-badge.sell .seg-close {
  background: #ffffff;
  border: 1px solid #f87171;
  border-left: none;
  border-radius: 0 3px 3px 0;
  padding: 0 6px;
  color: #ef4444;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.15s ease;
}

.chart-order-badge.sell .seg-close:hover {
  background: #fef2f2;
}

/* BUY Badge Styles */
.chart-order-badge.buy .seg-side {
  background: #ffffff;
  border: 1px solid #4ade80;
  border-right: none;
  border-radius: 3px 0 0 3px;
  padding: 0 7px;
  color: #0f172a;
  font-weight: 700;
  gap: 5px;
}

.chart-order-badge.buy .seg-side-accent {
  width: 2.5px;
  height: 11px;
  background-color: #10b981;
  border-radius: 1px;
}

.chart-order-badge.buy .seg-lot {
  background: #10b981;
  border: 1px solid #10b981;
  color: #ffffff;
  font-weight: 700;
  padding: 0 7px;
}

.chart-order-badge.buy .seg-close {
  background: #ffffff;
  border: 1px solid #4ade80;
  border-left: none;
  border-radius: 0 3px 3px 0;
  padding: 0 6px;
  color: #10b981;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.15s ease;
}

.chart-order-badge.buy .seg-close:hover {
  background: #f0fdf4;
}

/* ==========================================================================
   Indicator Legend Bar & Interactive Controls (Clean Light Theme)
   ========================================================================== */
.indicator-legend-bar {
  position: absolute;
  top: 10px;
  right: 70px;
  left: auto;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  pointer-events: none;
  max-width: calc(100% - 140px);
}

.indicator-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  color: #0f172a;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: all 0.15s ease;
}

.indicator-legend-item:hover {
  background: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.indicator-legend-item.is-hidden {
  opacity: 0.55;
  background: rgba(241, 245, 249, 0.85);
}

.indicator-legend-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.indicator-legend-title {
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.indicator-legend-params {
  color: #64748b;
  font-size: 10.5px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.indicator-legend-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.indicator-legend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s ease;
}

.indicator-legend-btn:hover {
  color: #2563eb;
  background: #eff6ff;
}

.indicator-legend-btn.remove:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* ==========================================================================
   Indicator Settings Modal (Light Theme)
   ========================================================================== */
.indicator-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInModal 0.15s ease-out;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.indicator-settings-card {
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #0f172a;
}

.indicator-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.indicator-settings-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.indicator-settings-category {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.indicator-settings-close {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator-settings-close:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.indicator-settings-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
}

.indicator-settings-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.indicator-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.indicator-settings-row label {
  font-size: 12.5px;
  color: #334155;
  font-weight: 500;
}

.indicator-settings-row input[type="number"],
.indicator-settings-row input[type="text"],
.indicator-settings-row select {
  width: 150px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.indicator-settings-row input[type="number"]:focus,
.indicator-settings-row input[type="text"]:focus,
.indicator-settings-row select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.indicator-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #334155;
}

.indicator-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.indicator-settings-actions button {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.indicator-settings-actions .btn-secondary {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.indicator-settings-actions .btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.indicator-settings-actions .btn-primary {
  background: #2563eb;
  color: #ffffff;
}

.indicator-settings-actions .btn-primary:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   Indicator Catalog Cheatsheet Drawer (Light Theme)
   ========================================================================== */
.indicator-catalog-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 24px rgba(15, 23, 42, 0.08);
}

.indicator-catalog-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.indicator-catalog-drawer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}

.indicator-catalog-drawer__close {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
}

.indicator-catalog-drawer__close:hover {
  color: #0f172a;
}

.indicator-catalog-drawer__search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.indicator-catalog-drawer__search-box input {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  color: #0f172a;
  font-size: 12px;
  outline: none;
}

.indicator-catalog-drawer__search-box input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

.indicator-catalog-drawer__category-pills {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.category-pill {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10.5px;
  white-space: nowrap;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #64748b;
  cursor: pointer;
}

.category-pill.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  font-weight: 600;
}

.indicator-catalog-drawer__list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
}

.indicator-catalog-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.indicator-catalog-item:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.indicator-catalog-item__info {
  flex: 1;
  min-width: 0;
}

.indicator-catalog-item__title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.indicator-catalog-item__title-row strong {
  font-size: 12px;
  color: #0f172a;
}

.indicator-catalog-item__id {
  font-size: 10px;
  color: #2563eb;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.indicator-catalog-item__badge {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

.indicator-catalog-item__desc {
  margin: 4px 0 0 0;
  font-size: 10.5px;
  color: #475569;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.indicator-catalog-item__insert-btn {
  padding: 4px 8px;
  border-radius: 4px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.indicator-catalog-item__insert-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.indicator-catalog-item__insert-btn:disabled,
.dropdown-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   Chart Script Studio Toolbar & Characteristics Strip (Light Theme)
   ========================================================================== */
.chart-script-toolbar-wrapper {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.chart-script-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
}

.chart-script-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.script-icon {
  color: #2563eb;
  font-size: 13px;
}

.script-title-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-weight: 600;
  font-size: 12.5px;
  padding: 3px 8px;
  border-radius: 4px;
  width: 140px;
  outline: none;
  transition: border-color 0.15s;
}

.script-title-input:hover {
  border-color: #94a3b8;
}

.script-title-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.script-mode-badge {
  font-size: 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.chart-script-toolbar__center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-script-toolbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}

.toolbar-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.toolbar-btn.btn-apply,
.toolbar-btn.primary-apply-btn {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  font-weight: 600;
}

.toolbar-btn.btn-apply:hover,
.toolbar-btn.primary-apply-btn:hover {
  background: #15803d;
}

.toolbar-btn.btn-save,
.toolbar-btn.save-btn {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

.toolbar-btn.btn-save:hover,
.toolbar-btn.save-btn:hover {
  background: #1d4ed8;
}

.shortcut-badge {
  font-size: 9.5px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.dropdown-container {
  position: relative;
}

.toolbar-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  z-index: 9999;
  width: 280px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dropdown-search {
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.dropdown-search input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11.5px;
  color: #0f172a;
  outline: none;
}

.dropdown-search input:focus {
  border-color: #2563eb;
}

.dropdown-items-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
}

.dropdown-group-title {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dropdown-item:hover {
  background: #eff6ff;
}

.dropdown-item .item-name {
  font-size: 12px;
  color: #0f172a;
}

.dropdown-item .item-id {
  font-size: 10.5px;
  color: #2563eb;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.preset-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.preset-item:hover {
  background: #eff6ff;
}

.preset-item .preset-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}

.preset-item .preset-desc {
  font-size: 10.5px;
  color: #64748b;
}

/* ==========================================================================
   Chart Characteristics Strip (Interactive & Modifiable)
   ========================================================================== */
.chart-characteristics-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11.5px;
  color: #475569;
}

.char-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.char-label {
  font-weight: 600;
  color: #334155;
  font-size: 11px;
}

.char-badge.symbol-badge {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.char-control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.char-group-label {
  font-weight: 500;
  color: #64748b;
  font-size: 10.5px;
}

.char-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-weight: 500;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.char-select:hover {
  border-color: #94a3b8;
}

.char-select:focus {
  border-color: #2563eb;
}

.char-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.char-toggle-btn:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.char-toggle-btn.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
  font-weight: 600;
}

.char-strip-right {
  display: flex;
  align-items: center;
}

.char-telemetry {
  font-size: 11px;
  color: #64748b;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.char-telemetry strong {
  color: #0f172a;
}

.char-price-tag {
  color: #0f172a;
  font-weight: 600;
}

/* ==========================================================================
   Chart Script Console & Diagnostics Drawer (Light Theme)
   ========================================================================== */
.chart-script-console {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  max-height: 140px;
  min-height: 80px;
  overflow: hidden;
}

.chart-script-console__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.console-tab {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.console-tab:hover {
  color: #0f172a;
}

.console-tab.active {
  background: #ffffff;
  color: #2563eb;
  border: 1px solid #e2e8f0;
}

.count-badge.error {
  background: #ef4444;
  color: #ffffff;
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
}

.console-status-pill .pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.console-status-pill .pill.valid {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

.console-status-pill .pill.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.console-status-pill .pill.checking {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.console-status-pill .pill.idle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.chart-script-console__content {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  background: #ffffff;
}

.diagnostic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

.diagnostic-row.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.diagnostic-row.error:hover {
  background: #fee2e2;
}

.diagnostic-row.warning {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.diag-line {
  font-weight: 700;
  color: #dc2626;
}

.diag-msg {
  flex: 1;
  color: #7f1d1d;
}

.diag-jump {
  color: #2563eb;
  font-size: 10.5px;
  text-decoration: underline;
}

.console-empty-msg {
  color: #64748b;
  padding: 6px 0;
}

.console-empty-msg kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  color: #334155;
}

.console-plot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid #f1f5f9;
}

.console-plot-row strong {
  color: #0f172a;
}

.plot-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.plot-params {
  color: #64748b;
  font-size: 10.5px;
}


.order-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    border: 1px solid #e2e8f0;
    font-family: var(--font-sans);
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.order-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.order-panel-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin: 0;
}

.order-panel-header h3 {
    font-size: 18px;
    font-weight: 500;
    color: #0f172a;
    margin: 2px 0 0 0;
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

.order-panel-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    background: #ecfdf5;
    color: #10b981;
    border: 1px solid #a7f3d0;
}

.order-panel-summary-block {
    padding: 14px 16px;
    flex-shrink: 0;
}

.order-panel-toggle {
    display: flex;
    gap: 8px;
    width: 100%;
}

.order-side-button {
    flex: 1;
    height: 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    color: #64748b;
}

.order-side-button:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.order-side-button.active.buy {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.order-side-button.active.sell {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.order-panel-fields {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.order-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.order-field span {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.order-field input {
    height: 40px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    font-family: var(--font-mono);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.order-field input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.order-tp-sl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.order-panel-divider {
    height: 1px;
    background: #e2e8f0;
    margin-bottom: 12px;
}

.order-panel-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.order-panel-summary-card {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    box-sizing: border-box;
}

.order-panel-summary-card span {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-panel-summary-card strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-submit-button {
    margin: 14px 16px;
    height: 46px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.order-submit-button.buy {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.order-submit-button.sell {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.order-submit-button:hover {
    transform: translateY(-2px);
}

.order-submit-button:active {
    transform: translateY(0);
}

/* Mobile & Dynamic Window Sizing Adaptation */
@media (max-height: 700px) {
    .order-panel-header {
        padding: 10px 14px;
    }

    .order-panel-summary-block {
        padding: 10px 14px;
    }

    .order-panel-fields {
        padding: 0 14px;
        gap: 8px;
    }

    .order-field input {
        height: 36px;
        font-size: 13px;
    }

    .order-submit-button {
        margin: 10px 14px;
        height: 42px;
        font-size: 14px;
    }
}

/* ─── Mobile & Tablet Responsive (<= 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {

    /* Panel fills full screen width when active */
    .order-panel,
    .order-panel-v2 {
        border-radius: 0;
        border-left: none;
        border-right: none;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Taller header for easy reading */
    .order-panel-header {
        padding: 16px;
    }

    .order-panel-header h3 {
        font-size: 20px;
    }

    /* Bigger buy/sell buttons for fingers */
    .order-side-button {
        height: 52px;
        font-size: 16px;
    }

    /* Pill buy/sell buttons — taller for touch */
    .price-pill {
        height: 44px;
    }

    .pill-price-val {
        font-size: 16px;
    }

    .pill-side-name {
        font-size: 12px;
    }

    /* Fields get a bit more breathing room */
    .order-panel-fields {
        padding: 0 14px;
        gap: 14px;
    }

    /* Inputs are taller for touch targets */
    .order-field input {
        height: 48px;
        font-size: 15px;
    }

    /* TP/SL grid stays side by side but inputs grow taller */
    .order-tp-sl-grid {
        gap: 12px;
    }

    /* Submit button: taller, bolder, easier to tap */
    .order-submit-button {
        margin: 16px;
        height: 56px;
        font-size: 16px;
        border-radius: 12px;
    }

    /* Summary cards — slightly bigger text */
    .order-panel-summary-card strong {
        font-size: 14px;
    }

    /* v2 fields */
    .order-panel-v2 {
        gap: 15px;
        padding: 15px;
    }

    /* Symbol display between Buy & Sell options at top */
    .pill-center-block {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        min-width: max-content;
    }

    .pill-symbol-name {
        font-size: 13.5px;
        font-weight: 500;
        color: #0f172a;
        letter-spacing: -0.01em;
        line-height: 1.1;
        white-space: nowrap;
    }
}

/* ─── Mild Blue Theme Order Panel (Ultra-Compact Fit Layout) ──────── */
.order-panel-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #f8fbff 0%, #f5f9ff 100%);
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 8px 10px;
    gap: 6px;
    justify-content: flex-start;
    container-type: inline-size;
    container-name: orderpanelinner;
}

@media (min-height: 800px) {
    .order-panel-v2 {
        justify-content: flex-start;
        padding: 8px 10px;
        gap: 7px;
    }
}

@media (min-height: 1000px) {
    .order-panel-v2 {
        padding: 10px;
        gap: 8px;
    }
}

/* 1. Top Buy/Sell Slanted Price Pills */
.order-panel-top-pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.price-pill {
    flex: 1;
    height: 34px;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px 6px;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.inactive-pill {
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.inactive-pill:hover {
    background: #f8fafc;
}

.buy-pill {
    border-radius: 12px 3px 3px 12px;
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    padding-right: 18px;
    padding-left: 8px;
}

.buy-pill.active-buy {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.sell-pill {
    border-radius: 3px 12px 12px 3px;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: 18px;
    padding-right: 8px;
}

.sell-pill.active-sell {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
}

.pill-side-name {
    font-size: 10.5px;
    font-weight: 600;
    opacity: 0.95;
    line-height: 1.1;
}

.pill-price-val {
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    line-height: 1.15;
}

.pill-center-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
    min-width: max-content;
    text-align: center;
}

.pill-symbol-name {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    text-transform: uppercase;
}

.price-pill-indicator-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: -3px;
}

.indicator-line {
    height: 2px;
    flex: 1;
    border-radius: 2px;
    background: #e2e8f0;
    transition: background 0.2s ease;
}

.indicator-line.green {
    background: #10b981;
}

.indicator-line.red {
    background: #ef4444;
}

.indicator-badge {
    font-size: 12.5px;
    font-weight: 800;
    color: #10b981;
}

/* 2. Order Type Tabs */
.order-type-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #dbeafe;
    padding-bottom: 2px;
    margin-top: 0px;
}

.type-tab {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    padding: 1px 0 2px 0;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: all 0.15s ease;
}

.type-tab:hover {
    color: #1e3a8a;
}

.type-tab.active {
    color: #1e3a8a;
    font-weight: 700;
    border-bottom: 2px solid #ea580c;
}

.order-info-icon {
    margin-left: auto;
    color: #64748b;
    font-size: 11px;
    cursor: pointer;
}

.order-info-icon:hover {
    color: #2563eb;
}

/* 3. Execution / Market Price Field */
.order-input-block {
    width: 100%;
}

.market-price-input {
    width: 100%;
    height: 28px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.04);
}

.market-price-input.active-input {
    color: #0f172a;
    background: #ffffff;
    border-color: #93c5fd;
}

.market-price-input.active-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* 4. Volume Stepper Box */
.volume-stepper-box {
    background: #ffffff;
    border-radius: 6px;
    padding: 4px 8px;
    border: 1px solid #dbeafe;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.04);
}

.volume-label {
    font-size: 9.5px;
    font-weight: 500;
    color: #64748b;
}

.volume-input-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 2px 8px 2px 4px;
    height: 30px;
    box-sizing: border-box;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.04);
    width: 100%;
}

.volume-input-container:focus-within,
.volume-input-container:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.volume-input-field {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono, monospace);
    outline: none;
    padding: 0 6px;
    box-shadow: none;
}

.volume-input-field:hover,
.volume-input-field:focus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.volume-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.volume-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.volume-input-field[type=number] {
    -moz-appearance: textfield;
}

.volume-inline-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: 8px;
    flex-shrink: 0;
}

.step-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.step-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.volume-unit-select {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
}

/* 5. Lot Slider Wrapper */
.lot-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lot-range-slider.custom-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
    background-image: linear-gradient(var(--fill-color, #2563eb), var(--fill-color, #2563eb));
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 2px 0;
}

.lot-range-slider.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--fill-color, #2563eb);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lot-range-slider.custom-slider::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border: none;
    border-radius: 50%;
    background: var(--fill-color, #2563eb);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.slider-labels-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 500;
    color: #64748b;
}

/* 6. TP/SL Checkbox Section (Ultra-Compact) */
.tpsl-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tpsl-toggle-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #0f172a;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.chk-icon {
    font-size: 10px;
    color: #cbd5e1;
}

.chk-icon.checked {
    color: #10b981;
}

.tpsl-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.tpsl-field-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tpsl-field-group label {
    font-size: 8.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tpsl-input {
    width: 100%;
    height: 22px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: #0f172a;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.04);
    transition: all 0.15s ease;
}

.tpsl-input:focus {
    background: #ffffff;
    border-color: #93c5fd;
}

/* 7. Main Action Submit Button (Prominent Order Placement Button) */
.main-action-btn {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 6px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1;
}

.main-action-btn.sell {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.main-action-btn.sell:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

.main-action-btn.buy {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.main-action-btn.buy:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
}

.main-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 8. Trade Parameter List & Assets */
.trade-parameters-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.assets-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.param-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    white-space: nowrap;
    padding: 1px 0;
}

.param-label {
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.param-label.dotted {
    border-bottom: 1px dotted #cbd5e1;
    padding-bottom: 0px;
}

.param-value {
    color: #0f172a;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.order-panel-v2-divider {
    height: 1px;
    background: #dbeafe;
    margin: 2px 0;
}

/* 9. Assets Section Header */
.assets-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.assets-title {
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 1px 0;
    letter-spacing: -0.01em;
}

/* Mobile & Tablet font scaling (<= 1024px) */
@media (max-width: 1024px) {
    .order-panel-header h3 {
        font-size: 16px !important;
    }

    .order-side-button {
        font-size: 13px !important;
    }

    .order-field input {
        font-size: 13px !important;
    }

    .main-action-btn {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        flex-shrink: 0;
        font-size: 14px !important;
        margin-top: 8px;
        margin-bottom: 12px;
    }

    .order-panel-label {
        font-size: 10px !important;
    }

    .param-item {
        font-size: 9.5px !important;
    }

    .assets-title {
        font-size: 10px !important;
    }
}

/* Trigger Price Validation & Helper Styles */
.trigger-validation-hint {
    font-size: 10.5px;
    font-weight: 500;
    color: #ef4444;
    margin-top: 3px;
    padding: 3px 6px;
    line-height: 1.25;
    background: #fef2f2;
    border-radius: 4px;
    border: 1px solid #fee2e2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.market-price-input.has-error {
    border-color: #ef4444 !important;
    background-color: #fffaf0 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.param-sub-tag {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    font-style: italic;
    margin-left: 3px;
}/* ==========================================================================
   Modify TP / SL Modal — Clean Professional Light Theme
   ========================================================================== */

.tpsl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.tpsl-modal-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    padding: 24px 20px;
    color: #0f172a;
    font-family: var(--font-sans, 'Inter', sans-serif);
    animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes modalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tpsl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.title-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpsl-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.sub-ticket {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.tpsl-close-icon-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s ease;
}

.tpsl-close-icon-btn:hover {
    color: #0f172a;
}

/* Trade Info Box */
.trade-info-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0px;
    padding: 10px 8px;
    margin-bottom: 18px;
    text-align: center;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    white-space: nowrap;
}

.info-value {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono, monospace);
}

.symbol-name {
    font-weight: 800;
}

.entry-price {
    color: #2563eb;
}

.current-price {
    font-weight: 800;
}

.type-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.type-tag.buy {
    background: transparent;
    color: #10b981;
}

.type-tag.sell {
    background: transparent;
    color: #ef4444;
}

/* Form & Inputs */
.tpsl-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.live-price-hint {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.live-price-hint strong {
    color: #0f172a;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.tpsl-modal-input {
    width: 100%;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 0px;
    padding: 0 12px;
    font-size: 13.5px;
    font-family: var(--font-mono, monospace);
    color: #0f172a;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.tpsl-modal-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Red error border & background when value is invalid */
.tpsl-modal-input.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

.tpsl-modal-input.input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.field-error-msg {
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    margin-top: 2px;
}

/* Split input fields for Price Level and +/- $ PnL calculation */
.tpsl-split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.tpsl-split-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.split-col-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tpsl-dollar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.dollar-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    pointer-events: none;
    cursor: default;
    user-select: none;
    z-index: 2;
    font-family: var(--font-mono, monospace);
}

.tpsl-modal-input.tpsl-dollar-input {
    padding-left: 34px !important;
    font-weight: 700;
}

/* Actions */
.tpsl-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.btn-cancel {
    flex: 1;
    height: 38px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-confirm {
    flex: 1;
    height: 38px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
    transform: translateY(-1px);
}

.btn-confirm:disabled {
    background: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

/* ==========================================================================
   Mobile & iPhone SE Responsiveness
   ========================================================================== */
@media (max-width: 480px) {
    .tpsl-modal-overlay {
        padding: 8px !important;
    }

    .tpsl-modal-card {
        padding: 16px 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .trade-info-box {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 8px 6px !important;
    }

    .trade-info-box .info-item:nth-child(4) {
        grid-column: span 1;
    }

    .trade-info-box .info-item:nth-child(5) {
        grid-column: span 2;
    }

    .info-label {
        font-size: 9px !important;
    }

    .info-value {
        font-size: 11px !important;
    }

    .tpsl-split-row {
        gap: 6px !important;
    }

    .tpsl-modal-input {
        font-size: 12.5px !important;
        padding: 0 8px !important;
        height: 36px !important;
    }

    .tpsl-modal-input.tpsl-dollar-input {
        padding-left: 28px !important;
    }

    .dollar-prefix {
        left: 8px !important;
        font-size: 11.5px !important;
    }

    .btn-cancel,
    .btn-confirm {
        height: 36px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .trade-info-box {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .trade-info-box .info-item:nth-child(5) {
        grid-column: span 2;
    }

    .info-value {
        font-size: 10.5px !important;
    }
}
/* ==========================================================================
   Close Position / Scale-Out Dialog — Professional Trading Theme
   ========================================================================== */

.close-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.close-modal-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    padding: 22px 20px;
    color: #0f172a;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    animation: closeModalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes closeModalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.close-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.close-title-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.close-sub-ticket {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.close-close-icon-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.close-close-icon-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

/* Position Trade Summary Bar */
.close-trade-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 8px;
    margin-bottom: 18px;
    text-align: center;
}

.close-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.close-summary-item .label {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.close-summary-item .value {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    color: #0f172a;
}

.close-badge-buy {
    color: #10b981 !important;
}

.close-badge-sell {
    color: #ef4444 !important;
}

/* Volume Section */
.close-volume-section {
    margin-bottom: 18px;
}

.close-section-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.close-section-label-row label {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

.close-lot-limits {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.close-volume-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.close-stepper-btn {
    width: 36px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.close-stepper-btn:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.close-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.close-lot-input {
    flex: 1;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.close-lot-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.close-lot-input.invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.close-lot-input.invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Percentage Quick-Select Pills */
.close-presets-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.close-preset-pill {
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.close-preset-pill:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

.close-preset-pill.active {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.close-preset-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Interactive Slider */
.close-slider-wrap {
    padding: 0 4px;
    margin-bottom: 16px;
}

.close-lot-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Real-Time Impact Projection Box */
.close-impact-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.close-impact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.close-impact-row .impact-label {
    color: #64748b;
    font-weight: 500;
}

.close-impact-row .impact-value {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: #0f172a;
}

.close-pnl-positive {
    color: #10b981 !important;
}

.close-pnl-negative {
    color: #ef4444 !important;
}

.close-validation-warning {
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    padding-top: 4px;
    border-top: 1px dashed #e2e8f0;
    text-align: center;
}

/* Modal Actions */
.close-modal-actions {
    display: flex;
    gap: 10px;
}

.close-btn-cancel {
    flex: 1;
    height: 40px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.close-btn-cancel:hover:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
}

.close-btn-confirm {
    flex: 2;
    height: 40px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.close-btn-confirm.btn-full-close {
    background: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.close-btn-confirm.btn-full-close:hover:not(:disabled) {
    background: #b91c1c;
}

.close-btn-confirm.btn-partial-close {
    background: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.close-btn-confirm.btn-partial-close:hover:not(:disabled) {
    background: #1d4ed8;
}

.close-btn-confirm:disabled,
.close-btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   Mobile & iPhone SE Responsiveness
   ========================================================================== */
@media (max-width: 480px) {
    .close-modal-overlay {
        padding: 8px !important;
    }

    .close-modal-card {
        padding: 16px 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .close-modal-header {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    .close-modal-header h3 {
        font-size: 14.5px !important;
    }

    .close-impact-box {
        padding: 10px 10px !important;
        margin-bottom: 14px !important;
    }

    .close-presets-row {
        gap: 4px !important;
    }

    .close-preset-pill {
        padding: 5px 2px !important;
        font-size: 10.5px !important;
    }

    .close-modal-actions {
        gap: 8px !important;
    }

    .close-btn-cancel,
    .close-btn-confirm {
        height: 36px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   Positions Page — Clean Professional Light Trading Interface
   ========================================================================== */

.positions-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    background: #f8fafc;
    font-family: var(--font-sans, 'Inter', sans-serif);
    overflow: hidden;
}

.positions-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.positions-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 80px;
    min-height: 0;
    background: #f8fafc;
}

/* Header Title Section */
.positions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.title-icon-box {
    width: auto;
    height: auto;
    border-radius: 0px;
    background: transparent;
    border: none;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding: 0;
}

.positions-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.positions-header p {
    font-size: 13px;
    color: #64748b;
    margin: 2px 0 0 0;
}

.close-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.15s ease;
}

.close-all-btn:hover {
    background: transparent;
    border-color: transparent;
    color: #dc2626;
}

/* Summary Metrics Cards */
.positions-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.summary-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.card-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.card-value {
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    font-family: var(--font-mono, monospace);
}

.card-value.pnl-positive {
    color: #10b981;
}

.card-value.pnl-negative {
    color: #ef4444;
}

/* Controls Bar */
.positions-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0px;
    padding: 0 12px;
    height: 38px;
    width: 300px;
}

.search-icon {
    position: relative !important;
    color: #94a3b8;
    font-size: 13px;
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 13px;
    color: #0f172a;
}

.type-filter-group {
    display: flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 0px;
}

.filter-chip {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    color: #0f172a;
}

.filter-chip.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Positions Table Container */
.positions-table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    padding: 12px 16px;
    min-height: 0;
}

.empty-positions-state {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.empty-icon {
    font-size: 42px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-positions-state h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.empty-positions-state p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.positions-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.positions-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.positions-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.positions-table tr:last-child td {
    border-bottom: none;
}

.positions-table tr:hover,
.position-row:hover {
    background: #f8fafc;
}

.position-row .position-close-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.position-row:hover .position-close-btn,
.position-row .position-close-btn:disabled {
    opacity: 1;
    visibility: visible;
}

.position-actions-cell {
    min-width: 80px;
    position: sticky;
    right: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.03);
}

.selected-position-row .position-actions-cell {
    background: #eff6ff !important;
}

/* Touch devices & small screens: always keep close button visible */
@media (hover: none), (max-width: 1024px) {
    .position-row .position-close-btn {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.partial-scale-btn {
    border-radius: 4px;
    transition: all 0.15s ease;
}

.partial-scale-btn:hover:not(:disabled) {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.position-close-btn {
    border-radius: 4px;
    transition: all 0.15s ease;
}

.position-close-btn:hover:not(:disabled) {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.ticket-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 500;
    color: #334155;
}

.symbol-cell {
    font-weight: 500;
    color: #0f172a;
}

.type-badge {
    display: inline;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    background: transparent;
    border: none;
}

.badge-buy {
    background: transparent;
    color: #10b981;
    border: none;
}

.badge-sell {
    background: transparent;
    color: #ef4444;
    border: none;
}

.lots-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 500;
}

.price-cell {
    font-family: var(--font-mono, monospace);
}

.live-price {
    font-weight: 600;
}

.time-cell {
    font-size: 12px;
    color: #64748b;
}

.pnl-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    font-size: 13.5px;
}

.pnl-positive {
    color: #10b981;
}

.pnl-negative {
    color: #ef4444;
}

.text-right {
    text-align: right;
}

.close-pos-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.close-pos-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
}

/* ==========================================================================
   Responsive Header Actions & Labels
   ========================================================================== */
.positions-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.positions-tab-pills {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
}

.positions-tab-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.positions-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-text-short {
    display: none;
}

.tab-text-full {
    display: inline;
}

.tab-count {
    opacity: 0.7;
    margin-left: 6px;
    font-size: 11px;
}

.label-short {
    display: none;
}

.label-full {
    display: inline;
}

/* ==========================================================================
   Desktop Table Wrap vs Mobile Cards Layout
   ========================================================================== */
.positions-desktop-table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.positions-mobile-card-list {
    display: none;
}

/* ==========================================================================
   Mobile Position Card Styles (Optimized for iPhone SE and small screens)
   ========================================================================== */
.position-mobile-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: all 0.15s ease;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
}

.position-mobile-card:active {
    background: #f8fafc;
}

.position-mobile-card.selected-position-card {
    border-color: #93c5fd;
    background: #f8faff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.pos-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pos-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-card-symbol {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.pos-card-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pos-card-badge.buy {
    background: #dcfce7;
    color: #15803d;
}

.pos-card-badge.sell {
    background: #fee2e2;
    color: #b91c1c;
}

.pos-card-status-badge {
    font-size: 9px;
    font-weight: 700;
    color: #d97706;
    background: #fef3c7;
    padding: 2px 5px;
    border-radius: 4px;
}

.pos-card-pnl {
    font-family: var(--font-mono, monospace);
    font-size: 14.5px;
    font-weight: 700;
}

.pos-card-pnl.pnl-positive {
    color: #10b981;
}

.pos-card-pnl.pnl-negative {
    color: #ef4444;
}

.pos-card-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
}

.pos-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pos-detail-item .detail-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pos-detail-item .detail-value {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-tp-val {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.sl-tp-val .sl-text {
    color: #ef4444;
}

.sl-tp-val .sep {
    color: #cbd5e1;
}

.sl-tp-val .tp-text {
    color: #10b981;
}

.pos-card-edit-btn {
    border: none;
    background: transparent;
    color: #2563eb;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pos-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.pos-card-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pos-ticket {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.pos-time {
    font-size: 10px;
    color: #94a3b8;
}

.pos-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pos-card-btn-partial {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pos-card-btn-close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pos-card-btn-close:disabled,
.pos-card-btn-partial:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Mobile & Tablet Responsiveness (<= 1024px & iPhone SE)
   ========================================================================== */
@media (max-width: 1024px) {
    .positions-page {
        height: auto !important;
        min-height: 100dvh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .positions-body {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .positions-main {
        padding: 10px 10px 80px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .positions-desktop-table-wrap {
        display: none !important;
    }

    .positions-mobile-card-list {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .std-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    .std-header-left {
        width: 100%;
    }

    .std-header-titles h2 {
        font-size: 17px !important;
    }

    .std-header-titles p {
        font-size: 12px !important;
    }

    .positions-header-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .positions-tab-pills {
        flex: 1;
        min-width: 0;
    }

    .positions-tab-btn {
        flex: 1;
        min-width: 0;
        padding: 6px 6px !important;
        font-size: 12px !important;
    }

    .tab-text-full {
        display: none !important;
    }

    .tab-text-short {
        display: inline !important;
    }

    .tab-count {
        margin-left: 3px !important;
        font-size: 10.5px !important;
    }

    .positions-summary-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .summary-card {
        padding: 8px 4px !important;
        text-align: center;
        align-items: center;
        min-width: 0 !important;
        border-radius: 8px !important;
    }

    .label-full {
        display: none !important;
    }

    .label-short {
        display: inline !important;
    }

    .card-label {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .card-value {
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .positions-controls-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    .search-box {
        width: 100% !important;
        height: 36px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .type-filter-group {
        width: 100% !important;
        display: flex;
        gap: 4px;
        background: #f1f5f9;
        padding: 3px;
        border-radius: 8px;
        box-sizing: border-box !important;
    }

    .filter-chip {
        flex: 1;
        text-align: center;
        padding: 6px 4px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        white-space: nowrap;
    }

    /* Container resets on mobile - zero overflow */
    .positions-table-container {
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   iPhone SE & Ultra-Compact Mobile Viewport (<= 380px)
   ========================================================================== */
@media (max-width: 380px) {
    .positions-main {
        padding: 8px 6px 85px !important;
    }

    .std-header-titles h2 {
        font-size: 15.5px !important;
    }

    .std-header-titles p {
        font-size: 11px !important;
    }

    .positions-tab-btn {
        padding: 5px 3px !important;
        font-size: 11px !important;
    }

    .tab-count {
        font-size: 9.5px !important;
        margin-left: 2px !important;
    }

    .close-all-btn {
        font-size: 11.5px !important;
        padding: 3px 4px !important;
    }

    .summary-card {
        padding: 6px 2px !important;
    }

    .card-label {
        font-size: 8.5px !important;
    }

    .card-value {
        font-size: 11px !important;
    }

    .position-mobile-card {
        padding: 10px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .pos-card-symbol {
        font-size: 13px !important;
    }

    .pos-card-badge {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }

    .pos-card-pnl {
        font-size: 13.5px !important;
    }

    .pos-card-details {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px 8px !important;
        padding: 6px 8px !important;
    }

    .pos-detail-item .detail-label {
        font-size: 9px !important;
    }

    .pos-detail-item .detail-value {
        font-size: 11px !important;
    }

    .sl-tp-val {
        font-size: 10.5px !important;
        gap: 2px !important;
    }

    .pos-ticket {
        font-size: 10px !important;
    }

    .pos-time {
        font-size: 9.5px !important;
    }

    .pos-card-actions {
        gap: 5px !important;
    }

    .pos-card-btn-partial,
    .pos-card-btn-close {
        padding: 5px 7px !important;
        font-size: 10px !important;
        border-radius: 5px !important;
    }
}.order-history-desktop {
    display: contents;
}

.order-history-mobile {
    display: none;
}

@media (max-width: 768px) {
    .order-history-desktop {
        display: none !important;
    }

    .order-history-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .history-mobile-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        transition: all 0.15s ease;
        overflow: hidden;
        font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    }

    .history-mobile-card:hover {
        border-color: #cbd5e1;
    }

    .history-mobile-card.expanded {
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    }

    .history-mobile-summary {
        width: 100%;
        min-height: 56px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) auto auto 14px;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 0;
        background: #ffffff;
        color: #0f172a;
        font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .history-mobile-summary:active {
        background: #f8fafc;
    }

    .history-mobile-summary:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
    }

    .history-mobile-identity {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .history-mobile-symbol {
        font-size: 13.5px;
        font-weight: 600;
        color: #0f172a;
        letter-spacing: -0.01em;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .history-mobile-identity strong {
        font-size: 13.5px;
        font-weight: 600;
        color: #0f172a;
        letter-spacing: -0.01em;
    }

    .history-mobile-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .history-mobile-ticket {
        font-family: var(--font-mono, monospace);
        font-size: 10px;
        font-weight: 500;
        color: #64748b;
        letter-spacing: 0.01em;
    }

    .history-mobile-badge {
        font-size: 9.5px;
        font-weight: 600;
        padding: 1.5px 5px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    .history-mobile-badge.buy {
        background: #dcfce7;
        color: #15803d;
    }

    .history-mobile-badge.sell {
        background: #fee2e2;
        color: #b91c1c;
    }

    .history-mobile-side {
        font-size: 9.5px;
        font-weight: 500;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .history-mobile-side.buy { color: #15803d; }
    .history-mobile-side.sell { color: #b91c1c; }

    .history-mobile-stat {
        min-width: 52px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: right;
    }

    .history-mobile-stat .stat-label,
    .history-mobile-stat small {
        color: #64748b;
        font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        font-size: 9.5px;
        font-weight: 500;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .history-mobile-stat .stat-value,
    .history-mobile-stat strong {
        font-family: var(--font-mono, monospace);
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        font-weight: 500;
        color: #1e293b;
        white-space: nowrap;
    }

    .history-mobile-stat .stat-value.pnl-value,
    .history-mobile-stat.positive strong,
    .history-mobile-stat.negative strong {
        font-weight: 600;
        font-size: 12.5px;
    }

    .history-mobile-stat.positive .stat-value,
    .history-mobile-stat.positive strong,
    .history-mobile-detail-grid .positive {
        color: #10b981;
    }

    .history-mobile-stat.negative .stat-value,
    .history-mobile-stat.negative strong,
    .history-mobile-detail-grid .negative {
        color: #ef4444;
    }

    .history-mobile-chevron {
        font-size: 11px;
        color: #94a3b8;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-block;
    }

    .history-mobile-card.expanded .history-mobile-chevron {
        transform: rotate(180deg);
        color: #2563eb;
    }

    .history-mobile-details {
        padding: 10px 12px 12px;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
    }

    .history-mobile-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    .history-detail-item,
    .history-mobile-detail-grid > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .history-detail-item .detail-label,
    .history-mobile-detail-grid small {
        font-size: 9px;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    }

    .history-detail-item .detail-value,
    .history-mobile-detail-grid strong {
        font-family: var(--font-mono, monospace);
        font-variant-numeric: tabular-nums;
        font-size: 11px;
        font-weight: 500;
        color: #1e293b;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .history-mobile-summary {
        gap: 7px;
        padding: 9px 10px;
    }

    .history-mobile-stat {
        min-width: 48px;
    }

    .history-mobile-details {
        padding: 9px 10px 10px;
    }
}
.dashboard {
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    color: #334155;
    font-family: var(--font-sans);
    overflow: hidden;
}

/* Mobile panel navigation bar (< 768px) */
.mobile-view-tabs {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 4px 8px;
    gap: 4px;
    flex-shrink: 0;
}

.mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mobile-tab-btn svg {
    font-size: 15px;
}

.mobile-tab-btn.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.dashboard-body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.dashboard-sidebar-wrap {
    display: flex;
    height: 100%;
    min-width: 240px;
    max-width: 350px;
    container-type: inline-size;
    container-name: sidebarwrap;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.main-content.page-dashboard {
    padding: 0;
    gap: 0;
}

/* Resizable Splitter Handles & Smooth Dragging */
.is-resizing,
.is-resizing * {
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: none !important;
}

.is-resizing iframe,
.is-resizing .tradingview-widget-container,
.is-resizing .chart-wrapper {
    pointer-events: none !important;
    user-select: none !important;
}

.panel-resizer {
    position: relative;
    z-index: 50;
    background: #e2e8f0;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.panel-resizer.resizer-col {
    width: 2px;
    cursor: col-resize;
    height: 100%;
    margin: 0;
}

.panel-resizer.resizer-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
    cursor: col-resize;
    z-index: 10;
}

.panel-resizer.resizer-row {
    height: 2px;
    cursor: row-resize;
    width: 100%;
    margin: 0;
}

.panel-resizer.resizer-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -4px;
    cursor: row-resize;
    z-index: 10;
}

.panel-resizer:hover,
.panel-resizer.active {
    background: #94a3b8;
    box-shadow: none;
}

.orders-side-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: none;
    overflow-y: auto;
    box-sizing: border-box;
    min-width: 245px;
    max-width: 350px;
    container-type: inline-size;
    container-name: ordersidepanel;
}

/* Middle Section (Chart + Drawing Tools) */
.workspace-section {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    gap: 0;
    overflow: hidden;
}

.drawing-tools {
    position: relative;
    z-index: 90;
    width: 38px;
    min-width: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    border: none;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow: visible;
    transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease;
}

.drawing-tools.collapsed {
    width: 22px;
    min-width: 22px;
    padding: 4px 1px;
}

.drawing-tools-toggle {
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.18s ease;
}

.drawing-tools-toggle:hover {
    color: #2563eb;
}

.drawing-tools-script-toggle {
    width: 30px;
    height: 30px;
    margin-top: auto;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe3ee;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}

.drawing-tools-script-toggle:hover,
.drawing-tools-script-toggle.active {
    background: #e8f0ff;
    border-color: #2962ff;
    color: #2962ff;
}

/* Mobile Drawing Tools (< 768px) */
.mobile-drawing-tools-wrap {
    display: none;
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 80;
}

.mobile-drawing-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mobile-drawing-btn:hover {
    background: #1d4ed8;
    transform: scale(1.05);
}

.mobile-drawing-drawer {
    position: absolute;
    bottom: 54px;
    left: 0;
    width: 280px;
    max-height: 360px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popup 0.2s ease;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.mobile-drawer-header strong {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
}

.mobile-drawer-header button {
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
}

.mobile-drawer-content {
    padding: 10px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-tool-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-tool-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-tool-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mobile-tool-pill {
    padding: 4px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mobile-tool-pill:hover {
    background: #eff6ff;
    color: #2563eb;
}


.drawing-tool {
    position: relative;
    width: 100%;
}

.drawing-tool>button {
    position: relative;
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px auto;
    border-radius: 6px;
    background: transparent;
    color: #5d6b7d;
    cursor: pointer;
    transition: all 0.18s ease;
}

.drawing-tool>button:hover,
.drawing-tool>button.active {
    background: #eef4ff;
    color: #2563eb;
}

.drawing-tool-icon {
    font-size: 15px;
    transition: transform 0.18s ease;
}

.drawing-tool-arrow {
    position: absolute;
    right: 1px;
    font-size: 8px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.drawing-tool>button:hover .drawing-tool-icon,
.drawing-tool>button.active .drawing-tool-icon {
    transform: scale(1.08);
}

.drawing-tool>button:hover .drawing-tool-arrow,
.drawing-tool>button.active .drawing-tool-arrow {
    opacity: 1;
    transform: translateX(0);
}

.drawing-tool-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 7px);
    z-index: 100;
    width: 150px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.drawing-tool-menu strong {
    display: block;
    padding: 4px 7px 5px;
    color: #1e293b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.drawing-tool-menu button {
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.drawing-tool-menu button:hover {
    background: #eef4ff;
    color: #2563eb;
}

.chart-wrapper {
    width: 100%;
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.chart-style-menu {
    position: relative;
}

.chart-market-bar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    min-height: 56px;
    padding: 6px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}

.market-quote,
.chart-controls,
.market-symbol,
.ohlc-quote {
    display: flex;
    align-items: center;
}

.market-quote {
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.market-symbol {
    gap: 6px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.market-symbol small {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-sans);
}

.market-favourite {
    color: #f59e0b;
    font-size: 15px;
}

.market-current-price {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.market-change {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.positive {
    color: #10b981;
}

.negative {
    color: #ef4444;
}

.ohlc-quote {
    gap: 8px;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
    font-family: var(--font-mono);
}

.ohlc-quote span {
    display: grid;
    gap: 1px;
    color: #94a3b8;
    font-size: 9px;
}

.ohlc-quote b {
    color: #1e293b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chart-controls {
    gap: 6px;
    width: 100%;
}

.timeframe-control {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 6px;
    background: #f1f5f9;
}

.timeframe-control button {
    padding: 3px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    cursor: pointer;
}

.timeframe-control button:hover {
    color: #2563eb;
}

.timeframe-control button.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.chart-style-trigger {
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.chart-style-trigger:hover {
    color: #2563eb;
    border-color: #93c5fd;
}

.chart-style-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: none;
    width: 150px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.chart-style-menu:hover .chart-style-dropdown,
.chart-style-menu:focus-within .chart-style-dropdown {
    display: grid;
}

.chart-style-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.chart-style-dropdown button:hover,
.chart-style-dropdown button.selected {
    background: #eff6ff;
    color: #2563eb;
}

/* Bottom Section */
.bottom-section {
    display: block;
    flex-shrink: 0;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.portfolio-panel {
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 4px 8px;
    box-shadow: none;
    overflow-y: auto;
}

.panel-header {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
}

/* ---------- Responsive Breakpoints & Mobile Views ---------- */
@media (max-width: 1100px) {
    .orders-side-panel {
        width: 230px;
        min-width: 230px;
    }
}

@media (max-width: 900px) {
    .chart-controls {
        justify-content: space-between;
    }

    .timeframe-control {
        overflow-x: auto;
        max-width: calc(100% - 42px);
    }

    .ohlc-quote {
        display: none;
    }
}

/* Mobile & Tablet Adaptive Panels (<= 1024px) */
@media (max-width: 1024px) {
    .panel-resizer {
        display: none !important;
    }

    .mobile-view-tabs {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        padding: 6px 8px;
        z-index: 30;
        order: 3;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
    }

    .dashboard-body {
        position: relative;
        flex-direction: column;
        flex: 1 !important;
        min-height: 0 !important;
        height: calc(100dvh - 44px) !important;
        max-height: calc(100dvh - 44px) !important;
        width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }

    .dashboard-body.has-bottom-nav {
        height: calc(100vh - 60px);
        /* 60px for header */
        padding-bottom: 60px;
        /* Space for the fixed bottom nav bar */
    }

    /* Reset inline styles applied by Dashboard.jsx */
    .dashboard-page-content>div>div>div {
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
    }

    .dashboard-sidebar-wrap,
    .workspace-section,
    .orders-side-panel,
    .bottom-section {
        display: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        flex: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Show appropriate panel based on active mobile tab */
    .active-mobile-watchlist .dashboard-sidebar-wrap {
        display: flex !important;
        overflow-y: auto;
    }

    .active-mobile-chart .workspace-section {
        display: flex !important;
    }

    .active-mobile-order .orders-side-panel {
        display: flex !important;
        border-left: 0;
        overflow-y: auto;
    }

    .active-mobile-positions .bottom-section,
    .active-mobile-history .bottom-section {
        display: block !important;
    }

    /* Keep main wrapper visible */
    .main-content {
        display: flex !important;
        flex: 1;
        min-height: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .drawing-tools {
        display: none;
    }

    .active-mobile-chart .mobile-drawing-tools-wrap {
        display: flex;
    }
}/* Shared client typography. Keep editor content and icon glyphs independent. */
body {
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#root :is(h1, h2, h3, h4, h5, h6, p, span, label, small, strong, b, input, select, textarea, button, th, td):not(.cm-editor *, .monaco-editor *) {
  font-family: var(--font-sans);
}

#root :is(p, label, small, input, select, textarea, button, [class*="-label"], [class*="_label"], [class*="-description"], [class*="-subtitle"]):not(.cm-editor *, .monaco-editor *) {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  letter-spacing: normal !important;
  text-transform: none;
}

#root table,
#root :is(th, td),
#root :is(th, td) :is(span, strong, b) {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
}

#root :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  letter-spacing: normal;
}

/* Desktop terminal typography for the trading and portfolio workspaces. */
.dashboard-page-content,
.portfolio-dashboard {
  --font-sans: 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dashboard-page-content .order-panel-v2 {
  font-family: var(--font-sans);
}

.dashboard-page-content .volume-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.dashboard-page-content .price-info-symbol {
  font-size: 13px;
  font-weight: 400;
}

.dashboard-page-content .bottom-section table,
.portfolio-dashboard table {
  font-family: var(--font-sans);
  font-size: 12px !important;
  text-transform: none !important;
}

.dashboard-page-content .bottom-section th,
.dashboard-page-content .bottom-section td,
.portfolio-dashboard th,
.portfolio-dashboard td {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.dashboard-page-content .bottom-section td span {
  font-size: 12px !important;
  font-weight: 400 !important;
}

.dashboard-page-content .panel-header button,
.dashboard-page-content .order-panel-v2 .type-tab {
  font-family: var(--font-sans);
  font-size: 12px !important;
  font-weight: 400 !important;
}

.dashboard-page-content .assets-title {
  font-family: var(--font-sans);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: normal;
}

.dashboard-page-content .param-item {
  font-size: 12px !important;
  line-height: 1.35;
  padding: 2px 0;
}

.dashboard-page-content .param-label,
.dashboard-page-content .param-value {
  font-family: var(--font-sans);
  font-weight: 400;
}

.dashboard-page-content .assets-list .param-value {
  font-weight: 600;
}

.portfolio-dashboard .portfolio-asset-list > div,
.portfolio-dashboard .portfolio-asset-list b {
  font-size: 12px;
  line-height: 1.35;
}

.portfolio-dashboard .portfolio-asset-list b {
  font-weight: 600;
}

.portfolio-dashboard .portfolio-metric__top span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.portfolio-dashboard .portfolio-eyebrow,
.portfolio-dashboard .portfolio-section-title span,
.portfolio-dashboard .portfolio-asset-list span,
.portfolio-dashboard .portfolio-metric small,
.portfolio-dashboard .portfolio-account-head,
.portfolio-dashboard .portfolio-chart-controls button,
.portfolio-dashboard .portfolio-chart-summary span,
.portfolio-dashboard .portfolio-chart-axis,
.portfolio-dashboard .portfolio-notice small,
.portfolio-dashboard .portfolio-empty span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.portfolio-dashboard .portfolio-accounts article > .portfolio-account-head {
  font-size: 12px;
  font-weight: 400;
}

.portfolio-dashboard .portfolio-chart-controls button {
  text-transform: capitalize;
}

@media (max-width: 700px) {
  .portfolio-dashboard .portfolio-accounts article > .portfolio-asset-list {
    grid-template-columns: 1fr;
  }
}
.portfolio-dashboard{--pd-bg:#080b12;--pd-card:#101521;--pd-line:#202838;--pd-muted:#8a94a8;--pd-text:#eef2f8;--pd-gold:#d8b66b;flex:1;min-width:0;height:100%;overflow:auto;padding:26px;background:radial-gradient(circle at 15% 0,rgba(216,182,107,.08),transparent 28%),var(--pd-bg);color:var(--pd-text)}
.portfolio-dashboard--center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--pd-muted)}
.portfolio-loader{width:34px;height:34px;border:3px solid #263044;border-top-color:var(--pd-gold);border-radius:50%;animation:portfolio-spin .8s linear infinite}@keyframes portfolio-spin{to{transform:rotate(360deg)}}
.portfolio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}.portfolio-eyebrow,.portfolio-section-title span{color:var(--pd-gold);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.portfolio-heading h1{margin:3px 0 2px;font-size:26px}.portfolio-heading p,.portfolio-heading time{color:var(--pd-muted);font-size:12px}.portfolio-heading__actions{display:flex;align-items:center;gap:12px}.portfolio-heading button,.portfolio-error button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #30394a;border-radius:8px;background:#121824;color:#dbe1eb;font-size:12px}.portfolio-heading button:hover{border-color:var(--pd-gold);color:var(--pd-gold)}
.portfolio-error{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:11px 14px;border:1px solid #6f313b;border-radius:9px;background:#2a1419;color:#ff9eaa;font-size:12px}.portfolio-error span{flex:1}.portfolio-metrics{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:11px}.portfolio-metric{min-height:112px;padding:15px;border:1px solid var(--pd-line);border-radius:12px;background:linear-gradient(145deg,#121824,#0e131d)}.portfolio-metric__top{display:flex;align-items:center;justify-content:space-between;color:var(--pd-muted);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.portfolio-metric__top svg{font-size:14px}.portfolio-metric strong{display:block;margin:10px 0 2px;font-size:22px;letter-spacing:.01em}.portfolio-metric small{color:var(--pd-muted);font-size:10px}.portfolio-metric--gold{border-color:#514328}.portfolio-metric--gold strong,.portfolio-metric--gold svg{color:var(--pd-gold)}.portfolio-metric--positive strong,.portfolio-metric--positive svg,.is-profit{color:#55d6a0!important}.portfolio-metric--negative strong,.portfolio-metric--negative svg,.is-loss{color:#ff7583!important}
.portfolio-account-strip,.portfolio-dashboard .portfolio-panel{margin-top:13px;border:1px solid var(--pd-line);border-radius:12px;background:rgba(16,21,33,.94)}.portfolio-dashboard .portfolio-panel{height:auto;min-height:0}.portfolio-account-strip{padding:15px}.portfolio-section-title{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px}.portfolio-section-title h2{margin-top:2px;font-size:15px}.portfolio-section-title b{display:grid;place-items:center;min-width:27px;height:27px;padding:0 7px;border:1px solid #30394a;border-radius:7px;color:#b8c0ce;font-size:11px}.portfolio-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}.portfolio-accounts article{padding:11px 12px;border:1px solid var(--pd-line);border-radius:9px;background:#0c111a}.portfolio-accounts article.is-current{border-color:#6a5831}.portfolio-accounts article>div{display:flex;align-items:center;gap:6px;color:#c6cdd8;font-size:11px}.portfolio-accounts em,.portfolio-accounts i{padding:2px 5px;border-radius:4px;background:#1d2533;color:#8f9aae;font-size:8px;font-style:normal;text-transform:uppercase}.portfolio-accounts i{background:#3b321e;color:var(--pd-gold)}.portfolio-accounts strong{display:block;margin:8px 0 2px;font-size:16px}.portfolio-accounts small{color:var(--pd-muted);font-size:9px}
.portfolio-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.8fr);gap:13px}.portfolio-panel{min-width:0;padding:15px}.portfolio-table-wrap{overflow:auto}.portfolio-orders table{width:100%;border-collapse:collapse;white-space:nowrap}.portfolio-orders th{padding:8px 9px;border-bottom:1px solid var(--pd-line);color:#737e92;font-size:9px;letter-spacing:.06em;text-align:left;text-transform:uppercase}.portfolio-orders td{padding:10px 9px;border-bottom:1px solid #1a2130;color:#b6bfcd;font-size:11px;font-variant-numeric:tabular-nums}.portfolio-orders td strong{color:#eef2f8}.portfolio-side{padding:3px 6px;border-radius:4px;font-size:9px;font-weight:800}.portfolio-side--buy{background:#15352c;color:#52d39d}.portfolio-side--sell{background:#3a1c24;color:#ff7888}.portfolio-alert-list{display:flex;flex-direction:column;gap:7px}.portfolio-notice{display:flex;gap:10px;padding:10px;border:1px solid #252e3e;border-radius:8px;background:#0c111a}.portfolio-notice__icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:7px;background:#182334;color:#8eb7f1}.portfolio-notice--warning .portfolio-notice__icon{background:#342b18;color:#e6bd65}.portfolio-notice--critical .portfolio-notice__icon{background:#3a1c24;color:#ff7888}.portfolio-notice strong,.portfolio-notice span{display:block}.portfolio-notice strong{color:#dce2ec;font-size:11px}.portfolio-notice span{margin-top:2px;color:var(--pd-muted);font-size:9px}.portfolio-empty{display:flex;min-height:110px;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#687488;font-size:10px;text-align:center}.portfolio-empty svg{margin-bottom:3px;font-size:17px}.portfolio-empty strong{color:#aeb7c5;font-size:11px}
@media(max-width:1180px){.portfolio-metrics{grid-template-columns:repeat(3,1fr)}.portfolio-grid{grid-template-columns:1fr}.portfolio-alerts{margin-bottom:70px}}
@media(max-width:700px){.portfolio-dashboard{padding:18px 14px}.portfolio-heading{align-items:flex-start;flex-direction:column}.portfolio-heading__actions{width:100%;justify-content:space-between}.portfolio-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-metric{min-height:100px;padding:12px}.portfolio-metric strong{font-size:17px}.portfolio-metric:last-child{grid-column:1/-1}.portfolio-accounts{grid-template-columns:1fr}.portfolio-panel{padding:12px}}
@media(max-width:390px){.portfolio-metrics{grid-template-columns:1fr}.portfolio-metric:last-child{grid-column:auto}}

/* Match the application's established light trading theme. */
.portfolio-dashboard{--pd-bg:#f1f5f9;--pd-card:#fff;--pd-line:#e2e8f0;--pd-muted:#64748b;--pd-text:#0f172a;--pd-gold:#2563eb;background:var(--pd-bg);color:var(--pd-text)}
.portfolio-loader{border-color:#dbe3ee;border-top-color:#2563eb}
.portfolio-heading button,.portfolio-error button{border-color:#cbd5e1;background:#fff;color:#475569}
.portfolio-heading button:hover{border-color:#2563eb;background:#eff6ff;color:#2563eb}
.portfolio-error{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.portfolio-metric{border-color:#e2e8f0;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.portfolio-metric--gold{border-color:#bfdbfe;background:linear-gradient(145deg,#fff,#eff6ff)}
.portfolio-metric--positive strong,.portfolio-metric--positive svg,.is-profit{color:#059669!important}
.portfolio-metric--negative strong,.portfolio-metric--negative svg,.is-loss{color:#dc2626!important}
.portfolio-account-strip,.portfolio-dashboard .portfolio-panel{border-color:#e2e8f0;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.portfolio-section-title b{border-color:#dbe3ee;background:#f8fafc;color:#475569}
.portfolio-accounts article{border-color:#e2e8f0;border-radius:8px;background:#f8fafc}
.portfolio-accounts article.is-current{border-color:#93c5fd;background:#eff6ff}
.portfolio-accounts article>div{color:#334155}
.portfolio-accounts em,.portfolio-accounts i{background:#e2e8f0;color:#64748b}
.portfolio-accounts i{background:#dbeafe;color:#2563eb}
.portfolio-orders th{border-color:#e2e8f0;background:#f8fafc;color:#64748b}
.portfolio-orders thead{position:sticky;top:0;z-index:3}
.portfolio-orders th{position:sticky;top:0;z-index:3;background:#f8fafc;box-shadow:0 1px 0 #e2e8f0}
.portfolio-orders td{border-color:#f1f5f9;color:#475569}
.portfolio-orders tbody tr:hover{background:#f8fafc}
.portfolio-orders td strong{color:#0f172a}
.portfolio-side--buy{background:#d1fae5;color:#047857}
.portfolio-side--sell{background:#fee2e2;color:#dc2626}
.portfolio-notice{border-color:#e2e8f0;background:#f8fafc}
.portfolio-notice__icon{background:#dbeafe;color:#2563eb}
.portfolio-notice--warning .portfolio-notice__icon{background:#fef3c7;color:#d97706}
.portfolio-notice--critical .portfolio-notice__icon{background:#fee2e2;color:#dc2626}
.portfolio-notice strong{color:#1e293b}
.portfolio-empty{color:#94a3b8}
.portfolio-empty strong{color:#64748b}
.portfolio-wallet-chart{padding:15px 15px 6px}.portfolio-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.portfolio-chart-head .portfolio-section-title{padding-bottom:4px}.portfolio-chart-controls{display:flex;align-items:center;gap:8px}.portfolio-chart-controls>div{display:flex;padding:2px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc}.portfolio-chart-controls button{padding:4px 8px;border-radius:5px;color:#64748b;font-size:10px;font-weight:600;text-transform:capitalize}.portfolio-chart-controls button:hover{color:#2563eb}.portfolio-chart-controls button.active{background:#fff;color:#2563eb;box-shadow:0 1px 3px rgba(15,23,42,.12)}.portfolio-chart-summary{display:flex;align-items:baseline;gap:10px;margin:7px 0 3px}.portfolio-chart-summary strong{font-size:20px}.portfolio-chart-summary span{font-size:10px;font-weight:600}.portfolio-chart-canvas{position:relative;height:195px}.portfolio-chart-canvas svg{display:block;width:100%;height:177px;overflow:visible}.portfolio-chart-gridline{stroke:#e2e8f0;stroke-width:1;vector-effect:non-scaling-stroke}.portfolio-chart-area{fill:url(#wallet-chart-fill)}.portfolio-chart-line{fill:none;stroke:#2563eb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.portfolio-chart-point{fill:#fff;stroke:#2563eb;stroke-width:2;vector-effect:non-scaling-stroke}.portfolio-chart-point:hover{fill:#2563eb}.portfolio-chart-axis{position:absolute;right:3px;bottom:2px;left:3px;display:flex;justify-content:space-between;color:#94a3b8;font-size:9px;line-height:1}.portfolio-chart-empty{min-height:180px}
.portfolio-middle-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:9px;min-height:0}.portfolio-middle-grid>.portfolio-wallet-chart,.portfolio-middle-grid>.portfolio-account-strip{min-width:0;height:auto}.portfolio-middle-grid .portfolio-accounts{grid-template-columns:1fr;max-height:190px;overflow:auto}.portfolio-account-head{display:flex;align-items:center;gap:6px}.portfolio-accounts article>.portfolio-asset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin-top:7px}.portfolio-asset-list>div{display:flex;align-items:center;min-width:0;gap:5px;font-size:9px}.portfolio-asset-list>div::after{content:"";min-width:8px;flex:1;order:1;border-bottom:1px dotted #cbd5e1}.portfolio-asset-list span{order:0;color:#64748b;white-space:nowrap}.portfolio-asset-list b{order:2;color:#0f172a;font-size:9px;font-weight:600;white-space:nowrap}
.portfolio-section-resizer{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;min-width:8px;height:100%;cursor:col-resize;touch-action:none;outline:none}.portfolio-section-resizer::before{content:"";position:absolute;inset:0 -3px}.portfolio-section-resizer span{width:2px;height:34px;border-radius:2px;background:#cbd5e1;transition:height .15s ease,background .15s ease}.portfolio-section-resizer:hover span,.portfolio-section-resizer:focus-visible span{height:48px;background:#2563eb}.portfolio-section-resizer:focus-visible{border-radius:4px;box-shadow:0 0 0 2px #bfdbfe}
@media(max-width:700px){.portfolio-chart-head{flex-direction:column}.portfolio-chart-controls{width:100%;justify-content:space-between}.portfolio-chart-canvas{height:175px}.portfolio-chart-canvas svg{height:157px}.portfolio-chart-point{r:4}.portfolio-chart-summary{margin-top:12px}}
@media(max-width:700px){.portfolio-middle-grid,.portfolio-grid{grid-template-columns:1fr!important}.portfolio-section-resizer{display:none}.portfolio-middle-grid .portfolio-accounts{grid-template-columns:1fr;max-height:none}}

/* Fit the complete overview inside the desktop application viewport. */
@media(min-width:701px){
  .portfolio-dashboard{display:flex;flex-direction:column;overflow:hidden;padding:14px 18px}
  .portfolio-heading{flex:0 0 auto;margin-bottom:9px}
  .portfolio-heading h1{font-size:22px}
  .portfolio-metrics{flex:0 0 auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
  .portfolio-metric{min-height:82px;padding:10px 12px}
  .portfolio-metric strong{margin:6px 0 0;font-size:18px}
  .portfolio-metric small{font-size:9px}
  .portfolio-middle-grid{order:1;flex:0 0 auto;min-height:0;gap:0}
  .portfolio-wallet-chart{margin-top:9px;padding:10px 12px 7px}
  .portfolio-chart-summary{margin:3px 0 0}
  .portfolio-chart-summary strong{font-size:17px}
  .portfolio-chart-canvas{height:clamp(115px,15vh,165px)}
  .portfolio-chart-canvas svg{height:calc(100% - 18px)}
  .portfolio-account-strip{flex:0 0 auto;margin-top:9px;padding:9px 11px}
  .portfolio-account-strip .portfolio-section-title{padding-bottom:7px}
  .portfolio-accounts{gap:7px}
  .portfolio-accounts article{padding:7px 9px}
  .portfolio-accounts strong{margin:4px 0 0;font-size:14px}
  .portfolio-grid{position:relative;order:2;flex:1;min-height:140px;gap:0;overflow:hidden}
  .portfolio-alerts{margin-bottom:0}
  .portfolio-dashboard .portfolio-grid .portfolio-panel{height:calc(100% - 9px);min-height:0;margin-top:9px;padding:10px 12px;overflow:hidden}
  .portfolio-grid .portfolio-section-title{padding-bottom:7px}
  .portfolio-table-wrap{height:calc(100% - 39px);overflow:auto}
  .portfolio-orders th{padding:6px 8px}
  .portfolio-orders td{padding:7px 8px}
  .portfolio-dashboard .portfolio-alerts{display:flex;flex-direction:column}
  .portfolio-alerts>.portfolio-section-title{flex:0 0 auto}
  .portfolio-alert-list{display:grid;flex:1;height:auto;min-height:0;max-height:none;grid-auto-rows:minmax(0,1fr);gap:4px;overflow:hidden}
  .portfolio-notice{min-height:0;align-items:center;padding:4px 7px;overflow:hidden}
  .portfolio-notice__icon{width:23px;height:23px;flex-basis:23px;font-size:10px}
  .portfolio-notice>div:last-child{min-width:0;overflow:hidden}
  .portfolio-notice strong,.portfolio-notice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .portfolio-notice strong{font-size:10px}
  .portfolio-notice span{margin-top:0;font-size:8px}
  .portfolio-empty{min-height:100%}
}

@media(min-width:701px) and (max-height:800px){
  .portfolio-dashboard{padding-top:9px;padding-bottom:9px}
  .portfolio-heading{margin-bottom:5px}
  .portfolio-heading h1{font-size:19px}
  .portfolio-heading p{display:none}
  .portfolio-metric{min-height:66px;padding:7px 10px}
  .portfolio-metric strong{font-size:16px}
  .portfolio-wallet-chart{margin-top:5px}
  .portfolio-chart-canvas{height:105px}
  .portfolio-account-strip{margin-top:5px;padding-top:7px;padding-bottom:7px}
  .portfolio-accounts article{padding:4px 8px}
  .portfolio-dashboard .portfolio-grid .portfolio-panel{height:calc(100% - 5px);margin-top:5px}
}
.trade-report-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-sans);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.trade-report-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    box-sizing: border-box;
    max-width: 100%;
    font-size: 12px;
    font-weight: 500;
}

.trade-report-controls select,
.trade-report-controls input {
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    box-sizing: border-box;
    max-width: 100%;
    outline: none;
    transition: all 0.15s ease;
}

.trade-report-controls select:focus,
.trade-report-controls input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.trade-report-note {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 400;
    word-break: break-word;
}

.trade-report-error {
    font-size: 12px;
    color: #dc2626;
    font-weight: 500;
    word-break: break-word;
}

.trade-report-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.trade-report-download:hover:not(:disabled) {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.trade-report-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trade-report-controls :is(button, select, input):focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

@media (max-width: 700px) {
    .trade-report-controls {
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
    }

    .trade-report-controls label {
        flex-wrap: wrap;
        width: 100%;
    }

    .trade-report-controls select,
    .trade-report-controls input {
        width: 100%;
    }

    .trade-report-note {
        width: 100%;
    }

    .trade-report-download {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}
/* History Page Styling */

.history-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.history-body {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.history-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 80px;
    gap: 16px;
    min-width: 0;
    background: #f8fafc;
}

/* Header summary metrics */
.history-header-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.history-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-title-row h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-user-tag {
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.history-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.history-metric-card {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-metric-card span {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-metric-card strong {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.history-metric-card strong.profit {
    color: #10b981;
}

.history-metric-card strong.loss {
    color: #ef4444;
}

/* Search and Filter Toolbar */
.history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.history-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 38px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    width: 260px;
    transition: all 0.2s ease;
}

.history-search-input:focus-within {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.history-search-input input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    width: 100%;
    font-family: var(--font-sans);
}

.history-filter-pills {
    display: flex;
    gap: 6px;
}

.history-filter-btn {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-filter-btn:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

.history-filter-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* History Table */
.history-table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    table-layout: auto;
}

.history-table th {
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.history-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
    font-weight: 400;
    color: #0f172a;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.history-table tr.history-row {
    cursor: default;
}

.history-table tr.history-row:hover td {
    background: #f8fafc;
}

.history-symbol-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-family: var(--font-sans);
    color: #0f172a;
}

.history-symbol-cell .symbol-tag {
    padding: 0;
    background: transparent;
    color: #0f172a;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    border: none;
}

.history-side-badge {
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    display: inline;
    background: transparent;
    border: none;
}

.history-side-badge.buy {
    background: transparent;
    color: #10b981;
    border: none;
}

.history-side-badge.sell {
    background: transparent;
    color: #ef4444;
    border: none;
}

.history-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: #334155;
}

.history-time-text {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: #475569;
}

.history-duration-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: #475569;
}

.history-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 400;
}

.history-pnl.positive {
    color: #10b981;
}

.history-pnl.negative {
    color: #ef4444;
}

.history-empty-state {
    padding: 40px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
}

/* Responsive Mobile & Tablet Rules for History Page (<= 1024px) */
@media (max-width: 1024px) {
    .history-page {
        height: 100%;
        min-height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .history-body {
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-body .dashboard-sidebar-wrap,
    .history-body .dashboard-sidebar-wrap {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

    .history-main-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        width: 100% !important;
        padding: 12px 10px;
        gap: 12px;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-header-card {
        padding: 12px;
    }

    .history-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .history-title-row h2 {
        font-size: 16px;
    }

    .history-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .history-metric-card {
        padding: 8px 10px;
    }

    .history-metric-card strong {
        font-size: 15px;
    }

    .history-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }

    .history-search-input {
        width: 100%;
        box-sizing: border-box;
    }

    .history-filter-pills {
        overflow-x: auto;
        padding-bottom: 4px;
        width: 100%;
    }

    .history-table-container {
        width: calc(100% + 20px);
        margin: 0 -10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .history-table th,
    .history-table td {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .history-page {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .history-main-content {
        flex: none;
        min-height: auto;
        overflow: visible;
        padding: 12px 10px calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .history-table-container {
        width: 100%;
        margin: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .history-filter-pills {
        flex-wrap: nowrap;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .history-filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
.kyc-onboarding-page {
  min-height: 100vh;
  background: var(--bg-color, #f1f5f9);
  color: var(--text-color, #0f172a);
  padding: 24px;
  box-sizing: border-box;
}

.kyc-onboarding-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.kyc-workspace {
  --kyc-border: var(--border-color, #e2e8f0);
  --kyc-panel: var(--panel-bg, #fff);
  --kyc-muted: var(--text-muted, #64748b);
  color: var(--text-color, #0f172a);
  font-family: var(--font-sans, Inter, sans-serif);
  padding-bottom: 92px;
}

.kyc-workspace.kyc-embedded {
  padding-bottom: 0;
}

.kyc-workspace-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--kyc-panel);
  border: 1px solid var(--kyc-border);
  border-radius: 12px;
  padding: 18px;
}

.kyc-heading-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kyc-heading-copy h1 {
  font-size: 22px;
  margin: 0;
}

.kyc-heading-copy p {
  color: var(--kyc-muted);
  margin: 4px 0 0;
}

.kyc-heading-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #dbeafe;
  color: #2563eb;
}

.kyc-icon-button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}

.kyc-status,
.kyc-document-state {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e2e8f0;
}

.kyc-status-approved,
.state-approved {
  background: #dcfce7;
  color: #166534;
}

.kyc-status-rejected,
.state-rejected,
.state-replacement_requested {
  background: #fee2e2;
  color: #991b1b;
}

.kyc-status-submitted,
.kyc-status-under_review,
.state-pending {
  background: #dbeafe;
  color: #1d4ed8;
}

.kyc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
  margin: 16px 0;
  gap: 8px;
}

.kyc-steps li {
  background: var(--kyc-panel);
  border: 1px solid var(--kyc-border);
  padding: 12px;
  border-radius: 9px;
  color: var(--kyc-muted);
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 13px;
}

.kyc-steps li svg {
  display: inline-block;
  flex-shrink: 0;
}

.kyc-steps .done {
  color: #15803d;
}

.kyc-steps .active {
  border-color: #2563eb;
  color: #2563eb;
}

.kyc-progress-card,
.kyc-feedback {
  background: var(--kyc-panel);
  border: 1px solid var(--kyc-border);
  border-radius: 10px;
  padding: 15px;
  margin: 14px 0;
}

.kyc-progress-card > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.kyc-progress-card strong,
.kyc-progress-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #0f172a);
}

.kyc-progress-card strong svg,
.kyc-check-icon {
  display: inline-block;
  flex-shrink: 0;
  font-size: 16px;
  color: #16a34a;
}

.kyc-progress-card span,
.kyc-feedback p {
  color: var(--kyc-muted);
  font-size: 13px;
}

.kyc-progress-track {
  height: 7px;
  background: #e2e8f0;
  border-radius: 99px;
  margin-top: 12px;
  overflow: hidden;
}

.kyc-progress-track span {
  display: block;
  height: 100%;
  background: #2563eb;
}

.kyc-feedback {
  border-left: 4px solid #f59e0b;
}

.kyc-category {
  margin-top: 20px;
}

.kyc-category > h2 {
  text-transform: capitalize;
  font-size: 15px;
}

.kyc-requirement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kyc-requirement-card {
  background: var(--kyc-panel);
  border: 1px solid var(--kyc-border);
  border-radius: 11px;
  padding: 16px;
  min-width: 0;
}

.kyc-requirement-card header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.kyc-requirement-card h3 {
  font-size: 15px;
  margin: 0;
}

.kyc-requirement-card small,
.kyc-requirement-card > p,
.kyc-file-rules {
  color: var(--kyc-muted);
  font-size: 12px;
}

.kyc-requirement-card label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 12px;
}

.kyc-requirement-card input {
  border: 1px solid var(--kyc-border);
  border-radius: 7px;
  padding: 9px;
  background: var(--panel-bg-2, #f8fafc);
  color: inherit;
}

.kyc-upload-button {
  display: flex !important;
  place-content: center;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  border: 1px dashed #93c5fd !important;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
}

.kyc-upload-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kyc-uploaded-file {
  margin-top: 12px;
  padding: 11px;
  background: var(--panel-bg-2, #f8fafc);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.kyc-uploaded-file > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.kyc-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.kyc-card-actions button,
.kyc-completion-bar button,
.kyc-workspace-state button {
  border: 1px solid var(--kyc-border);
  background: var(--kyc-panel);
  color: inherit;
  border-radius: 7px;
  padding: 8px 12px;
  cursor: pointer;
}

.kyc-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.15s ease;
}

.kyc-card-actions button svg {
  display: inline-block;
  flex-shrink: 0;
  font-size: 13px;
}

.kyc-card-actions button:hover {
  background: var(--panel-bg-2, #f8fafc);
  border-color: #cbd5e1;
}

.kyc-completion-bar {
  position: sticky;
  bottom: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--kyc-panel);
  border: 1px solid var(--kyc-border);
  box-shadow: 0 8px 30px #0f172a1a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 22px;
}

.kyc-workspace.kyc-embedded .kyc-completion-bar {
  position: static;
  box-shadow: none;
  margin-top: 16px;
}

.kyc-verification-tab .kyc-tab-actions {
  margin-top: 12px;
}

.kyc-verification-tab .kyc-workspace-nav-btn {
  margin: 0;
}

.kyc-completion-bar > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.kyc-completion-bar > div:first-child {
  display: grid;
}

.kyc-completion-bar span {
  font-size: 12px;
  color: var(--kyc-muted);
}

.kyc-completion-bar .primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.kyc-preview-overlay {
  position: fixed;
  inset: 0;
  background: #0f172acc;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.kyc-preview {
  width: min(900px, 96vw);
  height: min(760px, 90vh);
  background: var(--kyc-panel);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.kyc-preview header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.kyc-preview header button {
  border: 0;
  background: transparent;
  font-size: 25px;
}

.kyc-preview iframe,
.kyc-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}

.kyc-workspace-state {
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
}

.kyc-error {
  color: #b91c1c;
}

@media (max-width: 720px) {
  .kyc-onboarding-page {
    padding: 10px;
  }
  .kyc-workspace-heading {
    grid-template-columns: auto 1fr;
  }
  .kyc-status {
    grid-column: 2;
  }
  .kyc-steps {
    grid-template-columns: 1fr 1fr;
  }
  .kyc-requirement-grid {
    grid-template-columns: 1fr;
  }
  .kyc-completion-bar {
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .kyc-completion-bar > div:last-child {
    justify-content: flex-end;
  }
  .kyc-progress-card > div:first-child {
    flex-direction: column;
    align-items: flex-start;
  }
  .kyc-preview-overlay {
    padding: 0;
  }
  .kyc-preview {
    width: 100vw;
    height: 92vh;
    border-radius: 14px 14px 0 0;
    align-self: end;
  }
}
.kyc-requirement-grid { align-items: stretch; }
.kyc-requirement-card { display: flex; flex-direction: column; min-height: 270px; }
.kyc-requirement-card > p { min-height: 36px; }
.kyc-requirement-card .kyc-upload-button { margin-top: auto; }
.kyc-requirement-card .kyc-uploaded-file { margin-top: auto; }

@media (max-width: 720px) {
  .kyc-requirement-card { min-height: auto; }
  .kyc-requirement-card > p { min-height: auto; }
}
/* ─── Settings Page ─────────────────────────────────── */
:root {
    --bg-color: #f1f5f9;
    --panel-bg: #ffffff;
    --panel-bg-2: #f8fafc;
    --border-color: #e2e8f0;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --hover-bg: #f1f5f9;
    --negative: #ef4444;
}

.settings-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    transition: background 0.25s, color 0.25s;
}

.settings-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    font-family: var(--font-sans);
}

.settings-content {
    flex: 1;
    padding: 12px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.settings-page-header {
    margin-bottom: 4px !important;
    padding-bottom: 8px !important;
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    font-family: var(--font-sans);
}

.settings-container {
    background: var(--panel-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--font-sans);
    transition: background 0.25s, border-color 0.25s;
}

.settings-sidebar {
    width: 100%;
    background: var(--panel-bg-2);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: row;
    transition: background 0.25s, border-color 0.25s;
}

.settings-tab {
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    font-family: var(--font-sans);
}

.settings-tab:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.settings-tab.active {
    background: transparent;
    color: var(--accent);
    border-bottom: 3px solid var(--accent);
}

.settings-tabs-row {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-bg-2, #f8fafc);
    padding: 0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.settings-tab-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.tab-label-full {
    display: inline;
}

.tab-label-short {
    display: none;
}

.settings-tab-item:first-child {
    border-top-left-radius: 11px;
}

.settings-tab-item:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.settings-tab-item.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    background: var(--panel-bg);
    font-weight: 700;
}

.settings-panel {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.profile-tab-grid,
.security-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.account-tab-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items: start;
}

.security-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-compact-card {
    padding: 20px 24px !important;
    margin-bottom: 0 !important;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.card-subdesc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.settings-form-group.compact {
    margin-bottom: 16px;
}

.settings-form-group.compact label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-compact-card form {
    width: 100%;
}

.settings-form-group.compact input {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px;
    padding: 8px 12px;
    font-size: 13px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--text-color);
    box-sizing: border-box;
}

.settings-form-group.compact input:focus {
    outline: none;
    border-color: var(--accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.email-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.email-input-wrap input {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

.email-input-wrap .email-verified-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
}

.pw-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.pw-input-wrap input {
    width: 100%;
    padding-right: 40px !important;
}

/* Phone Input Customization */
.phone-container,
.react-international-phone-input-container {
    --react-international-phone-height: 40px !important;
    --react-international-phone-border-radius: 8px !important;
    --react-international-phone-border-color: #cbd5e1 !important;
    --react-international-phone-background-color: #f8fafc !important;
    --react-international-phone-text-color: var(--text-color) !important;
    --react-international-phone-font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 40px !important;
}

.phone-container .react-international-phone-country-selector,
.react-international-phone-input-container .react-international-phone-country-selector {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.phone-container .phone-button,
.phone-container .react-international-phone-country-selector-button,
.react-international-phone-input-container .react-international-phone-country-selector-button {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    padding: 0 10px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    margin-right: 0 !important;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.phone-container .phone-button:hover,
.phone-container .react-international-phone-country-selector-button:hover,
.react-international-phone-input-container .react-international-phone-country-selector-button:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.phone-container .phone-button:focus,
.phone-container .react-international-phone-country-selector-button:focus,
.react-international-phone-input-container .react-international-phone-country-selector-button:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.phone-container .react-international-phone-country-selector-button__button-content,
.react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
}

.phone-container .react-international-phone-country-selector-button__dropdown-arrow,
.react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
    margin-left: 2px !important;
    margin-right: 0 !important;
    border-top-color: #64748b !important;
}

.phone-container .react-international-phone-flag-emoji,
.react-international-phone-input-container .react-international-phone-flag-emoji {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.phone-container .phone-input,
.phone-container .react-international-phone-input,
.react-international-phone-input-container .react-international-phone-input {
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    color: var(--text-color) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-left: 0 !important;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.phone-container .phone-input:hover,
.phone-container .react-international-phone-input:hover,
.react-international-phone-input-container .react-international-phone-input:hover {
    border-color: #94a3b8 !important;
}

.phone-container .phone-input:focus,
.phone-container .react-international-phone-input:focus,
.react-international-phone-input-container .react-international-phone-input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.phone-dropdown,
.react-international-phone-country-selector-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    z-index: 1050 !important;
}

.settings-panel h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 6px;
}

.settings-panel p.desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.settings-form-group {
    margin-bottom: 20px;
}

.settings-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 7px;
}

.settings-form-group input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-size: 14px;
    color: var(--text-color);
    background: var(--panel-bg);
    transition: border-color 0.2s, background 0.25s;
}

.settings-form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.12);
}

.settings-form-group input:disabled {
    background: var(--hover-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

.settings-btn {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.settings-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-btn.danger {
    background: var(--negative);
}

.settings-btn.danger:hover:not(:disabled) {
    background: #dc2626;
}

.settings-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--panel-bg);
    transition: background 0.25s, border-color 0.25s;
}

.settings-card h3 {
    margin-top: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.settings-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: #10b981;
}

input:focus+.toggle-slider {
    box-shadow: 0 0 1px #10b981;
}

input:checked+.toggle-slider:before {
    transform: translateX(20px);
}

input:disabled+.toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 2FA Dark Card Custom Styling ── */
.twofa-card-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    border: 1px solid #1e40af !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}

.twofa-card-dark .toggle-slider {
    background-color: rgba(255, 255, 255, 0.25);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}

.twofa-card-dark .toggle-slider:before {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.twofa-card-dark input:checked+.toggle-slider {
    background-color: #10b981;
    border-color: #34d399;
}

/* Modal Overlay & Card — High Contrast & Clean Visibility */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    width: 440px;
    max-width: 92%;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    text-align: center;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    box-sizing: border-box;
}

.modal-content h3 {
    margin-top: 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-content p {
    color: #475569;
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.5;
}

.modal-content label {
    color: #334155;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}

.modal-btn-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.qr-code-box {
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: inline-block;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.setup-key-text {
    font-family: var(--font-mono, monospace);
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #0f172a;
}

/* Skeleton */
@keyframes skeletonPulse {
    0% {
        background-color: var(--skeleton-base);
    }

    50% {
        background-color: var(--skeleton-highlight);
    }

    100% {
        background-color: var(--skeleton-base);
    }
}

.skeleton-container {
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.skeleton-tab {
    height: 24px;
    width: 120px;
    margin: 16px 24px;
    border-radius: 4px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

.skeleton-title {
    height: 28px;
    width: 200px;
    margin-bottom: 8px;
    border-radius: 4px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

.skeleton-desc {
    height: 16px;
    width: 300px;
    margin-bottom: 32px;
    border-radius: 4px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

.skeleton-input {
    height: 42px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    border-radius: 6px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

.skeleton-btn {
    height: 40px;
    width: 120px;
    border-radius: 6px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

/* ─── Mobile & Tablet Responsive (<= 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    .settings-content {
        padding: 12px;
        gap: 12px;
    }

    .profile-tab-grid,
    .security-tab-grid,
    .account-tab-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Horizontal scrollable tab items on touch devices */
    .settings-tabs-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    .settings-tabs-row::-webkit-scrollbar {
        display: none;
    }

    .settings-tab-item {
        padding: 10px 14px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .settings-panel {
        padding: 12px 14px;
    }

    .settings-panel h2 {
        font-size: 16px;
    }

    /* Full-width inputs */
    .settings-form-group input,
    .settings-form-group select {
        max-width: 100%;
        font-size: 14px;
    }

    .settings-form-group .phone-container {
        width: 100% !important;
    }

    /* Stack any side-by-side rows vertically */
    .input-row {
        flex-direction: column;
        gap: 12px;
    }

    .input-row>* {
        width: 100%;
    }

    .account-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .modal-btn-row {
        flex-direction: column;
    }

    .modal-btn-row button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .settings-content {
        padding: 8px;
    }

    .account-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-content {
        width: 95%;
        padding: 20px 16px;
    }
}

/* ── New: Settings header subtitle ──────────────────────────────── */
.settings-header-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ── Profile Avatar Card ─────────────────────────────────────────── */
.profile-avatar-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
    border: 1px solid #dbeafe;
    border-radius: 12px;
    margin-bottom: 24px;
}

.profile-avatar-info {
    flex: 1;
}

.profile-avatar-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.profile-avatar-email {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.profile-avatar-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.badge-unverified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.account-mode-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.account-mode-badge.live {
    background: #d1fae5;
    color: #065f46;
}

.account-mode-badge.demo {
    background: #fef3c7;
    color: #92400e;
}

.settings-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 24px;
}

/* ── Label badge (Read-only) ─────────────────────────────────────── */
.label-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    background: #e2e8f0;
    color: #64748b;
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 6px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── Input with icon button (copy) ──────────────────────────────── */
.input-icon-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.input-icon-btn:hover {
    color: var(--accent);
}

/* ── Password input wrapper ──────────────────────────────────────── */
.pw-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 400px;
}

.pw-input-wrap input {
    flex: 1;
    padding-right: 40px !important;
}

.pw-input-wrap .eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
}

/* ── Password strength ───────────────────────────────────────────── */
.pw-strength-wrap {
    margin-top: 8px;
    max-width: 400px;
}

.pw-strength-bars {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.pw-strength-bar {
    height: 4px;
    flex: 1;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.pw-strength-label {
    font-size: 11px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.pw-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pw-check {
    font-size: 11px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pw-check.ok {
    color: #10b981;
    font-weight: 600;
}

/* ── Password match message ──────────────────────────────────────── */
.pw-match-msg {
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pw-match-msg.ok {
    color: #10b981;
}

.pw-match-msg.err {
    color: #ef4444;
}

/* ── Settings card header (icon + title + action) ───────────────── */
.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-card-title-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

/* ── 2FA enabled notice ──────────────────────────────────────────── */
.twofa-enabled-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 13px;
    color: #15803d;
}

/* ── Method badge ────────────────────────────────────────────────── */
.method-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

/* ── Ghost button ────────────────────────────────────────────────── */
.settings-btn-ghost {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Primary button (for modals) ────────────────────────────────── */
.settings-btn-primary {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.settings-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Sessions ────────────────────────────────────────────────────── */
.sessions-list-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg-2);
    transition: border-color 0.2s;
}

.session-item.current {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.session-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.session-info {
    flex: 1;
}

.session-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.session-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.current-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #10b981;
    color: white;
    padding: 1px 7px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.session-revoke-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.session-revoke-btn:hover {
    background: #ef4444;
    color: white;
}

.session-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-session {
    height: 58px;
    border-radius: 10px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
    background: var(--border-color);
}

.empty-sessions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #94a3b8;
    font-size: 13px;
    justify-content: center;
}

/* ── Account Mode Banner ─────────────────────────────────────────── */
.account-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.account-mode-banner.live {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.account-mode-banner.demo {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.account-mode-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-mode-icon {
    font-size: 22px;
}

.account-mode-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.account-mode-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.account-switch-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
    white-space: nowrap;
}

.account-switch-btn.to-demo {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #d97706;
}

.account-switch-btn.to-live {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #059669;
}

.account-switch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Account Stats Grid ──────────────────────────────────────────── */
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.account-stat-card {
    padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.2vw, 14px);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    transition: box-shadow 0.2s;
}

.account-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.account-stat-label {
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.account-stat-value {
    font-size: clamp(0.85rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-stat-value.mono {
    font-family: var(--font-mono, monospace);
}

.copy-stat-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.copy-stat-btn:hover {
    color: var(--accent);
}

/* ── KYC badge ───────────────────────────────────────────────────── */
.kyc-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    text-transform: capitalize;
}

.kyc-badge.approved,
.kyc-badge.verified,
.kyc-badge.completed {
    background: #d1fae5;
    color: #10b981;
}

.kyc-badge.pending,
.kyc-badge.submitted,
.kyc-badge.rejected {
    background: #fee2e2;
    color: #ef4444;
}

/* ── Registration info grid ──────────────────────────────────────── */
.reg-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.reg-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.reg-info-row:last-child {
    border-bottom: none;
}

.reg-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.reg-val {
    font-size: 13px;
    color: var(--text-color);
    font-weight: 600;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reg-val.mono {
    font-family: var(--font-mono, monospace);
}

/* ── Notification list ───────────────────────────────────────────── */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item-info {
    flex: 1;
}

.notif-item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.notif-item-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── 2FA Method Cards ────────────────────────────────────────────── */
.twofa-method-grid {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.twofa-method-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    border-radius: 12px;
    cursor: pointer;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    color: #1e40af;
    font-size: 13px;
    transition: all 0.2s;
}

.twofa-method-card:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.twofa-method-card.green {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.twofa-method-card.green:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

.twofa-method-emoji {
    font-size: 26px;
}

.twofa-method-card strong {
    font-size: 13px;
    font-weight: 700;
}

.twofa-method-card span {
    font-size: 11px;
    opacity: 0.8;
    text-align: center;
}

/* ── Fade-in tab pane ────────────────────────────────────────────── */
.tab-pane.fade-in {
    animation: tabFadeIn 0.2s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Mono utility ────────────────────────────────────────────────── */
.mono {
    font-family: var(--font-mono, 'Fira Code', monospace);
}

/* ── Comprehensive Responsive Mobile & Tablet Layout ──────────────── */
@media (max-width: 768px) {
    .tab-label-full {
        display: none !important;
    }

    .tab-label-short {
        display: inline !important;
    }

    .settings-content {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .settings-panel {
        padding: 10px 12px !important;
    }

    .settings-tabs-row {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: var(--panel-bg-2, #f8fafc) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 0 8px !important;
        gap: 2px !important;
        box-sizing: border-box !important;
    }

    .settings-tabs-row::-webkit-scrollbar {
        display: none !important;
    }

    .settings-tab-item {
        flex: 1 0 auto !important;
        min-width: max-content !important;
        padding: 10px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        gap: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -1px !important;
        border-radius: 6px 6px 0 0 !important;
        cursor: pointer !important;
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
    }

    .settings-tab-item svg {
        margin-right: 0 !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }

    .settings-tab-item.active {
        color: var(--accent, #2563eb) !important;
        border-bottom: 2px solid var(--accent, #2563eb) !important;
        background: var(--panel-bg, #ffffff) !important;
        font-weight: 700 !important;
    }

    .settings-compact-card,
    .settings-card {
        padding: 12px 14px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-tab-grid,
    .security-tab-grid,
    .account-tab-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .profile-avatar-card {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .profile-avatar-info {
        align-items: flex-start !important;
    }

    .account-mode-banner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
    }

    .account-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .account-stat-card {
        padding: 8px 10px !important;
    }

    .reg-info-row {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
    }

    .notif-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .settings-header h1 {
        font-size: 18px !important;
    }

    .settings-tabs-row {
        padding: 0 4px !important;
        gap: 1px !important;
    }

    .settings-tab-item {
        padding: 9px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
        letter-spacing: 0 !important;
    }

    .settings-tab-item svg {
        font-size: 11px !important;
    }

    .account-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }

    .account-stat-card {
        padding: 6px 8px !important;
    }

    .account-stat-label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    .account-stat-value {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   KYC Verification Tab Styles
   ========================================================================== */
.kyc-tab-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kyc-status-banner {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid transparent;
    align-items: flex-start;
}

.kyc-banner-approved {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
    border-color: rgba(16, 185, 129, 0.3);
}

.kyc-banner-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.04));
    border-color: rgba(245, 158, 11, 0.3);
}

.kyc-banner-rejected {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.04));
    border-color: rgba(239, 68, 68, 0.3);
}

.kyc-banner-unsubmitted {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.04));
    border-color: rgba(59, 130, 246, 0.3);
}

.kyc-banner-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.kyc-banner-content {
    flex: 1;
}

.kyc-banner-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.kyc-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 9999px;
}

.kyc-badge-approved {
    background: #dcfce7;
    color: #15803d;
}

.kyc-badge-pending {
    background: #fef3c7;
    color: #b45309;
}

.kyc-badge-rejected {
    background: #fee2e2;
    color: #b91c1c;
}

.kyc-badge-unsubmitted {
    background: #e0f2fe;
    color: #0369a1;
}

.kyc-banner-desc {
    margin: 8px 0 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}

.kyc-remarks-box {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    border-radius: 6px;
    font-size: 13px;
    color: #991b1b;
}

.kyc-remarks-box strong {
    display: block;
    margin-bottom: 4px;
}

.kyc-remarks-box p {
    margin: 0;
    line-height: 1.4;
}

.kyc-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding-bottom: 12px;
}

.kyc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.kyc-doc-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: all 0.2s ease;
}

.kyc-doc-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.kyc-doc-card.uploaded {
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.4), var(--card-bg, #ffffff));
}

.kyc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.kyc-card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary, #94a3b8);
    letter-spacing: 0.03em;
}

.kyc-card-title {
    margin: 4px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.kyc-doc-status-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pill-done {
    background: #dcfce7;
    color: #16a34a;
}

.pill-missing {
    background: #f1f5f9;
    color: #64748b;
}

.kyc-dropzone {
    border: 2px dashed var(--border-color, #cbd5e1);
    border-radius: 10px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-hover, #f8fafc);
    transition: all 0.2s ease;
}

.kyc-dropzone:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}

.kyc-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #334155);
}

.kyc-dropzone-inner small {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary, #94a3b8);
}

.kyc-uploaded-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kyc-file-preview-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-subtle, #f8fafc);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.kyc-file-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kyc-file-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.kyc-file-status {
    font-size: 11px;
    color: #10b981;
    font-weight: 500;
}

.kyc-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kyc-btn-secondary {
    flex: 1;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-light, #eff6ff);
    color: var(--accent-blue, #2563eb);
    border: 1px solid rgba(37, 99, 235, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kyc-btn-secondary:hover {
    background: #dbeafe;
}

.kyc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kyc-btn-outline:hover:not(:disabled) {
    background: #f1f5f9;
    color: var(--text-primary, #1e293b);
}

.kyc-btn-outline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kyc-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kyc-btn-danger:hover:not(:disabled) {
    background: #fee2e2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.4);
}

.kyc-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kyc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.kyc-modal-container {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.kyc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.kyc-modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.kyc-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    border-radius: 4px;
}

.kyc-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.kyc-modal-body {
    flex: 1;
    overflow: hidden;
    background: #f8fafc;
}

.kyc-doc-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.kyc-section-box {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.kyc-section-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.kyc-section-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kyc-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.kyc-section-subtitle {
    margin: 2px 0 0 0;
    font-size: 12.5px;
    color: var(--text-secondary, #64748b);
}

.kyc-select-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-hover, #ffffff);
    color: var(--text-primary, #0f172a);
    font-size: 13.5px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s;
}

.kyc-select-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.kyc-text-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-hover, #ffffff);
    color: var(--text-primary, #0f172a);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.kyc-text-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}.main-content.page-payment {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Disable scroll on desktop screens with sufficient height to fit all contents */
@media (min-height: 820px) and (min-width: 1025px) {
    .main-content.page-payment {
        overflow-y: hidden;
    }

    .payment-page {
        padding-bottom: 24px;
    }
}

.payment-page {
    padding: 20px 24px 80px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-sans, Inter, sans-serif);
    color: #0f172a;
    box-sizing: border-box;
}

/* Header Top Bar */
.payment-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
    width: 100%;
}

.page-header-text h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.page-header-text p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.account-metrics {
    display: flex;
    gap: 16px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    min-width: 120px;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.metric-val {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    color: #0f172a;
}

.metric-val.green {
    color: #10b981;
}

/* Simple Tabs Switcher */
.simple-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1px;
    width: 100%;
}

.tab-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-link:hover {
    color: #2563eb;
}

.tab-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 700;
}

.tab-icon {
    font-size: 12px;
}

/* Body Layout Grid */
.payment-body-grid {
    display: grid;
    grid-template-columns: 1fr minmax(380px, 410px);
    gap: 24px;
    width: 100%;
}

@media (max-width: 900px) {
    .payment-body-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.simple-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.section-heading {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Preset Chips */
.preset-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.preset-chip {
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    cursor: pointer;
}

.preset-chip:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.preset-chip.selected {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

/* Form Controls */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-field label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.simple-input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
}

.simple-input:focus {
    border-color: #2563eb;
}

.form-row {
    display: flex;
    gap: 12px;
}

.flex-1 {
    flex: 1;
}

/* Method Selector Grid */
.method-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.method-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.method-option:hover {
    border-color: #2563eb;
}

.method-option.selected {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.method-icon {
    font-size: 14px;
    color: #2563eb;
}

/* Details Container */
.details-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}

.network-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.network-chip {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.network-chip.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.address-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    border-radius: 6px;
}

.address-text {
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: #0f172a;
}

.copy-link {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action Button */
.action-btn {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}

.action-btn:hover {
    background: #1d4ed8;
}

.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Transactions Card */
.tx-card {
    height: fit-content;
}

.card-header-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
    color: #0f172a;
}

.card-header-simple h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
}

.tx-container {
    display: flex;
    flex-direction: column;
}

.empty-state {
    padding: 24px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
}

.tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.tx-row:last-child {
    border-bottom: none;
}

.tx-left {
    display: flex;
    flex-direction: column;
}

.tx-type {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}

.tx-sub {
    font-size: 10.5px;
    color: #64748b;
    margin-top: 2px;
}

.tx-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tx-val {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.tx-val.pos {
    color: #10b981;
}

.tx-val.neg {
    color: #ef4444;
}

.status-tag {
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 2px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.status-tag.completed {
    background: transparent;
    color: #10b981;
}

.status-tag.processing {
    background: transparent;
    color: #d97706;
}

/* ─── Modern Professional Recent Transactions ────────────────────────────── */
.tx-card-pro {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tx-card-header-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.tx-header-title-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tx-header-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-header-title-box h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}

.tx-header-sub {
    font-size: 11px;
    color: #64748b;
}

.tx-view-all-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tx-view-all-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.tx-filter-pills-bar {
    display: flex;
    gap: 6px;
}

.tx-filter-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tx-filter-pill:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.tx-filter-pill.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 700;
}

.history-list-pro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    min-height: 58px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.15s ease;
}

.history-item-pro:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.hist-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.hist-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hist-icon-circle.deposit {
    background: #ecfdf5;
    color: #10b981;
    border: 1px solid #a7f3d0;
}

.hist-icon-circle.withdrawal {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.hist-icon-circle.transfer {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.hist-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.hist-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.hist-title-text {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    flex-shrink: 0;
}

.hist-method-tag {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    flex-shrink: 1;
}

.hist-proof-badge {
    font-size: 10px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    line-height: 1.2;
}

.hist-proof-badge svg {
    display: inline-block;
    flex-shrink: 0;
    font-size: 9px;
}

.hist-sub-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #64748b;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.hist-ref {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 105px;
    flex-shrink: 1;
}

.meta-bullet {
    font-size: 8px;
    color: #cbd5e1;
    flex-shrink: 0;
}

.hist-date-text {
    white-space: nowrap;
    flex-shrink: 0;
}

.hist-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.hist-amount-text {
    font-size: 13.5px;
    font-weight: 800;
    font-family: var(--font-mono, monospace);
}

.hist-amount-text.positive {
    color: #10b981;
}

.hist-amount-text.negative {
    color: #ef4444;
}

.hist-status-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.hist-status-pill.status-completed {
    background: transparent;
    color: #10b981;
    border: none;
}

.hist-status-pill.status-pending {
    background: transparent;
    color: #d97706;
    border: none;
}

.hist-status-pill.status-failed {
    background: transparent;
    color: #ef4444;
    border: none;
}

.tx-empty-state-pro {
    padding: 32px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tx-empty-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.tx-empty-state-pro h5 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
}

.tx-empty-state-pro p {
    margin: 0;
    font-size: 11.5px;
    color: #94a3b8;
    max-width: 280px;
}

/* ─── Receipt Modal ───────────────────────────────────────────────────────── */
.tx-details-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tx-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.tx-details-icon-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tx-details-icon-wrap h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.tx-receipt-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
}

.receipt-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.receipt-amount {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-mono, monospace);
}

.receipt-amount.green {
    color: #10b981;
}

.receipt-amount.red {
    color: #ef4444;
}

.tx-receipt-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
}

.r-label {
    color: #64748b;
    font-weight: 500;
}

.r-val {
    color: #0f172a;
    font-weight: 700;
}

.r-val.mono {
    font-family: var(--font-mono, monospace);
}

.tx-details-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

/* ─── Mobile & Tablet Responsive (<= 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    .payment-page {
        padding: 12px 12px 80px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .payment-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    /* Account metrics in 3 equal clean grid columns */
    .account-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }

    .metric-item {
        min-width: 0;
        width: 100%;
        padding: 8px 4px;
        text-align: center;
        box-sizing: border-box;
    }

    .metric-label {
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .metric-val {
        font-size: 12.5px;
    }

    /* Tabs take full width */
    .simple-tabs {
        width: 100%;
        display: flex;
    }

    .tab-link {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }

    .simple-card {
        padding: 14px 12px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Form inputs fill full width */
    .simple-input {
        font-size: 14px;
        height: 42px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Preset chips in 3 neat columns */
    .preset-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
        margin-bottom: 14px;
        box-sizing: border-box;
    }

    .preset-chip {
        width: 100%;
        font-size: 12px;
        padding: 8px 4px;
        text-align: center;
        box-sizing: border-box;
    }

    /* Method selector grid */
    .method-selector-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .method-option {
        height: 42px;
        min-height: 42px;
        padding: 0 6px;
        font-size: 11px;
        gap: 4px;
        min-width: 0;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* USDT address copy box */
    .usdt-address-box {
        word-break: break-all;
        font-size: 12px;
    }

    /* QR code box - center and scale */
    .qr-wrap {
        display: flex;
        justify-content: center;
    }
}

/* Dynamic payment method details enhancements */
.input-with-copy {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-with-copy .simple-input {
    width: 100%;
    padding-right: 42px;
}

.input-copy-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.input-copy-btn:hover {
    color: #2563eb;
    background: #eff6ff;
}

.method-instructions-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 12px;
    color: #1e40af;
    line-height: 1.5;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.crypto-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin-bottom: 12px;
    text-align: center;
}

.crypto-qr-img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 6px;
    object-fit: contain;
}

.dynamic-empty-methods {
    padding: 24px 16px;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Mandatory Proof Dropzone & Feedback Styles */
.proof-dropzone {
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.proof-dropzone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.proof-dropzone.dragging {
    border-color: #2563eb;
    background: #dbeafe;
    transform: scale(1.01);
}

.proof-dropzone.has-error {
    border-color: #ef4444;
    background: #fef2f2;
    animation: proofShake 0.4s ease-in-out;
}

@keyframes proofShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.proof-error-msg {
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
}
.main-content.page-transaction-history {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

.tx-history-page {
    padding: 20px 24px 80px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-sans, Inter, sans-serif);
    color: #0f172a;
    box-sizing: border-box;
}

/* Header Top Bar */
.tx-history-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
    width: 100%;
}

.tx-header-text h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.tx-header-text p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.tx-summary-metrics {
    display: flex;
    gap: 12px;
}

.tx-metric-card {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    min-width: 130px;
}

.tx-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.tx-metric-val {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.tx-metric-val.green {
    color: #10b981;
}

.tx-metric-val.red {
    color: #ef4444;
}

.tx-metric-val.blue {
    color: #2563eb;
}

/* Controls Row (Tabs & Search) */
.tx-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.tx-tabs-bar {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
}

.tx-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tx-tab-btn:hover {
    color: #0f172a;
}

.tx-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.tx-tab-btn.active.deposit {
    color: #10b981;
}

.tx-tab-btn.active.withdrawal {
    color: #ef4444;
}

.tx-tab-btn.active.transfer {
    color: #2563eb;
}

.tx-actions-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tx-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.tx-search-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.tx-search-input {
    height: 38px;
    padding: 0 12px 0 32px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    width: 240px;
    background: #ffffff;
    color: #0f172a;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tx-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.new-transfer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.new-transfer-btn:hover {
    background: #1d4ed8;
}

/* Table View */
.tx-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.tx-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.tx-table th {
    background: #f8fafc;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e2e8f0;
}

.tx-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.tx-table tr:last-child td {
    border-bottom: none;
}

.tx-id-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 500;
    color: #0f172a;
}

.tx-method-cell {
    font-weight: 600;
}

.tx-amount-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
}

.amount-val.deposit {
    color: #10b981;
}

.amount-val.withdrawal {
    color: #ef4444;
}

.amount-val.transfer {
    color: #2563eb;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    text-transform: uppercase;
    background: transparent !important;
    border: none !important;
}

.status-badge.completed,
.status-badge.approved {
    background: transparent !important;
    color: #10b981;
}

.status-badge.processing, .status-badge.pending {
    background: transparent !important;
    color: #d97706;
}

.status-badge.rejected, .status-badge.failed {
    background: transparent !important;
    color: #ef4444;
}

.tx-date-cell {
    color: #64748b;
    font-size: 12px;
}

.empty-tx-cell {
    text-align: center;
    padding: 40px 16px !important;
}

.empty-tx-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
}

.empty-icon {
    font-size: 24px;
}

/* Modal Overlay */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.transfer-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.select-input, .text-input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
}

.avail-hint {
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.cancel-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.confirm-transfer-btn {
    height: 36px;
    padding: 0 16px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* ─── Mobile Responsive (max-width: 768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .tx-history-page {
        padding: 12px 12px 80px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .tx-history-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    /* Metric cards in 3 equal clean grid columns */
    .tx-summary-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }

    .tx-metric-card {
        min-width: 0;
        width: 100%;
        padding: 8px 4px;
        text-align: center;
        box-sizing: border-box;
    }

    .tx-metric-label {
        font-size: 9.5px;
        font-weight: 700;
    }

    .tx-metric-val {
        font-size: 12.5px;
    }

    /* Controls row stacks vertically */
    .tx-controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    /* Equal tab buttons */
    .tx-tabs-bar {
        display: flex;
        width: 100%;
        gap: 4px;
        background: #f1f5f9;
        padding: 3px;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .tx-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 4px;
        font-size: 11.5px;
        white-space: nowrap;
        text-align: center;
    }

    /* Search and action row fill width */
    .tx-actions-right {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .tx-search-box {
        width: 100%;
    }

    .tx-search-input {
        width: 100%;
        box-sizing: border-box;
    }

    .new-transfer-btn {
        width: 100%;
        justify-content: center;
    }

    /* Clean table container, no negative margin, smooth horizontal scroll */
    .tx-table-card {
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .tx-table {
        min-width: 520px;
        width: 100%;
    }

    .tx-table th,
    .tx-table td {
        padding: 10px 10px;
        font-size: 12px;
    }

    /* Transfer modal fills viewport on mobile */
    .transfer-modal {
        max-width: 100%;
        margin: 0 12px;
    }

    .modal-body {
        padding: 16px;
    }
}
/* ─── IB Brokerage Page (Unified Design System) ─────────────── */

.ib-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    background: #f8fafc;
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
}

.ib-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 80px;
    gap: 14px;
    min-width: 0;
    background: #f8fafc;
}

/* ── Loading ── */
.ib-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.ib-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ib-spin 0.7s linear infinite;
}

@keyframes ib-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Top Header Card (Matching History.jsx / History.css) ── */
.ib-header-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ib-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ib-title-row h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.ib-user-tag {
    font-size: 12px;
    font-weight: 500;
    color: #2563eb;
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ib-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ib-metric-card {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ib-metric-card span {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ib-metric-card strong {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}


/* ── Middle Grid: Side-by-side on desktop, stacked on mobile ── */
.ib-middle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .ib-middle-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Referral Link Banner ── */
.ib-referral-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.ib-referral-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ib-referral-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.ib-referral-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ib-referral-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2px;
}

.ib-referral-code-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.ib-referral-code-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.ib-referral-code-val {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease;
}

.ib-referral-code-val:hover {
    background: rgba(255, 255, 255, 0.28);
}

.ib-code-copy-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    line-height: 1;
}

.ib-referral-url {
    font-size: 12px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.ib-copy-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.ib-copy-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28);
}

.ib-copy-btn.copied {
    background: rgba(16, 185, 129, 0.28);
    border-color: rgba(16, 185, 129, 0.45);
}

.ib-copy-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Transfer Card ── */
.ib-transfer-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ib-transfer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ib-transfer-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ib-transfer-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.ib-transfer-subtitle {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.ib-transfer-subtitle strong {
    color: #0f172a;
    font-weight: 600;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ib-transfer-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
}

.ib-transfer-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.ib-transfer-input-wrap:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ib-transfer-currency {
    padding: 0 10px 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

.ib-transfer-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 12px 9px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    outline: none;
}

.ib-transfer-input::placeholder {
    color: #94a3b8;
}

.ib-transfer-btn {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.ib-transfer-btn:hover:not(:disabled) {
    background: #1d4ed8;
}

.ib-transfer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ib-transfer-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* ── Unified History Card ── */
.ib-history-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 4px;
}

.ib-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

/* Pill Tabs */
.ib-tabs-pill-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}

.ib-tabs-pill-wrap::-webkit-scrollbar {
    height: 3px;
}

.ib-tabs-pill-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.ib-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

.ib-pill-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.ib-history-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ib-scroll-hint {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    user-select: none;
    font-family: var(--font-sans);
}

.ib-refresh-btn {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    background: #ffffff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-sans);
}

.ib-refresh-btn:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #2563eb;
}

.ib-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Toolbar: Search & Page tag */
.ib-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.ib-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    width: 260px;
    max-width: 100%;
}

.ib-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: #0f172a;
    width: 100%;
    font-family: var(--font-sans);
}

.ib-page-indicator {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

/* Table Wrap: Scrollable both ways with sticky header */
.ib-history-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
    min-height: 220px;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
    box-sizing: border-box;
}

.ib-history-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ib-history-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.ib-history-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.ib-history-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Table */
.ib-table {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.ib-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
    font-family: var(--font-sans);
}

.ib-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    font-family: var(--font-sans);
}

.ib-table tbody tr:hover td {
    background: #f8fafc;
}

.ib-table tbody tr:last-child td {
    border-bottom: none;
}

.ib-date-cell {
    color: #475569;
    font-size: 11.5px;
}

.ib-trader-cell {
    font-weight: 600;
    color: #0f172a;
}

.ib-id-badge {
    color: #2563eb;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    background: #eff6ff;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #dbeafe;
    display: inline-block;
    font-size: 11px;
}

.ib-rate-cell {
    color: #64748b;
    font-weight: 600;
}

.ib-commission-val {
    font-weight: 700;
    color: #047857;
    font-family: var(--font-mono, monospace);
}

.ib-amount-val {
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono, monospace);
}

.ib-note-cell {
    font-size: 12px;
    color: #475569;
    white-space: normal;
    word-break: break-word;
    max-width: 320px;
    line-height: 1.35;
}

/* Status Badges */
.ib-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}

.ib-status-badge.status-approved {
    background: #dcfce7;
    color: #047857;
    border: 1px solid #bbf7d0;
}

.ib-status-badge.status-pending {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.ib-status-badge.status-rejected {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Level Badges */
.ib-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
}

.ib-level-badge.level-1 {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

.ib-level-badge.level-2 {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ib-level-badge.level-3 {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.ib-level-badge.level-4 {
    background: #ffedd5;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.ib-level-badge.level-5 {
    background: #f3e8ff;
    color: #9333ea;
    border: 1px solid #e9d5ff;
}

/* Empty state */
.ib-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    color: #94a3b8;
}

.ib-empty-icon {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.ib-empty-state p {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 4px;
    font-family: var(--font-sans);
}

.ib-empty-state span {
    font-size: 12px;
    color: #94a3b8;
    max-width: 380px;
    line-height: 1.4;
    font-family: var(--font-sans);
}

/* Table loading */
.ib-table-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

/* Pagination */
.ib-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.ib-pagination-page-tag {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.ib-page-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ib-page-btn:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}

.ib-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Mobile & Tablet Responsive (<= 1024px) ── */
@media (max-width: 1024px) {
    .ib-main-content {
        padding: 12px 12px 100px;
    }

    .ib-referral-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ib-referral-url {
        max-width: 100%;
        font-size: 11.5px;
    }

    .ib-copy-btn {
        width: 100%;
        justify-content: center;
    }

    .ib-transfer-form {
        flex-direction: column;
    }

    .ib-transfer-btn {
        width: 100%;
        justify-content: center;
    }

    .ib-table th,
    .ib-table td {
        padding: 8px 10px;
    }
}/* ─── Managed Trading Activity Table (Shared Component) ─── */

.managed-activity-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-height: 400px;
}

.managed-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.managed-activity-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.managed-activity-header-left h3 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-sans);
}

.managed-activity-header-left p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 12px;
    font-family: var(--font-sans);
}

.managed-activity-badge {
    font-size: 11px;
    font-weight: 700;
    background: #eff6ff;
    color: #2563eb;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    font-family: var(--font-mono, monospace);
}

.managed-activity-filter-indicator {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    font-family: var(--font-mono, monospace);
}

.managed-activity-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.managed-activity-scroll-hint {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    user-select: none;
    font-family: var(--font-sans);
}

.managed-activity-refresh-btn {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    background: #ffffff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-sans);
}

.managed-activity-refresh-btn:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Dual-axis scrollable table wrapper with sticky headers */
.managed-activity-table-wrap {
    width: 100%;
    max-width: 100%;
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    min-height: 380px;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
    box-sizing: border-box;
}

.managed-activity-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.managed-activity-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.managed-activity-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.managed-activity-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.managed-activity-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.managed-activity-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
    font-family: var(--font-sans);
}

.managed-activity-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    font-family: var(--font-sans);
}

.managed-activity-table tbody tr:hover td {
    background: #f8fafc;
}

.managed-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.managed-time-cell {
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    color: #475569;
}

.managed-symbol-badge {
    font-weight: 700;
    color: #0f172a;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    display: inline-block;
}

.managed-side-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
}

.managed-side-badge.buy {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.managed-side-badge.sell {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.managed-lot-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    color: #0f172a;
}

.managed-price-cell {
    font-family: var(--font-mono, monospace);
    font-weight: 500;
    color: #334155;
}

.managed-order-proof {
    color: #2563eb !important;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    background: #eff6ff;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #dbeafe;
    display: inline-block;
    font-size: 11px;
}

.managed-order-empty {
    color: #94a3b8;
    font-size: 11px;
    font-style: italic;
    font-family: var(--font-sans);
}

.managed-status-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 160px;
    max-width: 320px;
}

.managed-activity-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
}

.managed-activity-status.status-open,
.managed-activity-status.status-pending {
    background: #dcfce7;
    color: #047857;
}

.managed-activity-status.status-closed {
    background: #e2e8f0;
    color: #475569;
}

.managed-activity-status.status-failed {
    background: #fee2e2;
    color: #b91c1c;
}

.managed-activity-status.status-mapped {
    background: #ede9fe;
    color: #6d28d9;
}

.managed-activity-error {
    display: inline-block;
    font-size: 10.5px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.managed-close-reason {
    font-size: 10.5px;
    color: #64748b;
    font-style: italic;
    white-space: normal;
    font-family: var(--font-sans);
}

.managed-activity-empty {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #94a3b8 !important;
}

.managed-empty-wrap p {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.managed-empty-wrap span {
    font-size: 11.5px;
    color: #94a3b8;
}

@media (max-width: 640px) {
    .managed-activity-header {
        align-items: flex-start;
        gap: 10px;
    }
    .managed-activity-table-wrap {
        max-height: calc(100vh - 220px);
        min-height: 320px;
    }
}
/* ─── 100% Unique PAMM Manager Portfolio UI CSS ─────────────── */

.pamm-page {
    display: flex;
    flex-direction: column;
    min-height: 100%; width: 100%;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.pamm-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 80px;
    gap: 16px;
    min-width: 0;
    overflow-y: auto;
    background: #f8fafc;
    font-family: var(--font-sans);
}

/* ── 1. Top Summary Stat Banner ─────────────────── */
.pamm-stats-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pamm-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
}

.pamm-stat-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.pamm-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pamm-stat-icon-wrap.blue {
    background: #eff6ff;
    color: #2563eb;
}

.pamm-stat-icon-wrap.green {
    background: #ecfdf5;
    color: #059669;
}

.pamm-stat-icon-wrap.purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.pamm-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pamm-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
}

.pamm-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono);
}

/* ── 2. Toolbar: Pill Tabs & Search Box ─────────────────── */
.pamm-toolbar-row {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #f8fafc;
    padding: 6px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

.pamm-tabs-pill-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}

.pamm-tabs-pill-wrap::-webkit-scrollbar {
    height: 4px;
}

.pamm-tabs-pill-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.pamm-tabs-pill-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.pamm-pill-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

.pamm-pill-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pamm-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 240px;
    transition: all 0.2s ease;
}

.pamm-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.pamm-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #0f172a;
    width: 100%;
    font-family: var(--font-sans);
}

/* ── 3. Unique Manager Cards Grid ─────────────────── */
.pamm-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.pamm-manager-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
    position: relative;
}

.pamm-manager-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.pamm-manager-card.is-subscribed {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

/* Card Header */
.pamm-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pamm-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.pamm-card-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.pamm-card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.pamm-card-role {
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-sans);
}

.pamm-rank-badge {
    font-size: 10px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: var(--font-mono);
}

/* Performance Area inside Card */
.pamm-card-chart-area {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 48px;
    overflow: hidden;
    margin: 2px 0;
}

.pamm-card-sparkline-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.pamm-graph-value-overlay {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono);
    z-index: 2;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.75);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}


/* 2x3 Key Metrics Grid */
.pamm-card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pamm-metric-box {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 6px 8px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.pamm-metric-box .lbl {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.pamm-metric-box .val {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    font-family: var(--font-mono);
}

.pamm-metric-box .green-text {
    color: #059669;
    font-size: 11px;
    font-weight: 700;
}

/* Card Footer Action Button */
.pamm-card-footer {
    margin-top: 4px;
}

.pamm-card-follow-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: #ffffff;
    color: #2563eb;
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.pamm-card-follow-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.pamm-card-follow-btn.subscribed {
    background: #fef2f2;
    color: #ef4444;
    border-color: #ef4444;
}

.pamm-card-follow-btn.subscribed:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #dc2626;
}

/* Modals */
.pamm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.pamm-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-sans);
}

.pamm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pamm-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.pamm-modal-close {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #64748b;
    cursor: pointer;
}

.pamm-modal-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    font-family: var(--font-mono);
}

.pamm-modal-input:focus {
    border-color: #2563eb;
}

.pamm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.pamm-modal-btn-confirm {
    padding: 7px 16px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

.pamm-modal-btn-cancel {
    padding: 7px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* ── Responsiveness ─────────────────── */
@media (max-width: 1024px) {
    .pamm-main-content {
        padding: 12px 16px 32px;
        gap: 12px;
    }
    .pamm-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .pamm-main-content {
        padding: 8px 10px 24px;
        gap: 10px;
    }
    .pamm-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pamm-tabs-pill-wrap {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
    }
    .pamm-pill-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: center;
        padding: 8px 12px;
    }
    .pamm-search-box {
        width: 100%;
        box-sizing: border-box;
    }
    .pamm-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pamm-modal-content {
        width: 95%;
        padding: 16px;
    }
}

/* ─── MAM Manager Portfolio UI CSS (Matching PAMM Design Layout) ─────────────── */

.mam-page {
    display: flex;
    flex-direction: column;
    min-height: 100%; width: 100%;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.mam-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 80px;
    gap: 16px;
    min-width: 0;
    overflow-y: auto;
    background: #f8fafc;
    font-family: var(--font-sans);
}

/* ── Toolbar: Pill Tabs, Risk Filter & Search Box ─────────────────── */
.mam-toolbar-row {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #f8fafc;
    padding: 6px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

.mam-tabs-pill-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}

.mam-tabs-pill-wrap::-webkit-scrollbar {
    height: 4px;
}

.mam-tabs-pill-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.mam-tabs-pill-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.mam-pill-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

.mam-pill-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.mam-filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mam-filter-group .filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.mam-filter-group .filter-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mam-filter-group .filter-btn:hover {
    background: #f1f5f9;
}

.mam-filter-group .filter-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.mam-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 220px;
    transition: all 0.2s ease;
}

.mam-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.mam-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #0f172a;
    width: 100%;
    font-family: var(--font-sans);
}

/* ── Manager Cards Grid ─────────────────── */
.mam-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.mam-manager-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
    position: relative;
}

.mam-manager-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.mam-manager-card.is-subscribed {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

/* Card Header */
.mam-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mam-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.mam-card-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.mam-card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.mam-card-role {
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-sans);
}

.mam-rank-badge {
    font-size: 10px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: var(--font-mono);
}

/* Performance Area inside Card */
.mam-card-chart-area {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 48px;
    overflow: hidden;
    margin: 2px 0;
}

.mam-card-sparkline-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.mam-graph-value-overlay {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono);
    z-index: 2;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.75);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

/* 2x3 Key Metrics Grid */
.mam-card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mam-metric-box {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 6px 8px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.mam-metric-box .lbl {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.mam-metric-box .val {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    font-family: var(--font-mono);
}

.mam-metric-box .green-text {
    color: #059669;
    font-size: 11px;
    font-weight: 700;
}

/* Card Footer Action Button */
.mam-card-footer {
    margin-top: 4px;
}

.mam-card-follow-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: #ffffff;
    color: #2563eb;
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.mam-card-follow-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.mam-card-follow-btn.subscribed {
    background: #fef2f2;
    color: #ef4444;
    border-color: #ef4444;
}

.mam-card-follow-btn.subscribed:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #dc2626;
}

/* Modals */
.mam-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.mam-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-sans);
}

.mam-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mam-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.mam-modal-close {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #64748b;
    cursor: pointer;
}

.mam-modal-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    font-family: var(--font-mono);
}

.mam-modal-input:focus {
    border-color: #2563eb;
}

.mam-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.mam-modal-btn-confirm {
    padding: 7px 16px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

.mam-modal-btn-cancel {
    padding: 7px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* ── Responsiveness ─────────────────── */
@media (max-width: 1024px) {
    .mam-main-content {
        padding: 12px 16px 32px;
        gap: 12px;
    }
    .mam-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .mam-main-content {
        padding: 8px 10px 24px;
        gap: 10px;
    }
    .mam-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .mam-tabs-pill-wrap {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
    }
    .mam-pill-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: center;
        padding: 8px 12px;
    }
    .mam-filter-group {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    .mam-search-box {
        width: 100%;
        box-sizing: border-box;
    }
    .mam-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mam-modal-content {
        width: 95%;
        padding: 16px;
    }
}
/* ─── Copy Trading UI CSS (Matching PAMM Design Layout) ─────────────── */

.copy-trading-page {
    display: flex;
    flex-direction: column;
    min-height: 100%; width: 100%;
    background: #f8fafc;
    font-family: var(--font-sans);
}

.copy-trading-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 80px;
    gap: 16px;
    min-width: 0;
    overflow-y: auto;
    background: #f8fafc;
    font-family: var(--font-sans);
}

/* ── Toolbar: Pill Tabs & Search Box ─────────────────── */
.copy-trading-toolbar-row {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #f8fafc;
    padding: 6px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

.copy-trading-tabs-pill-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}

.copy-trading-tabs-pill-wrap::-webkit-scrollbar {
    height: 4px;
}

.copy-trading-tabs-pill-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.copy-trading-tabs-pill-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.copy-trading-pill-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
}

.copy-trading-pill-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.copy-trading-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 240px;
    transition: all 0.2s ease;
}

.copy-trading-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.copy-trading-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #0f172a;
    width: 100%;
    font-family: var(--font-sans);
}

/* ── Manager Cards Grid ─────────────────── */
.copy-trading-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.copy-trading-manager-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s ease;
    position: relative;
}

.copy-trading-manager-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.copy-trading-manager-card.is-subscribed {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

/* Card Header */
.copy-trading-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-trading-avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.copy-trading-card-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.copy-trading-card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.copy-trading-card-role {
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-sans);
}

.copy-trading-rank-badge {
    font-size: 10px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: var(--font-mono);
}

/* Performance Area inside Card */
.copy-trading-card-chart-area {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 48px;
    overflow: hidden;
    margin: 2px 0;
}

.copy-trading-card-sparkline-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.copy-trading-graph-value-overlay {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-mono);
    z-index: 2;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.75);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

/* 2x3 Key Metrics Grid */
.copy-trading-card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.copy-trading-metric-box {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 6px 8px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.copy-trading-metric-box .lbl {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.copy-trading-metric-box .val {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    font-family: var(--font-mono);
}

.copy-trading-metric-box .green-text {
    color: #059669;
    font-size: 11px;
    font-weight: 700;
}

/* Card Footer Action Button */
.copy-trading-card-footer {
    margin-top: 4px;
}

.copy-trading-card-follow-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: #ffffff;
    color: #2563eb;
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.copy-trading-card-follow-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.copy-trading-card-follow-btn.subscribed {
    background: #fef2f2;
    color: #ef4444;
    border-color: #ef4444;
}

.copy-trading-card-follow-btn.subscribed:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #dc2626;
}

/* Modals */
.copy-trading-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.copy-trading-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-sans);
}

.copy-trading-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copy-trading-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-sans);
}

.copy-trading-modal-close {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #64748b;
    cursor: pointer;
}

.copy-trading-modal-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    font-family: var(--font-mono);
}

.copy-trading-modal-input:focus {
    border-color: #2563eb;
}

.copy-trading-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.copy-trading-modal-btn-confirm {
    padding: 7px 16px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

.copy-trading-modal-btn-cancel {
    padding: 7px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

/* ── Responsiveness ─────────────────── */
@media (max-width: 1024px) {
    .copy-trading-main-content {
        padding: 12px 16px 32px;
        gap: 12px;
    }
    .copy-trading-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .copy-trading-main-content {
        padding: 8px 10px 24px;
        gap: 10px;
    }
    .copy-trading-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .copy-trading-tabs-pill-wrap {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
    }
    .copy-trading-pill-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: center;
        padding: 8px 12px;
    }
    .copy-trading-search-box {
        width: 100%;
        box-sizing: border-box;
    }
    .copy-trading-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .copy-trading-modal-content {
        width: 95%;
        padding: 16px;
    }
}
.votp-page {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 16px;
    background: #f1f5f9;
    font-family: var(--font-sans);
}

.votp-card {
    width: 100%;
    max-width: 920px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
    border: 1px solid #e2e8f0;
}

.votp-two-column {
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: 520px;
}

.votp-qr-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 30px;
    text-align: center;
}

.votp-qr-section h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 16px 0 10px;
    color: #ffffff;
}

.votp-qr-section p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 24px;
    max-width: 280px;
}

.votp-qr-image {
    width: 180px;
    height: 180px;
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.votp-otp-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
}

.votp-icon {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    margin: 0 auto 16px;
}

.votp-otp-section h2 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    color: #0f172a;
}

.votp-subtitle {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 440px;
    margin: 0 auto 24px;
}

.votp-email-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin: 0 auto 24px;
    max-width: 440px;
    word-break: break-all;
}

.votp-email-box svg {
    font-size: 16px;
    color: #2563eb;
    flex-shrink: 0;
}

.votp-email-box span {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.votp-otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 28px;
}

.votp-otp-container input {
    width: clamp(38px, 10vw, 54px);
    height: clamp(48px, 12vw, 60px);
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
}

.votp-otp-container input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.votp-verify-btn {
    width: 100%;
    max-width: 440px;
    display: block;
    margin: 0 auto;
    padding: 13px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    transition: all 0.2s ease;
}

.votp-verify-btn:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    transform: translateY(-1px);
}

.votp-bottom-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.votp-text-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.votp-text-btn:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 840px) {
    .votp-card {
        max-width: 540px;
    }

    .votp-two-column {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .votp-qr-section {
        padding: 28px 20px;
    }

    .votp-qr-image {
        width: 150px;
        height: 150px;
    }

    .votp-otp-section {
        padding: 32px 20px;
    }
}

@media (max-width: 480px) {
    .votp-page {
        padding: 12px 8px;
    }

    .votp-otp-container {
        gap: 6px;
    }

    .votp-bottom-links {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}
.accounts-page {
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
  color: #0f172a;
}

.accounts-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.accounts-page h1 {
  margin: 0;
  font-size: 25px;
}

.accounts-page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accounts-page-header h1 svg {
  color: #2563eb;
  font-size: 22px;
}

.accounts-page-header p,
.transfer-panel p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 13px;
}

.accounts-create-btn,
.account-card button,
.transfer-panel button {
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.accounts-create-btn:disabled,
.account-card button:disabled,
.transfer-panel button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.account-limit-row {
  margin: 20px 0 12px;
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
}

.account-limit-row strong {
  color: #b45309;
}

.accounts-loading {
  padding: 35px;
  text-align: center;
  color: #64748b;
}

.spin {
  animation: accounts-spin 1s linear infinite;
}

@keyframes accounts-spin {
  to {
    transform: rotate(360deg);
  }
}

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 14px;
}

.account-card {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 17px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.account-card.current {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .1);
}

.account-card-top,
.account-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-type,
.current-marker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
}

.account-type.live {
  color: #047857;
  background: #d1fae5;
}

.account-type.demo {
  color: #92400e;
  background: #fef3c7;
}

.current-marker {
  color: #1d4ed8;
  background: #dbeafe;
  display: flex;
  gap: 4px;
  align-items: center;
}

.account-card h2 {
  margin: 16px 0 5px;
  font-size: 15px;
}

.account-money {
  font-size: 25px;
  font-weight: 800;
}

.account-meta {
  align-items: flex-start;
  flex-direction: column;
  color: #64748b;
  font-size: 11px;
  margin: 12px 0 16px;
}

.account-card button {
  width: 100%;
  padding: 9px;
  font-size: 12px;
}

.accounts-two-column {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  gap: 16px;
  margin-top: 22px;
}

.transfer-panel,
.transfer-history-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 19px;
}

.transfer-panel h2,
.transfer-history-panel h2 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transfer-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
}

.transfer-panel select,
.transfer-panel input {
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}

.transfer-available {
  font-size: 12px;
  color: #047857;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.transfer-panel button {
  width: 100%;
}

.transfer-panel small {
  display: block;
  color: #b45309;
  margin-top: 9px;
}

.transfer-history-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.transfer-history-list article {
  border: 1px solid #eef2f7;
  border-radius: 9px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
}

.transfer-history-list article div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.transfer-history-list article>span {
  font-weight: 800;
  color: #2563eb;
}

.transfer-history-list small {
  grid-column: 1/-1;
  color: #64748b;
}

.transfer-empty {
  text-align: center;
  color: #94a3b8;
  padding: 35px;
}

.account-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}

.account-confirm-dialog {
  width: min(430px, 100%);
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  text-align: center;
}

.account-confirm-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #2563eb;
  font-size: 20px;
}

.account-confirm-dialog h2 {
  margin: 0;
  font-size: 19px;
  color: #0f172a;
}

.account-confirm-dialog p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.account-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 21px;
}

.account-confirm-actions button {
  min-height: 42px;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 700;
  cursor: pointer;
}

.account-confirm-cancel {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.account-confirm-submit {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.account-confirm-cancel:hover {
  background: #f8fafc;
}

.account-confirm-submit:hover {
  background: #1d4ed8;
}

@media (max-width: 760px) {
  .accounts-page {
    padding: 15px 12px 80px;
  }

  .accounts-page-header {
    flex-direction: column;
  }

  .accounts-create-btn {
    width: 100%;
  }

  .accounts-two-column {
    grid-template-columns: 1fr;
  }

  .account-card-grid {
    grid-template-columns: 1fr;
  }

  .transfer-history-list article {
    grid-template-columns: 1fr;
  }

  .transfer-history-list small {
    grid-column: auto;
  }

  .account-confirm-actions {
    grid-template-columns: 1fr;
  }
}:root {
    --font-sans: 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-mono: 'Segoe UI', Tahoma, Arial, sans-serif;

    font-family: var(--font-sans);
    color-scheme: light;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

html {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    background: #f1f5f9;
    color: #0f172a;
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
}

#root {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

p,
li,
blockquote {
    overflow-wrap: break-word;
}

.tabular-nums,
.price-tag,
.ticker-symbol,
.metric-value,
.watchlist-value,
.order-panel-summary-card strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 14px;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* Global Skeleton Loaders */
@keyframes skeletonPulse {
    0% {
        background-color: #e2e8f0;
    }

    50% {
        background-color: #f1f5f9;
    }

    100% {
        background-color: #e2e8f0;
    }
}

.skeleton-container {
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.skeleton-row {
    height: 48px;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 6px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

/* ==========================================================================
   Global Scrollbar Hiding — hides scrollbars everywhere while preserving smooth scrolling
   ========================================================================== */
html,
body,
*,
*::before,
*::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

::-webkit-scrollbar,
*::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   Compact & Professional Toast Notifications
   ========================================================================== */
.Toastify__toast-container {
    width: 340px !important;
    max-width: 90vw !important;
    padding: 10px !important;
}

.Toastify__toast {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.Toastify__toast--error {
    border-left: 4px solid #ef4444 !important;
}

.Toastify__toast--success {
    border-left: 4px solid #10b981 !important;
}

.Toastify__toast--info {
    border-left: 4px solid #2563eb !important;
}

.Toastify__toast--warning {
    border-left: 4px solid #f59e0b !important;
}

.Toastify__toast-body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

.Toastify__toast-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

.Toastify__close-button {
    color: #94a3b8 !important;
    opacity: 0.7 !important;
    align-self: center !important;
}

.Toastify__close-button:hover {
    color: #0f172a !important;
    opacity: 1 !important;
}

.Toastify__progress-bar {
    height: 2.5px !important;
}

.main-content {
    overflow-y: auto;
}

/* ─── Global Mobile & Tablet Layout Shield (Eliminates Desktop Flash on Reload) ───── */
@media (max-width: 1024px) {

    /* Instantly hide desktop navigation, watchlists, resizers, and sidebars on initial paint */
    .left-nav,
    .panel-resizer,
    .dashboard-sidebar-wrap {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }

    /* Only show Watchlist sidebar on mobile when active-mobile-watchlist is active */
    .active-mobile-watchlist .dashboard-sidebar-wrap {
        display: flex !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }

    /* Ensure main content container fills 100% viewport width without horizontal shift */
    .dashboard,
    .dashboard-body,
    .main-content,
    .positions-main,
    .history-page,
    .history-main-content,
    .page-positions,
    .page-history {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Always 1 font size lower on mobile devices (<= 768px) */
    html {
        font-size: 15px !important;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-size: 13px;
    }

    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    h3 {
        font-size: 1.0rem;
    }

    h4 {
        font-size: 0.9rem;
    }

    h5,
    h6 {
        font-size: 0.8rem;
    }
}

/* Standardized Page Top Bar & Header across all pages */
.std-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
    width: 100%;
}

.std-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.std-header-icon {
    font-size: 22px;
    color: #2563eb;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.std-header-titles h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.std-header-titles p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.4;
}