/* =========================================================
   PUSHX TERMINAL
   DASHBOARD V3
   CINEMATIC / NEON / PREMIUM
   ========================================================= */

:root {
  --dash-bg: #020403;
  --dash-bg-soft: #050806;

  --dash-panel: rgba(7, 12, 8, 0.94);
  --dash-panel-hover: rgba(8, 16, 9, 0.97);

--dash-green: #00ff66;
--dash-green-bright: #23ff7b;

  --dash-text: #f4f7f2;

  --dash-border:
    rgba(255, 255, 255, 0.055);

--dash-border-green:
  rgba(0, 255, 102, 0.15);
}

html,
body {
  margin: 0;
  min-height: 100%;

  background-color: #020403;

  overscroll-behavior-y: none;
}

/* =========================================================
   ROOT
   ========================================================= */

.dashboard-shell {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;

  overflow-x: hidden;

  overscroll-behavior-y: none;

  color:
    var(--dash-text);

  background: transparent;
}

/* =========================================================
   CINEMATIC BACKGROUND
   ========================================================= */

.dashboard-visual-bg {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 245px;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 81% 16%,
      rgba(106, 255, 29, 0.12),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 48% 15%,
      rgba(148, 255, 44, 0.04),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #020403 0%,
      #030604 55%,
      #020403 100%
    );
}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.dashboard-bg-grid {
  position: absolute;

  inset: -100px;

  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(167, 255, 70, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(167, 255, 70, 0.055) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.8) 42%,
      rgba(0, 0, 0, 0.35) 74%,
      transparent 100%
    );
}


/* =========================================================
   PARTICLES
   ========================================================= */

.dashboard-bg-particles {
  position: absolute;

  inset: 0;

  opacity: 0.55;

  background-image:
    radial-gradient(
      circle,
      rgba(198, 255, 54, 0.8) 0.7px,
      transparent 0.85px
    );

  background-size:
    73px 61px;

  mask-image:
    radial-gradient(
      ellipse at 72% 24%,
      black 0%,
      rgba(0, 0, 0, 0.7) 43%,
      transparent 81%
    );
}


/* =========================================================
   AMBIENT GLOWS
   ========================================================= */

.dashboard-bg-glow {
  position: absolute;

  border-radius:
    50%;

  pointer-events:
    none;
}


.dashboard-bg-glow-one {
  top: -250px;
  left: 25%;

  width: 760px;
  height: 560px;

  background:
    radial-gradient(
      circle,
      rgba(138, 255, 40, 0.09),
      transparent 67%
    );
}


.dashboard-bg-glow-two {
  top: 130px;
  right: -280px;

  width: 740px;
  height: 740px;

  background:
    radial-gradient(
      circle,
      rgba(116, 255, 33, 0.08),
      transparent 66%
    );
}


/* =========================================================
   MARKET COPY
   ========================================================= */

.dashboard-market-copy {
  position: absolute;

  z-index: 4;

  top: 108px;
  right: 37%;

  display: flex;
  flex-direction: column;

  gap: 8px;

  color:
    rgba(178, 255, 121, 0.43);

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.42em;

  text-shadow:
    0 0 14px
    rgba(198, 255, 54, 0.12);
}


/* =========================================================
   DIGITAL GLOBE
   ========================================================= */

.dashboard-digital-globe {
  position: absolute;

  z-index: 3;

  top: 77px;
  right: 2.6%;

  width: 360px;
  height: 360px;

  overflow: hidden;

  border:
    1px solid
    rgba(181, 255, 62, 0.23);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 33% 28%,
      rgba(212, 255, 91, 0.18),
      rgba(116, 255, 43, 0.075) 27%,
      rgba(22, 61, 24, 0.2) 50%,
      rgba(2, 7, 3, 0.98) 76%
    );

  box-shadow:
    inset 35px 20px 80px
    rgba(171, 255, 49, 0.045),

    inset -85px -70px 110px
    rgba(0, 0, 0, 0.9),

    0 0 60px
    rgba(118, 255, 37, 0.13),

    0 0 125px
    rgba(118, 255, 37, 0.045);
}


/* globe lines */

.dashboard-globe-grid {
  position: absolute;

  inset: 7%;

  border-radius:
    50%;

  opacity: 0.78;

  background-image:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0,
      transparent 15px,
      rgba(192, 255, 67, 0.09) 16px,
      transparent 17px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(192, 255, 67, 0.05) 19px,
      transparent 20px
    );

  mask-image:
    radial-gradient(
      circle,
      black 34%,
      rgba(0, 0, 0, 0.85) 59%,
      transparent 78%
    );
}


/* abstract dotted continent */

.dashboard-globe-land {
  position: absolute;

  inset:
    15% 13% 15% 16%;

  opacity:
    0.62;

  background-image:
    radial-gradient(
      circle,
      rgba(191, 255, 64, 0.92) 0.75px,
      transparent 1.1px
    );

  background-size:
    7px 7px;

  clip-path:
    polygon(
      12% 15%,
      30% 7%,
      46% 12%,
      57% 22%,
      74% 18%,
      91% 31%,
      79% 45%,
      89% 56%,
      70% 64%,
      62% 82%,
      47% 94%,
      35% 75%,
      20% 82%,
      12% 62%,
      3% 48%
    );
}


/* globe shading */

.dashboard-digital-globe::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18),
      transparent 35%,
      transparent 57%,
      rgba(0, 0, 0, 0.58)
    );

  pointer-events:
    none;
}


/* center glowing point */

.dashboard-globe-core {
  position: absolute;

  z-index: 5;

  top: 48%;
  left: 68%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 7px #deff84,
    0 0 18px rgba(198, 255, 54, 0.95),
    0 0 44px rgba(198, 255, 54, 0.6),
    0 0 80px rgba(198, 255, 54, 0.26);
}


/* globe points */

.dashboard-globe-point {
  position: absolute;

  z-index: 5;

  width: 3px;
  height: 3px;

  border-radius:
    50%;

  background:
    #dcff7c;

  box-shadow:
    0 0 7px
    rgba(198, 255, 54, 0.95);
}


.dashboard-globe-point-one {
  top: 28%;
  left: 38%;
}


.dashboard-globe-point-two {
  top: 62%;
  left: 71%;
}


.dashboard-globe-point-three {
  top: 46%;
  left: 23%;
}


.dashboard-globe-point-four {
  top: 72%;
  left: 49%;
}


.dashboard-globe-point-five {
  top: 36%;
  left: 76%;
}


/* =========================================================
   ORBITS
   ========================================================= */

.dashboard-orbit {
  position: absolute;

  z-index: 4;

  border:
    1px solid
    rgba(178, 255, 47, 0.28);

  border-radius:
    50%;

  pointer-events:
    none;
}


.dashboard-orbit-one {
  top: 136px;
  right: -180px;

  width: 900px;
  height: 270px;

  transform:
    rotate(-16deg);
}


.dashboard-orbit-two {
  top: 210px;
  right: -45px;

  width: 770px;
  height: 180px;

  opacity:
    0.66;

  transform:
    rotate(-24deg);
}


.dashboard-orbit-three {
  top: 55px;
  right: -310px;

  width: 1020px;
  height: 430px;

  opacity:
    0.25;

  transform:
    rotate(-11deg);
}


/* =========================================================
   FLOATING PERCENT
   ========================================================= */

.dashboard-orbit-badge {
  position: absolute;

  z-index: 6;

  top: 220px;
  right: 33%;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(198, 255, 54, 0.47);

  border-radius:
    8px;

  color:
    #d6ff66;

  background:
    rgba(4, 13, 5, 0.9);

  font-size:
    11px;

  font-weight:
    750;

  box-shadow:
    inset 0 0 18px
    rgba(198, 255, 54, 0.035),

    0 0 24px
    rgba(198, 255, 54, 0.11);
}


/* =========================================================
   SIDE COPY
   ========================================================= */

.dashboard-discipline-copy {
  position: absolute;

  z-index: 6;

  top: 322px;
  right: 4%;

  display: flex;
  flex-direction: column;

  gap: 7px;

  color:
    rgba(176, 255, 119, 0.31);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.34em;
}


/* =========================================================
   FLOATING MICRO DATA
   ========================================================= */

.dashboard-background-code {
  position: absolute;

  color:
    rgba(183, 255, 119, 0.18);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.19em;
}


.dashboard-background-code-one {
  top: 455px;
  right: 9%;
}


.dashboard-background-code-two {
  top: 540px;
  right: 31%;
}


.dashboard-background-code-three {
  top: 605px;
  right: 16%;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.dashboard-sidebar {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  z-index: 50;

  width: 245px;

  display: flex;
  flex-direction: column;

  padding:
    22px 14px 18px;

  border-right:
    1px solid
    rgba(198, 255, 54, 0.07);

  background:
    linear-gradient(
      180deg,
      rgba(4, 8, 5, 0.99),
      rgba(2, 5, 3, 0.99)
    );

  box-shadow:
    18px 0 70px
    rgba(0, 0, 0, 0.24);
}


/* =========================================================
   SIDEBAR TOP
   ========================================================= */

.dashboard-sidebar-top {
  height:
    45px;

  padding:
    0 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.dashboard-logo {
  display:
    inline-flex;

  align-items:
    baseline;

  color:
    #f6f9f4;

  font-size:
  33px;

  font-weight:
    760;

  letter-spacing:
    -0.8px;

  text-decoration:
    none;
}


.dashboard-logo strong {
  color:
    var(--dash-green);

  text-shadow:
    0 0 12px
    rgba(198, 255, 54, 0.5),

    0 0 30px
    rgba(198, 255, 54, 0.16);
}


.dashboard-sidebar-close {
  display:
    none;

  width:
    34px;

  height:
    34px;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    8px;

  color:
    rgba(255, 255, 255, 0.62);

  background:
    rgba(255, 255, 255, 0.025);

  cursor:
    pointer;
}


/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.dashboard-sidebar-section {
  margin-top:
    33px;

  flex:
    1;
}


.dashboard-sidebar-label {
  display:
    block;

  padding:
    0 11px;

  margin-bottom:
    11px;

  color:
    rgba(255, 255, 255, 0.2);

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    0.15em;
}


.dashboard-nav {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.dashboard-nav-item {
  position:
    relative;

  min-height:
    43px;

  padding:
    0 11px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  overflow:
    hidden;

  border:
    1px solid transparent;

  border-radius:
    9px;

  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    10px;

  font-weight:
    560;

  text-decoration:
    none;

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}


.dashboard-nav-item svg {
  color:
    rgba(255, 255, 255, 0.28);

  transition:
    color 180ms ease,
    filter 180ms ease;
}


.dashboard-nav-item:hover {
  transform:
    translateX(2px);

  color:
    rgba(240, 255, 223, 0.84);

  border-color:
    rgba(198, 255, 54, 0.08);

  background:
    rgba(198, 255, 54, 0.04);
}


.dashboard-nav-item:hover svg {
  color:
    rgba(198, 255, 54, 0.88);

  filter:
    drop-shadow(
      0 0 6px
      rgba(198, 255, 54, 0.38)
    );
}


/* active */

.dashboard-nav-item-active {
  color:
    rgba(231, 255, 196, 0.97);

  border-color:
    rgba(198, 255, 54, 0.14);

  background:
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.13),
      rgba(198, 255, 54, 0.028)
    );

  box-shadow:
    inset 2px 0 0
    rgba(198, 255, 54, 0.95),

    0 0 25px
    rgba(198, 255, 54, 0.035);
}


.dashboard-nav-item-active::after {
  content:
    "";

  position:
    absolute;

  top:
    9px;

  right:
    9px;

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 8px
    rgba(198, 255, 54, 0.9);
}


.dashboard-nav-item-active svg {
  color:
    var(--dash-green);

  filter:
    drop-shadow(
      0 0 7px
      rgba(198, 255, 54, 0.45)
    );
}

.dashboard-news-unread {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    18px;

  height:
    18px;

  margin-left:
    auto;

  padding:
    0 5px;

  border:
    1px solid
    rgba(198, 255, 54, 0.22);

  border-radius:
    999px;

  background:
    rgba(198, 255, 54, 0.12);

  color:
    var(--dash-green);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -0.01em;

  box-shadow:
    0 0 12px
    rgba(198, 255, 54, 0.08);
}

.dashboard-nav-item-active
.dashboard-news-unread {
  margin-right:
    10px;
}

/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */

.dashboard-sidebar-bottom {
  margin-top:
    auto;
}


.dashboard-sidebar-status {
  min-height:
    58px;

  padding:
    11px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    rgba(198, 255, 54, 0.08);

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      rgba(198, 255, 54, 0.027),
      rgba(255, 255, 255, 0.008)
    );
}


.dashboard-status-dot {
  width:
    7px;

  height:
    7px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 8px
    rgba(198, 255, 54, 0.9),

    0 0 18px
    rgba(198, 255, 54, 0.3);
}


.dashboard-sidebar-status > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dashboard-sidebar-status span {
  color:
    rgba(255, 255, 255, 0.24);

  font-size:
    7px;
}


.dashboard-sidebar-status strong {
  color:
    rgba(235, 244, 232, 0.72);

  font-size:
    9px;

  font-weight:
    600;
}


.dashboard-sidebar-brand {
  margin-top:
    14px;

  padding-left:
    11px;

  color:
    rgba(255, 255, 255, 0.13);

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.dashboard-workspace {
  position:
    relative;

  z-index:
    5;

  width:
    calc(100% - 245px);

  margin-left:
    245px;

  min-height:
    100vh;

  min-height:
    100dvh;

  background:
    transparent;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.dashboard-topbar {
  position:
    sticky;

  top:
    0;

  z-index:
    45;

  height:
    70px;

  padding:
    0 28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(198, 255, 54, 0.045);

  background:
    rgba(2, 5, 3, 0.79);

  box-shadow:
    0 14px 50px
    rgba(0, 0, 0, 0.16);

  backdrop-filter:
    blur(20px);
}


.dashboard-topbar-left {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}


.dashboard-mobile-menu {
  display:
    none;

  width:
    36px;

  height:
    36px;

      position:
    relative;

  z-index:
    2;

  pointer-events:
    auto;

  touch-action:
    manipulation;

  place-items:
    center;

  border:
    1px solid
    rgba(198, 255, 54, 0.08);

  border-radius:
    8px;

  color:
    rgba(226, 255, 191, 0.72);

  background:
    rgba(198, 255, 54, 0.025);

  cursor:
    pointer;
}


.dashboard-topbar-context {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dashboard-topbar-context span {
  color:
    rgba(198, 255, 54, 0.44);

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    0.14em;
}


.dashboard-topbar-context strong {
  color:
    rgba(255, 255, 255, 0.77);

  font-size:
    11px;

  font-weight:
    620;
}


/* =========================================================
   USER
   ========================================================= */

.dashboard-user {
  min-height:
    43px;

  padding:
    5px 9px 5px 6px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    rgba(198, 255, 54, 0.08);

  border-radius:
    10px;

  color:
    rgba(255, 255, 255, 0.46);

  background:
    rgba(6, 11, 7, 0.82);

  cursor:
    pointer;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


.dashboard-user:hover {
  border-color:
    rgba(198, 255, 54, 0.17);

  background:
    rgba(198, 255, 54, 0.035);

  box-shadow:
    0 0 22px
    rgba(198, 255, 54, 0.045);
}


.dashboard-user-avatar {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(198, 255, 54, 0.2);

  border-radius:
    8px;

  color:
    var(--dash-green);

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.12),
      rgba(198, 255, 54, 0.035)
    );

  font-size:
    10px;

  font-weight:
    750;

  box-shadow:
    0 0 14px
    rgba(198, 255, 54, 0.08);
}


.dashboard-user-copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  text-align:
    left;
}


.dashboard-user-copy span {
  color:
    rgba(255, 255, 255, 0.22);

  font-size:
    6px;
}


.dashboard-user-copy strong {
  color:
    rgba(255, 255, 255, 0.73);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   CONTENT
   ========================================================= */

.dashboard-content {
  position:
    relative;

    z-index: 1;

  width:
    100%;

  padding:
    50px 38px 80px;

  background:
    transparent;
}


.dashboard-overview {
  position:
    relative;

  width:
    min(1320px, 100%);

  margin:
    0 auto;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.dashboard-page-heading {
  position:
    relative;

  min-height:
    235px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;
}


.dashboard-page-heading > div {
  position:
    relative;

  z-index:
    10;

  max-width:
    680px;
}


.dashboard-page-kicker {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(198, 255, 54, 0.13);

  border-radius:
    100px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.042);

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    0.14em;

  box-shadow:
    0 0 20px
    rgba(198, 255, 54, 0.04);
}


.dashboard-page-heading h1 {
  margin:
    17px 0 0;

  color:
    #f7faf5;

  font-size:
    clamp(39px, 4.25vw, 58px);

  font-weight:
    700;

  line-height:
    0.98;

  letter-spacing:
    -0.055em;

  text-shadow:
    0 0 35px
    rgba(255, 255, 255, 0.025);
}


.dashboard-page-heading p {
  max-width:
    600px;

  margin:
    17px 0 0;

  color:
    rgba(236, 243, 234, 0.43);

  font-size:
    12px;

  line-height:
    1.72;
}


/* =========================================================
   TOOLS GRID
   ========================================================= */

.dashboard-tools-grid {
  position:
    relative;

  z-index:
    10;

  margin-top:
  -50px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    13px;
}

@media (min-width: 1201px) {
  .dashboard-tools-grid {
    margin-top: -95px;
  }
}

@media (min-width: 821px) and (max-width: 1200px) {
  .dashboard-hero-globe {
    top: -120px !important;
  }
}

@media (min-width: 821px) and (max-width: 1200px) {
  .dashboard-tools-grid {
    margin-top: 35px;
  }

  .dashboard-hero-globe {
    top: -55px !important;
  }
}

/* =========================================================
   TOOL CARD
   ========================================================= */

.dashboard-tool-card {
  position:
    relative;

  min-height:
    185px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    rgba(198, 255, 54, 0.095);

  border-radius:
    15px;

  color:
    inherit;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(198, 255, 54, 0.04),
      transparent 51%
    ),
    linear-gradient(
      145deg,
      rgba(7, 13, 8, 0.94),
      rgba(3, 7, 4, 0.97)
    );

  text-decoration:
    none;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.018),

    0 18px 48px
    rgba(0, 0, 0, 0.13);

  transition:
    transform 190ms ease,
    border-color 190ms ease,
    background 190ms ease,
    box-shadow 190ms ease;
}


/* top neon edge */

.dashboard-tool-card::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    22px;

  width:
    45px;

  height:
    1px;

  opacity:
    0.5;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--dash-green),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(198, 255, 54, 0.32);

  transition:
    width 190ms ease,
    opacity 190ms ease;
}


/* safe hover — NO FILTER BLUR */

.dashboard-tool-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(198, 255, 54, 0.28);

  background:
    radial-gradient(
      circle at 9% 7%,
      rgba(198, 255, 54, 0.11),
      transparent 41%
    ),
    linear-gradient(
      145deg,
      rgba(9, 18, 10, 0.98),
      rgba(3, 8, 4, 0.99)
    );

  box-shadow:
    inset 0 0 28px
    rgba(198, 255, 54, 0.025),

    inset 0 1px 0
    rgba(255, 255, 255, 0.03),

    0 19px 52px
    rgba(0, 0, 0, 0.25),

    0 0 27px
    rgba(198, 255, 54, 0.055);
}


.dashboard-tool-card:hover::after {
  width:
    95px;

  opacity:
    0.95;
}


/* =========================================================
   TOOL ICON
   ========================================================= */

.dashboard-tool-icon {
  position:
    relative;

  z-index:
    2;

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--dash-green);

  border:
    1px solid
    rgba(198, 255, 54, 0.2);

  border-radius:
    10px;

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.12),
      rgba(198, 255, 54, 0.035)
    );

  box-shadow:
    0 0 14px
    rgba(198, 255, 54, 0.07),

    inset 0 1px 0
    rgba(255, 255, 255, 0.025);

  transition:
    background 190ms ease,
    box-shadow 190ms ease,
    transform 190ms ease;
}


.dashboard-tool-card:hover
.dashboard-tool-icon {
  transform:
    scale(1.045);

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.19),
      rgba(198, 255, 54, 0.055)
    );

  box-shadow:
    0 0 12px
    rgba(198, 255, 54, 0.22),

    0 0 27px
    rgba(198, 255, 54, 0.075);
}


.dashboard-tool-icon svg {
  filter:
    drop-shadow(
      0 0 5px
      rgba(198, 255, 54, 0.3)
    );
}


/* =========================================================
   TOOL COPY
   ========================================================= */

.dashboard-tool-copy {
  position:
    relative;

  z-index:
    2;

  margin-top:
    20px;
}


.dashboard-tool-copy strong {
  display:
    block;

  color:
    rgba(248, 251, 246, 0.9);

  font-size:
    12px;

  font-weight:
    650;

  transition:
    color 180ms ease;
}


.dashboard-tool-card:hover
.dashboard-tool-copy strong {
  color:
    #f5ffe8;
}


.dashboard-tool-copy p {
  max-width:
    290px;

  margin:
    8px 0 0;

  color:
    rgba(236, 243, 234, 0.32);

  font-size:
    9px;

  line-height:
    1.65;

  transition:
    color 180ms ease;
}


.dashboard-tool-card:hover
.dashboard-tool-copy p {
  color:
    rgba(236, 243, 234, 0.44);
}


/* =========================================================
   TOOL ARROW
   ========================================================= */

.dashboard-tool-arrow {
  position:
    absolute;

  z-index:
    3;

  top:
    19px;

  right:
    19px;

  color:
    rgba(255, 255, 255, 0.2);

  transition:
    color 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}


.dashboard-tool-card:hover
.dashboard-tool-arrow {
  color:
    var(--dash-green);

  transform:
    translateX(3px);

  filter:
    drop-shadow(
      0 0 6px
      rgba(198, 255, 54, 0.4)
    );
}


/* =========================================================
   BOTTOM PANELS
   ========================================================= */

.dashboard-overview-bottom {
  position:
    relative;

  z-index:
    10;

  margin-top:
    13px;

  display:
    grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap:
    13px;
}


.dashboard-overview-panel {
  position:
    relative;

  min-height:
    190px;

  padding:
    24px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 12, 8, 0.95),
      rgba(3, 7, 4, 0.98)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.018);
}


.dashboard-overview-panel-accent {
  border-color:
    rgba(198, 255, 54, 0.14);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(198, 255, 54, 0.12),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(8, 15, 9, 0.96),
      rgba(3, 7, 4, 0.98)
    );
}


.dashboard-overview-panel-accent::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    35px;

  width:
    88px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(198, 255, 54, 0.9),
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(198, 255, 54, 0.38);
}


.dashboard-panel-kicker {
  color:
    rgba(198, 255, 54, 0.78);

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    0.15em;
}


.dashboard-overview-panel h2 {
  margin:
    17px 0 0;

  color:
    rgba(249, 252, 247, 0.87);

  font-size:
    19px;

  font-weight:
    650;

  letter-spacing:
    -0.035em;
}


.dashboard-overview-panel p {
  max-width:
    560px;

  margin:
    11px 0 0;

  color:
    rgba(236, 243, 234, 0.35);

  font-size:
    9px;

  line-height:
    1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .dashboard-digital-globe {
    right:
      -85px;

    width:
      320px;

    height:
      320px;

    opacity:
      0.7;
  }


  .dashboard-market-copy {
    right:
      31%;
  }


  .dashboard-orbit-badge {
    right:
      27%;
  }


  .dashboard-discipline-copy {
    opacity:
      0.5;
  }

}


@media (max-width: 1050px) {

  .dashboard-tools-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

  .dashboard-visual-bg {
    left:
      0;
  }


  .dashboard-sidebar {
    width:
      255px;

    transform:
      translateX(-102%);

    transition:
      transform 220ms ease;
  }


  .dashboard-sidebar-open {
    transform:
      translateX(0);
  }


  .dashboard-sidebar-close {
    display:
      grid;
  }


  .dashboard-overlay {
    position:
      fixed;

    inset:
      0;

    z-index:
      40;

    border:
      0;

    background:
      rgba(0, 0, 0, 0.68);
  }


  .dashboard-workspace {
    width:
      100%;

    margin-left:
      0;
  }


  .dashboard-topbar {
    height:
      64px;

    padding:
      0 16px;
  }


  .dashboard-mobile-menu {
    display:
      grid;
  }


  .dashboard-content {
  padding:
    34px 17px 65px;
}


  .dashboard-user-copy {
    display:
      none;
  }


  .dashboard-page-heading {
    min-height:
      205px;
  }


  .dashboard-page-heading h1 {
    font-size:
      36px;
  }


  .dashboard-digital-globe {
    top:
      120px;

    right:
      -135px;

    width:
      275px;

    height:
      275px;

    opacity:
      0.32;
  }


  .dashboard-orbit {
    opacity:
      0.18;
  }


  .dashboard-market-copy,
  .dashboard-orbit-badge,
  .dashboard-discipline-copy,
  .dashboard-background-code {
    display:
      none;
  }


  .dashboard-tools-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .dashboard-overview-bottom {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

 @media (max-width: 560px) {

  .dashboard-bg-grid {
    opacity:
      0.16;

    background-size:
      44px 44px;
  }


  .dashboard-bg-particles {
    opacity:
      0.28;
  }


  .dashboard-digital-globe {
    top:
      150px;

    right:
      -145px;

    width:
      230px;

    height:
      230px;

    opacity:
      0.22;
  }


  .dashboard-orbit {
    display:
      none;
  }


  .dashboard-page-heading {
    min-height:
      185px;
  }


  .dashboard-page-heading h1 {
    font-size:
      31px;
  }


  .dashboard-page-heading p {
    font-size:
      10px;
  }


  .dashboard-tools-grid {
    margin-top:
      20px;

    grid-template-columns:
      1fr;
  }


  .dashboard-tool-card {
    min-height:
      165px;
  }


  .dashboard-overview-panel {
    min-height:
      170px;

    padding:
      20px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .dashboard-tool-card,
  .dashboard-nav-item,
  .dashboard-tool-icon,
  .dashboard-tool-arrow,
  .dashboard-user {
    transition:
      none !important;
  }

}

/* =========================================================
   FIX — SHOW CINEMATIC DASHBOARD BACKGROUND
   globals.css has: main { background: ... !important }
   ========================================================= */

.dashboard-workspace {
  background: transparent !important;
}


.dashboard-visual-bg {
  display: block !important;

  opacity: 1 !important;

  visibility: visible !important;
}

/* =========================================================
   PUSHX — CINEMATIC BACKGROUND LAYER FIX
   ========================================================= */

.dashboard-visual-bg {
  z-index: 2 !important;
}

.dashboard-workspace {
  position: relative;

  z-index: 3 !important;

  min-height: 100vh;
  min-height: 100dvh;

  background: transparent !important;
}

.dashboard-workspace::before {
  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  pointer-events: none;

  opacity: 0.3;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.027) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.027) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 55%,
      rgba(0, 0, 0, 0.62) 100%
    );

  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 55%,
      rgba(0, 0, 0, 0.62) 100%
    );
}

