/* 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%; }

  /* A square cell is ~40px wide at seven columns on a phone, which cannot
     hold a date and a P&L figure. Height comes from the content instead, so
     the number is never clipped. */
  .cal { gap: 6px; }
  .day {
    aspect-ratio: auto;
    min-height: 58px;
    padding: 5px 5px 6px;
    border-radius: 11px;
    justify-content: flex-start;
    gap: 2px;
  }
  .day .n { font-size: 11px; line-height: 1; }
  /* nowrap, not break-all: a wrapped number is harder to read than a small
     one, and at this size it has to be legible at a glance or it is noise. */
  .day .amt { font-size: 11px; line-height: 1.1; white-space: nowrap; letter-spacing: -.3px; }
  .day .cnt { display: none; }
  .day .marks { top: 4px; right: 4px; gap: 2px; }
  .day .marks i { width: 4px; height: 4px; }

  .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; }
}

/* ---- drawing rail (Charts, Practice) ----
   Left edge and vertical, because that is where TradingView, MT4/5 and
   ThinkOrSwim all put drawing tools — someone arriving from any of them
   reaches left without looking. Sticky, so it stays level with whichever
   part of a tall chart is on screen. */
.work { display: flex; gap: 12px; align-items: flex-start; }

.rail {
  display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto;
  background: #0b0b0b; border: 1px solid #171717; border-radius: 14px;
  padding: 6px; position: sticky; z-index: 6;
  /* The app nav is itself sticky at top:0 and about 72px tall; a smaller
     offset here parks the rail underneath it. */
  top: 86px;
}
.railsep { height: 1px; background: #1c1c1c; margin: 3px 4px; }

.tool {
  position: relative; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; background: transparent;
  border: 1px solid transparent; color: #6f6f6f; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.tool svg { width: 18px; height: 18px; }
.tool:hover { color: #b9b9b9; background: #121212; }
.tool.on { background: #d4a9371a; border-color: #d4a93755; color: #d4a937; }
.tool.danger.on,
.tool.armed { background: #ff6b6b1a; border-color: #ff6b6b55; color: #ff6b6b; }
.tool:focus-visible { outline: 2px solid #d4a937; outline-offset: 2px; }

/* The label appears on hover carrying its shortcut, which is also how anyone
   discovers the shortcuts exist. */
.tool .tip {
  position: absolute; left: 46px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #141414; border: 1px solid #262626; color: #d0d0d0;
  font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .14s, transform .14s;
}
.tool .tip b { color: #d4a937; font-weight: 700; }
.tool .tip b:not(:empty) { margin-left: 7px; }
.tool:hover .tip, .tool:focus-visible .tip { opacity: 1; transform: translateY(-50%); }

/* ---- mobile: the rail becomes a fixed dock ----
   Panes scroll underneath, so the tool stays under the thumb whichever part
   of the chart is showing. */
@media (max-width: 760px) {
  .work { flex-direction: column; }
  .rail {
    position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto;
    flex-direction: row; justify-content: space-around; align-items: center;
    border-radius: 16px; padding: 7px 8px;
    background: rgba(11, 11, 11, .96); backdrop-filter: blur(10px);
    box-shadow: 0 6px 26px rgba(0, 0, 0, .65); z-index: 900;
  }
  .railsep { width: 1px; height: 22px; margin: 0 2px; }
  .tool { width: 44px; height: 44px; }
  /* No hover on a phone, and the tooltip would sit off-screen anyway. */
  .tool .tip { display: none; }
}

/* ---- expand a chart pane (Charts, Practice) ----
   Fills the grid rather than the viewport: no z-index war with the sticky
   nav or the drawing rail, no scroll lock to unwind, and the rail stays
   exactly where it was so you can keep drawing at the larger size. */
.panezoom {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: #5f5f5f; cursor: pointer; padding: 0;
  transition: color .15s, background .15s, border-color .15s;
}
.panezoom svg { width: 13px; height: 13px; }
.panezoom:hover { color: #d4a937; background: #141414; border-color: #d4a93744; }
.panezoom:focus-visible { outline: 2px solid #d4a937; outline-offset: 2px; }

/* The collapse glyph replaces the expand glyph, so one button says both
   things without the label ever disagreeing with the state. */
.panezoom .out { display: block; }
.panezoom .in  { display: none; }
.expanded .panezoom .out { display: none; }
.expanded .panezoom .in  { display: block; }
.expanded .panezoom { color: #d4a937; border-color: #d4a93755; background: #d4a9371a; }

/* :has() rather than a class on the grid — the state lives on the pane, and
   two places holding the same state is how they end up disagreeing. */
.grid4:has(.pane.expanded) .pane:not(.expanded) { display: none; }
.pane.expanded { grid-column: 1 / -1; }
.pane.expanded .chart { height: min(72vh, 780px); }
.panel.expanded #chart { height: min(78vh, 860px); }

@media (max-width: 760px) {
  .pane.expanded .chart { height: min(66vh, 560px); }
  .panel.expanded #chart { height: min(70vh, 600px); }
}

/* ---- right-click menu for drawings ---- */
.ctxmenu {
  position: fixed; z-index: 1200; min-width: 186px;
  background: #101011; border: 1px solid #262628; border-radius: 12px;
  padding: 5px; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .72);
  font-size: 13px;
}
.ctxmenu[hidden] { display: none; }

.ctxmenu > button {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px; border: 0; border-radius: 8px;
  background: transparent; color: #ddd9d2; font-family: inherit; font-size: 13px;
  cursor: pointer; transition: background .12s, color .12s;
}
.ctxmenu > button:hover:not(:disabled) { background: #1b1b1d; color: #fff; }
.ctxmenu > button:focus-visible { outline: 2px solid #d4a937; outline-offset: -2px; }
.ctxmenu > button.danger:hover:not(:disabled) { background: #ff6b6b1a; color: #ff6b6b; }
.ctxmenu > button:disabled { color: #5c5a56; cursor: default; }

.ctxsep { height: 1px; background: #232325; margin: 4px 6px; }

.ctxrow { display: flex; gap: 5px; padding: 4px 6px; }
.ctxmenu .swatch {
  width: 30px; height: 30px; border-radius: 8px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent;
}
.ctxmenu .swatch i { width: 15px; height: 15px; border-radius: 4px; display: block; }
.ctxmenu .swatch:hover { border-color: #3a3a3c; }
.ctxmenu .swatch.on { border-color: #d4a937; background: #d4a9371a; }
.ctxmenu .swatch:focus-visible { outline: 2px solid #d4a937; outline-offset: -2px; }

/* The price shown beside "Level here" — informative, not the label. */
.ctxmenu .ctxdim {
  color: #7d7a74; font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; margin-left: 6px;
}