/* ZenuOne app shell — shared by every signed-in page.
   Black and gold, Poppins, matching the landing page. */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body { background: #050505; color: #fff; overflow-x: hidden; }
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
body::before {
  width: 800px; height: 800px; top: -300px; left: -200px;
  background: radial-gradient(circle, #d4a93722 0%, transparent 70%);
}
body::after {
  width: 700px; height: 700px; bottom: -300px; right: -200px;
  background: radial-gradient(circle, #d4a93718 0%, transparent 70%);
}

/* ---- nav ---- */
nav {
  width: 100%; padding: 16px 4%; display: flex; align-items: center; gap: 26px;
  position: sticky; top: 0; z-index: 999;
  background: rgba(0,0,0,.78); backdrop-filter: blur(12px); border-bottom: 1px solid #141414;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .4px; font-size: 15px; }
.brand img { height: 26px; width: auto; }

.links { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.links a {
  color: #8a8a8a; text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 8px 14px; border-radius: 11px; transition: color .15s, background .15s;
}
.links a:hover { color: #e6e6e6; background: #ffffff08; }
.links a.on { color: #d4a937; background: #d4a9370f; }

.who { display: flex; align-items: center; gap: 9px; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid #d4a93744;
  background: #d4a9370f; color: #d4a937; font-weight: 600; font-size: 12.5px; white-space: nowrap;
}
.chip.flame { border-color: #ff8a4c55; background: #ff8a4c12; color: #ff8a4c; }

/* Level badge: the number, and a bar for progress toward the next one.
   No XP figure — Challenges shows that, with the context to explain it. */
.lvl {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid #d4a93744; background: #d4a9370f;
  white-space: nowrap;
}
.lvl b { font-size: 11.5px; font-weight: 600; color: #d4a937; line-height: 1; letter-spacing: .04em; }
.lvl i { display: block; height: 3px; border-radius: 99px; background: #d4a93726; overflow: hidden; }
.lvl i s {
  display: block; height: 100%; text-decoration: none;
  background: linear-gradient(90deg, #a8801f, #d4a937);
  border-radius: 99px; transition: width .8s cubic-bezier(.2,.7,.3,1);
}

/* Secondary nav — present but not competing with the main sections */
.who .mini {
  color: #7a7a7a; text-decoration: none; font-size: 12.5px; font-weight: 500;
  padding: 7px 10px; border-radius: 10px; transition: color .15s, background .15s;
}
.who .mini:hover { color: #d4a937; background: #d4a9370f; }
.who .mini.on { color: #d4a937; }

/* Trial countdown under the nav. Amber while it runs, red once it does not. */
.trialbar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; padding: 11px 4%; font-size: 13.5px;
  background: #d4a9370f; border-bottom: 1px solid #d4a93733; color: #d8c48a;
}
.trialbar b { color: #d4a937; }
.trialbar.out { background: #ff6b6b0f; border-bottom-color: #ff6b6b33; color: #f0b4b4; }
.trialbar .btn.small { padding: 6px 13px; font-size: 12px; }

main { max-width: 1180px; margin: 0 auto; padding: 34px 4% 90px; }

h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.sub { color: #8a8a8a; font-size: 14px; margin-bottom: 28px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; color: #d4a937; }

/* ---- buttons ---- */
.btn {
  padding: 11px 20px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; background: #d4a937; color: #0a0a0a;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px #d4a93733; }
.btn.ghost { background: transparent; color: #d4a937; border: 1px solid #d4a93755; }
.btn.ghost:hover { background: #d4a9370f; box-shadow: none; }
.btn.danger { background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b44; }
.btn.small { padding: 7px 13px; font-size: 12px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat { background: #0b0b0b; border: 1px solid #171717; border-radius: 20px; padding: 20px 22px; }
.stat .k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7a7a7a; }
.stat .v { font-size: 25px; font-weight: 700; margin-top: 6px; }
.stat .v.pos { color: #4ade80; }
.stat .v.neg { color: #ff6b6b; }
.stat .v .mute { color: #4a4a4a; font-size: 15px; font-weight: 500; }

/* ---- panel ---- */
.panel { background: #0b0b0b; border: 1px solid #171717; border-radius: 28px; padding: 26px 28px; margin-bottom: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; }
.panel-head h2 { font-size: 17px; font-weight: 600; }

/* ---- table ---- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 700px; }
th {
  text-align: left; padding: 10px 12px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #7a7a7a; font-weight: 600; border-bottom: 1px solid #191919;
}
td { padding: 13px 12px; border-bottom: 1px solid #111; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #0e0e0e; }

.dir { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.dir.long { background: #4ade8018; color: #4ade80; }
.dir.short { background: #ff6b6b18; color: #ff6b6b; }
.pos { color: #4ade80; }
.neg { color: #ff6b6b; }
.muted { color: #6a6a6a; }
.open-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #d4a937; }

/* ---- empty ---- */
.empty { text-align: center; padding: 52px 20px; color: #6a6a6a; }
.empty h3 { color: #cfcfcf; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.empty p { font-size: 13.5px; max-width: 420px; margin: 0 auto 20px; line-height: 1.65; }

/* ---- forms ---- */
.field { margin-bottom: 14px; }
.field.full { grid-column: 1 / -1; }
label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px; background: #111;
  border: 1px solid #222; color: #fff; font-size: 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #d4a93788; }
textarea { resize: vertical; min-height: 74px; font-size: 13.5px; line-height: 1.55; }
.hint { font-size: 11.5px; color: #6a6a6a; margin-top: 6px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- modal ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center; z-index: 1000;
  padding: 40px 20px; overflow-y: auto;
}
.overlay.on { display: flex; }
.modal {
  background: #0c0c0c; border: 1px solid #1d1d1d; border-radius: 28px;
  padding: 30px 32px; width: 100%; max-width: 620px; position: relative;
}
.modal h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.close {
  position: absolute; top: 20px; right: 22px; background: none; border: none;
  color: #6a6a6a; font-size: 26px; cursor: pointer; line-height: 1;
}
.close:hover { color: #fff; }
.msg { font-size: 13px; margin-top: 14px; min-height: 18px; }
.msg.error { color: #ff6b6b; }
.msg.ok { color: #4ade80; }
.actions { display: flex; gap: 10px; margin-top: 20px; }
.actions .btn { flex: 1; }
.section-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #d4a937;
  margin: 22px 0 12px; grid-column: 1 / -1;
}

/* ---- calendar ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.cal-head h2 { font-size: 18px; font-weight: 600; }
.cal-nav { display: flex; gap: 8px; align-items: center; }

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.cal-dow span {
  text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #6a6a6a; font-weight: 600;
}
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.day {
  aspect-ratio: 1 / 1; border-radius: 14px; border: 1px solid #161616; background: #0a0a0a;
  padding: 8px 9px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden; transition: border-color .15s, transform .15s;
}
.day.pad { background: transparent; border-color: transparent; }
.day.has { cursor: pointer; }
.day.has:hover { transform: translateY(-2px); border-color: #d4a93755; }
.day .n { font-size: 11.5px; color: #6a6a6a; font-weight: 500; }
.day.today .n { color: #d4a937; font-weight: 700; }
.day .amt { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.day .cnt { font-size: 9.5px; color: #6a6a6a; letter-spacing: .06em; }

/* Green and red carry the result; opacity carries the size, so a big day
   reads as bolder without needing a second colour scale. */
.day.win { background: #4ade8012; border-color: #4ade8033; }
.day.win.big { background: #4ade801f; border-color: #4ade8055; }
.day.loss { background: #ff6b6b12; border-color: #ff6b6b33; }
.day.loss.big { background: #ff6b6b1f; border-color: #ff6b6b55; }
.day.flat { background: #ffffff08; border-color: #222; }
.day.openonly { border-style: dashed; border-color: #d4a93744; }

/* ==========================================================================
   Mobile
   Seven sections will not fit across a phone. Rather than shrink them until
   they are unreadable or bury them behind a hamburger nobody opens, the nav
   becomes two rows: identity and account on top, a swipeable strip of
   sections beneath. Every destination stays visible and one thumb reaches
   all of them.
   ========================================================================== */
@media (max-width: 820px) {
  nav {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 4% 0;
  }

  .brand { flex: 1 1 auto; font-size: 14px; }
  .brand img { height: 22px; }

  .who { flex: 0 0 auto; gap: 6px; }
  .who .chip { font-size: 11px; padding: 5px 9px; }
  .who .mini { padding: 6px 7px; font-size: 12px; }

  /* Full-width second row, scrolled horizontally. Bleeds to the screen edges
     so the first and last pills sit flush rather than stranded in padding. */
  .links {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -4%;
    padding: 2px 4% 9px;
    gap: 2px;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a {
    white-space: nowrap;
    padding: 8px 13px;
    font-size: 13.5px;
    scroll-snap-align: start;
  }
  /* The centre-out underline reads as an accident at this size. */
  .links a::after { display: none; }
  .links a.on {
    background: #d4a93718;
    border: 1px solid #d4a93744;
    border-radius: 999px;
    padding: 7px 12px;
  }

  main { padding: 22px 4% 70px; }
  h1 { font-size: 21px; }
  .sub { font-size: 13px; margin-bottom: 20px; }

  .panel { padding: 18px 16px; border-radius: 20px; }
  .panel-head { margin-bottom: 14px; }
  .panel-head h2 { font-size: 15.5px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
  .stat { padding: 15px 16px; border-radius: 16px; }
  .stat .v { font-size: 20px; }
  .stat .k { font-size: 9.5px; }

  .grid, .grid.three { grid-template-columns: 1fr; }

  /* iOS zooms the whole page when focusing an input under 16px. That zoom
     does not undo itself, so every form felt broken on a phone. */
  input, select, textarea { font-size: 16px; }

  /* Sheets from the bottom, the way a phone expects. */
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px 32px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal h3 { font-size: 17px; }
  .close { top: 16px; right: 18px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }

  .day { padding: 5px 6px; border-radius: 10px; }
  .day .amt { font-size: 10px; }
  .day .cnt { display: none; }

  .trialbar { font-size: 12.5px; gap: 10px; padding: 10px 4%; }

  /* Toolbars on the chart pages: swipe rather than wrap into a stack. */
  .toolbar, .chart-head {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .toolbar::-webkit-scrollbar, .chart-head::-webkit-scrollbar { display: none; }
  .toolbar > *, .chart-head > * { flex: 0 0 auto; }
  .seg button { padding: 7px 11px; font-size: 11.5px; }
}

@media (max-width: 420px) {
  /* Two up, not one. Six stat tiles stacked is a long scroll before the
     trades table, and the tiles read fine at half width. */
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 13px 13px; }
  .stat .v { font-size: 18px; }

  .brand span { display: none; }  /* the mark alone is enough at this width */

  /* Plans and Help are NOT in the scrolling strip — that carries the seven
     app sections only. Hiding them here would make the pricing page
     unreachable on a phone, which is the one page that has to be reachable.
     Shrink them instead. */
  .who .mini { padding: 5px 6px; font-size: 11.5px; }
  .who .chip { display: none; }
}

/* ==========================================================================
   Motion
   Everything here confirms something happened. Nothing here is decoration.
   ========================================================================== */

/* Page entrance — the whole view settles once, rather than flashing in. */
body { opacity: 0; transition: opacity .32s ease; }
body.ready { opacity: 1; }

/* Scroll reveal */
.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.rise.in { opacity: 1; transform: none; }

/* Panels lift slightly under the cursor so they read as objects, not regions */
.panel, .stat, .course {
  transition: border-color .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.stat:hover { transform: translateY(-3px); border-color: #d4a93744; }

/* Buttons: press must be felt, not just seen */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.45), transparent 55%);
  opacity: 0; transition: opacity .45s ease;
}
.btn:active::after { opacity: .35; transition: none; }

/* Nav links get an underline that grows from the centre */
.links a { position: relative; }
.links a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 1.5px;
  background: #d4a937; border-radius: 2px; transition: left .22s ease, right .22s ease;
}
.links a:hover::after, .links a.on::after { left: 14px; right: 14px; }

/* Rows slide in rather than appearing */
tbody tr { animation: rowIn .34s cubic-bezier(.2,.7,.3,1) backwards; }
tbody tr:nth-child(1) { animation-delay: .02s } tbody tr:nth-child(2) { animation-delay: .05s }
tbody tr:nth-child(3) { animation-delay: .08s } tbody tr:nth-child(4) { animation-delay: .11s }
tbody tr:nth-child(5) { animation-delay: .14s } tbody tr:nth-child(n+6) { animation-delay: .16s }
@keyframes rowIn { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }

/* Calendar days pop in on load */
.day.has { animation: dayIn .3s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes dayIn { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: none } }

/* Challenge completion */
.ch.done .tick { animation: pop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop { 0% { transform: scale(0) } 60% { transform: scale(1.25) } 100% { transform: scale(1) } }

/* XP and progress bars fill rather than jump */
.xpbar span, .bar span { transition: width .9s cubic-bezier(.2,.7,.3,1); }

/* Modals */
.overlay { animation: fadeIn .2s ease; }
.overlay.on .modal { animation: modalIn .32s cubic-bezier(.2,.8,.3,1); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98) } to { opacity: 1; transform: none } }

/* Skeletons — a shape that will be filled reads better than the word Loading */
.skel {
  background: linear-gradient(90deg, #0f0f0f 25%, #161616 50%, #0f0f0f 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 10px; height: 14px; margin-bottom: 10px;
}
.skel.tall { height: 74px; border-radius: 18px; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* Toasts */
#toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 5000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  padding: 13px 18px; border-radius: 14px; font-size: 13.5px; font-weight: 500;
  background: #0e0e0e; border: 1px solid #222; color: #e6e6e6;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  opacity: 0; transform: translateX(22px); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.toast.in { opacity: 1; transform: none; }
.toast.ok { border-color: #4ade8055; color: #4ade80; }
.toast.error { border-color: #ff6b6b55; color: #ff6b6b; }
.toast.xp { border-color: #d4a93766; color: #d4a937; }

/* Live price ticks flash their direction */
.tick-up { animation: tickUp .6s ease; }
.tick-down { animation: tickDown .6s ease; }
@keyframes tickUp { 0% { color: #4ade80 } 100% { color: inherit } }
@keyframes tickDown { 0% { color: #ff6b6b } 100% { color: inherit } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise { opacity: 1; transform: none; }
  body { opacity: 1; }
}