main.dashboard-content {
  position: relative;

  z-index: auto !important;

  isolation: isolate;

  background: transparent !important;
}



/* декоративные элементы должны быть видны поверх общего фона,
   но оставаться под интерфейсом */

.dashboard-market-copy,
.dashboard-digital-globe,
.dashboard-orbit,
.dashboard-orbit-badge,
.dashboard-discipline-copy,
.dashboard-background-code {
  visibility: visible !important;
  opacity: 1;
}

/* делаем планету заметнее */
.dashboard-digital-globe {
  opacity: 0.9 !important;
}

/* сама сетка и частицы остаются мягкими */
.dashboard-bg-grid {
  opacity: 0.22 !important;
}

.dashboard-bg-particles {
  opacity: 0.38 !important;
}

/* =========================================================
   PUSHX — HERO CINEMATIC SCENE
   REAL CONTENT LAYER
   ========================================================= */

.dashboard-page-heading {
  position: relative;
  min-height: 310px;

  overflow: hidden;

  border-radius: 0;

  isolation: isolate;
}


/* COPY */

.dashboard-hero-copy {
  position: relative;

  z-index: 10;

  width: min(650px, 60%);

  padding-top: 4px;
}


.dashboard-page-heading h1 span {
  color: var(--dash-green);

  text-shadow:
    0 0 18px rgba(198, 255, 54, 0.14),
    0 0 50px rgba(198, 255, 54, 0.06);
}


/* =========================================================
   COMPLETE HERO ART LAYER
   ========================================================= */

.dashboard-hero-scene {
  position: absolute;

  z-index: 2;

  top: -50px;
  right: -30px;
  bottom: 0;

  width: 62%;

  overflow: visible;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 73% 42%,
      rgba(120, 255, 38, 0.1),
      transparent 34%
    );
}


/* =========================================================
   GRID
   ========================================================= */

.dashboard-hero-grid {
  position: absolute;

  inset: -100px -100px -30px -180px;

  opacity: 0.34;

  background-image:
    linear-gradient(
      rgba(198, 255, 54, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.055) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  mask-image:
    radial-gradient(
      ellipse at 65% 45%,
      black 0%,
      rgba(0, 0, 0, 0.72) 48%,
      transparent 82%
    );
}


/* =========================================================
   MARKETS NEVER SLEEP
   ========================================================= */

.dashboard-hero-market {
  position: absolute;

  z-index: 7;

  top: 29px;
  left: 16%;

  display: flex;
  flex-direction: column;

  gap: 7px;

  color: rgba(184, 255, 130, 0.43);

  font-size: 8px;
  font-weight: 750;

  line-height: 1;

  letter-spacing: 0.4em;
}


/* =========================================================
   GLOBE
   ========================================================= */

.dashboard-hero-globe {
  position: absolute;

  z-index: 5;

  top: 20px;
  right: 3%;

  width: 300px;
  height: 300px;

  overflow: hidden;

  border:
    1px solid rgba(198, 255, 54, 0.25);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 36% 29%,
      rgba(215, 255, 97, 0.2),
      rgba(124, 255, 45, 0.09) 26%,
      rgba(20, 66, 23, 0.18) 49%,
      #020603 77%
    );

  box-shadow:
    inset 34px 20px 70px rgba(198, 255, 54, 0.055),
    inset -74px -62px 100px rgba(0, 0, 0, 0.91),
    0 0 45px rgba(135, 255, 40, 0.14),
    0 0 105px rgba(135, 255, 40, 0.055);
}


/* LATITUDE / LONGITUDE */

.dashboard-hero-globe-lines {
  position: absolute;

  inset: 7%;

  border-radius: 50%;

  opacity: 0.84;

  background-image:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0,
      transparent 14px,
      rgba(198, 255, 54, 0.11) 15px,
      transparent 16px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 17px,
      rgba(198, 255, 54, 0.06) 18px,
      transparent 19px
    );

  mask-image:
    radial-gradient(
      circle,
      black 36%,
      rgba(0, 0, 0, 0.84) 60%,
      transparent 79%
    );
}


/* DOTTED CONTINENT */

.dashboard-hero-globe-land {
  position: absolute;

  inset: 15%;

  opacity: 0.7;

  background-image:
    radial-gradient(
      circle,
      rgba(205, 255, 76, 0.9) 0.75px,
      transparent 1.1px
    );

  background-size: 7px 7px;

  clip-path:
    polygon(
      8% 17%,
      28% 8%,
      44% 13%,
      57% 24%,
      74% 18%,
      92% 31%,
      78% 45%,
      89% 57%,
      72% 66%,
      61% 84%,
      47% 94%,
      35% 75%,
      19% 82%,
      11% 63%,
      2% 47%
    );
}


/* globe shade */

.dashboard-hero-globe::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.15),
      transparent 37%,
      transparent 58%,
      rgba(0, 0, 0, 0.57)
    );
}


/* =========================================================
   GLOBE LIGHTS
   ========================================================= */

.dashboard-hero-core,
.dashboard-hero-point {
  position: absolute;

  z-index: 8;

  display: block;

  border-radius: 50%;

  background: var(--dash-green);
}


.dashboard-hero-core {
  top: 49%;
  left: 68%;

  width: 6px;
  height: 6px;

  box-shadow:
    0 0 7px #e4ff91,
    0 0 18px rgba(198, 255, 54, 1),
    0 0 42px rgba(198, 255, 54, 0.7),
    0 0 78px rgba(198, 255, 54, 0.34);
}


.dashboard-hero-point {
  width: 3px;
  height: 3px;

  box-shadow:
    0 0 7px rgba(198, 255, 54, 0.9);
}


.dashboard-hero-point-one {
  top: 31%;
  left: 39%;
}


.dashboard-hero-point-two {
  top: 64%;
  left: 72%;
}


.dashboard-hero-point-three {
  top: 48%;
  left: 23%;
}


/* =========================================================
   ORBITS
   ========================================================= */

.dashboard-hero-orbit {
  position: absolute;

  z-index: 6;

  border:
    1px solid rgba(178, 255, 47, 0.34);

  border-radius: 50%;

  pointer-events: none;
}


.dashboard-hero-orbit-one {
  top: 91px;
  right: -175px;

  width: 730px;
  height: 205px;

  transform: rotate(-16deg);
}


.dashboard-hero-orbit-two {
  top: 153px;
  right: -37px;

  width: 620px;
  height: 135px;

  opacity: 0.67;

  transform: rotate(-23deg);
}


.dashboard-hero-orbit-three {
  top: 33px;
  right: -260px;

  width: 830px;
  height: 315px;

  opacity: 0.25;

  transform: rotate(-10deg);
}


/* =========================================================
   +12.4%
   ========================================================= */

.dashboard-hero-percent {
  position: absolute;

  z-index: 9;

  top: 141px;
  left: 20%;

  padding: 9px 13px;

  border:
    1px solid rgba(198, 255, 54, 0.48);

  border-radius: 8px;

  color: #d7ff6b;

  background: rgba(4, 13, 5, 0.9);

  font-size: 10px;
  font-weight: 750;

  box-shadow:
    0 0 24px rgba(198, 255, 54, 0.11);
}


/* =========================================================
   DISCIPLINE TEXT
   ========================================================= */

.dashboard-hero-discipline {
  position: absolute;

  z-index: 9;

  right: 1%;
  bottom: 19px;

  display: flex;
  flex-direction: column;

  gap: 7px;

  color: rgba(185, 255, 138, 0.31);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.3em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

  .dashboard-hero-copy {
    width: 60%;
  }

  .dashboard-hero-scene {
    width: 58%;
    right: -50px;
  }

  .dashboard-hero-globe {
    width: 270px;
    height: 270px;

    right: -25px;
  }

}


@media (max-width: 900px) {

  .dashboard-page-heading {
    min-height: 240px;
  }

  .dashboard-hero-copy {
    width: 72%;
  }

  .dashboard-hero-scene {
    right: -100px;

    opacity: 0.45;
  }

  .dashboard-hero-market,
  .dashboard-hero-percent,
  .dashboard-hero-discipline {
    display: none;
  }

}


@media (max-width: 620px) {

  .dashboard-page-heading {
    min-height: 195px;
  }

  .dashboard-hero-copy {
    width: 82%;
  }

  .dashboard-hero-scene {
    right: -150px;

    width: 78%;

    opacity: 0.25;
  }

  .dashboard-hero-globe {
    width: 220px;
    height: 220px;
  }

}

/* =========================================================
   PUSHX HERO — POSITION + MOTION FIX
   ========================================================= */

.dashboard-page-heading {
  overflow: visible !important;
}

.dashboard-hero-scene {
  top: 0 !important;
  right: -20px !important;
  overflow: visible !important;
}

.dashboard-hero-market {
  top: 18px !important;

  animation:
    pushxMarketFloat 6s ease-in-out infinite;
}

.dashboard-hero-globe {
  top: 0 !important;

  transform-origin: center;

  animation:
    pushxGlobeFloat 8s ease-in-out infinite;
}

.dashboard-hero-globe-land,
.dashboard-hero-globe-lines {
  transform-origin: center;

  animation:
    pushxGlobeRotate 26s linear infinite;
}

.dashboard-hero-percent {
  top: 135px !important;

  animation:
    pushxPercentFloat 5s ease-in-out infinite;
}

.dashboard-hero-core {
  animation:
    pushxCorePulse 2.8s ease-in-out infinite;
}

.dashboard-hero-point-one {
  animation:
    pushxPointPulse 2.1s ease-in-out infinite;
}

.dashboard-hero-point-two {
  animation:
    pushxPointPulse 2.7s ease-in-out infinite 0.4s;
}

.dashboard-hero-point-three {
  animation:
    pushxPointPulse 2.4s ease-in-out infinite 0.8s;
}


/* медленно живущие орбиты */

.dashboard-hero-orbit-one {
  animation:
    pushxOrbitOne 12s ease-in-out infinite;
}

.dashboard-hero-orbit-two {
  animation:
    pushxOrbitTwo 15s ease-in-out infinite;
}

.dashboard-hero-orbit-three {
  animation:
    pushxOrbitThree 18s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pushxGlobeFloat {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(0, -8px, 0);
  }
}

@keyframes pushxGlobeRotate {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}

@keyframes pushxPercentFloat {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(8px, -7px, 0);
  }
}

@keyframes pushxMarketFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-4px);
  }
}

@keyframes pushxCorePulse {
  0%,
  100% {
    opacity: 0.75;

    box-shadow:
      0 0 7px #e4ff91,
      0 0 18px rgba(198, 255, 54, 0.85),
      0 0 42px rgba(198, 255, 54, 0.5);
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 10px #e4ff91,
      0 0 30px rgba(198, 255, 54, 1),
      0 0 70px rgba(198, 255, 54, 0.7);
  }
}

@keyframes pushxPointPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes pushxOrbitOne {
  0%,
  100% {
    transform:
      rotate(-16deg)
      translateX(0);
  }

  50% {
    transform:
      rotate(-16deg)
      translateX(8px);
  }
}

@keyframes pushxOrbitTwo {
  0%,
  100% {
    transform:
      rotate(-23deg)
      translateX(0);
  }

  50% {
    transform:
      rotate(-23deg)
      translateX(-7px);
  }
}

@keyframes pushxOrbitThree {
  0%,
  100% {
    transform:
      rotate(-10deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(-10deg)
      translateY(6px);
  }
}

/* =========================================================
   PUSHX DASHBOARD — MARKET + CALENDAR ZONE
   ========================================================= */

.dashboard-market-zone {
  position: relative;
  z-index: 5;

  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.88fr);
  gap: 14px;

  margin-top: 18px;
}

.dashboard-market-panel,
.dashboard-calendar-panel {
  position: relative;

  overflow: hidden;

  min-height: 365px;

  padding: 24px;

  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.022),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(5, 9, 6, 0.72);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 20px 65px rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(18px);
}

.dashboard-market-panel::before {
  content: "";

  position: absolute;
  top: -180px;
  left: -180px;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(198, 255, 54, 0.055);
  filter: blur(95px);

  pointer-events: none;
}

.dashboard-calendar-panel::before {
  content: "";

  position: absolute;
  right: -220px;
  bottom: -230px;

  width: 460px;
  height: 460px;

  border-radius: 50%;

  background: rgba(198, 255, 54, 0.04);
  filter: blur(105px);

  pointer-events: none;
}

.dashboard-market-panel-head,
.dashboard-calendar-panel-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
}

.dashboard-market-panel h2,
.dashboard-calendar-panel h2 {
  margin: 7px 0 0;

  color: rgba(245, 249, 245, 0.94);

  font-size: 21px;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.dashboard-market-panel-head p {
  max-width: 490px;

  margin: 8px 0 0;

  color: rgba(148, 160, 150, 0.6);

  font-size: 12px;
  line-height: 1.55;
}

.dashboard-panel-kicker {
  color: rgba(198, 255, 54, 0.6);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.dashboard-market-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 10px;

  border: 1px solid rgba(198, 255, 54, 0.11);
  border-radius: 999px;

  background: rgba(198, 255, 54, 0.035);

  color: rgba(198, 255, 54, 0.58);

  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.dashboard-market-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #c6ff36;

  box-shadow:
    0 0 7px rgba(198, 255, 54, 0.8),
    0 0 14px rgba(198, 255, 54, 0.35);

  animation: pushxLivePulse 2s ease-in-out infinite;
}

.dashboard-market-list {
  position: relative;
  z-index: 2;

  margin-top: 23px;

  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.dashboard-market-row {
  min-height: 70px;

  display: grid;
  grid-template-columns: minmax(190px, 1fr) 150px minmax(110px, auto);
  align-items: center;
  gap: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.045);

  transition:
    background 180ms ease,
    padding 180ms ease;
}

.dashboard-market-row:hover {
  padding: 0 10px;

  background:
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.025),
      transparent
    );
}

.dashboard-market-asset {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-market-symbol {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(198, 255, 54, 0.11);
  border-radius: 10px;

  background: rgba(198, 255, 54, 0.045);

  color: rgba(212, 255, 117, 0.78);

  font-size: 8px;
  font-weight: 850;
}

.dashboard-market-asset strong,
.dashboard-market-asset span {
  display: block;
}

.dashboard-market-asset strong {
  color: rgba(232, 238, 232, 0.88);

  font-size: 12px;
  font-weight: 620;
}

.dashboard-market-asset span {
  margin-top: 4px;

  color: rgba(129, 141, 131, 0.55);

  font-size: 9px;
}

.dashboard-market-chart {
  width: 150px;
  height: 42px;

  opacity: 0.85;
}

.dashboard-market-chart svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.dashboard-market-chart-line,
.dashboard-market-chart-glow {
  fill: none;
}

.dashboard-market-chart-glow {
  stroke: rgba(198, 255, 54, 0.15);
  stroke-width: 7;

  filter: blur(5px);
}

.dashboard-market-chart-line {
  stroke: rgba(198, 255, 54, 0.7);
  stroke-width: 1.5;

  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(0 0 4px rgba(198, 255, 54, 0.22));
}

.dashboard-market-status {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(139, 153, 141, 0.62);

  font-size: 9px;
}

.dashboard-market-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(198, 255, 54, 0.65);

  box-shadow: 0 0 7px rgba(198, 255, 54, 0.35);
}


/* =========================================================
   CALENDAR
   ========================================================= */

.dashboard-calendar-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border: 1px solid rgba(198, 255, 54, 0.11);
  border-radius: 11px;

  background: rgba(198, 255, 54, 0.045);

  color: rgba(198, 255, 54, 0.65);
}

.dashboard-calendar-description {
  position: relative;
  z-index: 2;

  margin: 12px 0 0;

  color: rgba(145, 157, 147, 0.57);

  font-size: 11px;
  line-height: 1.55;
}

.dashboard-calendar-events {
  position: relative;
  z-index: 2;

  margin-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.dashboard-calendar-event {
  min-height: 67px;

  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.dashboard-calendar-event-time span,
.dashboard-calendar-event-time strong {
  display: block;
}

.dashboard-calendar-event-time span {
  color: rgba(198, 255, 54, 0.56);

  font-size: 8px;
  font-weight: 800;
}

.dashboard-calendar-event-time strong {
  margin-top: 5px;

  color: rgba(198, 207, 199, 0.54);

  font-size: 10px;
  font-weight: 550;
}

.dashboard-calendar-event-info {
  min-width: 0;
}

.dashboard-calendar-event-info strong,
.dashboard-calendar-event-info span {
  display: block;
}

.dashboard-calendar-event-info strong {
  overflow: hidden;

  color: rgba(222, 229, 223, 0.82);

  font-size: 10px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-calendar-event-info span {
  overflow: hidden;

  margin-top: 4px;

  color: rgba(126, 138, 128, 0.5);

  font-size: 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-event-impact {
  padding: 5px 7px;

  border-radius: 6px;

  font-size: 7px;
  font-weight: 700;
}

.dashboard-event-impact-high {
  border: 1px solid rgba(255, 106, 106, 0.12);

  background: rgba(255, 106, 106, 0.04);

  color: rgba(255, 139, 139, 0.62);
}

.dashboard-event-impact-medium {
  border: 1px solid rgba(255, 201, 83, 0.11);

  background: rgba(255, 201, 83, 0.035);

  color: rgba(255, 210, 111, 0.58);
}

.dashboard-event-impact-low {
  border: 1px solid rgba(198, 255, 54, 0.09);

  background: rgba(198, 255, 54, 0.025);

  color: rgba(198, 255, 54, 0.5);
}


/* =========================================================
   PANEL LINKS
   ========================================================= */

.dashboard-panel-link {
  position: relative;
  z-index: 2;

  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 17px;

  color: rgba(169, 183, 171, 0.55);

  font-size: 9px;
  font-weight: 600;

  transition:
    color 180ms ease,
    gap 180ms ease;
}

.dashboard-panel-link:hover {
  gap: 11px;

  color: rgba(198, 255, 54, 0.72);
}


/* =========================================================
   TODAY STRIP
   ========================================================= */

.dashboard-today-strip {
  position: relative;
  z-index: 5;

  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 14px;
  padding: 0 22px;

  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 15px;

  background:
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.022),
      rgba(255, 255, 255, 0.008),
      rgba(198, 255, 54, 0.012)
    );

  backdrop-filter: blur(14px);
}

.dashboard-today-label {
  display: flex;
  align-items: center;
  gap: 11px;
}

.dashboard-today-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #c6ff36;

  box-shadow:
    0 0 8px rgba(198, 255, 54, 0.75),
    0 0 22px rgba(198, 255, 54, 0.2);

  animation: pushxLivePulse 2.4s ease-in-out infinite;
}

.dashboard-today-label span,
.dashboard-today-label strong {
  display: block;
}

.dashboard-today-label span {
  color: rgba(198, 255, 54, 0.43);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.dashboard-today-label strong {
  margin-top: 4px;

  color: rgba(210, 219, 211, 0.7);

  font-size: 10px;
  font-weight: 560;
}

.dashboard-today-items {
  display: flex;
  align-items: center;
  gap: 22px;
}

.dashboard-today-items > i {
  width: 1px;
  height: 23px;

  background: rgba(255, 255, 255, 0.055);
}

.dashboard-today-items div span,
.dashboard-today-items div strong {
  display: block;
}

.dashboard-today-items div span {
  color: rgba(111, 123, 113, 0.52);

  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.dashboard-today-items div strong {
  margin-top: 4px;

  color: rgba(189, 201, 191, 0.66);

  font-size: 9px;
  font-weight: 550;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes pushxLivePulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
  .dashboard-market-zone {
    grid-template-columns: 1fr;
  }

  .dashboard-calendar-panel {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .dashboard-market-panel,
  .dashboard-calendar-panel {
    padding: 19px;
    border-radius: 15px;
  }

  .dashboard-market-row {
    grid-template-columns: minmax(150px, 1fr) 110px;
  }

  .dashboard-market-chart {
    width: 110px;
  }

  .dashboard-market-status {
    display: none;
  }

  .dashboard-today-strip {
    align-items: flex-start;
    flex-direction: column;

    padding: 18px;
  }

  .dashboard-today-items {
    width: 100%;

    justify-content: space-between;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .dashboard-market-row {
    grid-template-columns: 1fr;
    gap: 7px;

    padding: 12px 0;
  }

  .dashboard-market-row:hover {
    padding: 12px 8px;
  }

  .dashboard-market-chart {
    width: 100%;
  }

  .dashboard-calendar-event {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .dashboard-event-impact {
    display: none;
  }

  .dashboard-today-items {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-today-items > i {
    width: 100%;
    height: 1px;
  }
}

/* =========================================================
   PUSHX DASHBOARD — MOBILE POLISH
   DESKTOP НЕ ТРОГАЕМ
   ========================================================= */

@media (max-width: 760px) {
  .dashboard-page-heading {
    min-height: 265px !important;
    overflow: visible !important;
  }

  .dashboard-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 12;
  }

  .dashboard-hero-copy h1 {
    max-width: 290px;
  }

  .dashboard-hero-copy p {
    max-width: 300px;
  }

  .dashboard-hero-scene {
    top: 50px !important;
    right: -90px !important;
    bottom: auto !important;

    width: 390px !important;
    height: 280px !important;

    opacity: 1 !important;
    transform: none !important;
  }

  .dashboard-hero-globe {
    top: 46px !important;
    right: 16px !important;

    width: 225px !important;
    height: 225px !important;

    opacity: 0.98 !important;

    filter:
      drop-shadow(0 0 20px rgba(198, 255, 54, 0.14))
      drop-shadow(0 0 55px rgba(198, 255, 54, 0.08));
  }

  .dashboard-hero-market {
    top: 40px !important;
    right: 145px !important;

    opacity: 0.48 !important;

    transform: scale(0.88);
    transform-origin: right top;
  }

  .dashboard-hero-percent {
    top: 165px !important;
    right: 38px !important;

    opacity: 0.82 !important;
  }

  .dashboard-hero-discipline {
    right: 124px !important;
    bottom: 8px !important;

    opacity: 0.34 !important;
  }

  .dashboard-hero-orbit {
    opacity: 0.7 !important;
  }

  .dashboard-hero-grid {
    opacity: 0.42 !important;
  }


  /* =========================================================
     MOBILE TOOL GRID
     ========================================================= */

  .dashboard-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;

  margin-top: -50px !important;
}

  .dashboard-tool-card {
    position: relative;

    min-height: 142px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    padding: 16px !important;

    border-radius: 16px !important;

    overflow: hidden;
  }

  .dashboard-tool-card:first-child {
    grid-column: 1 / -1;

    min-height: 128px !important;

    flex-direction: row !important;
    align-items: center !important;

    padding: 18px !important;
  }

  .dashboard-tool-card:first-child .dashboard-tool-copy {
    flex: 1;
  }

  .dashboard-tool-card:first-child .dashboard-tool-copy p {
    max-width: 245px;
  }

  .dashboard-tool-icon {
    width: 38px !important;
    height: 38px !important;

    flex: 0 0 auto;

    border-radius: 11px !important;
  }

  .dashboard-tool-copy {
    margin-top: 14px;
  }

  .dashboard-tool-card:first-child .dashboard-tool-copy {
    margin-top: 0;
    margin-left: 13px;
  }

  .dashboard-tool-copy strong {
    font-size: 13px !important;
    line-height: 1.25;
  }

  .dashboard-tool-copy p {
    margin-top: 7px !important;

    font-size: 9px !important;
    line-height: 1.5 !important;

    color: rgba(145, 156, 147, 0.58) !important;
  }

  .dashboard-tool-arrow {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;

    width: 15px !important;
    height: 15px !important;

    opacity: 0.4;
  }

  .dashboard-tool-card:first-child .dashboard-tool-arrow {
    top: 50% !important;
    right: 17px !important;
    bottom: auto !important;

    transform: translateY(-50%);
  }


  /* =========================================================
     НЕМНОГО РАЗНЫЙ РИТМ КАРТОЧЕК
     ========================================================= */

  .dashboard-tool-card:nth-child(2),
  .dashboard-tool-card:nth-child(5),
  .dashboard-tool-card:nth-child(7) {
    background:
      radial-gradient(
        circle at 85% 15%,
        rgba(198, 255, 54, 0.045),
        transparent 42%
      ),
      rgba(5, 9, 6, 0.72) !important;
  }

  .dashboard-tool-card:nth-child(3),
  .dashboard-tool-card:nth-child(4),
  .dashboard-tool-card:nth-child(6) {
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.018),
        rgba(255, 255, 255, 0.004)
      ),
      rgba(5, 9, 6, 0.7) !important;
  }
}


@media (max-width: 430px) {
  .dashboard-page-heading {
    min-height: 250px !important;
  }

  .dashboard-hero-scene {
  right: -118px !important;
  width: 370px !important;
}

.dashboard-hero-globe {
  width: 205px !important;
  height: 205px !important;

  top: 5px !important;
  right: 38px !important;
}

/* орбиты подводим к центру планеты */

.dashboard-hero-orbit-one {
  top: 3px !important;
  right: -252px !important;
}

.dashboard-hero-orbit-two {
  top: 37px !important;
  right: -198px !important;
}

.dashboard-hero-orbit-three {
  top: -55px !important;
  right: -302px !important;
}

  .dashboard-hero-orbit-one {
  top: 71px !important;
}

.dashboard-hero-orbit-two {
  top: 133px !important;
}

.dashboard-hero-orbit-three {
  top: 13px !important;
}

  .dashboard-tools-grid {
    gap: 8px !important;
  }

  .dashboard-tool-card {
    min-height: 136px !important;

    padding: 14px !important;
  }

  .dashboard-tool-card:first-child {
    min-height: 120px !important;
  }

  .dashboard-tool-copy strong {
    font-size: 12px !important;
  }

  .dashboard-tool-copy p {
    font-size: 8.5px !important;
  }
}

/* =========================================================
   PUSHX — ECONOMIC CALENDAR
   ========================================================= */

.pushx-calendar-page {
  position: relative;
  width: 100%;
  padding-bottom: 80px;
}


/* =========================================================
   HERO
   ========================================================= */

.pushx-calendar-hero {
  position: relative;

  min-height: 330px;

  display: flex;
  align-items: flex-start;

  overflow: hidden;

  border-bottom:
    1px solid rgba(198, 255, 54, 0.055);
}

.pushx-calendar-hero::before {
  content: "";

  position: absolute;
  top: -180px;
  right: 30px;

  width: 580px;
  height: 500px;

  border-radius: 50%;

  background:
    rgba(198, 255, 54, 0.04);

  filter: blur(130px);

  pointer-events: none;
}

.pushx-calendar-hero-copy {
  position: relative;
  z-index: 10;

  width: min(610px, 56%);

  padding-top: 14px;
}

.pushx-calendar-kicker {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 20px;

  color: var(--dash-green);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.pushx-calendar-hero h1 {
  max-width: 610px;

  margin: 0;

  color: #f4f7f2;

  font-size: clamp(43px, 4.8vw, 67px);
  font-weight: 650;

  line-height: 0.98;

  letter-spacing: -0.055em;
}

.pushx-calendar-hero h1 span {
  color: var(--dash-green);

  text-shadow:
    0 0 22px rgba(198, 255, 54, 0.13),
    0 0 65px rgba(198, 255, 54, 0.06);
}

.pushx-calendar-hero-copy > p {
  max-width: 510px;

  margin: 21px 0 0;

  color: rgba(225, 232, 223, 0.47);

  font-size: 12px;
  line-height: 1.72;
}

.pushx-calendar-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 25px;
}

.pushx-calendar-tag {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  color: rgba(220, 229, 217, 0.48);

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.055em;

  border:
    1px solid rgba(198, 255, 54, 0.08);

  border-radius: 999px;

  background:
    rgba(198, 255, 54, 0.025);
}

.pushx-calendar-tag svg {
  color: var(--dash-green);
}


/* =========================================================
   WORLD VISUAL
   ========================================================= */

.pushx-calendar-world {
  position: absolute;
  z-index: 2;

  top: -35px;
  right: -25px;

  width: 600px;
  height: 350px;

  pointer-events: none;
}

.pushx-calendar-world-grid {
  position: absolute;
  inset: 0;

  opacity: 0.15;

  background-image:
    linear-gradient(
      rgba(198, 255, 54, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.1) 1px,
      transparent 1px
    );

  background-size: 39px 39px;

  mask-image:
    radial-gradient(
      circle at 65% 45%,
      #000,
      transparent 70%
    );
}

.pushx-calendar-world-label {
  position: absolute;

  top: 57px;
  right: 355px;

  display: flex;
  flex-direction: column;

  color: rgba(238, 243, 235, 0.15);

  font-size: 31px;
  font-weight: 750;

  line-height: 0.88;

  letter-spacing: -0.06em;

  animation:
    pushxCalendarLabelFloat
    7s ease-in-out infinite;
}

.pushx-calendar-world-label span {
  margin-top: 6px;

  color: rgba(198, 255, 54, 0.2);

  font-size: 9px;

  letter-spacing: 0.18em;
}


/* GLOBE */

.pushx-calendar-globe {
  position: absolute;

  top: 17px;
  right: 25px;

  width: 285px;
  height: 285px;

  border-radius: 50%;

  border:
    1px solid rgba(198, 255, 54, 0.14);

  background:
    radial-gradient(
      circle at 40% 36%,
      rgba(198, 255, 54, 0.11),
      rgba(198, 255, 54, 0.025) 32%,
      rgba(1, 5, 2, 0.08) 65%,
      transparent 72%
    );

  box-shadow:
    inset 0 0 45px rgba(198, 255, 54, 0.035),
    0 0 60px rgba(198, 255, 54, 0.05);

  animation:
    pushxCalendarGlobeFloat
    8s ease-in-out infinite;
}

.pushx-calendar-globe::before,
.pushx-calendar-globe::after {
  content: "";

  position: absolute;

  inset: 14% 4%;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 50%;
}

.pushx-calendar-globe::before {
  transform: rotate(90deg) scaleX(0.45);
}

.pushx-calendar-globe::after {
  transform: rotate(90deg) scaleX(0.75);
}

.pushx-calendar-globe-lines {
  position: absolute;
  inset: 0;

  overflow: hidden;

  border-radius: 50%;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 25px,
      rgba(198, 255, 54, 0.065) 26px,
      transparent 27px
    );

  opacity: 0.85;

  mask-image:
    radial-gradient(
      circle,
      #000 0 69%,
      transparent 72%
    );

  animation:
    pushxCalendarGlobeRotate
    28s linear infinite;
}

.pushx-calendar-globe-land {
  position: absolute;

  top: 67px;
  left: 70px;

  width: 145px;
  height: 116px;

  opacity: 0.47;

  background:
    radial-gradient(
      ellipse at 22% 22%,
      rgba(198, 255, 54, 0.85) 0 7%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 45% 25%,
      rgba(198, 255, 54, 0.7) 0 15%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 63% 50%,
      rgba(198, 255, 54, 0.55) 0 19%,
      transparent 21%
    ),
    radial-gradient(
      ellipse at 43% 69%,
      rgba(198, 255, 54, 0.46) 0 16%,
      transparent 18%
    ),
    radial-gradient(
      ellipse at 78% 28%,
      rgba(198, 255, 54, 0.55) 0 10%,
      transparent 12%
    );

  filter:
    blur(0.6px)
    drop-shadow(
      0 0 9px
      rgba(198, 255, 54, 0.2)
    );

  animation:
    pushxCalendarLandMove
    18s ease-in-out infinite;
}

.pushx-calendar-globe-core {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 7px;
  height: 7px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--dash-green);

  box-shadow:
    0 0 12px rgba(198, 255, 54, 0.9),
    0 0 28px rgba(198, 255, 54, 0.36);

  animation:
    pushxCalendarCorePulse
    2.7s ease-in-out infinite;
}


/* POINTS */

.pushx-calendar-point {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--dash-green);

  box-shadow:
    0 0 8px rgba(198, 255, 54, 0.7);
}

.pushx-calendar-point-one {
  top: 72px;
  left: 92px;
}

.pushx-calendar-point-two {
  top: 113px;
  right: 66px;
}

.pushx-calendar-point-three {
  bottom: 80px;
  left: 105px;
}

.pushx-calendar-point-four {
  bottom: 57px;
  right: 90px;
}

.pushx-calendar-point-one {
  animation:
    pushxCalendarPointPulse
    2.1s ease-in-out infinite;
}

.pushx-calendar-point-two {
  animation:
    pushxCalendarPointPulse
    2.6s ease-in-out infinite 0.4s;
}

.pushx-calendar-point-three {
  animation:
    pushxCalendarPointPulse
    2.3s ease-in-out infinite 0.8s;
}

.pushx-calendar-point-four {
  animation:
    pushxCalendarPointPulse
    2.9s ease-in-out infinite 1.1s;
}


/* ORBITS */

.pushx-calendar-orbit {
  position: absolute;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 50%;
}

.pushx-calendar-orbit-one {
  top: 72px;
  right: -15px;

  width: 380px;
  height: 165px;

  transform: rotate(-15deg);

  animation:
    pushxCalendarOrbitOne
    11s ease-in-out infinite;
}

.pushx-calendar-orbit-two {
  top: 35px;
  right: 34px;

  width: 365px;
  height: 238px;

  transform: rotate(18deg);

  animation:
    pushxCalendarOrbitTwo
    14s ease-in-out infinite;
}

.pushx-calendar-orbit-three {
  top: 100px;
  right: 50px;

  width: 323px;
  height: 118px;

  transform: rotate(35deg);

  animation:
    pushxCalendarOrbitThree
    17s ease-in-out infinite;
}


/* FLOATING UI */

.pushx-calendar-floating {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  color: rgba(229, 236, 226, 0.65);

  font-size: 9px;
  font-weight: 650;

  border:
    1px solid rgba(198, 255, 54, 0.11);

  border-radius: 9px;

  background:
    rgba(5, 10, 6, 0.68);

  backdrop-filter: blur(10px);

  box-shadow:
    0 13px 35px rgba(0, 0, 0, 0.2);
}

.pushx-calendar-floating-usd {
  top: 93px;
  right: 240px;

  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

  color: var(--dash-green);

  animation:
    pushxCalendarFloatOne
    5.5s ease-in-out infinite;
}

.pushx-calendar-floating-usd span {
  color: rgba(229, 236, 226, 0.31);

  font-size: 6px;

  letter-spacing: 0.11em;
}

.pushx-calendar-floating-time {
  top: 172px;
  right: 14px;

  animation:
    pushxCalendarFloatTwo
    6.5s ease-in-out infinite;
}

.pushx-calendar-floating-time svg {
  color: var(--dash-green);
}

.pushx-calendar-floating-event {
  bottom: 35px;
  right: 210px;

  color: rgba(198, 255, 54, 0.58);

  animation:
    pushxCalendarFloatThree
    7.2s ease-in-out infinite;
}

.pushx-calendar-world-code {
  position: absolute;

  right: 358px;
  bottom: 55px;

  color: rgba(198, 255, 54, 0.12);

  font-size: 34px;
  font-weight: 700;

  letter-spacing: -0.06em;
}


/* =========================================================
   NFP CARD
   ========================================================= */

.pushx-nfp-card {
  position: relative;

  margin-top: 25px;

  min-height: 165px;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 22px;

  padding: 27px 28px;

  border:
    1px solid rgba(0, 255, 102, 0.14);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 4% 50%,
      rgba(0, 255, 102, 0.09),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(4, 14, 8, 0.96),
      rgba(2, 7, 4, 0.9)
    );

  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.2),
    inset 0 0 40px rgba(0, 255, 102, 0.018);

  transition:
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.pushx-nfp-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(198, 255, 54, 0.19);

  box-shadow:
    0 25px 75px rgba(0, 0, 0, 0.24),
    0 0 45px rgba(198, 255, 54, 0.025);
}

.pushx-nfp-glow {
  position: absolute;

  top: -100px;
  left: -60px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    rgba(0, 255, 102, 0.1);

  filter: blur(90px);

  pointer-events: none;
}

.pushx-nfp-icon {
  position: relative;
  z-index: 2;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(0, 255, 102, 0.2);

  border-radius: 15px;

  color:
    var(--dash-green);

  background:
    rgba(0, 255, 102, 0.075);

  box-shadow:
    inset 0 0 20px rgba(0, 255, 102, 0.04),
    0 0 26px rgba(0, 255, 102, 0.035);
}

.pushx-nfp-copy {
  position: relative;
  z-index: 2;
}

.pushx-nfp-topline {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 8px;
}

.pushx-nfp-topline > span {
  color:
    var(--dash-green);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.pushx-nfp-impact {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    5px 8px;

  color:
    rgba(0, 255, 102, 0.88);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.11em;

  border:
    1px solid rgba(0, 255, 102, 0.13);

  border-radius: 999px;

  background:
    rgba(0, 255, 102, 0.045);
}

.pushx-nfp-impact i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 9px rgba(0, 255, 102, 0.8);
}

.pushx-nfp-copy h2 {
  margin: 0;

  color:
    #f4f8f3;

  font-size: 25px;
  font-weight: 700;

  line-height: 1.1;

  letter-spacing:
    -0.035em;
}

.pushx-nfp-copy p {
  max-width: 720px;

  margin:
    10px 0 0;

  color:
    rgba(224, 232, 222, 0.56);

  font-size: 12px;
  line-height: 1.65;
}

.pushx-nfp-button {
  position: relative;
  z-index: 3;

  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 0 15px;

  color: #0b1007;

  font-size: 11px;
  font-weight: 750;

  text-decoration: none;

  border-radius: 11px;

  background:
    var(--dash-green);

  box-shadow:
    0 0 30px rgba(198, 255, 54, 0.08);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.pushx-nfp-button:hover {
  transform: translateY(-1px);

  box-shadow:
    0 0 35px rgba(198, 255, 54, 0.17);
}


/* =========================================================
   TERMINAL / CALENDAR
   ========================================================= */

.pushx-calendar-terminal {
  position: relative;

  margin-top: 18px;

  overflow: hidden;

  border:
    1px solid rgba(198, 255, 54, 0.095);

  border-radius: 20px;

  background:
    rgba(4, 7, 5, 0.88);

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.26);
}

.pushx-calendar-terminal-glow {
  position: absolute;

  top: -250px;
  left: 50%;

  width: 700px;
  height: 400px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    rgba(198, 255, 54, 0.035);

  filter: blur(120px);

  pointer-events: none;
}

.pushx-calendar-terminal-header {
  position: relative;
  z-index: 2;

  min-height: 67px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 19px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.035);
}

.pushx-calendar-terminal-title {
  display: flex;
  align-items: center;

  gap: 11px;
}

.pushx-calendar-terminal-icon {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(198, 255, 54, 0.1);

  border-radius: 10px;

  color: var(--dash-green);

  background:
    rgba(198, 255, 54, 0.035);
}

.pushx-calendar-terminal-title > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.pushx-calendar-terminal-title strong {
  color: rgba(239, 243, 237, 0.82);

  font-size: 10px;
  font-weight: 650;
}

.pushx-calendar-terminal-title span {
  color: rgba(229, 235, 227, 0.25);

  font-size: 7px;
}

.pushx-calendar-live {
  display: flex;
  align-items: center;

  gap: 6px;

  padding: 6px 9px;

  color: rgba(198, 255, 54, 0.55);

  font-size: 7px;
  font-weight: 750;

  letter-spacing: 0.1em;

  border:
    1px solid rgba(198, 255, 54, 0.08);

  border-radius: 999px;

  background:
    rgba(198, 255, 54, 0.025);
}

.pushx-calendar-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--dash-green);

  box-shadow:
    0 0 8px rgba(198, 255, 54, 0.75);

  animation:
    pushxCalendarLivePulse
    2s ease-in-out infinite;
}


/* FAKE BROWSER BAR */

.pushx-calendar-browser-bar {
  min-height: 42px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 13px;

  padding: 0 15px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.03);

  background:
    rgba(255, 255, 255, 0.012);
}

.pushx-calendar-browser-dots {
  display: flex;

  gap: 5px;
}

.pushx-calendar-browser-dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.12);
}

.pushx-calendar-browser-dots i:nth-child(2) {
  background:
    rgba(198, 255, 54, 0.13);
}

.pushx-calendar-browser-address {
  min-height: 25px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding: 0 10px;

  color: rgba(230, 236, 228, 0.22);

  font-size: 7px;

  border:
    1px solid rgba(255, 255, 255, 0.035);

  border-radius: 7px;

  background:
    rgba(0, 0, 0, 0.14);
}

.pushx-calendar-browser-address svg {
  color:
    rgba(198, 255, 54, 0.3);
}

.pushx-calendar-browser-status {
  display: flex;
  align-items: center;

  gap: 5px;

  color:
    rgba(198, 255, 54, 0.35);

  font-size: 7px;
  font-weight: 700;
}


/* IFRAME */

.pushx-calendar-frame-wrap {
  position: relative;

  padding: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(198, 255, 54, 0.012),
      transparent 120px
    );
}

.pushx-calendar-frame {
  display: block;

  width: 100%;

  border: 0;

  border-radius: 12px;

  background: #ffffff;
}


/* FOOTER */

.pushx-calendar-terminal-footer {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 0 18px;

  border-top:
    1px solid rgba(255, 255, 255, 0.035);
}

.pushx-calendar-terminal-footer > div {
  display: flex;
  align-items: center;

  gap: 7px;

  color:
    rgba(226, 232, 224, 0.23);

  font-size: 7px;
}

.pushx-calendar-terminal-footer > div i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(198, 255, 54, 0.55);

  box-shadow:
    0 0 7px rgba(198, 255, 54, 0.4);
}

.pushx-calendar-terminal-footer > span {
  color:
    rgba(198, 255, 54, 0.18);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.13em;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pushxCalendarGlobeFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(1deg);
  }
}

@keyframes pushxCalendarGlobeRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pushxCalendarLandMove {
  0%,
  100% {
    transform:
      translateX(0)
      rotate(0deg);
  }

  50% {
    transform:
      translateX(7px)
      rotate(3deg);
  }
}

@keyframes pushxCalendarCorePulse {
  0%,
  100% {
    opacity: 0.65;

    transform:
      translate(-50%, -50%)
      scale(0.85);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.2);
  }
}

@keyframes pushxCalendarPointPulse {
  0%,
  100% {
    opacity: 0.3;

    transform: scale(0.75);
  }

  50% {
    opacity: 1;

    transform: scale(1.25);
  }
}

@keyframes pushxCalendarLabelFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes pushxCalendarFloatOne {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes pushxCalendarFloatTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

@keyframes pushxCalendarFloatThree {
  0%,
  100% {
    transform:
      translateY(0)
      translateX(0);
  }

  50% {
    transform:
      translateY(-4px)
      translateX(5px);
  }
}

@keyframes pushxCalendarOrbitOne {
  0%,
  100% {
    transform:
      rotate(-15deg)
      translateX(0);
  }

  50% {
    transform:
      rotate(-12deg)
      translateX(5px);
  }
}

@keyframes pushxCalendarOrbitTwo {
  0%,
  100% {
    transform:
      rotate(18deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(21deg)
      translateY(-5px);
  }
}

@keyframes pushxCalendarOrbitThree {
  0%,
  100% {
    transform:
      rotate(35deg)
      scale(1);
  }

  50% {
    transform:
      rotate(32deg)
      scale(1.025);
  }
}

@keyframes pushxCalendarLivePulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}


/* =========================================================
   TABLET — базовая страховка.
   Полный mobile QA всё равно делаем позже.
   ========================================================= */

@media (max-width: 980px) {
  .pushx-calendar-world {
    right: -150px;

    opacity: 0.65;
  }

  .pushx-calendar-hero-copy {
    width: 67%;
  }

  .pushx-calendar-world-label {
    display: none;
  }
}

/* =========================================================
   CALENDAR — VISUAL FIXES
   ========================================================= */

.pushx-calendar-hero {
  overflow: visible !important;
}

.pushx-calendar-world {
  top: 0 !important;
  right: 0 !important;
}

.pushx-calendar-globe {
  top: 24px !important;
  right: 34px !important;
}

.pushx-calendar-orbit-one {
  right: 5px !important;
}

.pushx-calendar-orbit-two {
  right: 40px !important;
}

.pushx-calendar-orbit-three {
  right: 58px !important;
}

.pushx-calendar-frame {
  height: 380px !important;
}

.pushx-calendar-world-code {
  display: none !important;
}

@media (max-width: 760px) {
  .pushx-calendar-world-code {
    display: none !important;
  }

  .pushx-calendar-frame {
    height: 360px !important;
  }
}


/* =========================================================
   CALENDAR — FINAL DESKTOP LAYOUT
   ========================================================= */

.pushx-calendar-content-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    500px;

  gap: 18px;

  padding: 16px;
}


/* =========================================================
   INVESTING CALENDAR
   ========================================================= */

.pushx-calendar-content-grid .pushx-calendar-frame-wrap {
  min-width: 0;

  padding: 0;

  border-radius: 13px;

  overflow: hidden;
}

.pushx-calendar-content-grid .pushx-calendar-frame {
  display: block;

  width: 100%;
  height: 540px !important;

  border: 0;
  border-radius: 13px;

  background: #ffffff;
}


/* =========================================================
   RIGHT DESKTOP PANEL
   ========================================================= */

.pushx-calendar-side {
  min-height: 540px;

  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto
    auto;

  gap: 12px;
}

.pushx-calendar-side-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid rgba(198, 255, 54, 0.105);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.032),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(5, 10, 6, 0.88);

  box-shadow:
    inset 0 0 30px rgba(198, 255, 54, 0.012),
    0 14px 38px rgba(0, 0, 0, 0.16);
}

.pushx-calendar-side-card::before {
  content: "";

  position: absolute;

  top: -70px;
  right: -55px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    rgba(198, 255, 54, 0.045);

  filter: blur(55px);

  pointer-events: none;
}


/* MAIN CARD */

.pushx-calendar-side-main {
  min-height: 0;

  display: block;

  padding: 25px;
}

.pushx-calendar-side-label {
  position: relative;
  z-index: 2;

  margin-bottom: 17px;

  color:
    var(--dash-green);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.15em;
}

.pushx-calendar-side-main h3 {
  position: relative;
  z-index: 2;

  margin: 0;

  color:
    rgba(246, 248, 244, 0.96);

  font-size: 25px;
  font-weight: 680;

  line-height: 1.16;
  letter-spacing: -0.035em;
}

.pushx-calendar-side-main > p {
  position: relative;
  z-index: 2;

  max-width: 390px;

  margin:
    13px 0
    28px;

  color:
    rgba(226, 232, 223, 0.56);

  font-size: 12px;
  line-height: 1.65;
}


/* IMPACT LEVELS */

.pushx-calendar-impact-list {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.pushx-calendar-impact-list > div {
  min-height: 48px;

  display: grid;

  grid-template-columns:
    8px
    82px
    minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  padding:
    0 14px;

  border:
    1px solid rgba(0, 255, 102, 0.09);

  border-radius: 10px;

  background:
    rgba(0, 255, 102, 0.02);
}

.pushx-calendar-impact-list strong {
  color:
    rgba(241, 244, 239, 0.9);

  font-size: 13px;
  font-weight: 680;
}

.pushx-calendar-impact-list small {
  color:
    rgba(226, 232, 223, 0.5);

  font-size: 11px;
  line-height: 1.4;
}

.impact-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.impact-dot-high {
  background:
    var(--dash-green);

  box-shadow:
    0 0 11px rgba(198, 255, 54, 0.8);
}

.impact-dot-medium {
  background:
    rgba(198, 255, 54, 0.5);
}

.impact-dot-low {
  background:
    rgba(198, 255, 54, 0.22);
}


/* SMALL CARDS */

.pushx-calendar-side-card:not(.pushx-calendar-side-main) {
  min-height: 96px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 19px 20px;
}

.pushx-calendar-side-icon {
  position: relative;
  z-index: 2;

  width: 39px;
  height: 39px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(198, 255, 54, 0.15);

  border-radius: 11px;

  color:
    rgba(198, 255, 54, 0.92);

  background:
    rgba(198, 255, 54, 0.055);

  box-shadow:
    0 0 20px rgba(198, 255, 54, 0.035);
}

.pushx-calendar-side-card > div:last-child {
  position: relative;
  z-index: 2;
}

.pushx-calendar-side-card strong {
  display: block;

  color:
    rgba(244, 247, 242, 0.94);

  font-size: 13px;
  font-weight: 680;
}

.pushx-calendar-side-card p {
  max-width: 340px;

  margin:
    7px 0 0;

  color:
    rgba(225, 231, 222, 0.52);

  font-size: 11px;
  line-height: 1.55;
}


/* =========================================================
   TERMINAL HEADER
   ========================================================= */

.pushx-calendar-terminal-header {
  min-height: 78px;

  padding:
    0 24px;

  border-bottom:
    1px solid rgba(198, 255, 54, 0.055);

  background:
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.026),
      transparent 45%
    );
}

.pushx-calendar-terminal-title {
  gap: 14px;
}

.pushx-calendar-terminal-icon {
  width: 42px;
  height: 42px;

  border:
    1px solid rgba(198, 255, 54, 0.16);

  border-radius: 11px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.06);

  box-shadow:
    0 0 22px rgba(198, 255, 54, 0.045);
}

.pushx-calendar-terminal-title strong {
  color:
    rgba(246, 249, 244, 0.98);

  font-size: 22px;
  font-weight: 720;

  line-height: 1.1;

  letter-spacing:
    -0.025em;
}

.pushx-calendar-terminal-title span {
  margin-top: 4px;

  color:
    rgba(224, 231, 222, 0.48);

  font-size: 8px;
}

.pushx-calendar-live {
  gap: 8px;

  padding:
    9px 13px;

  color:
    rgba(198, 255, 54, 0.9);

  font-size: 8px;
  font-weight: 750;

  border:
    1px solid rgba(198, 255, 54, 0.16);

  background:
    rgba(198, 255, 54, 0.045);

  box-shadow:
    0 0 22px rgba(198, 255, 54, 0.045);
}

.pushx-calendar-live i {
  width: 6px;
  height: 6px;

  box-shadow:
    0 0 11px rgba(198, 255, 54, 0.9);
}


/* =========================================================
   BROWSER BAR
   ========================================================= */

.pushx-calendar-browser-bar {
  min-height: 46px;

  padding:
    0 18px;

  border-bottom:
    1px solid rgba(198, 255, 54, 0.04);
}

.pushx-calendar-browser-address {
  min-height: 28px;

  color:
    rgba(228, 234, 226, 0.33);

  border:
    1px solid rgba(198, 255, 54, 0.055);

  background:
    rgba(0, 0, 0, 0.18);
}

.pushx-calendar-browser-status {
  color:
    rgba(198, 255, 54, 0.62);
}


/* =========================================================
   IMPORTANT:
   RIGHT PANEL EXISTS ONLY ON WIDE DESKTOP
   ========================================================= */

@media (max-width: 1199px) {
  .pushx-calendar-content-grid {
    display: block;

    padding: 14px;
  }

  .pushx-calendar-side {
    display: none !important;
  }

  .pushx-calendar-content-grid .pushx-calendar-frame {
    width: 100%;

    height: 390px !important;
  }
}


/* PHONE */

@media (max-width: 760px) {
  .pushx-calendar-content-grid {
    padding: 10px;
  }

  .pushx-calendar-side {
    display: none !important;
  }

  .pushx-calendar-content-grid .pushx-calendar-frame {
    height: 360px !important;
  }
}

/* =========================================================
   PUSHX — CALCULATORS
   ========================================================= */

.calc-page {
  --calc-cyan: #74ffd8;
  --calc-cyan-soft: rgba(116, 255, 216, 0.12);

  position: relative;
  width: 100%;
  padding-bottom: 80px;
}


/* HERO */

.calc-hero {
  position: relative;

  min-height: 315px;

  overflow: visible;

  border-bottom:
    1px solid rgba(198, 255, 54, 0.055);
}

.calc-hero-copy {
  position: relative;
  z-index: 10;

  width: min(620px, 58%);
  padding-top: 10px;
}

.calc-kicker {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: var(--dash-green);

  font-size: 9px;
  font-weight: 750;

  letter-spacing: 0.16em;
}

.calc-hero h1 {
  margin: 18px 0 0;

  color: #f5f8f3;

  font-size:
    clamp(44px, 4.6vw, 66px);

  line-height: 0.98;

  font-weight: 680;

  letter-spacing: -0.055em;
}

.calc-hero h1 span {
  color: var(--dash-green);

  text-shadow:
    0 0 22px rgba(198, 255, 54, 0.15),
    0 0 60px rgba(198, 255, 54, 0.065);
}

.calc-hero-copy > p {
  max-width: 520px;

  margin: 19px 0 0;

  color:
    rgba(230, 236, 227, 0.46);

  font-size: 11px;
  line-height: 1.7;
}

.calc-hero-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 23px;
}

.calc-hero-tags span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 999px;

  color:
    rgba(226, 234, 223, 0.48);

  background:
    rgba(198, 255, 54, 0.025);

  font-size: 8px;
}

.calc-hero-tags span:nth-child(2) {
  border-color:
    rgba(116, 255, 216, 0.1);

  color:
    rgba(183, 255, 235, 0.56);
}

.calc-hero-tags svg {
  color: var(--dash-green);
}

.calc-hero-tags span:nth-child(2) svg {
  color: var(--calc-cyan);
}


/* HERO ART */

.calc-hero-art {
  position: absolute;

  top: -30px;
  right: -5px;

  width: 610px;
  height: 340px;

  pointer-events: none;
}

.calc-hero-grid {
  position: absolute;
  inset: -30px;

  opacity: 0.22;

  background-image:
    linear-gradient(
      rgba(198, 255, 54, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.06) 1px,
      transparent 1px
    );

  background-size: 39px 39px;

  mask-image:
    radial-gradient(
      ellipse at 67% 48%,
      black,
      transparent 73%
    );
}

.calc-core {
  position: absolute;

  top: 28px;
  right: 55px;

  width: 235px;

  padding: 14px;

  border:
    1px solid rgba(198, 255, 54, 0.2);

  border-radius: 22px;

  transform: rotate(-10deg);

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.08),
      rgba(3, 9, 5, 0.94)
    );

  box-shadow:
    0 0 50px rgba(198, 255, 54, 0.08),
    inset 0 0 40px rgba(198, 255, 54, 0.025);

  animation:
    calcCoreFloat 7s ease-in-out infinite;
}

.calc-core-screen {
  min-height: 92px;

  padding: 13px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(116, 255, 216, 0.11);

  border-radius: 13px;

  background:
    rgba(1, 8, 4, 0.72);
}

.calc-core-screen span {
  color:
    rgba(116, 255, 216, 0.45);

  font-size: 6px;
  letter-spacing: 0.18em;
}

.calc-core-screen strong {
  margin-top: 5px;

  color: var(--dash-green);

  font-size: 35px;
  line-height: 1;

  text-shadow:
    0 0 20px rgba(198, 255, 54, 0.18);
}

.calc-core-screen small {
  margin-top: 7px;

  color:
    rgba(237, 243, 234, 0.28);

  font-size: 7px;
}

.calc-core-keys {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 7px;

  margin-top: 10px;
}

.calc-core-keys i {
  height: 35px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(198, 255, 54, 0.08);

  border-radius: 9px;

  color:
    rgba(230, 239, 226, 0.46);

  background:
    rgba(198, 255, 54, 0.025);

  font-style: normal;
  font-size: 10px;
}

.calc-core-orbit {
  position: absolute;

  border:
    1px solid rgba(116, 255, 216, 0.1);

  border-radius: 50%;
}

.calc-core-orbit-1 {
  width: 450px;
  height: 150px;

  top: 98px;
  right: -45px;

  transform: rotate(-16deg);
}

.calc-core-orbit-2 {
  width: 390px;
  height: 220px;

  top: 45px;
  right: 15px;

  transform: rotate(19deg);

  border-color:
    rgba(198, 255, 54, 0.08);
}

.calc-floating-number {
  position: absolute;

  padding: 7px 10px;

  border:
    1px solid rgba(198, 255, 54, 0.1);

  border-radius: 8px;

  color: var(--dash-green);

  background:
    rgba(3, 9, 5, 0.7);

  backdrop-filter: blur(10px);

  font-size: 9px;
  font-weight: 700;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2);
}

.calc-floating-one {
  top: 86px;
  right: 310px;

  color: var(--calc-cyan);

  border-color:
    rgba(116, 255, 216, 0.12);
}

.calc-floating-two {
  top: 182px;
  right: 20px;
}

.calc-floating-three {
  bottom: 34px;
  right: 300px;

  color:
    rgba(198, 255, 54, 0.55);
}

.calc-tech-copy {
  position: absolute;

  left: 55px;
  bottom: 70px;

  display: flex;
  flex-direction: column;

  gap: 7px;

  color:
    rgba(116, 255, 216, 0.19);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.28em;
}


/* MAIN TABS */

.calc-main-tabs {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 25px;
}

.calc-main-tab {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border:
    1px solid rgba(198, 255, 54, 0.075);

  border-radius: 14px;

  color:
    rgba(231, 238, 228, 0.48);

  background:
    rgba(5, 10, 6, 0.78);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.calc-main-tab.active {
  color: #efffda;

  border-color:
    rgba(198, 255, 54, 0.23);

  background:
    linear-gradient(
      135deg,
      rgba(198, 255, 54, 0.12),
      rgba(198, 255, 54, 0.025)
    );

  box-shadow:
    inset 2px 0 0 var(--dash-green),
    0 0 30px rgba(198, 255, 54, 0.04);
}

.calc-subtabs {
  display: flex;

  gap: 8px;

  margin-top: 13px;
}

.calc-subtab {
  min-height: 43px;

  padding: 0 20px;

  border:
    1px solid rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  color:
    rgba(235, 241, 232, 0.37);

  background:
    rgba(255, 255, 255, 0.012);

  font-size: 10px;
  font-weight: 650;

  cursor: pointer;
}

.calc-subtab.active {
  color: var(--calc-cyan);

  font-weight: 700;

  border-color:
    rgba(116, 255, 216, 0.16);

  background:
    rgba(116, 255, 216, 0.035);

  box-shadow:
    0 0 22px rgba(116, 255, 216, 0.045);
}


/* WORKSPACE */

.calc-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 0.96fr)
    minmax(0, 1.04fr);

  gap: 14px;

  margin-top: 14px;
}


.calc-panel {
  position: relative;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(198, 255, 54, 0.035),
      transparent 38%
    ),
    rgba(5, 10, 6, 0.9);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.18);
}

.calc-result-panel {
  border-color:
    rgba(116, 255, 216, 0.085);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(116, 255, 216, 0.035),
      transparent 35%
    ),
    rgba(5, 10, 6, 0.9);
}

.calc-panel-head {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 26px;
}

.calc-panel-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(198, 255, 54, 0.15);

  border-radius: 11px;

  color: var(--dash-green);

  background:
    rgba(198, 255, 54, 0.055);
}

.calc-panel-icon-cyan {
  color: var(--calc-cyan);

  border-color:
    rgba(116, 255, 216, 0.14);

  background:
    rgba(116, 255, 216, 0.04);
}

.calc-panel-head > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.calc-panel-head strong {
  color:
    rgba(247, 250, 245, 0.98);

  font-size: 18px;

  font-weight: 720;

  line-height: 1.15;

  letter-spacing: -0.02em;
}

.calc-panel-head span {
  color:
    rgba(225, 232, 222, 0.56);

  font-size: 12px;

  line-height: 1.5;

  font-weight: 500;
}


/* INPUTS */

.calc-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;
}

.calc-field {
  display: block;
}

.calc-field-label {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(235, 241, 232, 0.62);

  font-size: 9.5px;

  font-weight: 620;
}

.calc-input-wrap {
  position: relative;
}

.calc-input-wrap input {
  width: 100%;
  height: 48px;

  padding:
    0 48px;

  outline: 0;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 11px;

  color:
    rgba(247, 250, 245, 0.9);

  background:
    rgba(0, 0, 0, 0.2);

  font-size: 12px;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.calc-input-wrap input:focus {
  border-color:
    rgba(198, 255, 54, 0.27);

  box-shadow:
    0 0 0 3px
    rgba(198, 255, 54, 0.025);
}

.calc-input-prefix,
.calc-input-suffix {
  position: absolute;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 2;

  color:
    rgba(198, 255, 54, 0.62);

  font-style: normal;

  font-size: 9px;
  font-weight: 650;

  pointer-events: none;
}

.calc-input-prefix {
  left: 15px;
}

.calc-input-suffix {
  right: 14px;

  color:
    rgba(116, 255, 216, 0.42);
}


/* LEVERAGE */

.calc-leverage {
  margin-top: 22px;

  padding: 20px;

  border:
    1px solid rgba(116, 255, 216, 0.07);

  border-radius: 13px;

  background:
    rgba(116, 255, 216, 0.015);
}

.calc-leverage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}

.calc-leverage-head > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.calc-page .calc-leverage-head span {
  color:
    rgba(244, 247, 242, 0.94) !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  line-height: 1.3 !important;
}

.calc-page .calc-leverage-head small {
  color:
    rgba(225, 232, 222, 0.58) !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  line-height: 1.45 !important;
}

.calc-page .calc-leverage-head strong {
  color:
    var(--calc-cyan) !important;

  font-size: 34px !important;

  font-weight: 740 !important;

  line-height: 1 !important;

  letter-spacing: -0.04em !important;

  text-shadow:
    0 0 20px rgba(116, 255, 216, 0.16) !important;
}

.calc-leverage input[type="range"] {
  width: 100%;
  height: 5px;

  appearance: none;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--dash-green)
        0 var(--progress),
      rgba(255, 255, 255, 0.06)
        var(--progress) 100%
    );

  outline: none;
}

.calc-leverage input[type="range"]::-webkit-slider-thumb {
  width: 19px;
  height: 19px;

  appearance: none;

  border:
    2px solid #0a1008;

  border-radius: 50%;

  background:
    var(--calc-cyan);

  box-shadow:
    0 0 0 4px
      rgba(116, 255, 216, 0.08),
    0 0 18px
      rgba(116, 255, 216, 0.42);

  cursor: pointer;
}

.calc-page .calc-leverage-scale {
  display: flex !important;

  justify-content: space-between !important;

  margin-top: 12px !important;

  color:
    rgba(230, 236, 227, 0.58) !important;

  font-size: 11px !important;

  font-weight: 650 !important;

  line-height: 1 !important;
}


/* ACTIONS */

.calc-action-row {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 10px;

  margin-top: 17px;
}

.calc-page .calc-primary-button,
.calc-page .calc-reset-button {
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;

  border-radius: 11px !important;

  font-size: 12px !important;
  font-weight: 720 !important;
}

.calc-page .calc-primary-button {
  border: 0 !important;

  color: #0a1006 !important;

  background:
    var(--dash-green) !important;

  font-size: 14px !important;

  font-weight: 760 !important;

  box-shadow:
    0 0 30px
    rgba(198, 255, 54, 0.08) !important;
}

.calc-page .calc-primary-button svg {
  width: 19px !important;
  height: 19px !important;
}

.calc-reset-button {
  padding: 0 15px;

  border:
    1px solid rgba(255, 255, 255, 0.05);

  color:
    rgba(230, 236, 227, 0.43);

  background:
    rgba(255, 255, 255, 0.015);

  cursor: pointer;
}


/* RESULT CARDS */

.calc-result-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.calc-result-card {
  min-height: 115px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px;

  border:
    1px solid rgba(198, 255, 54, 0.075);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(198, 255, 54, 0.028),
      rgba(255, 255, 255, 0.005)
    );
}

.calc-result-card.cyan {
  border-color:
    rgba(116, 255, 216, 0.08);

  background:
    linear-gradient(
      145deg,
      rgba(116, 255, 216, 0.025),
      rgba(255, 255, 255, 0.005)
    );
}

.calc-result-card.danger {
  border-color:
    rgba(255, 82, 82, 0.34);

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(255, 71, 71, 0.085),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(255, 75, 75, 0.065),
      rgba(255, 255, 255, 0.005)
    );

  box-shadow:
    0 0 30px rgba(255, 70, 70, 0.055),
    inset 0 0 30px rgba(255, 70, 70, 0.018);
}

.calc-result-card.danger .calc-result-icon {
  color:
    rgba(255, 112, 112, 0.92);

  border-color:
    rgba(255, 92, 92, 0.18);

  background:
    rgba(255, 92, 92, 0.055);
}

.calc-result-card.danger strong {
  color:
    rgba(255, 115, 115, 1);

  text-shadow:
    0 0 18px rgba(255, 70, 70, 0.22);
}

.calc-result-card.danger small {
  color:
    rgba(255, 105, 105, 0.94);

  font-size: 9.5px;

  font-weight: 750;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  text-shadow:
    0 0 13px rgba(255, 70, 70, 0.16);
}

.calc-result-icon {
  width: 39px;
  height: 39px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(198, 255, 54, 0.12);

  border-radius: 50%;

  color: var(--dash-green);

  background:
    rgba(198, 255, 54, 0.04);
}

.calc-result-card.cyan .calc-result-icon {
  color: var(--calc-cyan);

  border-color:
    rgba(116, 255, 216, 0.13);

  background:
    rgba(116, 255, 216, 0.035);
}

.calc-result-card > div:last-child {
  display: flex;
  flex-direction: column;
}

.calc-result-card span {
  color:
    rgba(231, 237, 228, 0.5);

  font-size: 8.5px;
}

.calc-result-card strong {
  margin-top: 5px;

  color:
    rgba(248, 251, 246, 0.96);

  font-size: 22px;

  line-height: 1;

  letter-spacing: -0.04em;
}

.calc-result-card small {
  margin-top: 6px;

  color:
    rgba(229, 236, 226, 0.38);

  font-size: 8px;
}


/* RISK RING */

.calc-risk-zone {
  display: grid;

  grid-template-columns:
    145px minmax(0, 1fr);

  align-items: center;

  gap: 18px;

  margin-top: 13px;

  padding: 18px;

  border:
    1px solid rgba(116, 255, 216, 0.07);

  border-radius: 14px;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(116, 255, 216, 0.035),
      transparent 38%
    );
}

.calc-risk-ring {
  width: 125px;
  height: 125px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--calc-cyan)
        var(--risk),
      rgba(255, 255, 255, 0.045)
        var(--risk)
    );

  box-shadow:
    0 0 30px
      rgba(116, 255, 216, 0.045);
}

.calc-risk-ring::before {
  content: "";

  position: absolute;
}

.calc-risk-ring > div {
  width: 105px;
  height: 105px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #050a06;
}

.calc-risk-ring strong {
  color:
    rgba(246, 250, 244, 0.96);

  font-size: 24px;
}

.calc-risk-ring span {
  margin-top: 3px;

  color:
    rgba(227, 234, 224, 0.3);

  font-size: 6px;
}

.calc-risk-copy {
  display: flex;
  flex-direction: column;
}

.calc-risk-copy > span {
  color:
    rgba(116, 255, 216, 0.62);

  font-size: 9px;

  font-weight: 720;

  letter-spacing: 0.16em;
}

.calc-risk-copy strong {
  margin-top: 8px;

  color:
    rgba(244, 248, 242, 0.94);

  font-size: 16px;

  font-weight: 680;

  line-height: 1.35;
}

.calc-risk-copy p {
  max-width: 390px;

  margin: 9px 0 0;

  color:
    rgba(226, 232, 223, 0.5);

  font-size: 10px;

  line-height: 1.65;
}


/* XAU */

.calc-xau-symbol {
  display: flex;
  align-items: baseline;

  gap: 10px;

  margin-bottom: 16px;
}

.calc-xau-symbol span {
  color:
    rgba(198, 255, 54, 0.55);

  font-size: 9px;
  font-weight: 750;

  letter-spacing: 0.15em;
}

.calc-xau-symbol strong {
  color:
    rgba(246, 249, 244, 0.9);

  font-size: 17px;
}

.calc-xau-symbol small {
  margin-left: auto;

  color:
    rgba(116, 255, 216, 0.25);

  font-size: 6px;

  letter-spacing: 0.13em;
}

.calc-xau-main-result {
  margin-bottom: 13px;

  padding: 20px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(116, 255, 216, 0.1);

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(116, 255, 216, 0.045),
      transparent 40%
    );
}

.calc-xau-main-result span {
  color:
    rgba(227, 235, 224, 0.38);

  font-size: 8px;
}

.calc-xau-main-result strong {
  margin-top: 6px;

  color: var(--calc-cyan);

  font-size: 34px;

  line-height: 1;

  letter-spacing: -0.045em;

  text-shadow:
    0 0 25px
    rgba(116, 255, 216, 0.1);
}

.calc-xau-main-result small {
  margin-top: 8px;

  color:
    rgba(198, 255, 54, 0.38);

  font-size: 7px;
}


/* MARTINGALE */

.calc-mg-summary {
  margin-top: 20px;

  padding: 18px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(198, 255, 54, 0.1);

  border-radius: 14px;

  background:
    rgba(198, 255, 54, 0.025);
}

.calc-mg-summary span {
  color:
    rgba(226, 233, 223, 0.35);

  font-size: 8px;
}

.calc-mg-summary strong {
  margin-top: 5px;

  color: var(--dash-green);

  font-size: 31px;

  letter-spacing: -0.045em;
}

.calc-mg-summary button {
  width: max-content;

  margin-top: 12px;

  padding: 8px 10px;

  display: flex;
  align-items: center;

  gap: 6px;

  border:
    1px solid rgba(116, 255, 216, 0.1);

  border-radius: 8px;

  color:
    rgba(116, 255, 216, 0.65);

  background:
    rgba(116, 255, 216, 0.025);

  font-size: 7px;

  cursor: pointer;
}

.calc-steps-control {
  margin-top: 18px;
}

.calc-step-buttons {
  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 6px;
}

.calc-step-buttons button {
  min-height: 37px;

  border:
    1px solid rgba(255, 255, 255, 0.045);

  border-radius: 9px;

  color:
    rgba(230, 236, 227, 0.38);

  background:
    rgba(255, 255, 255, 0.01);

  cursor: pointer;
}

.calc-step-buttons button.active {
  color: #0a1007;

  border-color:
    var(--dash-green);

  background:
    var(--dash-green);

  font-weight: 750;
}

.calc-mg-list {
  display: flex;
  flex-direction: column;

  gap: 9px;
}

.calc-mg-row {
  display: grid;

  grid-template-columns:
    48px minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  min-height: 74px;

  padding: 14px 16px;

  border:
    1px solid rgba(198, 255, 54, 0.05);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.008);
}

.calc-mg-step {
  color:
    rgba(116, 255, 216, 0.72);

  font-size: 14px;

  font-weight: 760;

  letter-spacing: 0.04em;
}

.calc-mg-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.calc-mg-row-actions {
  display: flex;
  align-items: center;

  gap: 11px;
}

.calc-mg-copy {
  min-height: 30px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border:
    1px solid rgba(116, 255, 216, 0.09);

  border-radius: 7px;

  color:
    rgba(116, 255, 216, 0.48);

  background:
    rgba(116, 255, 216, 0.018);

  font-size: 8px;

  cursor: pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.calc-mg-copy:hover {
  color:
    rgba(116, 255, 216, 0.9);

  border-color:
    rgba(116, 255, 216, 0.2);

  background:
    rgba(116, 255, 216, 0.045);

  box-shadow:
    0 0 16px rgba(116, 255, 216, 0.04);
}

.calc-mg-copy.copied {
  color: var(--dash-green);

  border-color:
    rgba(198, 255, 54, 0.2);

  background:
    rgba(198, 255, 54, 0.045);
}

.calc-mg-row-top strong {
  color:
    rgba(249, 252, 247, 1);

  font-size: 23px;

  font-weight: 740;

  line-height: 1;

  letter-spacing: -0.03em;
}

.calc-mg-row-top span {
  color:
    rgba(226, 232, 223, 0.48);

  font-size: 10px;

  line-height: 1.3;
}




.calc-mg-footer {
  display: grid;

grid-template-columns:
  repeat(2, 1fr);

  gap: 8px;

  margin-top: 13px;
}

.calc-mg-footer > div {
  padding: 16px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(116, 255, 216, 0.055);

  border-radius: 10px;
}

.calc-mg-footer span {
  color:
    rgba(225, 232, 222, 0.27);

  font-size: 9px;
}

.calc-mg-footer strong {
  margin-top: 5px;

  color:
    rgba(244, 248, 242, 0.8);

  font-size: 17px;
}


/* WARNINGS */

.calc-warning {
  margin-top: 12px;

  padding: 11px 13px;

  border:
    1px solid rgba(198, 255, 54, 0.09);

  border-radius: 10px;

  color:
    rgba(226, 235, 220, 0.55);

  background:
    rgba(198, 255, 54, 0.025);

  font-size: 8px;
  line-height: 1.5;
}

.calc-martingale-workspace .calc-warning {
  padding: 17px 19px;

  font-size: 12px;

  font-weight: 620;

  line-height: 1.55;

  color:
    rgba(229, 239, 222, 0.8);

  border-color:
    rgba(198, 255, 54, 0.18);

  background:
    rgba(198, 255, 54, 0.045);
}

.calc-warning-danger {
  padding: 16px 18px;

  border-color:
    rgba(255, 82, 82, 0.28);

  color:
    rgba(255, 118, 118, 0.96);

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(255, 71, 71, 0.085),
      transparent 52%
    ),
    rgba(255, 71, 71, 0.035);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.005em;

  box-shadow:
    0 0 28px rgba(255, 70, 70, 0.045),
    inset 0 0 25px rgba(255, 70, 70, 0.018);
}

/* ANIMATION */

@keyframes calcCoreFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-10deg);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(-8deg);
  }
}


/* TABLET — полноценный Mobile QA позже */

@media (max-width: 1100px) {
  .calc-hero-art {
    right: -120px;
    opacity: 0.65;
  }

  .calc-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .calc-hero {
    min-height: 285px;
  }

  .calc-hero-copy {
    width: 100%;
  }

  .calc-hero-art {
    opacity: 0.3;
  }

  .calc-form-grid {
    grid-template-columns: 1fr;
  }

  .calc-result-grid {
    grid-template-columns: 1fr;
  }

  .calc-risk-zone {
    grid-template-columns: 1fr;
  }

  .calc-main-tabs {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   PUSHX — AI ASSISTANT
   ========================================================= */

.pushx-ai-page {
  --ai-cyan: #74ffd8;
  --ai-deep-green: #00ff66;
  --ai-deep-green-soft: #00d957;

  position: relative;

  width: 100%;

  padding-bottom: 80px;

  isolation: isolate;
}




/* =========================================================
   HERO
   ========================================================= */

.pushx-ai-hero {
  position: relative;

  z-index: 2;

  min-height: 325px;

  overflow: visible;

  border-bottom:
    1px solid rgba(198, 255, 54, 0.055);
}


.pushx-ai-hero::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: -140px;
  right: -40px;

  width: 680px;
  height: 560px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      rgba(0, 255, 102, 0.2) 0%,
      rgba(0, 255, 102, 0.1) 25%,
      rgba(0, 232, 90, 0.04) 48%,
      transparent 72%
    );

  pointer-events: none;
}


.pushx-ai-hero-copy {
  position: relative;

  z-index: 10;

  width:
    min(650px, 58%);

  padding-top: 10px;
}


.pushx-ai-kicker {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color:
    var(--dash-green);

  font-size: 10px;

  font-weight: 760;

  letter-spacing: 0.16em;
}


.pushx-ai-hero h1 {
  max-width: 650px;

  margin:
    19px 0 0;

  color:
    #f6f9f4;

  font-size:
    clamp(
      45px,
      4.8vw,
      68px
    );

  font-weight: 680;

  line-height: 0.98;

  letter-spacing: -0.055em;
}


.pushx-ai-hero h1 span {
  color:
    var(--dash-green);

  text-shadow:
    0 0 22px
      rgba(198, 255, 54, 0.16),

    0 0 70px
      rgba(198, 255, 54, 0.065);
}


.pushx-ai-hero-copy > p {
  max-width: 530px;

  margin:
    20px 0 0;

  color:
    rgba(230, 236, 227, 0.5);

  font-size: 12px;

  line-height: 1.72;
}


.pushx-ai-hero-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 24px;
}


.pushx-ai-hero-tags span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(198, 255, 54, 0.09);

  border-radius: 999px;

  color:
    rgba(230, 237, 227, 0.56);

  background:
    rgba(198, 255, 54, 0.027);

  font-size: 9px;

  font-weight: 600;
}


.pushx-ai-hero-tags svg {
  color:
    var(--dash-green);
}


/* =========================================================
   HERO ART
   ========================================================= */

.pushx-ai-hero-art {
  position: absolute;

  z-index: 2;

  top: -10px;
  right: 0;

  width: 600px;
  height: 320px;

  pointer-events: none;
}


.pushx-ai-grid {
  position: absolute;

  inset: -50px;

  opacity: 0.2;

  background-image:
    linear-gradient(
      rgba(198, 255, 54, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(198, 255, 54, 0.07) 1px,
      transparent 1px
    );

  background-size:
    40px 40px;

  mask-image:
    radial-gradient(
      ellipse at 62% 48%,
      black,
      transparent 73%
    );
}


.pushx-ai-core {
  position: absolute;

  top: 38px;
  right: 82px;

  width: 220px;

  display: flex;

  flex-direction: column;

  align-items: center;

  animation:
    pushxAiCoreFloat
    7s ease-in-out infinite;
}


.pushx-ai-core-ring {
  width: 180px;
  height: 180px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.34);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.15),
      rgba(0, 255, 102, 0.035) 48%,
      transparent 72%
    );

  box-shadow:
    0 0 40px
      rgba(0, 255, 102, 0.18),

    0 0 110px
      rgba(0, 255, 102, 0.08),

    inset 0 0 45px
      rgba(0, 255, 102, 0.05);
}


.pushx-ai-core-inner {
  width: 112px;
  height: 112px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.28);

  border-radius: 50%;

  color:
    #00ff66;

  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(0, 255, 102, 0.13),
      rgba(3, 14, 7, 0.98) 62%
    );

  box-shadow:
    0 0 30px
      rgba(0, 255, 102, 0.13),

    0 0 70px
      rgba(0, 255, 102, 0.055),

    inset 0 0 30px
      rgba(0, 255, 102, 0.055);
}


.pushx-ai-core-inner svg {
  filter:
    drop-shadow(
      0 0 12px
      rgba(198, 255, 54, 0.35)
    );
}


.pushx-ai-core > span {
  margin-top: 14px;

  color:
    rgba(116, 255, 216, 0.42);

  font-size: 8px;

  font-weight: 720;

  letter-spacing: 0.2em;
}


.pushx-ai-core > strong {
  margin-top: 5px;

  color:
    var(--dash-green);

  font-size: 11px;

  font-weight: 760;

  letter-spacing: 0.12em;

  text-shadow:
    0 0 14px
      rgba(198, 255, 54, 0.25);
}


/* ORBITS */

.pushx-ai-orbit {
  position: absolute;

  border:
    1px solid
    rgba(198, 255, 54, 0.12);

  border-radius: 50%;
}


.pushx-ai-orbit-one {
  top: 88px;
  right: -55px;

  width: 470px;
  height: 135px;

  transform:
    rotate(-16deg);

}


.pushx-ai-orbit-two {
  top: 57px;
  right: 24px;

  width: 390px;
  height: 205px;

  border-color:
    rgba(116, 255, 216, 0.09);

  transform:
    rotate(20deg);

}


.pushx-ai-orbit-three {
  top: 117px;
  right: 31px;

  width: 350px;
  height: 96px;

  opacity: 0.55;

  transform:
    rotate(34deg);
}


/* FLOATING ITEMS */

.pushx-ai-float {
  position: absolute;

  z-index: 5;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(198, 255, 54, 0.12);

  border-radius: 9px;

  color:
    rgba(225, 255, 190, 0.72);

  background:
    rgba(4, 11, 5, 0.78);

  font-size: 8px;

  font-weight: 720;

  letter-spacing: 0.08em;
}


.pushx-ai-float-one {
  top: 55px;
  right: 315px;

  color:
    var(--ai-cyan);

  border-color:
    rgba(116, 255, 216, 0.12);
}


.pushx-ai-float-two {
  top: 170px;
  right: 36px;
}


.pushx-ai-float-three {
  bottom: 38px;
  right: 300px;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.pushx-ai-workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 14px;

  margin-top: 22px;
}


/* =========================================================
   CHAT PANEL
   ========================================================= */

.pushx-ai-chat-panel {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(198, 255, 54, 0.095);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(198, 255, 54, 0.035),
      transparent 34%
    ),
    rgba(5, 10, 6, 0.91);

  box-shadow:
    0 30px 80px
      rgba(0, 0, 0, 0.2);
}


.pushx-ai-chat-head {
  min-height: 96px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    0 24px;

  border-bottom:
    1px solid
    rgba(198, 255, 54, 0.06);

  background:
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.055),
      transparent 48%
    );
}


.pushx-ai-chat-title {
  display: flex;

  align-items: center;

  gap: 13px;
}


.pushx-ai-avatar {
  position: relative;

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(198, 255, 54, 0.22);

  border-radius: 14px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.075);

  box-shadow:
    0 0 28px
      rgba(198, 255, 54, 0.075);
}


.pushx-ai-avatar i {
  position: absolute;

  right: -2px;
  bottom: -2px;

  width: 10px;
  height: 10px;

  border:
    2px solid #050a06;

  border-radius: 50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 9px
      rgba(198, 255, 54, 0.8);
}


.pushx-ai-chat-title > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.pushx-ai-chat-title strong {
  color:
    rgba(247, 250, 245, 0.98);

  font-size: 23px;

  font-weight: 720;

  letter-spacing: -0.025em;
}


.pushx-ai-chat-title span {
  color:
    rgba(225, 232, 222, 0.54);

  font-size: 12px;
}


.pushx-ai-online {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(198, 255, 54, 0.12);

  border-radius: 999px;

  color:
    rgba(198, 255, 54, 0.8);

  background:
    rgba(198, 255, 54, 0.035);

  font-size: 8px;

  font-weight: 760;

  letter-spacing: 0.12em;
}


.pushx-ai-online i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--dash-green);

  box-shadow:
    0 0 9px
      rgba(198, 255, 54, 0.9);
}


/* =========================================================
   CHAT BODY
   ========================================================= */

.pushx-ai-chat-body {
  min-height: 455px;

  padding:
    27px 24px;

  display: flex;

  flex-direction: column;

  gap: 19px;
}


.pushx-ai-message {
  display: flex;

  align-items: flex-start;

  gap: 11px;
}


.pushx-ai-message-user {
  justify-content: flex-end;
}


.pushx-ai-message-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(198, 255, 54, 0.13);

  border-radius: 10px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.045);
}


.pushx-ai-message-bubble {
  max-width: 650px;

  padding:
    15px 17px;

  border:
    1px solid
    rgba(198, 255, 54, 0.075);

  border-radius:
    5px 15px 15px 15px;

  background:
    rgba(198, 255, 54, 0.025);
}


.pushx-ai-message-user
.pushx-ai-message-bubble {
  border-color:
    rgba(116, 255, 216, 0.1);

  border-radius:
    15px 5px 15px 15px;

  background:
    rgba(116, 255, 216, 0.035);
}


.pushx-ai-message-bubble > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(198, 255, 54, 0.58);

  font-size: 8px;

  font-weight: 760;

  letter-spacing: 0.13em;
}


.pushx-ai-message-bubble p {
  margin: 0;

  color:
    rgba(238, 243, 235, 0.78);

  font-size: 13px;

  line-height: 1.65;
}


/* SUGGESTIONS */

.pushx-ai-suggestions {
  margin:
    8px 0 0 45px;
}


.pushx-ai-suggestions > span {
  color:
    rgba(116, 255, 216, 0.35);

  font-size: 8px;

  font-weight: 720;

  letter-spacing: 0.14em;
}


.pushx-ai-suggestions > div {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 10px;
}


.pushx-ai-suggestions button {
  min-height: 42px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(198, 255, 54, 0.08);

  border-radius: 10px;

  color:
    rgba(232, 239, 229, 0.62);

  background:
    rgba(255, 255, 255, 0.012);

  font-size: 10px;

  cursor: pointer;

  transition:
    color 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}


.pushx-ai-suggestions button:hover {
  color:
    #efffd9;

  border-color:
    rgba(198, 255, 54, 0.18);

  background:
    rgba(198, 255, 54, 0.045);
}


.pushx-ai-suggestions button svg {
  color:
    var(--dash-green);
}


/* =========================================================
   INPUT
   ========================================================= */

.pushx-ai-input-area {
  padding:
    0 22px 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.025);
}


.pushx-ai-input-box {
  margin-top: 18px;

  padding:
    14px;

  border:
    1px solid
    rgba(198, 255, 54, 0.13);

  border-radius: 16px;

  background:
    rgba(0, 0, 0, 0.22);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.pushx-ai-input-box:focus-within {
  border-color:
    rgba(198, 255, 54, 0.3);

  box-shadow:
    0 0 0 3px
      rgba(198, 255, 54, 0.025),

    0 0 35px
      rgba(198, 255, 54, 0.025);
}


.pushx-ai-input-box textarea {
  width: 100%;

  min-height: 55px;

  resize: none;

  outline: 0;

  border: 0;

  color:
    rgba(247, 250, 245, 0.94);

  background:
    transparent;

  font-family: inherit;

  font-size: 14px;

  line-height: 1.5;
}


.pushx-ai-input-box textarea::placeholder {
  color:
    rgba(228, 234, 226, 0.28);
}


.pushx-ai-input-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 9px;
}


.pushx-ai-input-tools {
  display: flex;

  gap: 7px;
}


.pushx-ai-input-tools button {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 10px;

  color:
    rgba(228, 235, 225, 0.4);

  background:
    rgba(255, 255, 255, 0.015);

  cursor: pointer;

  transition:
    color 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}


.pushx-ai-input-tools button:hover {
  color:
    var(--ai-cyan);

  border-color:
    rgba(116, 255, 216, 0.15);

  background:
    rgba(116, 255, 216, 0.035);
}


/* SEND — КРУПНАЯ КНОПКА */

.pushx-ai-send {
  min-height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding:
    0 19px;

  border: 0;

  border-radius: 11px;

  color:
    #0a1006;

  background:
    var(--dash-green);

  font-size: 13px;

  font-weight: 760;

  cursor: pointer;

  box-shadow:
    0 0 28px
      rgba(198, 255, 54, 0.1);

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    opacity 170ms ease;
}


.pushx-ai-send:hover:not(:disabled) {
  transform:
    translateY(-1px);

  box-shadow:
    0 0 35px
      rgba(198, 255, 54, 0.2);
}


.pushx-ai-send:disabled {
  opacity: 0.3;

  cursor: default;
}


.pushx-ai-input-note {
  display: block;

  margin-top: 9px;

  color:
    rgba(225, 232, 222, 0.28);

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.pushx-ai-side {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


.pushx-ai-side-card {
  position: relative;

  overflow: hidden;

  padding: 20px;

  border:
    1px solid
    rgba(198, 255, 54, 0.085);

  border-radius: 17px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(198, 255, 54, 0.035),
      transparent 43%
    ),
    rgba(5, 10, 6, 0.88);

  box-shadow:
    0 20px 55px
      rgba(0, 0, 0, 0.14);
}


.pushx-ai-side-heading {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 17px;
}


.pushx-ai-side-icon {
  width: 41px;
  height: 41px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(198, 255, 54, 0.15);

  border-radius: 11px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.05);
}


.pushx-ai-side-icon-cyan {
  color:
    var(--ai-cyan);

  border-color:
    rgba(116, 255, 216, 0.14);

  background:
    rgba(116, 255, 216, 0.04);
}


.pushx-ai-side-heading > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.pushx-ai-side-heading strong {
  color:
    rgba(246, 249, 244, 0.94);

  font-size: 15px;

  font-weight: 700;
}


.pushx-ai-side-heading span {
  color:
    rgba(225, 232, 222, 0.45);

  font-size: 10px;
}


/* QUICK ACTIONS */

.pushx-ai-quick-list {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.pushx-ai-quick-list > button {
  min-height: 72px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 11px;

  padding:
    11px 12px;

  text-align: left;

  border:
    1px solid
    rgba(255, 255, 255, 0.045);

  border-radius: 11px;

  color:
    inherit;

  background:
    rgba(255, 255, 255, 0.01);

  cursor: pointer;

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}


.pushx-ai-quick-list > button:hover {
  transform:
    translateX(3px);

  border-color:
    rgba(198, 255, 54, 0.16);

  background:
    rgba(198, 255, 54, 0.035);

  box-shadow:
    0 0 22px
      rgba(198, 255, 54, 0.025);
}


.pushx-ai-quick-list > button > div {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(198, 255, 54, 0.11);

  border-radius: 10px;

  color:
    var(--dash-green);

  background:
    rgba(198, 255, 54, 0.035);
}


.pushx-ai-quick-list > button > span {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.pushx-ai-quick-list strong {
  color:
    rgba(242, 246, 240, 0.86);

  font-size: 12px;

  font-weight: 660;
}


.pushx-ai-quick-list small {
  overflow: hidden;

  color:
    rgba(223, 230, 220, 0.34);

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.pushx-ai-quick-list > button > svg {
  color:
    rgba(198, 255, 54, 0.35);

  transform:
    rotate(45deg);
}

/* =========================================================
   TIP
   ========================================================= */

.pushx-ai-tip-card {
  display: grid;

  grid-template-columns:
    41px
    minmax(0, 1fr);

  gap: 13px;
}


.pushx-ai-tip-card > div:last-child {
  min-width: 0;
}


.pushx-ai-tip-card span {
  display: block;

  color:
    rgba(116, 255, 216, 0.48);

  font-size: 8px;

  font-weight: 760;

  letter-spacing: 0.15em;
}


.pushx-ai-tip-card strong {
  display: block;

  margin-top: 7px;

  color:
    rgba(243, 247, 241, 0.88);

  font-size: 13px;

  font-weight: 660;

  line-height: 1.35;
}


.pushx-ai-tip-card p {
  margin:
    8px 0 0;

  color:
    rgba(225, 232, 222, 0.4);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes pushxAiCoreFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-8px);
  }
}


@keyframes pushxAiOrbitOne {
  0%,
  100% {
    transform:
      rotate(-16deg)
      translateX(0);
  }

  50% {
    transform:
      rotate(-13deg)
      translateX(7px);
  }
}


@keyframes pushxAiOrbitTwo {
  0%,
  100% {
    transform:
      rotate(20deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(23deg)
      translateY(-6px);
  }
}


/* =========================================================
   RESPONSIVE — FULL MOBILE QA ПОТОМ
   ========================================================= */

@media (max-width: 1120px) {

  .pushx-ai-hero-art {
    right: -120px;

    opacity: 0.65;
  }


  .pushx-ai-workspace {
    grid-template-columns:
      1fr;
  }


  .pushx-ai-side {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);
  }


  .pushx-ai-actions-card {
    grid-row:
      span 2;
  }

}


@media (max-width: 760px) {

  .pushx-ai-hero {
    min-height: 290px;
  }


  .pushx-ai-hero-copy {
    width: 100%;
  }


  .pushx-ai-hero-art {
    right: -220px;

    opacity: 0.26;
  }


  .pushx-ai-chat-body {
    min-height: 390px;

    padding:
      22px 17px;
  }


  .pushx-ai-input-area {
    padding:
      0 14px 15px;
  }


  .pushx-ai-side {
    grid-template-columns:
      1fr;
  }


  .pushx-ai-suggestions {
    margin-left: 0;
  }

}

/* =========================================================
   PUSHX EDUCATION
   ========================================================= */

.pushx-education-page {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  padding:
    32px
    34px
    70px;
}


/* =========================================================
   HERO
   ========================================================= */

.pushx-education-hero {
  position: relative;

  min-height: 330px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    570px;

  align-items: center;

  overflow: hidden;

  padding:
    38px
    46px;

  border:
    1px solid rgba(0, 255, 102, 0.1);

  border-radius:
    24px;

  background:
    linear-gradient(
      115deg,
      rgba(5, 12, 8, 0.92) 0%,
      rgba(3, 9, 6, 0.82) 50%,
      rgba(2, 8, 5, 0.42) 100%
    );

  box-shadow:
    0 24px 80px
    rgba(0, 0, 0, 0.28);
}

.pushx-education-hero::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -70px;

  width: 720px;
  height: 620px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.22) 0%,
      rgba(0, 255, 102, 0.09) 27%,
      rgba(0, 232, 90, 0.035) 49%,
      transparent 72%
    );
}

.pushx-education-hero-copy {
  position: relative;
  z-index: 4;

  max-width: 670px;
}

.pushx-education-kicker {
  width: fit-content;

  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  color:
    rgba(0, 255, 102, 0.92);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.pushx-education-hero h1 {
  max-width: 700px;

  margin: 0;

  color: #f5fff8;

  font-size:
    clamp(
      40px,
      4.2vw,
      66px
    );

  font-weight: 760;

  line-height: 0.98;

  letter-spacing:
    -0.052em;
}

.pushx-education-hero h1 span {
  color: #00ff66;
}

.pushx-education-hero-copy > p {
  max-width: 620px;

  margin:
    21px 0 0;

  color:
    rgba(224, 238, 229, 0.6);

  font-size: 15px;

  line-height: 1.7;
}

.pushx-education-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 24px;
}

.pushx-education-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-height: 36px;

  padding:
    0 13px;

  border:
    1px solid rgba(0, 255, 102, 0.11);

  border-radius:
    10px;

  background:
    rgba(0, 255, 102, 0.035);

  color:
    rgba(218, 239, 224, 0.74);

  font-size: 12px;
  font-weight: 650;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.pushx-education-hero-visual {
  position: relative;

  width: 100%;
  height: 270px;
}

.edu-hero-grid {
  position: absolute;

  inset: -30px -30px -30px -50px;

  opacity: 0.34;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.055)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.055)
      1px,
      transparent 1px
    );

  background-size:
    31px 31px;

  mask-image:
    radial-gradient(
      circle at 55% 50%,
      black,
      transparent 70%
    );
}

.edu-hero-core {
  position: absolute;

  z-index: 3;

  top: 50%;
  left: 51%;

  width: 156px;
  height: 156px;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(0, 255, 102, 0.32);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 32%,
      rgba(0, 255, 102, 0.18),
      rgba(3, 14, 8, 0.96) 62%
    );

  box-shadow:
    inset 0 0 35px
    rgba(0, 255, 102, 0.075),
    0 0 55px
    rgba(0, 255, 102, 0.09);

      animation:
    eduHeroCoreFloat
    6s
    ease-in-out
    infinite;

  will-change:
    transform;
}

.edu-hero-core::before {
  content: "";

  position: absolute;

  inset: 12px;

  border:
    1px solid rgba(0, 255, 102, 0.14);

  border-radius: inherit;
}

.edu-hero-core-inner {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #00ff66;
}

.edu-hero-core-inner strong {
  margin-top: 8px;

  color: #effff4;

  font-size: 19px;

  letter-spacing:
    0.06em;
}

.edu-hero-core-inner span {
  margin-top: 3px;

  color:
    rgba(0, 255, 102, 0.65);

  font-size: 8px;
  font-weight: 800;

  letter-spacing:
    0.2em;
}

.edu-hero-orbit {
  position: absolute;

  top: 50%;
  left: 51%;

  border:
    1px solid rgba(0, 255, 102, 0.14);

  border-radius: 50%;
}

.edu-hero-orbit-one {
  width: 255px;
  height: 116px;

  transform:
    translate(-50%, -50%)
    rotate(-14deg);

  animation:
    eduOrbitOne
    12s
    ease-in-out
    infinite;

  will-change:
    transform,
    opacity;
}

.edu-hero-orbit-two {
  width: 320px;
  height: 165px;

  transform:
    translate(-50%, -50%)
    rotate(27deg);

  opacity: 0.58;

  animation:
    eduOrbitTwo
    15s
    ease-in-out
    infinite;

  will-change:
    transform,
    opacity;
}

.edu-hero-chip {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 7px;

  min-height: 34px;

  padding:
    0 11px;

  border:
    1px solid rgba(0, 255, 102, 0.17);

  border-radius:
    9px;

  background:
    rgba(2, 10, 6, 0.91);

  color:
    rgba(217, 255, 230, 0.74);

  font-size: 10px;
  font-weight: 750;

  letter-spacing:
    0.09em;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.28);
}

.edu-hero-chip svg {
  color: #00ff66;
}

.edu-hero-chip-one {
  top: 38px;
  left: 42px;

  animation:
    eduChipFloatOne
    5.5s
    ease-in-out
    infinite;

  will-change:
    transform;
}

.edu-hero-chip-two {
  top: 75px;
  right: 15px;

  animation:
    eduChipFloatTwo
    6.4s
    ease-in-out
    infinite;

  will-change:
    transform;
}

.edu-hero-chip-three {
  bottom: 33px;
  left: 36px;

  animation:
    eduChipFloatThree
    5.9s
    ease-in-out
    infinite;

  will-change:
    transform;
}

.edu-hero-caption {
  position: absolute;

  right: 5px;
  bottom: 30px;

  color:
    rgba(0, 255, 102, 0.36);

  font-size: 9px;
  font-weight: 800;

  line-height: 1.65;

  letter-spacing:
    0.25em;

  text-align: right;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.edu-toolbar {
  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 18px;

  margin-top: 22px;

  padding:
    8px;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius:
    15px;

  background:
    rgba(4, 10, 7, 0.74);
}

.edu-view-switch {
  display: flex;
  gap: 5px;
}

.edu-view-switch button {
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding:
    0 18px;

  border: 0;
  border-radius: 10px;

  background:
    transparent;

  color:
    rgba(221, 236, 226, 0.54);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    180ms ease;
}

.edu-view-switch button:hover {
  color:
    rgba(236, 255, 242, 0.85);

  background:
    rgba(255, 255, 255, 0.025);
}

.edu-view-switch button.active {
  color: #eafff0;

  background:
    rgba(0, 255, 102, 0.085);

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 255, 102, 0.22),
    0 0 26px
    rgba(0, 255, 102, 0.055);
}

.edu-view-switch button.active svg {
  color: #00ff66;
}

.edu-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 11px;

  padding-right: 14px;

  color:
    rgba(214, 230, 220, 0.42);

  font-size: 11px;
  font-weight: 650;
}

.edu-toolbar-meta i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    rgba(0, 255, 102, 0.72);
}


/* =========================================================
   KNOWLEDGE MAP
   ========================================================= */

.edu-map {
  position: relative;

  height: 700px;

  margin-top: 22px;

  overflow: hidden;

  border:
    1px solid rgba(0, 255, 102, 0.075);

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(3, 9, 6, 0.87),
      rgba(2, 7, 4, 0.74)
    );
}

.edu-map::before {
  content: "";

  position: absolute;

  z-index: 0;

  width: 640px;
  height: 640px;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.095),
      rgba(0, 255, 102, 0.025) 37%,
      transparent 70%
    );
}

.edu-map-grid {
  position: absolute;

  inset: 0;

  opacity: 0.42;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.04)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.04)
      1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0, 0, 0, 0.75) 58%,
      transparent 96%
    );
}

.edu-map-lines {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}

.edu-map-lines path {
  fill: none;

  stroke:
    rgba(0, 255, 102, 0.34);

  stroke-width: 1.5;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 4px
      rgba(0, 255, 102, 0.16)
    );
}

.edu-map-center {
  position: absolute;

  z-index: 4;

  top: 50%;
  left: 50%;

  width: 168px;
  height: 168px;

  transform:
    translate(-50%, -50%);
}

.edu-map-center-ring {
  position: absolute;

  inset: -19px;

  border:
    1px solid rgba(0, 255, 102, 0.14);

  border-radius: 50%;

  animation:
    eduMapRingPulse
    4.8s
    ease-in-out
    infinite;

  will-change:
    transform,
    opacity;
}

.edu-map-center-core {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(0, 255, 102, 0.3);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(0, 255, 102, 0.17),
      rgba(2, 12, 6, 0.97) 63%
    );

  box-shadow:
    0 0 55px
    rgba(0, 255, 102, 0.1),
    inset 0 0 30px
    rgba(0, 255, 102, 0.06);

  color: #00ff66;

    animation:
    eduMapCorePulse
    5.2s
    ease-in-out
    infinite;

  will-change:
    transform,
    box-shadow;
}

.edu-map-center-core strong {
  margin-top: 8px;

  color: #f0fff4;

  font-size: 24px;

  letter-spacing:
    -0.03em;
}

.edu-map-center-core span {
  margin-top: 3px;

  color:
    rgba(0, 255, 102, 0.54);

  font-size: 8px;
  font-weight: 800;

  letter-spacing:
    0.15em;
}


/* =========================================================
   MAP NODES
   ========================================================= */

.edu-map-node {
  position: absolute;
  z-index: 5;

  width: 310px;
  min-height: 143px;

  display: flex;
  align-items: flex-start;
  gap: 15px;

  padding:
    18px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      rgba(7, 16, 11, 0.97),
      rgba(3, 10, 6, 0.92)
    );

  color: inherit;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 15px 45px
    rgba(0, 0, 0, 0.22);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.edu-map-node:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(0, 255, 102, 0.21);

  background:
    linear-gradient(
      135deg,
      rgba(7, 22, 13, 0.98),
      rgba(3, 12, 7, 0.94)
    );

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.28),
    0 0 24px
    rgba(0, 255, 102, 0.035);
}

.edu-map-node.active {
  border-color:
    rgba(0, 255, 102, 0.42);

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 255, 102, 0.08),
    0 0 34px
    rgba(0, 255, 102, 0.07);
}

.edu-map-node.active::after {
  content: "";

  position: absolute;

  top: -1px;
  left: 20px;

  width: 72px;
  height: 2px;

  background:
    #00ff66;

  box-shadow:
    0 0 10px
    rgba(0, 255, 102, 0.75);
}

.edu-map-node-icon {
  width: 46px;
  height: 46px;

  flex:
    0 0 46px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(0, 255, 102, 0.17);

  border-radius:
    12px;

  background:
    rgba(0, 255, 102, 0.055);

  color: #00ff66;
}

.edu-map-node-copy > span {
  display: block;

  margin-bottom: 4px;

  color: #00ff66;

  font-size: 10px;
  font-weight: 850;

  letter-spacing:
    0.12em;
}

.edu-map-node-copy strong {
  display: block;

  color:
    rgba(241, 255, 246, 0.94);

  font-size: 15px;
  font-weight: 760;

  line-height: 1.2;
}

.edu-map-node-copy p {
  margin:
    7px 0 9px;

  color:
    rgba(217, 232, 221, 0.47);

  font-size: 10px;

  line-height: 1.45;
}

.edu-map-node-copy small {
  display: flex;
  align-items: center;
  gap: 4px;

  color:
    rgba(0, 255, 102, 0.68);

  font-size: 10px;
  font-weight: 700;
}

.edu-map-node-1 {
  top: 72px;
  left: 48px;
}

.edu-map-node-2 {
  top: 48px;
  left: 50%;

  transform:
    translateX(-50%);
}

.edu-map-node-2:hover {
  transform:
    translateX(-50%)
    translateY(-3px);
}

.edu-map-node-3 {
  top: 86px;
  right: 45px;
}

.edu-map-node-4 {
  bottom: 72px;
  left: 48px;
}

.edu-map-node-5 {
  bottom: 45px;
  left: 50%;

  transform:
    translateX(-50%);
}

.edu-map-node-5:hover {
  transform:
    translateX(-50%)
    translateY(-3px);
}

.edu-map-node-6 {
  right: 45px;
  bottom: 72px;
}


/* =========================================================
   CATEGORY SECTION
   ========================================================= */

.edu-selected-category,
.edu-all-lessons {
  margin-top: 34px;
}

.edu-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content:
    space-between;

  gap: 24px;

  margin-bottom: 18px;
}

.edu-section-heading > div:first-child > span,
.edu-all-lessons-head > div > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(0, 255, 102, 0.69);

  font-size: 10px;
  font-weight: 800;

  letter-spacing:
    0.16em;
}

.edu-section-heading h2,
.edu-all-lessons-head h2 {
  margin: 0;

  color: #f2fff6;

  font-size: 29px;

  letter-spacing:
    -0.035em;
}

.edu-section-heading p,
.edu-all-lessons-head p {
  max-width: 650px;

  margin:
    8px 0 0;

  color:
    rgba(215, 231, 220, 0.48);

  font-size: 12px;

  line-height: 1.55;
}

.edu-section-count {
  min-width: 110px;

  text-align: right;
}

.edu-section-count strong {
  display: block;

  color: #00ff66;

  font-size: 30px;
  font-weight: 750;
}

.edu-section-count span {
  color:
    rgba(210, 229, 216, 0.37);

  font-size: 10px;
}


/* =========================================================
   LESSON CARDS
   ========================================================= */

.edu-lessons-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.edu-lesson-card {
  overflow: hidden;

  min-width: 0;

  border:
    1px solid rgba(255, 255, 255, 0.065);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 14, 9, 0.96),
      rgba(3, 9, 6, 0.92)
    );

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.edu-lesson-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(0, 255, 102, 0.18);

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.26),
    0 0 30px
    rgba(0, 255, 102, 0.025);
}

.edu-lesson-preview {
  position: relative;

  aspect-ratio: 16 / 8.7;

  overflow: hidden;

  background:
    #030705;
}

.edu-lesson-preview img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(0.48)
    saturate(0.82);

  transform:
    scale(1.025);

  transition:
    280ms ease;
}

.edu-lesson-card:hover
.edu-lesson-preview img {
  filter:
    brightness(0.63)
    saturate(0.93);

  transform:
    scale(1.055);
}

.edu-lesson-preview-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(1, 8, 4, 0.04),
      rgba(1, 8, 4, 0.12) 45%,
      rgba(2, 8, 5, 0.9)
    );
}

.edu-lesson-category {
  position: absolute;

  top: 12px;
  left: 12px;

  min-height: 27px;

  display: inline-flex;
  align-items: center;

  padding:
    0 9px;

  border:
    1px solid rgba(0, 255, 102, 0.16);

  border-radius:
    7px;

  background:
    rgba(2, 10, 6, 0.82);

  color:
    rgba(0, 255, 102, 0.85);

  font-size: 8px;
  font-weight: 850;

  letter-spacing:
    0.11em;
}

.edu-lesson-play {
  position: absolute;

  right: 13px;
  bottom: 12px;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(0, 255, 102, 0.26);

  border-radius:
    50%;

  background:
    rgba(0, 255, 102, 0.1);

  color: #00ff66;

  box-shadow:
    0 0 22px
    rgba(0, 255, 102, 0.07);
}

.edu-lesson-soon {
  position: absolute;

  right: 13px;
  bottom: 12px;

  padding:
    7px 9px;

  border:
    1px solid rgba(255, 255, 255, 0.085);

  border-radius:
    7px;

  background:
    rgba(0, 0, 0, 0.54);

  color:
    rgba(255, 255, 255, 0.44);

  font-size: 8px;
  font-weight: 850;

  letter-spacing:
    0.12em;
}

.edu-lesson-placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color:
    rgba(0, 255, 102, 0.24);

  background:
    radial-gradient(
      circle at center,
      rgba(0, 255, 102, 0.08),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #041008,
      #020604
    );
}

.edu-lesson-body {
  min-height: 188px;

  display: flex;
  flex-direction: column;
  justify-content:
    space-between;

  gap: 17px;

  padding:
    17px;
}

.edu-lesson-index {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(0, 255, 102, 0.5);

  font-size: 8px;
  font-weight: 800;

  letter-spacing:
    0.13em;
}

.edu-lesson-body h3 {
  margin: 0;

  color:
    rgba(244, 255, 247, 0.93);

  font-size: 15px;
  font-weight: 730;

  line-height: 1.3;
}

.edu-lesson-body p {
  margin:
    8px 0 0;

  color:
    rgba(211, 229, 217, 0.42);

  font-size: 10px;

  line-height: 1.55;
}

.edu-lesson-open {
  width: 100%;
  height: 39px;

  display: flex;
  align-items: center;
  justify-content:
    space-between;

  padding:
    0 12px;

  border:
    1px solid rgba(0, 255, 102, 0.12);

  border-radius:
    9px;

  background:
    rgba(0, 255, 102, 0.045);

  color:
    rgba(219, 255, 231, 0.8);

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    160ms ease;
}

.edu-lesson-open:hover {
  border-color:
    rgba(0, 255, 102, 0.28);

  background:
    rgba(0, 255, 102, 0.09);

  color: #effff4;
}

.edu-lesson-open svg {
  color: #00ff66;
}

.edu-lesson-open-disabled {
  cursor:
    not-allowed;

  opacity: 0.38;
}


/* =========================================================
   ALL LESSONS
   ========================================================= */

.edu-all-lessons-head {
  display: flex;
  align-items: flex-end;
  justify-content:
    space-between;

  gap: 25px;

  margin-bottom: 17px;
}

.edu-search {
  width: 310px;
  height: 43px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding:
    0 13px;

  border:
    1px solid rgba(255, 255, 255, 0.075);

  border-radius:
    10px;

  background:
    rgba(3, 10, 6, 0.84);

  color:
    rgba(255, 255, 255, 0.34);

  transition:
    160ms ease;
}

.edu-search:focus-within {
  border-color:
    rgba(0, 255, 102, 0.26);

  box-shadow:
    0 0 0 3px
    rgba(0, 255, 102, 0.025);
}

.edu-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background:
    transparent;

  color: #ecfff2;

  font: inherit;

  font-size: 12px;
}

.edu-search input::placeholder {
  color:
    rgba(220, 235, 225, 0.26);
}

.edu-category-filters {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 17px;
}

.edu-category-filters button {
  min-height: 35px;

  padding:
    0 12px;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    rgba(220, 235, 225, 0.45);

  font-size: 10px;
  font-weight: 650;

  cursor: pointer;

  transition:
    150ms ease;
}

.edu-category-filters button:hover {
  color:
    rgba(238, 255, 244, 0.78);

  border-color:
    rgba(0, 255, 102, 0.12);
}

.edu-category-filters button.active {
  color: #eafff0;

  border-color:
    rgba(0, 255, 102, 0.22);

  background:
    rgba(0, 255, 102, 0.07);
}


/* =========================================================
   BOTTOM NOTE
   ========================================================= */

.edu-bottom-note {
  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 20px;

  margin-top: 32px;

  padding:
    18px 20px;

  border-top:
    1px solid rgba(0, 255, 102, 0.07);

  color:
    rgba(213, 229, 218, 0.35);
}

.edu-bottom-note > div {
  display: flex;
  align-items: center;
  gap: 8px;

  color:
    rgba(0, 255, 102, 0.58);
}

.edu-bottom-note span {
  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.14em;
}

.edu-bottom-note p {
  margin: 0;

  font-size: 10px;
}

/* =========================================================
   EDUCATION MOTION
   ========================================================= */

@keyframes eduMapRingPulse {
  0%,
  100% {
    transform:
      scale(1);

    opacity: 0.55;
  }

  50% {
    transform:
      scale(1.045);

    opacity: 1;
  }
}


@keyframes eduMapCorePulse {
  0%,
  100% {
    transform:
      scale(1);

    box-shadow:
      0 0 55px
      rgba(0, 255, 102, 0.1),
      inset 0 0 30px
      rgba(0, 255, 102, 0.06);
  }

  50% {
    transform:
      scale(1.025);

    box-shadow:
      0 0 72px
      rgba(0, 255, 102, 0.16),
      inset 0 0 38px
      rgba(0, 255, 102, 0.085);
  }
}


@keyframes eduHeroCoreFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-5px);
  }
}


@keyframes eduOrbitOne {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(-14deg)
      scale(1);

    opacity: 1;
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(-8deg)
      scale(1.025);

    opacity: 0.72;
  }
}


@keyframes eduOrbitTwo {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(27deg)
      scale(1);

    opacity: 0.48;
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(20deg)
      scale(1.035);

    opacity: 0.7;
  }
}


@keyframes eduChipFloatOne {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(4px, -5px, 0);
  }
}


@keyframes eduChipFloatTwo {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(-5px, 4px, 0);
  }
}


@keyframes eduChipFloatThree {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(5px, 4px, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .edu-map-center-ring,
  .edu-map-center-core,
  .edu-hero-core,
  .edu-hero-orbit-one,
  .edu-hero-orbit-two,
  .edu-hero-chip-one,
  .edu-hero-chip-two,
  .edu-hero-chip-three {
    animation: none !important;
  }
}

/* =========================================================
   EDUCATION DESKTOP BREAKPOINT
   ========================================================= */

@media (max-width: 1280px) {

  .pushx-education-hero {
    grid-template-columns:
      minmax(0, 1fr)
      440px;
  }

  .edu-map-node {
    width: 270px;
  }

  .edu-lessons-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/* =========================================================
   EDUCATION TABLET
   ========================================================= */

@media (max-width: 980px) {

  .pushx-education-page {
    padding:
      24px 20px 55px;
  }

  .pushx-education-hero {
    grid-template-columns: 1fr;

    padding:
      32px;
  }

  .pushx-education-hero-visual {
    display: none;
  }

  .edu-map {
    height: auto;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;

    padding: 16px;
  }

  .edu-map-lines,
  .edu-map-center {
    display: none;
  }

  .edu-map-node {
    position: relative !important;

    inset: auto !important;

    width: 100%;

    transform: none !important;
  }
}


/* =========================================================
   EDUCATION MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .pushx-education-page {
    padding:
      16px 12px 44px;
  }

  .pushx-education-hero {
    min-height: auto;

    padding:
      26px 20px;

    border-radius:
      18px;
  }

  .pushx-education-hero h1 {
    font-size: 38px;
  }

  .pushx-education-hero-copy > p {
    font-size: 13px;
  }

  .edu-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .edu-view-switch {
    width: 100%;
  }

  .edu-view-switch button {
    flex: 1;

    padding:
      0 10px;
  }

  .edu-toolbar-meta {
    justify-content: center;

    padding:
      2px 0 7px;
  }

  .edu-map {
    grid-template-columns: 1fr;
  }

  .edu-lessons-grid {
    grid-template-columns: 1fr;
  }

  .edu-section-heading,
  .edu-all-lessons-head {
    align-items: stretch;
    flex-direction: column;
  }

  .edu-section-count {
    text-align: left;
  }

  .edu-search {
    width: 100%;
  }

  .edu-bottom-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   PUSHX JOURNAL
   ========================================================= */

.pushx-journal-page {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  padding:
    32px
    34px
    72px;
}


/* =========================================================
   JOURNAL HERO
   ========================================================= */

.journal-hero {
  position: relative;

  min-height: 330px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    570px;

  align-items: center;

  overflow: hidden;

  padding:
    40px
    46px;

  border:
    1px solid
    rgba(0, 255, 102, 0.1);

  border-radius:
    24px;

  background:
    linear-gradient(
      115deg,
      rgba(4, 12, 7, 0.94),
      rgba(3, 10, 6, 0.82) 55%,
      rgba(1, 8, 4, 0.44)
    );

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.28);

  isolation: isolate;
}

.journal-hero::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: -220px;
  right: -80px;

  width: 760px;
  height: 720px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.23),
      rgba(0, 255, 102, 0.075) 31%,
      transparent 69%
    );
}

.journal-hero-copy {
  position: relative;
  z-index: 5;

  max-width: 660px;
}

.journal-kicker {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 16px;

  color: #00ff66;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.journal-hero h1 {
  margin: 0;

  color: #f4fff7;

  font-size:
    clamp(
      42px,
      4.3vw,
      68px
    );

  font-weight: 780;

  line-height: 0.98;

  letter-spacing: -0.052em;
}

.journal-hero h1 span {
  color: #00ff66;

  text-shadow:
    0 0 28px
    rgba(0, 255, 102, 0.11);
}

.journal-hero-copy > p {
  max-width: 590px;

  margin:
    21px 0 0;

  color:
    rgba(220, 238, 226, 0.58);

  font-size: 15px;

  line-height: 1.7;
}

.journal-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 26px;
}

.journal-primary-btn,
.journal-secondary-btn {
  min-height: 46px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  padding:
    0 17px;

  border-radius: 11px;

  font-size: 13px;
  font-weight: 760;

  cursor: pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.journal-primary-btn {
  border:
    1px solid
    rgba(0, 255, 102, 0.55);

  background:
    #00e95e;

  color: #001b0a;

  box-shadow:
    0 9px 30px
    rgba(0, 255, 102, 0.13);
}

.journal-primary-btn:hover {
  transform:
    translateY(-2px);

  background:
    #00ff66;

  box-shadow:
    0 12px 38px
    rgba(0, 255, 102, 0.18);
}

.journal-secondary-btn {
  border:
    1px solid
    rgba(0, 255, 102, 0.15);

  background:
    rgba(0, 255, 102, 0.045);

  color:
    rgba(231, 255, 238, 0.8);
}

.journal-secondary-btn:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(0, 255, 102, 0.3);

  background:
    rgba(0, 255, 102, 0.08);
}


/* =========================================================
   JOURNAL HERO VISUAL
   ========================================================= */

.journal-hero-visual {
  position: relative;

  width: 100%;
  height: 270px;
}

.journal-hero-grid {
  position: absolute;

  inset:
    -45px
    -50px
    -45px
    -65px;

  opacity: 0.4;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.05)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.05)
      1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    radial-gradient(
      circle at 55% 50%,
      black,
      transparent 72%
    );
}

.journal-core {
  position: absolute;

  z-index: 5;

  top: 50%;
  left: 52%;

  width: 158px;
  height: 158px;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.32);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      rgba(0, 255, 102, 0.18),
      rgba(2, 13, 7, 0.98) 61%
    );

  color: #00ff66;

  box-shadow:
    inset 0 0 34px
    rgba(0, 255, 102, 0.06),
    0 0 55px
    rgba(0, 255, 102, 0.1);

  animation:
    journalCoreFloat
    6s
    ease-in-out
    infinite;

  will-change: transform;
}

.journal-core::before {
  content: "";

  position: absolute;

  inset: 12px;

  border:
    1px solid
    rgba(0, 255, 102, 0.12);

  border-radius: inherit;
}

.journal-core svg,
.journal-core strong,
.journal-core span {
  position: relative;
  z-index: 2;
}

.journal-core strong {
  margin-top: 8px;

  color: #effff3;

  font-size: 20px;
  font-weight: 820;

  letter-spacing: 0.04em;
}

.journal-core span {
  width: 112px;

  margin-top: 4px;

  color:
    rgba(0, 255, 102, 0.58);

  font-size: 6.5px;
  font-weight: 850;

  line-height: 1.15;

  letter-spacing: 0.08em;

  text-align: center;

  white-space: nowrap;
}

.journal-orbit {
  position: absolute;

  top: 50%;
  left: 52%;

  border:
    1px solid
    rgba(0, 255, 102, 0.14);

  border-radius: 50%;

  pointer-events: none;

  will-change:
    transform,
    opacity;
}

.journal-orbit-one {
  width: 260px;
  height: 112px;

  transform:
    translate(-50%, -50%)
    rotate(-15deg);

  animation:
    journalOrbitOne
    12s
    ease-in-out
    infinite;
}

.journal-orbit-two {
  width: 325px;
  height: 158px;

  transform:
    translate(-50%, -50%)
    rotate(25deg);

  opacity: 0.66;

  animation:
    journalOrbitTwo
    15s
    ease-in-out
    infinite;
}

.journal-orbit-three {
  width: 390px;
  height: 205px;

  transform:
    translate(-50%, -50%)
    rotate(-4deg);

  opacity: 0.34;

  animation:
    journalOrbitThree
    18s
    ease-in-out
    infinite;
}

.journal-orbit-dot {
  position: absolute;
  z-index: 6;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #00ff66;

  box-shadow:
    0 0 12px
    rgba(0, 255, 102, 0.82);

  animation:
    journalDotPulse
    3.5s
    ease-in-out
    infinite;
}

.journal-dot-one {
  top: 34px;
  left: 48%;
}

.journal-dot-two {
  top: 59%;
  right: 44px;

  animation-delay:
    -1.1s;
}

.journal-dot-three {
  bottom: 28px;
  left: 25%;

  animation-delay:
    -2.2s;
}

.journal-float {
  position: absolute;
  z-index: 7;

  min-height: 34px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(0, 255, 102, 0.17);

  border-radius: 9px;

  background:
    rgba(2, 10, 6, 0.92);

  color:
    rgba(222, 255, 232, 0.72);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.08em;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.26);
}

.journal-float svg {
  color: #00ff66;
}

.journal-float-profit {
  top: 30px;
  left: 31px;

  animation:
    journalFloatOne
    5.8s
    ease-in-out
    infinite;
}

.journal-float-review {
  top: 66px;
  right: 8px;

  animation:
    journalFloatTwo
    6.4s
    ease-in-out
    infinite;
}

.journal-float-discipline {
  left: 34px;
  bottom: 25px;

  animation:
    journalFloatThree
    6.1s
    ease-in-out
    infinite;
}


/* =========================================================
   PERIOD
   ========================================================= */

.journal-period-bar {
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 16px;

  margin-top: 20px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 14px;

  background:
    rgba(3, 10, 6, 0.72);
}

.journal-month-control {
  display: flex;
  align-items: center;

  gap: 10px;
}

.journal-month-control > button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.02);

  color:
    rgba(235, 255, 241, 0.72);

  cursor: pointer;

  transition:
    150ms ease;
}

.journal-month-control > button:hover {
  border-color:
    rgba(0, 255, 102, 0.19);

  color: #00ff66;

  background:
    rgba(0, 255, 102, 0.05);
}

.journal-month-control > div {
  min-width: 160px;

  text-align: center;
}

.journal-month-control span {
  display: block;

  color:
    rgba(0, 255, 102, 0.54);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.journal-month-control strong {
  display: block;

  margin-top: 3px;

  color: #effff4;

  font-size: 15px;
  font-weight: 760;
}

.journal-today-btn {
  min-height: 40px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(0, 255, 102, 0.12);

  border-radius: 9px;

  background:
    rgba(0, 255, 102, 0.04);

  color:
    rgba(229, 255, 237, 0.72);

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.journal-stat-grid {
  display: grid;

  grid-template-columns:
    1.35fr
    1fr
    1fr
    1fr;

  gap: 13px;

  margin-top: 18px;
}

.journal-stat-card {
  min-height: 145px;

  display: flex;
  flex-direction: column;

  justify-content:
    space-between;

  padding: 20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.062);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 15, 9, 0.94),
      rgba(3, 9, 6, 0.89)
    );

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.journal-stat-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(0, 255, 102, 0.16);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.2);
}

.journal-stat-card-main {
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(0, 255, 102, 0.09),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(6, 18, 10, 0.98),
      rgba(3, 10, 6, 0.91)
    );
}

.journal-stat-top {
  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 10px;

  color:
    rgba(220, 238, 225, 0.39);
}

.journal-stat-top span {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.11em;
}

.journal-stat-top svg {
  color:
    rgba(0, 255, 102, 0.66);
}

.journal-stat-card > strong {
  margin-top: 13px;

  color:
    rgba(242, 255, 246, 0.93);

  font-size: 25px;
  font-weight: 780;

  letter-spacing: -0.035em;
}

.journal-stat-card-main > strong {
  font-size: 33px;
}

.journal-stat-card small {
  margin-top: 7px;

  color:
    rgba(211, 229, 217, 0.35);

  font-size: 11px;
}

.journal-positive {
  color:
    #00ff66 !important;

  text-shadow:
    0 0 22px
    rgba(0, 255, 102, 0.08);
}

.journal-negative {
  color:
    #ff5b62 !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.journal-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(340px, 0.85fr);

  gap: 14px;

  margin-top: 14px;
}

.journal-calendar-panel,
.journal-chart-panel,
.journal-days-panel,
.journal-year-panel {
  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(5, 13, 8, 0.95),
      rgba(3, 9, 6, 0.9)
    );

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, 0.16);
}

.journal-calendar-panel {
  padding: 22px;
}

.journal-right-column {
  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  gap: 14px;
}

.journal-chart-panel,
.journal-days-panel {
  padding: 21px;
}

.journal-panel-head {
  display: flex;
  align-items: flex-start;

  justify-content:
    space-between;

  gap: 20px;
}

.journal-panel-head > div:first-child > span {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(0, 255, 102, 0.54);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: 0.14em;
}

.journal-panel-head h2 {
  margin: 0;

  color: #effff4;

  font-size: 19px;
  font-weight: 760;

  letter-spacing: -0.025em;
}

.journal-panel-head p {
  margin:
    6px 0 0;

  color:
    rgba(211, 229, 217, 0.36);

  font-size: 11px;

  line-height: 1.5;
}

.journal-panel-head > svg {
  color:
    rgba(0, 255, 102, 0.58);
}


/* =========================================================
   CALENDAR
   ========================================================= */

.journal-calendar-weekdays {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap: 7px;

  margin-top: 22px;
  margin-bottom: 7px;
}

.journal-calendar-weekdays span {
  text-align: center;

  color:
    rgba(216, 233, 221, 0.31);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.journal-calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap: 7px;
}

.journal-calendar-day {
  position: relative;

  aspect-ratio: 1.12 / 1;

  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content:
    space-between;

  padding: 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    rgba(235, 250, 240, 0.65);

  text-align: left;

  cursor: pointer;

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.journal-calendar-day:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(0, 255, 102, 0.18);

  background:
    rgba(0, 255, 102, 0.035);
}

.journal-calendar-day-empty {
  pointer-events: none;

  border-color: transparent;

  background: transparent;
}

.journal-day-top {
  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 6px;
}

.journal-day-top span {
  font-size: 12px;
  font-weight: 700;
}

.journal-day-top svg {
  color:
    rgba(0, 255, 102, 0.72);
}

.journal-calendar-day > strong {
  font-size: 13px;
  font-weight: 800;
}

.journal-calendar-day > small {
  align-self: flex-end;

  color:
    rgba(0, 255, 102, 0.2);

  font-size: 17px;

  opacity: 0;

  transition:
    opacity 150ms ease;
}

.journal-calendar-day:hover > small {
  opacity: 1;
}

.journal-day-profit {
  border-color:
    rgba(0, 255, 102, 0.18);

  background:
    linear-gradient(
      145deg,
      rgba(0, 255, 102, 0.10),
      rgba(0, 255, 102, 0.025)
    );

  color:
    rgba(239, 255, 244, 0.92);

  box-shadow:
    inset 0 0 25px
    rgba(0, 255, 102, 0.025);
}

.journal-day-profit > strong {
  color: #00ff66;
}

.journal-day-loss {
  border-color:
    rgba(255, 91, 98, 0.17);

  background:
    linear-gradient(
      145deg,
      rgba(255, 70, 80, 0.095),
      rgba(255, 70, 80, 0.018)
    );
}

.journal-day-loss > strong {
  color: #ff6870;
}

.journal-day-neutral {
  border-color:
    rgba(255, 255, 255, 0.085);
}

.journal-day-weekend:not(
  .journal-day-profit
):not(
  .journal-day-loss
) {
  opacity: 0.48;
}

.journal-day-today::after {
  content: "";

  position: absolute;

  top: 8px;
  right: 8px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #00ff66;

  box-shadow:
    0 0 9px
    rgba(0, 255, 102, 0.8);
}


/* =========================================================
   CHART
   ========================================================= */

.journal-chart-value {
  margin-top: 24px;
}

.journal-chart-value strong {
  display: block;

  color: #effff4;

  font-size: 28px;
  font-weight: 780;

  letter-spacing: -0.035em;
}

.journal-chart-value span {
  display: block;

  margin-top: 3px;

  color:
    rgba(210, 229, 216, 0.31);

  font-size: 10px;
}

.journal-chart {
  position: relative;

  height: 210px;

  margin-top: 18px;

  overflow: hidden;

  border-radius: 11px;

  background:
    linear-gradient(
      rgba(0, 255, 102, 0.025)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.025)
      1px,
      transparent 1px
    );

  background-size:
    38px 38px;
}

.journal-chart svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.journal-chart-axis {
  stroke:
    rgba(255, 255, 255, 0.07);

  stroke-width: 0.4;
}

.journal-chart-line {
  fill: none;

  stroke: #00ff66;

  stroke-width: 1.5;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 4px
      rgba(0, 255, 102, 0.24)
    );
}

.journal-chart-area {
  fill:
    url(#journalChartArea);
}

.journal-chart-empty {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color:
    rgba(211, 229, 217, 0.24);

  font-size: 10px;
}


/* =========================================================
   MONTH DAYS SUMMARY
   ========================================================= */

.journal-days-summary {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 20px;
}

.journal-days-summary > div {
  min-height: 83px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.015);
}

.journal-days-summary span {
  color:
    rgba(210, 229, 216, 0.33);

  font-size: 9px;
  font-weight: 700;
}

.journal-days-summary strong {
  margin-top: 6px;

  color: #effff4;

  font-size: 21px;
  font-weight: 780;
}


/* =========================================================
   YEAR HEATMAP
   ========================================================= */

.journal-year-panel {
  margin-top: 14px;

  padding: 22px;
}

.journal-heat-legend {
  display: flex;
  align-items: center;

  gap: 5px;
}

.journal-heat-legend span {
  margin:
    0 3px;

  color:
    rgba(210, 229, 216, 0.28);

  font-size: 9px;
}

.journal-heat-legend i {
  width: 10px;
  height: 10px;

  border-radius: 2px;

  border:
    1px solid
    rgba(255, 255, 255, 0.04);
}

.journal-heatmap-scroll {
  margin-top: 25px;

  overflow-x: auto;

  padding-bottom: 5px;
}

.journal-heatmap {
  min-width: 830px;

  display: grid;

  grid-template-rows:
    repeat(7, 13px);

  grid-auto-columns: 13px;

  grid-auto-flow: column;

  gap: 4px;
}

.journal-heat-cell {
  width: 13px;
  height: 13px;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.035);

  border-radius: 3px;

  cursor: pointer;

  transition:
    transform 120ms ease,
    border-color 120ms ease;
}

.journal-heat-cell:hover {
  transform:
    scale(1.35);

  border-color:
    rgba(255, 255, 255, 0.25);

  z-index: 2;
}

.journal-heat-cell.empty,
.journal-heat-legend .empty {
  background:
    rgba(255, 255, 255, 0.025);
}

.journal-heat-cell.neutral {
  background:
    rgba(255, 255, 255, 0.07);
}

.journal-heat-cell.profit-1,
.journal-heat-legend .profit-1 {
  background:
    rgba(0, 255, 102, 0.18);
}

.journal-heat-cell.profit-2,
.journal-heat-legend .profit-2 {
  background:
    rgba(0, 255, 102, 0.36);
}

.journal-heat-cell.profit-3 {
  background:
    rgba(0, 255, 102, 0.58);
}

.journal-heat-cell.profit-4 {
  background:
    rgba(0, 255, 102, 0.88);

  box-shadow:
    0 0 7px
    rgba(0, 255, 102, 0.16);
}

.journal-heat-cell.loss-1,
.journal-heat-legend .loss-1 {
  background:
    rgba(255, 75, 85, 0.22);
}

.journal-heat-cell.loss-2,
.journal-heat-legend .loss-2 {
  background:
    rgba(255, 75, 85, 0.42);
}

.journal-heat-cell.loss-3 {
  background:
    rgba(255, 75, 85, 0.62);
}

.journal-heat-cell.loss-4 {
  background:
    rgba(255, 75, 85, 0.88);
}

/* =========================================================
   JOURNAL TRADE ROWS
   ========================================================= */

.journal-trades-list {
  display: grid;

  gap: 9px;

  margin-top: 3px;
}


.journal-trade-row {
  display: grid;

  grid-template-columns:
    34px
    minmax(105px, 1.15fr)
    minmax(110px, 0.9fr)
    auto
    36px;

  align-items: center;

  gap: 8px;

  padding: 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.018);
}


.journal-trade-index {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.1);

  border-radius: 8px;

  background:
    rgba(0, 255, 102, 0.035);

  color:
    rgba(0, 255, 102, 0.55);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.08em;
}


.journal-trade-symbol,
.journal-trade-amount {
  height: 45px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.02);

  transition:
    border-color 150ms ease,
    background 150ms ease;
}


.journal-trade-symbol {
  width: 100%;

  padding:
    0 12px;

  outline: 0;

  color:
    #effff4;

  font-size: 13px;
  font-weight: 720;

  font-family: inherit;
}


.journal-trade-symbol::placeholder {
  color:
    rgba(218, 236, 223, 0.23);
}


.journal-trade-symbol:focus,
.journal-trade-amount:focus-within {
  border-color:
    rgba(0, 255, 102, 0.24);

  background:
    rgba(0, 255, 102, 0.025);
}


.journal-trade-amount {
  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    0 10px;
}


.journal-trade-amount > span {
  color:
    rgba(221, 239, 226, 0.4);

  font-size: 14px;
  font-weight: 700;
}


.journal-trade-amount input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color:
    #effff4;

  font-size: 13px;
  font-weight: 740;

  font-family: inherit;
}


.journal-trade-sign {
  display: flex;

  gap: 5px;
}


.journal-trade-sign button {
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    rgba(222, 239, 228, 0.38);

  font-size: 10px;
  font-weight: 750;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}


.journal-trade-sign button:hover {
  color:
    rgba(240, 255, 245, 0.7);
}


.journal-trade-sign button.active.positive {
  border-color:
    rgba(0, 255, 102, 0.3);

  background:
    rgba(0, 255, 102, 0.09);

  color:
    #00ff66;

  box-shadow:
    inset 0 0 18px
    rgba(0, 255, 102, 0.025);
}


.journal-trade-sign button.active.negative {
  border-color:
    rgba(255, 91, 98, 0.3);

  background:
    rgba(255, 91, 98, 0.075);

  color:
    #ff6870;

  box-shadow:
    inset 0 0 18px
    rgba(255, 91, 98, 0.025);
}


.journal-trade-remove {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 91, 98, 0.11);

  border-radius: 8px;

  background:
    rgba(255, 91, 98, 0.025);

  color:
    rgba(255, 112, 120, 0.55);

  cursor: pointer;

  transition:
    150ms ease;
}


.journal-trade-remove:hover {
  border-color:
    rgba(255, 91, 98, 0.26);

  background:
    rgba(255, 91, 98, 0.07);

  color:
    #ff6870;
}


.journal-add-trade-btn {
  width: 100%;
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 9px;

  border:
    1px dashed
    rgba(0, 255, 102, 0.17);

  border-radius: 10px;

  background:
    rgba(0, 255, 102, 0.025);

  color:
    rgba(219, 255, 231, 0.65);

  font-size: 12px;
  font-weight: 730;

  cursor: pointer;

  transition:
    150ms ease;
}


.journal-add-trade-btn:hover {
  border-color:
    rgba(0, 255, 102, 0.32);

  background:
    rgba(0, 255, 102, 0.055);

  color:
    #eaffef;
}


.journal-add-trade-btn svg {
  color:
    #00ff66;
}


.journal-day-total {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 15px;

  margin-top: 11px;

  padding:
    0 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.018);
}


.journal-day-total span {
  color:
    rgba(218, 236, 223, 0.46);

  font-size: 11px;
  font-weight: 700;
}


.journal-day-total strong {
  color:
    #effff4;

  font-size: 21px;
  font-weight: 800;

  letter-spacing:
    -0.03em;
}


.journal-day-total.positive {
  border-color:
    rgba(0, 255, 102, 0.18);

  background:
    rgba(0, 255, 102, 0.035);
}


.journal-day-total.positive strong {
  color:
    #00ff66;
}


.journal-day-total.negative {
  border-color:
    rgba(255, 91, 98, 0.18);

  background:
    rgba(255, 91, 98, 0.03);
}


.journal-day-total.negative strong {
  color:
    #ff6870;
}


.journal-month-control > button:disabled {
  opacity: 0.22;

  cursor: not-allowed;

  pointer-events: none;
}

/* =========================================================
   MODALS
   ========================================================= */

.journal-modal-backdrop {
  position: fixed;

  z-index: 2147483000;

  inset: 0;

  display: grid;
  place-items: center;

  padding:
    34px
    22px;

  overflow: hidden;

  pointer-events: auto;

  overscroll-behavior: contain;

  background:
    rgba(0, 4, 2, 0.88);
}

.journal-day-modal,
.journal-share-modal {
  width:
    min(
      100%,
      570px
    );

  max-height:
    86vh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  border:
    1px solid
    rgba(0, 255, 102, 0.14);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(0, 255, 102, 0.08),
      transparent 38%
    ),
    #050b07;

  box-shadow:
    0 35px 120px
    rgba(0, 0, 0, 0.62);
}

.journal-day-modal::-webkit-scrollbar,
.journal-share-modal::-webkit-scrollbar {
  width: 5px;
}

.journal-day-modal::-webkit-scrollbar-track,
.journal-share-modal::-webkit-scrollbar-track {
  background:
    transparent;
}

.journal-day-modal::-webkit-scrollbar-thumb,
.journal-share-modal::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(0, 255, 102, 0.2);
}

.journal-day-modal {
  padding: 23px;
}

.journal-share-modal {
  padding: 23px;
}

.journal-modal-head {
  display: flex;
  align-items: flex-start;

  justify-content:
    space-between;

  gap: 18px;

  margin-bottom: 24px;
}

.journal-modal-head span {
  display: block;

  color:
    rgba(0, 255, 102, 0.58);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: 0.14em;
}

.journal-modal-head h2 {
  margin:
    5px 0 0;

  color: #f2fff6;

  font-size: 23px;
  font-weight: 770;

  letter-spacing: -0.035em;
}

.journal-modal-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    rgba(235, 250, 240, 0.65);

  cursor: pointer;
}

.journal-field {
  margin-top: 18px;
}

.journal-field > label,
.journal-field-row label {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(230, 246, 235, 0.66);

  font-size: 12px;
  font-weight: 720;
}

.journal-field > small {
  display: block;

  margin-top: 7px;

  color:
    rgba(210, 229, 216, 0.28);

  font-size: 10px;
}

.journal-field-row {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}

.journal-field-row span {
  color:
    rgba(210, 229, 216, 0.31);

  font-size: 10px;
}

.journal-pnl-input-wrap {
  height: 60px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.022);

  transition:
    160ms ease;
}

.journal-pnl-input-wrap:focus-within {
  border-color:
    rgba(0, 255, 102, 0.27);
}

.journal-pnl-input-wrap.positive {
  border-color:
    rgba(0, 255, 102, 0.27);

  box-shadow:
    inset 0 0 28px
    rgba(0, 255, 102, 0.025);
}

.journal-pnl-input-wrap.negative {
  border-color:
    rgba(255, 91, 98, 0.28);

  box-shadow:
    inset 0 0 28px
    rgba(255, 91, 98, 0.025);
}

.journal-pnl-input-wrap > span {
  color:
    rgba(220, 239, 226, 0.45);

  font-size: 25px;
  font-weight: 700;
}

.journal-pnl-input-wrap input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: #effff4;

  font-size: 24px;
  font-weight: 760;

  font-family: inherit;
}

.journal-pnl-input-wrap.positive input {
  color: #00ff66;
}

.journal-pnl-input-wrap.negative input {
  color: #ff6870;
}

.journal-field textarea {
  width: 100%;
  min-height: 125px;

  resize: vertical;

  padding: 13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 11px;

  outline: 0;

  background:
    rgba(255, 255, 255, 0.022);

  color: #eaffef;

  font-size: 12px;
  line-height: 1.6;

  font-family: inherit;

  transition:
    border-color 150ms ease;
}

.journal-field textarea:focus {
  border-color:
    rgba(0, 255, 102, 0.24);
}

.journal-upload {
  min-height: 124px;

  display: flex !important;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 6px;

  margin: 0 !important;

  border:
    1px dashed
    rgba(0, 255, 102, 0.17);

  border-radius: 12px;

  background:
    rgba(0, 255, 102, 0.025);

  color:
    rgba(226, 246, 232, 0.55);

  cursor: pointer;

  transition:
    160ms ease;
}

.journal-upload:hover {
  border-color:
    rgba(0, 255, 102, 0.34);

  background:
    rgba(0, 255, 102, 0.05);
}

.journal-upload input {
  display: none;
}

.journal-upload svg {
  color: #00ff66;
}

.journal-upload strong {
  font-size: 12px;
}

.journal-upload span {
  color:
    rgba(210, 229, 216, 0.3);

  font-size: 9px;
}

.journal-screenshot-preview {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(0, 255, 102, 0.11);

  border-radius: 12px;
}

.journal-screenshot-preview img {
  width: 100%;
  max-height: 270px;

  display: block;

  object-fit: cover;
}

.journal-screenshot-preview button {
  position: absolute;

  top: 10px;
  right: 10px;

  height: 35px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 8px;

  background:
    rgba(0, 0, 0, 0.78);

  color: #ffffff;

  font-size: 10px;

  cursor: pointer;
}

.journal-modal-actions {
  display: flex;
  align-items: center;

  justify-content:
    flex-end;

  gap: 9px;

  margin-top: 23px;
}

.journal-save-btn,
.journal-delete-btn {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 15px;

  border-radius: 10px;

  font-size: 12px;
  font-weight: 760;

  cursor: pointer;
}

.journal-save-btn {
  margin-left: auto;

  border:
    1px solid
    rgba(0, 255, 102, 0.5);

  background:
    #00e95e;

  color: #001b09;
}

.journal-save-btn:hover {
  background: #00ff66;
}

.journal-delete-btn {
  border:
    1px solid
    rgba(255, 91, 98, 0.18);

  background:
    rgba(255, 91, 98, 0.05);

  color:
    rgba(255, 133, 139, 0.82);
}


/* =========================================================
   SHARE CARD
   ========================================================= */

.journal-share-modal {
  width:
    min(
      100%,
      590px
    );
}

.journal-share-card {
  position: relative;

  overflow: hidden;

  padding:
    28px;

  border:
    1px solid
    rgba(0, 255, 102, 0.13);

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 92% 4%,
      rgba(0, 255, 102, 0.17),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #041008,
      #020604
    );
}

.journal-share-card::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.37;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.035)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.035)
      1px,
      transparent 1px
    );

  background-size:
    34px 34px;
}

.journal-share-card > * {
  position: relative;
  z-index: 2;
}

.journal-share-brand {
  color: #f3fff6;

  font-size: 24px;
  font-weight: 850;

  letter-spacing: -0.04em;
}

.journal-share-brand span {
  color: #00ff66;
}

.journal-share-label {
  display: block;

  margin-top: 3px;

  color:
    rgba(0, 255, 102, 0.48);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 0.16em;
}

.journal-share-card h3 {
  margin:
    29px 0 0;

  color: #f1fff5;

  font-size: 30px;
  font-weight: 800;

  letter-spacing: -0.04em;
}

.journal-share-pnl {
  margin-top: 16px;

  color: #f1fff5;

  font-size: 42px;
  font-weight: 820;

  letter-spacing: -0.045em;
}

.journal-share-pnl.positive {
  color: #00ff66;
}

.journal-share-pnl.negative {
  color: #ff5b62;
}

.journal-share-net {
  display: block;

  margin-top: 2px;

  color:
    rgba(220, 239, 226, 0.34);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.14em;
}

.journal-share-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 23px;
}

.journal-share-stats > div {
  min-height: 79px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: 11px;

  border:
    1px solid
    rgba(0, 255, 102, 0.08);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.018);
}

.journal-share-stats span {
  color:
    rgba(210, 229, 216, 0.3);

  font-size: 7px;
  font-weight: 800;
}

.journal-share-stats strong {
  margin-top: 6px;

  color: #effff4;

  font-size: 16px;
  font-weight: 770;
}

.journal-share-calendar {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap: 5px;

  margin-top: 22px;
}

.journal-share-weekday {
  padding-bottom: 4px;

  color:
    rgba(210, 229, 216, 0.3);

  font-size: 7px;
  font-weight: 800;

  text-align: center;
}

.journal-share-calendar > div,
.journal-share-calendar > i {
  min-height: 47px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.045);

  border-radius: 6px;

  background:
    rgba(255, 255, 255, 0.017);

  font-style: normal;
}

.journal-share-calendar > i {
  opacity: 0;
}

.journal-share-calendar > div.profit {
  border-color:
    rgba(0, 255, 102, 0.19);

  background:
    rgba(0, 255, 102, 0.08);
}

.journal-share-calendar > div.loss {
  border-color:
    rgba(255, 91, 98, 0.17);

  background:
    rgba(255, 91, 98, 0.07);
}

.journal-share-calendar > div span {
  color:
    rgba(238, 252, 243, 0.66);

  font-size: 8px;
}

.journal-share-calendar > div strong {
  margin-top: 3px;

  color: #effff4;

  font-size: 7px;
}

.journal-share-calendar > div.profit strong {
  color: #00ff66;
}

.journal-share-calendar > div.loss strong {
  color: #ff6870;
}

.journal-share-footer {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 15px;

  margin-top: 25px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(0, 255, 102, 0.08);
}

.journal-share-footer > span {
  color:
    rgba(0, 255, 102, 0.5);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 0.14em;
}

.journal-share-footer > div {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.25);

  background:
    rgba(0, 255, 102, 0.06);

  color: #00ff66;

  font-size: 13px;
  font-weight: 850;
}

.journal-download-btn {
  width: 100%;
  min-height: 47px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 13px;

  border:
    1px solid
    rgba(0, 255, 102, 0.5);

  border-radius: 10px;

  background: #00e95e;

  color: #001b09;

  font-size: 13px;
  font-weight: 780;

  cursor: pointer;
}

.journal-download-btn:hover {
  background: #00ff66;
}

.journal-share-hint {
  margin:
    9px 0 0;

  color:
    rgba(210, 229, 216, 0.29);

  font-size: 9px;

  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   BOTTOM STRIP
   ========================================================= */

.journal-bottom-strip {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 20px;

  margin-top: 27px;

  padding:
    17px 4px;

  border-top:
    1px solid
    rgba(0, 255, 102, 0.07);
}

.journal-bottom-strip > div {
  display: flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(0, 255, 102, 0.53);
}

.journal-bottom-strip span {
  font-size: 9px;
  font-weight: 850;

  letter-spacing: 0.14em;
}

.journal-bottom-strip p {
  margin: 0;

  color:
    rgba(210, 229, 216, 0.27);

  font-size: 10px;
}


/* =========================================================
   JOURNAL MOTION
   ========================================================= */

@keyframes journalCoreFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-5px);
  }
}

@keyframes journalOrbitOne {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(-15deg);
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(-8deg)
      scale(1.025);
  }
}

@keyframes journalOrbitTwo {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(25deg);
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(18deg)
      scale(1.03);
  }
}

@keyframes journalOrbitThree {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(-4deg);
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(3deg)
      scale(1.02);
  }
}

@keyframes journalDotPulse {
  0%,
  100% {
    opacity: 0.38;

    transform:
      scale(0.85);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.2);
  }
}

@keyframes journalFloatOne {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(4px, -5px, 0);
  }
}

@keyframes journalFloatTwo {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(-5px, 4px, 0);
  }
}

@keyframes journalFloatThree {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(5px, 3px, 0);
  }
}


/* =========================================================
   JOURNAL RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

  .journal-hero {
    grid-template-columns:
      minmax(0, 1fr)
      430px;
  }

  .journal-stat-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .journal-main-grid {
    grid-template-columns:
      1fr;
  }

  .journal-right-column {
    grid-template-columns:
      1.3fr
      0.7fr;

    grid-template-rows:
      auto;
  }
}


@media (max-width: 900px) {

  .pushx-journal-page {
    padding:
      24px
      20px
      55px;
  }

  .journal-hero {
    grid-template-columns:
      1fr;

    padding:
      32px;
  }

  .journal-hero-visual {
    display: none;
  }

  .journal-right-column {
    grid-template-columns:
      1fr;
  }
}


@media (max-width: 760px) {

  .pushx-journal-page {
    padding:
      15px
      12px
      45px;
  }

  .journal-hero {
    min-height: auto;

    padding:
      25px
      20px;

    border-radius: 18px;
  }

  .journal-hero h1 {
    font-size: 38px;
  }

  .journal-hero-copy > p {
    font-size: 13px;
  }

  .journal-hero-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .journal-primary-btn,
  .journal-secondary-btn {
    width: 100%;
  }

  .journal-period-bar {
    align-items: stretch;

    flex-direction: column;
  }

  .journal-month-control {
    justify-content:
      space-between;
  }

  .journal-month-control > div {
    min-width: 0;
  }

  .journal-today-btn {
    width: 100%;
  }

  .journal-stat-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .journal-stat-card {
    min-height: 130px;

    padding: 15px;
  }

  .journal-stat-card > strong {
    font-size: 20px;
  }

  .journal-stat-card-main > strong {
    font-size: 23px;
  }

  .journal-calendar-panel {
    padding: 14px;
  }

  .journal-calendar-grid,
  .journal-calendar-weekdays {
    gap: 4px;
  }

  .journal-calendar-day {
    padding: 7px;

    border-radius: 7px;
  }

  .journal-day-top span {
    font-size: 10px;
  }

  .journal-calendar-day > strong {
    font-size: 9px;
  }

  .journal-day-top svg {
    width: 11px;
    height: 11px;
  }

  .journal-panel-head {
    align-items: flex-start;
  }

  .journal-heat-legend {
    display: none;
  }

  .journal-modal-backdrop {
    padding: 10px;
  }

  .journal-day-modal,
  .journal-share-modal {
    border-radius: 16px;
  }

  .journal-modal-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .journal-delete-btn,
  .journal-save-btn {
    width: 100%;

    margin-left: 0;
  }

  .journal-share-card {
    padding: 19px;
  }

  .journal-share-card h3 {
    font-size: 26px;
  }

  .journal-share-pnl {
    font-size: 34px;
  }

  .journal-share-stats {
    gap: 5px;
  }

  .journal-share-stats > div {
    padding: 8px;
  }

  .journal-share-stats strong {
    font-size: 13px;
  }

  .journal-share-calendar {
    gap: 3px;
  }

  .journal-share-calendar > div,
  .journal-share-calendar > i {
    min-height: 39px;
  }

  .journal-bottom-strip {
    align-items: flex-start;

    flex-direction: column;
  }
    .journal-trade-row {
    grid-template-columns:
      30px
      1fr
      1fr;

    gap: 6px;
  }

  .journal-trade-index {
    grid-row:
      1 / 3;
  }

  .journal-trade-symbol {
    grid-column: 2;
  }

  .journal-trade-amount {
    grid-column: 3;
  }

  .journal-trade-sign {
    grid-column:
      2 / 4;
  }

  .journal-trade-sign button {
    flex: 1;
  }

  .journal-trade-remove {
    grid-column:
      2 / 4;

    width: 100%;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {

  .journal-core,
  .journal-orbit-one,
  .journal-orbit-two,
  .journal-orbit-three,
  .journal-orbit-dot,
  .journal-float-profit,
  .journal-float-review,
  .journal-float-discipline {
    animation:
      none !important;
  }
}

/* =========================================================
   PUSHX TRADE DIARY
   ========================================================= */

.pushx-diary-page {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  padding:
    32px
    34px
    72px;
}


/* =========================================================
   DIARY HERO
   ========================================================= */

.diary-hero {
  position: relative;

  min-height: 330px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    570px;

  align-items: center;

  overflow: hidden;

  padding:
    40px
    46px;

  border:
    1px solid
    rgba(0, 255, 102, 0.1);

  border-radius:
    24px;

  background:
    linear-gradient(
      115deg,
      rgba(4, 12, 7, 0.94),
      rgba(3, 10, 6, 0.82) 54%,
      rgba(1, 8, 4, 0.44)
    );

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.28);

  isolation: isolate;
}

.diary-hero::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: -220px;
  right: -80px;

  width: 760px;
  height: 720px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.22),
      rgba(0, 255, 102, 0.07) 31%,
      transparent 69%
    );
}

.diary-hero-copy {
  position: relative;
  z-index: 5;

  max-width: 650px;
}

.diary-kicker {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 16px;

  color: #00ff66;

  font-size: 12px;
  font-weight: 800;

  letter-spacing:
    0.18em;
}

.diary-hero h1 {
  margin: 0;

  color: #f4fff7;

  font-size:
    clamp(
      42px,
      4.3vw,
      68px
    );

  font-weight: 780;

  line-height: 0.98;

  letter-spacing:
    -0.052em;
}

.diary-hero h1 span {
  color: #00ff66;

  text-shadow:
    0 0 28px
    rgba(0, 255, 102, 0.11);
}

.diary-hero-copy > p {
  max-width: 590px;

  margin:
    21px
    0
    0;

  color:
    rgba(220, 238, 226, 0.58);

  font-size: 15px;

  line-height: 1.7;
}

.diary-create-main {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 26px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(0, 255, 102, 0.55);

  border-radius: 11px;

  background:
    #00e95e;

  color:
    #001b0a;

  font-size: 13px;
  font-weight: 780;

  cursor: pointer;

  box-shadow:
    0 10px 30px
    rgba(0, 255, 102, 0.13);

  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.diary-create-main:hover {
  transform:
    translateY(-2px);

  background:
    #00ff66;

  box-shadow:
    0 13px 38px
    rgba(0, 255, 102, 0.18);
}


/* =========================================================
   BOOK SCENE
   ========================================================= */

.diary-book-scene {
  position: relative;

  width: 100%;
  height: 270px;
}

.diary-scene-grid {
  position: absolute;

  inset:
    -50px
    -50px
    -50px
    -70px;

  opacity: 0.38;

  background-image:
    linear-gradient(
      rgba(0, 255, 102, 0.05)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.05)
      1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    radial-gradient(
      circle at 55% 50%,
      black,
      transparent 72%
    );
}

.diary-book {
  position: absolute;

  z-index: 5;

  top: 50%;
  left: 52%;

  width: 235px;
  height: 150px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  transform:
    translate(-50%, -50%)
    perspective(700px)
    rotateX(8deg);

  border:
    1px solid
    rgba(0, 255, 102, 0.26);

  border-radius:
    11px
    11px
    17px
    17px;

  background:
    linear-gradient(
      140deg,
      rgba(4, 22, 11, 0.98),
      rgba(2, 10, 5, 0.98)
    );

  box-shadow:
    0 30px 60px
    rgba(0, 0, 0, 0.42),
    0 0 45px
    rgba(0, 255, 102, 0.09);

  animation:
    diaryBookFloat
    6s
    ease-in-out
    infinite;

  will-change:
    transform;
}

.diary-book::before {
  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px solid
    rgba(0, 255, 102, 0.09);

  border-radius: 8px;

  pointer-events: none;
}

.diary-book-spine {
  position: absolute;

  z-index: 5;

  top: 7px;
  bottom: 7px;

  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      transparent,
      rgba(0, 255, 102, 0.42),
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(0, 255, 102, 0.18);
}

.diary-book-left,
.diary-book-right {
  position: relative;
  z-index: 3;

  padding: 24px;
}

.diary-book-left {
  display: flex;
  flex-direction: column;

  gap: 10px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.025);
}

.diary-book-left span {
  color:
    rgba(0, 255, 102, 0.68);

  font-size: 10px;
  font-weight: 850;

  letter-spacing:
    0.12em;
}

.diary-book-left div {
  height: 2px;

  border-radius:
    20px;

  background:
    linear-gradient(
      90deg,
      rgba(0, 255, 102, 0.27),
      rgba(0, 255, 102, 0.035)
    );
}

.diary-book-left div:nth-of-type(2) {
  width: 75%;
}

.diary-book-left div:nth-of-type(3) {
  width: 52%;
}

.diary-book-right {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  color: #00ff66;
}

.diary-book-right strong {
  margin-top: 8px;

  color: #effff4;

  font-size: 17px;

  letter-spacing:
    0.05em;
}

.diary-book-right small {
  margin-top: 3px;

  color:
    rgba(0, 255, 102, 0.5);

  font-size: 7px;
  font-weight: 850;

  letter-spacing:
    0.16em;
}

.diary-book-orbit {
  position: absolute;

  top: 50%;
  left: 52%;

  border:
    1px solid
    rgba(0, 255, 102, 0.13);

  border-radius: 50%;

  pointer-events: none;
}

.diary-book-orbit-one {
  width: 340px;
  height: 135px;

  transform:
    translate(-50%, -50%)
    rotate(-12deg);

  animation:
    diaryOrbitOne
    13s
    ease-in-out
    infinite;
}

.diary-book-orbit-two {
  width: 410px;
  height: 185px;

  transform:
    translate(-50%, -50%)
    rotate(21deg);

  opacity: 0.5;

  animation:
    diaryOrbitTwo
    16s
    ease-in-out
    infinite;
}

.diary-scene-chip {
  position: absolute;
  z-index: 7;

  min-height: 34px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(0, 255, 102, 0.17);

  border-radius: 9px;

  background:
    rgba(2, 10, 6, 0.92);

  color:
    rgba(222, 255, 232, 0.72);

  font-size: 10px;
  font-weight: 800;

  letter-spacing:
    0.08em;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.26);
}

.diary-scene-chip svg {
  color: #00ff66;
}

.diary-scene-entry {
  top: 30px;
  left: 34px;

  animation:
    diaryChipOne
    5.8s
    ease-in-out
    infinite;
}

.diary-scene-risk {
  top: 68px;
  right: 8px;

  animation:
    diaryChipTwo
    6.3s
    ease-in-out
    infinite;
}

.diary-scene-review {
  bottom: 28px;
  left: 28px;

  animation:
    diaryChipThree
    6.1s
    ease-in-out
    infinite;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.diary-overview-strip {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 12px;

  margin-top: 18px;
}

.diary-overview-strip article {
  min-height: 100px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding:
    17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 15, 9, 0.94),
      rgba(3, 9, 6, 0.9)
    );

  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.diary-overview-strip article:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(0, 255, 102, 0.16);
}

.diary-overview-strip article > svg {
  width: 42px;
  height: 42px;

  padding: 10px;

  flex:
    0 0 42px;

  border:
    1px solid
    rgba(0, 255, 102, 0.14);

  border-radius: 11px;

  background:
    rgba(0, 255, 102, 0.04);

  color: #00ff66;
}

.diary-overview-strip span {
  display: block;

  color:
    rgba(214, 232, 220, 0.36);

  font-size: 9px;
  font-weight: 800;

  letter-spacing:
    0.1em;
}

.diary-overview-strip strong {
  display: block;

  margin-top: 4px;

  color: #effff4;

  font-size: 24px;
  font-weight: 780;
}

.diary-overview-strip strong small {
  color:
    rgba(0, 255, 102, 0.45);

  font-size: 11px;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.diary-control-panel {
  display: grid;

  grid-template-columns:
    auto
    minmax(240px, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  margin-top: 18px;

  padding: 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 14px;

  background:
    rgba(3, 10, 6, 0.72);
}

.diary-market-tabs {
  display: flex;

  gap: 4px;
}

.diary-market-tabs button {
  height: 42px;

  padding:
    0 15px;

  border: 0;

  border-radius: 9px;

  background:
    transparent;

  color:
    rgba(221, 238, 226, 0.44);

  font-size: 12px;
  font-weight: 720;

  cursor: pointer;
}

.diary-market-tabs button.active {
  background:
    rgba(0, 255, 102, 0.075);

  color: #effff4;

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 255, 102, 0.18);
}

.diary-search {
  height: 42px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.015);

  color:
    rgba(220, 238, 225, 0.28);
}

.diary-search:focus-within {
  border-color:
    rgba(0, 255, 102, 0.2);
}

.diary-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background:
    transparent;

  color: #effff4;

  font-size: 12px;

  font-family: inherit;
}

.diary-view-switch {
  display: flex;

  gap: 4px;
}

.diary-view-switch button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.015);

  color:
    rgba(220, 238, 225, 0.35);

  cursor: pointer;
}

.diary-view-switch button.active {
  border-color:
    rgba(0, 255, 102, 0.18);

  background:
    rgba(0, 255, 102, 0.06);

  color: #00ff66;
}

.diary-result-filters {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 11px;
}

.diary-result-filters button {
  min-height: 36px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.015);

  color:
    rgba(220, 238, 225, 0.42);

  font-size: 11px;
  font-weight: 680;

  cursor: pointer;
}

.diary-result-filters button.active {
  border-color:
    rgba(0, 255, 102, 0.18);

  background:
    rgba(0, 255, 102, 0.055);

  color: #effff4;
}

.diary-result-filters button.active.profit {
  color: #00ff66;
}

.diary-result-filters button.active.loss {
  border-color:
    rgba(255, 91, 98, 0.18);

  background:
    rgba(255, 91, 98, 0.045);

  color: #ff6870;
}


/* =========================================================
   TRADE CARDS
   ========================================================= */

.diary-trades-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: 18px;
}

.diary-trades-list {
  display: grid;

  grid-template-columns:
    1fr;

  gap: 9px;

  margin-top: 18px;
}

.diary-trade-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 14, 9, 0.96),
      rgba(3, 9, 6, 0.92)
    );

  cursor: pointer;

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.diary-trade-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(0, 255, 102, 0.18);

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.27);
}

.diary-trade-card.pinned {
  border-color:
    rgba(0, 255, 102, 0.22);
}

.diary-trade-preview {
  position: relative;

  aspect-ratio:
    16 / 8.8;

  overflow: hidden;

  background: #020604;
}

.diary-trade-preview img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(0.55)
    saturate(0.85);

  transform:
    scale(1.02);

  transition:
    250ms ease;
}

.diary-trade-card:hover
.diary-trade-preview img {
  filter:
    brightness(0.68)
    saturate(0.95);

  transform:
    scale(1.045);
}

.diary-trade-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color:
    rgba(0, 255, 102, 0.24);

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.07),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      #041008,
      #020604
    );
}

.diary-trade-placeholder span {
  font-size: 8px;
  font-weight: 850;

  letter-spacing:
    0.15em;
}

.diary-preview-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(1, 7, 4, 0.05),
      rgba(1, 7, 4, 0.15) 45%,
      rgba(1, 7, 4, 0.91)
    );
}

.diary-preview-top,
.diary-preview-bottom {
  position: absolute;
  z-index: 3;

  left: 12px;
  right: 12px;

  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 8px;
}

.diary-preview-top {
  top: 12px;
}

.diary-preview-bottom {
  bottom: 12px;
}

.diary-market-label,
.diary-pinned-label {
  min-height: 27px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding:
    0 8px;

  border:
    1px solid
    rgba(0, 255, 102, 0.16);

  border-radius: 7px;

  background:
    rgba(2, 10, 6, 0.84);

  color:
    rgba(0, 255, 102, 0.8);

  font-size: 8px;
  font-weight: 850;

  letter-spacing:
    0.1em;
}

.diary-pinned-label {
  background:
    rgba(0, 255, 102, 0.10);

  color: #00ff66;
}

.diary-preview-bottom > strong {
  color: #effff4;

  font-size: 17px;
  font-weight: 800;
}

.diary-preview-bottom > span {
  font-size: 15px;
  font-weight: 820;
}

.diary-preview-bottom .positive {
  color: #00ff66;
}

.diary-preview-bottom .negative {
  color: #ff6870;
}

.diary-trade-card-body {
  padding: 17px;
}

.diary-trade-title-row {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}

.diary-trade-title-row span {
  display: block;

  color:
    rgba(0, 255, 102, 0.48);

  font-size: 9px;
  font-weight: 800;

  letter-spacing:
    0.05em;
}

.diary-trade-title-row h3 {
  margin:
    5px 0 0;

  color: #effff4;

  font-size: 15px;
  font-weight: 760;
}

.diary-trade-title-row > svg {
  color:
    rgba(0, 255, 102, 0.55);
}

.diary-trade-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 13px;
}

.diary-trade-meta span {
  min-height: 28px;

  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    0 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.015);

  color:
    rgba(215, 233, 220, 0.43);

  font-size: 9px;
}

.diary-trade-card-body > p {
  min-height: 46px;

  margin:
    13px 0 0;

  overflow: hidden;

  color:
    rgba(211, 229, 217, 0.40);

  font-size: 10px;

  line-height: 1.55;

  display:
    -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.diary-trade-card-body > button {
  width: 100%;
  height: 39px;

  display: flex;
  align-items: center;

  justify-content:
    space-between;

  margin-top: 15px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(0, 255, 102, 0.11);

  border-radius: 8px;

  background:
    rgba(0, 255, 102, 0.035);

  color:
    rgba(225, 255, 234, 0.68);

  font-size: 10px;
  font-weight: 720;

  cursor: pointer;
}

.diary-trade-card.compact {
  display: grid;

  grid-template-columns:
    230px
    minmax(0, 1fr);
}

.diary-trade-card.compact
.diary-trade-preview {
  aspect-ratio: auto;

  min-height: 165px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.diary-empty {
  min-height: 360px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  margin-top: 18px;

  padding: 40px;

  border:
    1px solid
    rgba(0, 255, 102, 0.07);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at center,
      rgba(0, 255, 102, 0.05),
      transparent 48%
    ),
    rgba(3, 10, 6, 0.58);

  text-align: center;
}

.diary-empty-icon {
  width: 70px;
  height: 70px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(0, 255, 102, 0.18);

  border-radius: 50%;

  background:
    rgba(0, 255, 102, 0.045);

  color: #00ff66;
}

.diary-empty > span {
  margin-top: 18px;

  color:
    rgba(0, 255, 102, 0.48);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.15em;
}

.diary-empty h2 {
  margin:
    7px 0 0;

  color: #effff4;

  font-size: 23px;
}

.diary-empty p {
  max-width: 430px;

  margin:
    9px 0 0;

  color:
    rgba(211, 229, 217, 0.38);

  font-size: 11px;

  line-height: 1.6;
}

.diary-empty button {
  min-height: 43px;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(0, 255, 102, 0.45);

  border-radius: 9px;

  background: #00e95e;

  color: #001b09;

  font-size: 12px;
  font-weight: 760;

  cursor: pointer;
}


/* =========================================================
   RETENTION
   ========================================================= */

.diary-retention-note {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  margin-top: 20px;

  padding:
    15px 17px;

  border:
    1px solid
    rgba(0, 255, 102, 0.07);

  border-radius: 11px;

  background:
    rgba(0, 255, 102, 0.018);

  color:
    rgba(0, 255, 102, 0.48);
}

.diary-retention-note strong {
  display: block;

  color:
    rgba(229, 249, 235, 0.62);

  font-size: 11px;
}

.diary-retention-note span {
  display: block;

  margin-top: 4px;

  color:
    rgba(210, 229, 216, 0.30);

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================================
   DIARY MODALS
   ========================================================= */

.diary-modal-backdrop {
  position: fixed;

  z-index: 2147483000;

  inset: 0;

  display: grid;
  place-items: center;

  padding:
    30px
    22px;

  overflow: hidden;

  background:
    rgba(0, 4, 2, 0.89);

  overscroll-behavior:
    contain;
}

.diary-create-modal,
.diary-details-modal {
  width:
    min(
      100%,
      720px
    );

  max-height:
    88vh;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior:
    contain;

  padding: 24px;

  border:
    1px solid
    rgba(0, 255, 102, 0.14);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(0, 255, 102, 0.08),
      transparent 38%
    ),
    #050b07;

  box-shadow:
    0 35px 120px
    rgba(0, 0, 0, 0.65);
}

.diary-create-modal::-webkit-scrollbar,
.diary-details-modal::-webkit-scrollbar {
  width: 5px;
}

.diary-create-modal::-webkit-scrollbar-thumb,
.diary-details-modal::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(0, 255, 102, 0.2);
}

.diary-modal-head {
  display: flex;
  align-items: flex-start;

  justify-content:
    space-between;

  gap: 18px;

  margin-bottom: 22px;
}

.diary-modal-head > div > span {
  display: block;

  color:
    rgba(0, 255, 102, 0.58);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.14em;
}

.diary-modal-head h2 {
  margin:
    5px 0 0;

  color: #f2fff6;

  font-size: 24px;
  font-weight: 770;

  letter-spacing:
    -0.035em;
}

.diary-modal-head > button {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    rgba(235, 250, 240, 0.65);

  cursor: pointer;
}

.diary-type-switch {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 7px;

  margin-bottom: 18px;

  padding: 5px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.015);
}

.diary-type-switch button {
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color:
    rgba(220, 238, 225, 0.42);

  font-size: 12px;
  font-weight: 720;

  cursor: pointer;
}

.diary-type-switch button.active {
  background:
    rgba(0, 255, 102, 0.075);

  color: #effff4;

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 255, 102, 0.18);
}

.diary-type-switch button.active svg {
  color: #00ff66;
}


/* =========================================================
   FORM
   ========================================================= */

.diary-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 13px;
}

.diary-form-grid-four {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.diary-form-field {
  display: block;

  margin-top: 13px;
}

.diary-form-field > span,
.diary-field-head > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(229, 247, 235, 0.62);

  font-size: 11px;
  font-weight: 720;
}

.diary-form-field input,
.diary-form-field textarea {
  width: 100%;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 10px;

  outline: 0;

  background:
    rgba(255, 255, 255, 0.02);

  color: #effff4;

  font-family: inherit;

  transition:
    border-color 150ms ease;
}

.diary-form-field input {
  height: 47px;

  padding:
    0 12px;

  font-size: 13px;
  font-weight: 680;
}

.diary-form-field textarea {
  min-height: 135px;

  resize: vertical;

  padding: 12px;

  font-size: 12px;

  line-height: 1.6;
}

.diary-form-field input:focus,
.diary-form-field textarea:focus {
  border-color:
    rgba(0, 255, 102, 0.25);
}

.diary-form-field > small {
  display: block;

  margin-top: 5px;

  color:
    rgba(210, 229, 216, 0.25);

  font-size: 8px;
}

.diary-field-head {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 10px;
}

.diary-field-head small {
  color:
    rgba(210, 229, 216, 0.3);

  font-size: 9px;
}

.diary-direction-switch {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 7px;
}

.diary-direction-switch button {
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    rgba(220, 238, 225, 0.4);

  font-size: 11px;
  font-weight: 760;

  cursor: pointer;
}

.diary-direction-switch
button.active.positive {
  border-color:
    rgba(0, 255, 102, 0.3);

  background:
    rgba(0, 255, 102, 0.085);

  color: #00ff66;
}

.diary-direction-switch
button.active.negative {
  border-color:
    rgba(255, 91, 98, 0.28);

  background:
    rgba(255, 91, 98, 0.07);

  color: #ff6870;
}

.diary-pnl-field {
  height: 57px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.02);
}

.diary-pnl-field > span {
  color:
    rgba(220, 239, 226, 0.4);

  font-size: 21px;
  font-weight: 700;
}

.diary-pnl-field input {
  height: auto;

  padding: 0;

  border: 0;

  background:
    transparent;

  font-size: 21px;
  font-weight: 780;
}

.diary-pnl-field.positive {
  border-color:
    rgba(0, 255, 102, 0.25);
}

.diary-pnl-field.positive input {
  color: #00ff66;
}

.diary-pnl-field.negative {
  border-color:
    rgba(255, 91, 98, 0.25);
}

.diary-pnl-field.negative input {
  color: #ff6870;
}

.diary-result-switch {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;

  margin-top: 8px;
}

.diary-result-switch button {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    rgba(220, 238, 225, 0.4);

  font-size: 11px;
  font-weight: 760;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.diary-result-switch
button.active.profit {
  border-color:
    rgba(0, 255, 102, 0.3);

  background:
    rgba(0, 255, 102, 0.085);

  color: #00ff66;
}

.diary-result-switch
button.active.loss {
  border-color:
    rgba(255, 91, 98, 0.28);

  background:
    rgba(255, 91, 98, 0.07);

  color: #ff6870;
}

.diary-upload {
  min-height: 130px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 6px;

  border:
    1px dashed
    rgba(0, 255, 102, 0.18);

  border-radius: 11px;

  background:
    rgba(0, 255, 102, 0.025);

  color:
    rgba(229, 247, 235, 0.58);

  cursor: pointer;
}

.diary-upload input {
  display: none;
}

.diary-upload svg {
  color: #00ff66;
}

.diary-upload strong {
  font-size: 12px;
}

.diary-upload small {
  color:
    rgba(210, 229, 216, 0.28);

  font-size: 9px;
}

.diary-upload-preview {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(0, 255, 102, 0.11);

  border-radius: 11px;
}

.diary-upload-preview img {
  width: 100%;
  max-height: 330px;

  display: block;

  object-fit: cover;
}

.diary-upload-preview button {
  position: absolute;

  top: 10px;
  right: 10px;

  min-height: 35px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  background:
    rgba(0, 0, 0, 0.8);

  color: #fff;

  font-size: 10px;

  cursor: pointer;
}

.diary-save-trade {
  width: 100%;
  min-height: 47px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 21px;

  border:
    1px solid
    rgba(0, 255, 102, 0.5);

  border-radius: 10px;

  background:
    #00e95e;

  color: #001b09;

  font-size: 13px;
  font-weight: 780;

  cursor: pointer;
}

.diary-save-trade:hover {
  background: #00ff66;
}


/* =========================================================
   DETAILS
   ========================================================= */

.diary-detail-image {
  overflow: hidden;

  min-height: 240px;

  border:
    1px solid
    rgba(0, 255, 102, 0.08);

  border-radius: 13px;

  background: #020604;
}

.diary-detail-image img {
  width: 100%;
  max-height: 430px;

  display: block;

  object-fit: contain;

  background: #020604;
}

.diary-detail-image-empty {
  display: grid;
  place-items: center;

  color:
    rgba(0, 255, 102, 0.24);

  background:
    radial-gradient(
      circle,
      rgba(0, 255, 102, 0.07),
      transparent 60%
    );
}

.diary-detail-header {
  display: flex;
  align-items: center;

  justify-content:
    space-between;

  gap: 15px;

  margin-top: 18px;
}

.diary-detail-header > div > span {
  display: block;

  color:
    rgba(0, 255, 102, 0.55);

  font-size: 9px;
  font-weight: 850;

  letter-spacing:
    0.12em;
}

.diary-detail-header > div > strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(229, 247, 235, 0.55);

  font-size: 11px;
}

.diary-detail-header > strong {
  font-size: 24px;
  font-weight: 800;
}

.diary-detail-header
.positive {
  color: #00ff66;
}

.diary-detail-header
.negative {
  color: #ff6870;
}

.diary-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 18px;
}

.diary-detail-grid > div {
  min-height: 75px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.016);
}

.diary-detail-grid span {
  color:
    rgba(210, 229, 216, 0.3);

  font-size: 8px;
  font-weight: 750;
}

.diary-detail-grid strong {
  margin-top: 5px;

  color: #effff4;

  font-size: 13px;
}

.diary-detail-note {
  margin-top: 18px;

  padding: 15px;

  border:
    1px solid
    rgba(0, 255, 102, 0.07);

  border-radius: 10px;

  background:
    rgba(0, 255, 102, 0.018);
}

.diary-detail-note > span {
  color:
    rgba(0, 255, 102, 0.52);

  font-size: 8px;
  font-weight: 850;

  letter-spacing:
    0.12em;
}

.diary-detail-note p {
  margin:
    8px 0 0;

  color:
    rgba(225, 242, 230, 0.57);

  font-size: 11px;

  line-height: 1.65;

  white-space:
    pre-wrap;
}

.diary-detail-actions {
  display: flex;

  gap: 8px;

  margin-top: 18px;
}

.diary-pin-action,
.diary-delete-action {
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    0 14px;

  border-radius: 9px;

  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

.diary-pin-action {
  flex: 1;

  border:
    1px solid
    rgba(0, 255, 102, 0.15);

  background:
    rgba(0, 255, 102, 0.04);

  color:
    rgba(227, 255, 235, 0.66);
}

.diary-pin-action.active {
  border-color:
    rgba(0, 255, 102, 0.32);

  background:
    rgba(0, 255, 102, 0.09);

  color: #00ff66;
}

.diary-delete-action {
  border:
    1px solid
    rgba(255, 91, 98, 0.17);

  background:
    rgba(255, 91, 98, 0.04);

  color:
    rgba(255, 116, 123, 0.72);
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes diaryBookFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      perspective(700px)
      rotateX(8deg)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      perspective(700px)
      rotateX(8deg)
      translateY(-6px);
  }
}

@keyframes diaryOrbitOne {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(-12deg);
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(-5deg)
      scale(1.025);
  }
}

@keyframes diaryOrbitTwo {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(21deg);
  }

  50% {
    transform:
      translate(-50%, -50%)
      rotate(14deg)
      scale(1.03);
  }
}

@keyframes diaryChipOne {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(4px, -5px, 0);
  }
}

@keyframes diaryChipTwo {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(-5px, 4px, 0);
  }
}

@keyframes diaryChipThree {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(5px, 3px, 0);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

  .diary-hero {
    grid-template-columns:
      minmax(0, 1fr)
      430px;
  }

  .diary-trades-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 900px) {

  .pushx-diary-page {
    padding:
      24px
      20px
      55px;
  }

  .diary-hero {
    grid-template-columns:
      1fr;

    padding: 32px;
  }

  .diary-book-scene {
    display: none;
  }

  .diary-overview-strip {
    grid-template-columns:
      1fr 1fr;
  }

  .diary-control-panel {
    grid-template-columns:
      1fr;
  }

  .diary-market-tabs {
    width: 100%;
  }

  .diary-market-tabs button {
    flex: 1;
  }

}


@media (max-width: 760px) {

  .pushx-diary-page {
    padding:
      15px
      12px
      45px;
  }

  .diary-hero {
    min-height: auto;

    padding:
      25px
      20px;

    border-radius:
      18px;
  }

  .diary-hero h1 {
    font-size: 38px;
  }

  .diary-hero-copy > p {
    font-size: 13px;
  }

  .diary-create-main {
    width: 100%;
  }

  .diary-overview-strip {
    gap: 7px;
  }

  .diary-overview-strip article {
    min-height: 88px;

    padding: 12px;
  }

  .diary-overview-strip strong {
    font-size: 19px;
  }

  .diary-trades-grid {
    grid-template-columns:
      1fr;
  }

  .diary-trade-card.compact {
    grid-template-columns:
      1fr;
  }

  .diary-form-grid,
  .diary-form-grid-four {
    grid-template-columns:
      1fr;
  }

  .diary-detail-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .diary-detail-actions {
    flex-direction:
      column;
  }

  .diary-pin-action,
  .diary-delete-action {
    width: 100%;
  }

  .diary-modal-backdrop {
    padding: 10px;
  }

  .diary-create-modal,
  .diary-details-modal {
    padding: 18px;

    border-radius: 16px;
  }

}


@media (
  prefers-reduced-motion:
  reduce
) {

  .diary-book,
  .diary-book-orbit-one,
  .diary-book-orbit-two,
  .diary-scene-entry,
  .diary-scene-risk,
  .diary-scene-review {
    animation:
      none !important;
  }

}

/* =========================================================
   PUSHX — NARROW DESKTOP HERO GLOBE
   ========================================================= */

@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
  .dashboard-hero-scene {
    top: 5px !important;
  }

  .dashboard-hero-globe {
    top: 0 !important;
  }

  /* все три эллипса центрируем относительно шара */

  .dashboard-hero-orbit-one {
    top: 8px !important;
    right: -280px !important;
  }

  .dashboard-hero-orbit-two {
    top: 43px !important;
    right: -225px !important;
  }

  .dashboard-hero-orbit-three {
    top: -48px !important;
    right: -330px !important;
  }
}

/* =========================================================
   PUSHX — PHONE HERO FINAL POSITION
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (max-width: 760px) {

  /* вся композиция: планета + орбиты */
  .dashboard-hero-scene {
    top: 50px !important;
    right: -90px !important;

    transform:
      translate3d(-22px, -22px, 0) !important;
  }

  /* сама планета */
  .dashboard-hero-globe {
    top: 0 !important;
    right: 2px !important;
  }

  /* орбиты центрируем относительно планеты */

  .dashboard-hero-orbit-one {
    top: 0 !important;
    right: -223px !important;
  }

  .dashboard-hero-orbit-two {
    top: 35px !important;
    right: -168px !important;
  }

  .dashboard-hero-orbit-three {
    top: -55px !important;
    right: -273px !important;
  }
}

/* =========================================================
   MOBILE — ECONOMIC CALENDAR FEATURED EVENT
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (max-width: 760px) {

  .calendar-featured-card {
    min-height: 0 !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;

    column-gap: 16px !important;
    row-gap: 12px !important;

    padding: 24px 20px !important;
  }

  .calendar-featured-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    width: 72px !important;
    height: 72px !important;

    align-self: start !important;
  }

  .calendar-featured-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    width: 100% !important;
  }

  .calendar-featured-title {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: 30px !important;
    line-height: 0.98 !important;
  }

  .calendar-featured-description {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 4px 0 0 !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .calendar-featured-button {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 4px !important;
  }
}

/* =========================================================
   MOBILE — NON-FARM CARD
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (max-width: 760px) {

  .pushx-nfp-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;

    column-gap: 16px !important;
    row-gap: 10px !important;

    min-height: 0 !important;
    height: auto !important;

    padding: 22px 20px !important;
  }

  .pushx-nfp-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    position: relative !important;
    inset: auto !important;

    width: 64px !important;
    height: 64px !important;

    margin: 0 !important;

    align-self: start !important;
  }

  .pushx-nfp-copy {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .pushx-nfp-topline {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .pushx-nfp-topline > span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .pushx-nfp-impact {
    font-size: 10px !important;
    line-height: 1 !important;

    padding: 7px 9px !important;
  }

  .pushx-nfp-copy h2 {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: 28px !important;
    line-height: 0.98 !important;

    white-space: normal !important;
  }

  .pushx-nfp-copy p {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 14px 0 0 !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .pushx-nfp-button {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 52px !important;

    margin: 4px 0 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 18px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 760px) {

  .pushx-nfp-copy {
    display: contents !important;
  }

  .pushx-nfp-topline {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .pushx-nfp-copy h2 {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .pushx-nfp-copy p {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* =========================================================
   DASHBOARD NEWS WIDGET
   ========================================================= */

.dashboard-news-widget {
  position:
    relative;

  z-index:
    20;

  min-height:
    72px;

  margin:
    -78px 0 22px;

  padding:
    14px 16px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    14px;

  background:
    linear-gradient(
      110deg,
      rgba(10, 14, 11, 0.92),
      rgba(6, 9, 7, 0.82)
    );

  color:
    inherit;

  text-decoration:
    none;

  overflow:
    hidden;

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, 0.14);

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}


.dashboard-news-widget::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    2px;

  height:
    100%;

  background:
    rgba(198, 255, 54, 0.7);

  opacity:
    0;
}


.dashboard-news-widget:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(198, 255, 54, 0.13);

  background:
    linear-gradient(
      110deg,
      rgba(13, 18, 13, 0.96),
      rgba(7, 11, 8, 0.88)
    );
}


.dashboard-news-widget-unread {
  border-color:
    rgba(198, 255, 54, 0.12);

  background:
    linear-gradient(
      110deg,
      rgba(198, 255, 54, 0.055),
      rgba(7, 11, 8, 0.88) 45%
    );
}


.dashboard-news-widget-unread::before {
  opacity:
    1;
}


.dashboard-news-widget-icon {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(198, 255, 54, 0.12);

  border-radius:
    11px;

  background:
    rgba(198, 255, 54, 0.045);

  color:
    rgba(198, 255, 54, 0.82);
}


.dashboard-news-widget-copy {
  min-width:
    0;

  flex:
    1;
}


.dashboard-news-widget-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    6px;

  color:
    rgba(255, 255, 255, 0.32);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    0.11em;
}


.dashboard-news-widget-meta > span {
  color:
    rgba(198, 255, 54, 0.72);
}


.dashboard-news-widget-meta > i {
  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.18);
}


.dashboard-news-widget-meta time {
  font-style:
    normal;

  letter-spacing:
    0.04em;
}


.dashboard-news-widget-meta strong {
  padding:
    3px 6px;

  border-radius:
    999px;

  background:
    rgba(198, 255, 54, 0.09);

  color:
    var(--dash-green);

  font-size:
    7px;

  letter-spacing:
    0.08em;
}


.dashboard-news-widget-title {
  max-width:
    760px;

  overflow:
    hidden;

  color:
    rgba(246, 249, 244, 0.88);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.dashboard-news-widget-action {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding-left:
    14px;

  color:
    rgba(255, 255, 255, 0.38);

  font-size:
    9px;

  font-weight:
    600;

  transition:
    color 0.2s ease;
}


.dashboard-news-widget:hover
.dashboard-news-widget-action {
  color:
    rgba(198, 255, 54, 0.85);
}


/* после появления News Widget сетку больше
   не тянем вверх относительно самого виджета */

.dashboard-news-widget
+ .dashboard-tools-grid {
  margin-top:
    0;
}


@media (min-width: 821px) and (max-width: 1200px) {
  .dashboard-news-widget {
    margin-top:
      18px;
  }

  .dashboard-news-widget
  + .dashboard-tools-grid {
    margin-top:
      13px;
  }
}


@media (max-width: 760px) {
  .dashboard-news-widget {
    min-height:
      64px;

    margin:
      -50px 0 14px;

    padding:
      11px 12px;

    gap:
      10px;

    border-radius:
      13px;
  }

  .dashboard-news-widget-icon {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;

    border-radius:
      10px;
  }

  .dashboard-news-widget-meta {
    gap:
      5px;

    margin-bottom:
      5px;

    font-size:
      7px;
  }

  .dashboard-news-widget-meta strong {
    font-size:
      6.5px;
  }

  .dashboard-news-widget-title {
    max-width:
      100%;

    font-size:
      11px;
  }

  .dashboard-news-widget-action {
    padding-left:
      4px;
  }

  .dashboard-news-widget-action span {
    display:
      none;
  }

  .dashboard-news-widget
  + .dashboard-tools-grid {
    margin-top:
      0 !important;
  }
}


@media (max-width: 430px) {
  .dashboard-news-widget {
    margin-top:
      -50px;

    margin-bottom:
      12px;
  }

  .dashboard-news-widget-meta strong {
    display:
      none;
  }
}