:root {
        --vh: 1vh;
        --bg: #0b1020;
        --panel: #0f172a;
        --card: #111c3a;
        --ink: #e5e7eb;
        --muted: #93a4c7;
        --line: #243056;
        --good: #22c55e;
        --bad: #fb7185;
        --warn: #fbbf24;
        --blue: #60a5fa;
        --tooltip-accent-rgb: 184, 134, 11;
        --tooltip-accent-strong-rgb: 140, 101, 8;
        --tooltip-accent-soft-rgb: 245, 222, 179;
        --tooltip-accent-text: #f5deb3;
        --tooltip-accent-ink: #120d05;
        --tooltip-accent-border-strong: rgba(var(--tooltip-accent-rgb), 0.96);
        --tooltip-accent-border: rgba(var(--tooltip-accent-rgb), 0.64);
        --tooltip-accent-border-soft: rgba(var(--tooltip-accent-rgb), 0.38);
        --tooltip-accent-fill-soft: rgba(var(--tooltip-accent-rgb), 0.14);
        --tooltip-accent-fill: rgba(var(--tooltip-accent-rgb), 0.22);
        --tooltip-accent-fill-strong: rgba(var(--tooltip-accent-rgb), 0.28);
        --tooltip-accent-glow-soft: transparent;
        --tooltip-accent-glow: transparent;
        --tooltip-accent-glow-strong: transparent;
        --tooltip-accent-highlight: rgba(var(--tooltip-accent-soft-rgb), 0.16);
        --tooltip-accent-shadow: rgba(64, 44, 6, 0.34);
        --tooltip-accent-gradient: linear-gradient(180deg, rgba(var(--tooltip-accent-rgb), 0.26), rgba(var(--tooltip-accent-strong-rgb), 0.24));
        --tooltip-accent-gradient-strong: linear-gradient(180deg, rgba(212, 160, 23, 0.98), rgba(var(--tooltip-accent-strong-rgb), 0.98));
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        --mono:
          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
        --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: var(--sans);
        background: #050505;
        color: var(--ink);
        height: calc(var(--vh) * 100);
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
      }
      .left {
        width: 320px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        background: var(--panel); /* solid so haze never shows through */
        border-left: 1px solid var(--line);
        padding: 14px;

        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: var(--shadow);
      }
      .brand h1 {
        margin: 0;
        font-size: 14px;
        letter-spacing: 0.2px;
      }
      .brandTitle {
        transition:
          color 0.18s ease,
          text-shadow 0.18s ease,
          transform 0.18s ease;
      }
      .tipMode .brandTitle {
        color: var(--tooltip-accent-text);
        text-shadow:
          0 0 10px rgba(var(--tooltip-accent-rgb), 0.38),
          0 0 22px rgba(var(--tooltip-accent-rgb), 0.22);
      }
      .pill {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        border: 1px solid var(--line);
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.02);
      }
      .card {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.03);
      }
      .row {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
      }
      .row + .row {
        margin-top: 8px;
      }
      .label {
        color: var(--muted);
        font-size: 10px;
      }
      .value {
        font-family: var(--mono);
        font-size: 10px;
      }
.fieldLabelWrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: relative;
        white-space: nowrap;
      }
      .fieldLabelText {
        font-size: 10px;
        color: #93a4c7;
        font-weight: 800;
        white-space: nowrap;
      }
      .fieldInfoIcon {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        padding: 0 !important;
        border-radius: 999px;
        border: 1px solid rgba(96, 165, 250, 0.45);
        background: rgba(96, 165, 250, 0.12);
        color: #bfdbfe;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        box-shadow: none;
        cursor: help;
      }
      .fieldInfoIcon:hover,
      .fieldInfoIcon:focus-visible {
        background: rgba(96, 165, 250, 0.2);
        border-color: rgba(96, 165, 250, 0.75);
        color: #dbeafe;
        outline: none;
      }
      .fieldInfoIcon::after {
        content: attr(data-info);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        width: min(240px, 55vw);
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(15, 23, 42, 0.98);
        color: #e5e7eb;
        font-family: var(--sans);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
        white-space: normal;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.16s ease;
        z-index: 12000;
      }
      .fieldInfoIcon::before {
        content: "";
        position: absolute;
        left: calc(100% + 2px);
        top: 50%;
        transform: translateY(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent rgba(15, 23, 42, 0.98) transparent transparent;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.16s ease;
        z-index: 12001;
      }
      .fieldInfoIcon:hover::after,
      .fieldInfoIcon:hover::before,
      .fieldInfoIcon:focus-visible::after,
      .fieldInfoIcon:focus-visible::before {
        opacity: 1;
        visibility: visible;
      }
      @media (max-width: 900px) {
        .fieldInfoIcon::after {
          left: auto;
          right: 0;
          top: calc(100% + 8px);
          transform: none;
          width: min(240px, calc(100vw - 64px));
        }
        .fieldInfoIcon::before {
          left: auto;
          right: 4px;
          top: calc(100% + 2px);
          transform: none;
          border-color: transparent transparent rgba(15, 23, 42, 0.98) transparent;
        }
      }
      .btns {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
      }

      .orderEntryRow {
        align-items: stretch;
      }
      .orderEntryRow > button {
        flex: 1 1 0;
        min-width: 0;
      }
      .orderEntryRow--withInput .orderPriceBox {
        flex: 0 0 124px;
      }
      .orderPriceBox {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }
      .orderPriceLabel {
        font-size: 10px;
        font-weight: 800;
        color: var(--muted);
        letter-spacing: 0.02em;
      }
      .orderPriceInput {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.05);
        color: var(--ink);
        font-weight: 800;
        font-family: var(--mono);
        font-size: 13px;
      }
      .orderPriceInput:focus {
        outline: none;
        border-color: rgba(96, 165, 250, 0.7);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
      }
      .orderStlGroup {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid rgba(36, 48, 86, 0.9);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
      }
      .orderStlGroupHeader {
        margin: 0 0 8px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .orderEntryRow--stl {
        margin-top: 0;
      }
      .orderStlInputs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 8px;
      }
      @media (max-width: 900px) {
        .orderEntryRow--withInput .orderPriceBox {
          flex: 1 1 100%;
        }
        .orderStlGroup {
          padding: 9px;
        }
        .orderStlInputs {
          grid-template-columns: 1fr;
        }
      }
      button {
        touch-action: manipulation;
        cursor: pointer;
        border: 1px solid var(--line);
        color: var(--ink);
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 10px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 10px;
      }
      button:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      button.danger {
        border-color: rgba(251, 113, 133, 0.35);
      }
      button.primary {
        border-color: rgba(96, 165, 250, 0.5);
      }

      .btn-buy {
        color: rgba(220, 252, 231, 0.98) !important;
        font-weight: 800;
        border: 1px solid rgba(34, 197, 94, 0.45) !important;
        background:
          linear-gradient(180deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.12)) !important;
        box-shadow:
          0 0 0 1px rgba(34, 197, 94, 0.08) inset,
          0 8px 18px rgba(0, 0, 0, 0.16);
      }
      .btn-buy:hover {
        color: rgba(240, 253, 244, 1) !important;
        background:
          linear-gradient(180deg, rgba(34, 197, 94, 0.28), rgba(22, 163, 74, 0.18)) !important;
        border-color: rgba(34, 197, 94, 0.6) !important;
        box-shadow:
          0 0 0 1px rgba(34, 197, 94, 0.12) inset,
          0 10px 24px rgba(0, 0, 0, 0.18);
      }

      .btn-sell {
        color: rgba(255, 228, 230, 0.98) !important;
        font-weight: 800;
        border: 1px solid rgba(251, 113, 133, 0.45) !important;
        background:
          linear-gradient(180deg, rgba(251, 113, 133, 0.2), rgba(225, 29, 72, 0.12)) !important;
        box-shadow:
          0 0 0 1px rgba(251, 113, 133, 0.08) inset,
          0 8px 18px rgba(0, 0, 0, 0.16);
      }
      .btn-sell:hover {
        color: rgba(255, 241, 242, 1) !important;
        background:
          linear-gradient(180deg, rgba(251, 113, 133, 0.28), rgba(225, 29, 72, 0.18)) !important;
        border-color: rgba(251, 113, 133, 0.6) !important;
        box-shadow:
          0 0 0 1px rgba(251, 113, 133, 0.12) inset,
          0 10px 24px rgba(0, 0, 0, 0.18);
      }
      button.toolActive {
        border-color: rgba(96, 165, 250, 0.85) !important;
        background: rgba(96, 165, 250, 0.18) !important;
        box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.22) inset;
      }
.btn-gold{
  background: linear-gradient(180deg,#facc15,#eab308);
  color:#111;
  border:1px solid rgba(234,179,8,.8);
  font-weight:900;
}
.btn-buy{
  background: linear-gradient(180deg,#22c55e,#16a34a);
  color:#022c22;
  border:1px solid rgba(34,197,94,.7);
  font-weight:900;
}
.btn-sell{
  background: linear-gradient(180deg,#fb7185,#e11d48);
  color:#fff;
  border:1px solid rgba(251,113,133,.7);
  font-weight:900;
}

/* ===== Pasted text (2).txt ===== */
.chartTopControls {
        position: absolute;
        top: 64px;
        right: 72px;
        z-index: 46;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(36, 48, 86, 0.9);
        border-radius: 14px;
        background: rgba(11, 16, 32, 0.78);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        pointer-events: auto;
      }
      .chartTopControls button,
      .chartTopControls select {
        min-height: 36px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 800;
      }
      .chartTopControls #btnFind {
        min-width: 40px;
        width: 40px;
        padding: 8px 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .chartTopControls #tfSel {
        min-width: 76px;
        width: 76px;
        text-align: center;
      }

      .indicatorsToolbar .macdToggleBtn,
      .indicatorsToolbar .emaToggleBtn {
        min-width: 64px;
        padding-inline: 10px;
        letter-spacing: 0.04em;
      }
      .macdToggleBtn.is-on,
      .emaToggleBtn.is-on {
        border-color: rgba(250, 204, 21, 0.85) !important;
        background: linear-gradient(180deg, rgba(250, 204, 21, 0.34), rgba(234, 179, 8, 0.18)) !important;
        color: #fef9c3 !important;
        box-shadow:
          0 0 0 1px rgba(250, 204, 21, 0.18) inset,
          0 8px 20px rgba(0, 0, 0, 0.22);
      }
      .macdToggleBtn.is-on::before,
      .emaToggleBtn.is-on::before {
        content: "●";
        margin-right: 5px;
        font-size: 9px;
        color: #facc15;
      }

      .topbar {
        position: relative;
      }
      .topbarTooltipSlot {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
      }
      .topbarTooltipSlot #btnTips,
      .topbarTooltipSlot #btnTipsOff {
        min-width: 160px;
        min-height: 36px;
        padding: 8px 18px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 900;
      }
      @media (max-width: 900px) {
        .topbarTooltipSlot {
          left: auto;
          right: 12px;
          transform: translateY(-50%);
        }
        .topbarTooltipSlot #btnTips,
        .topbarTooltipSlot #btnTipsOff {
          min-width: 132px;
          padding-left: 12px;
          padding-right: 12px;
          font-size: 11px;
        }
      }

.drawToolbar {
        position: absolute;
        left: 10px;
        top: 64px;
        z-index: 45;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 118px;
        padding: 9px;
        border: 1px solid rgba(212, 175, 55, 0.24);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
          rgba(7, 7, 8, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.07) inset,
          0 16px 34px rgba(0, 0, 0, 0.44);
        pointer-events: auto;
      }
      .drawToolbar button {
        min-width: 100px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 11px;
        border-radius: 12px;
        border: 1px solid rgba(212, 175, 55, 0.2);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
          #101012;
        color: #f4ecd0;
        font-weight: 850;
        text-align: left;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.025) inset,
          0 8px 18px rgba(0, 0, 0, 0.22);
        transition:
          background 0.16s ease,
          border-color 0.16s ease,
          color 0.16s ease,
          box-shadow 0.16s ease,
          transform 0.16s ease;
      }
      .drawToolbar button:hover,
      .drawToolbar button:focus-visible {
        border-color: rgba(212, 175, 55, 0.48);
        background:
          linear-gradient(180deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.045)),
          #121214;
        color: #fff7da;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.12) inset,
          0 10px 22px rgba(0, 0, 0, 0.28);
        outline: none;
      }
      .drawToolbar button:active {
        transform: translateY(1px);
      }
      .drawToolbar button.toolActive {
        border-color: rgba(212, 175, 55, 0.74) !important;
        background:
          linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(140, 101, 8, 0.13)),
          #121214 !important;
        color: #f8e7aa !important;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.2) inset,
          0 0 20px rgba(212, 175, 55, 0.18),
          0 12px 24px rgba(0, 0, 0, 0.36) !important;
      }
      .drawToolbar .drawToolbarTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
        margin: -1px 1px 1px;
        padding: 3px 5px 5px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.16);
        color: rgba(246, 229, 168, 0.78);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 900;
      }
      #btnDrawMenuToggle {
        display: none;
      }
      @media (max-width: 900px) {
        .drawToolbar {
          top: 64px;
          left: 10px;
          right: auto;
          gap: 6px;
          min-width: 100px;
          padding: 7px;
          border-radius: 14px;
        }
        .drawToolbar .drawToolbarTitle {
          display: none;
        }
        #btnDrawMenuToggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 88px;
          width: 100%;
          text-align: center;
        }
        .drawToolbar > button:not(#btnDrawMenuToggle),
        .drawToolbar > .mobileDrawActions {
          display: none !important;
        }
        .drawToolbar.mobileOpen > button:not(#btnDrawMenuToggle) {
          display: inline-flex !important;
        }
        .drawToolbar.mobileOpen > .mobileDrawActions.show {
          display: flex !important;
        }
        .drawToolbar button {
          min-width: 88px;
        }
      }
      @media (max-width: 640px) {
        .drawToolbar {
          top: 64px;
          left: 10px;
          right: auto;
          gap: 6px;
          min-width: 90px;
          padding: 7px;
        }
        .drawToolbar button {
          min-width: 82px;
          min-height: 34px;
          padding: 7px 9px;
          font-size: 11px;
        }
        #btnDrawMenuToggle {
          min-width: 82px;
        }
      }



      .indicatorsToolbar {
        position: absolute;
        left: 140px;
        top: 64px;
        z-index: 45;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 126px;
        padding: 9px;
        border: 1px solid rgba(212, 175, 55, 0.24);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
          rgba(7, 7, 8, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.07) inset,
          0 16px 34px rgba(0, 0, 0, 0.44);
        pointer-events: auto;
      }
      .indicatorsToolbar button {
        min-width: 108px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 11px;
        border-radius: 12px;
        border: 1px solid rgba(212, 175, 55, 0.2);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
          #101012;
        color: #f4ecd0;
        font-weight: 850;
        text-align: left;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.025) inset,
          0 8px 18px rgba(0, 0, 0, 0.22);
        transition:
          background 0.16s ease,
          border-color 0.16s ease,
          color 0.16s ease,
          box-shadow 0.16s ease,
          transform 0.16s ease;
      }
      .indicatorsToolbar button:hover,
      .indicatorsToolbar button:focus-visible {
        border-color: rgba(212, 175, 55, 0.48);
        background:
          linear-gradient(180deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.045)),
          #121214;
        color: #fff7da;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.12) inset,
          0 10px 22px rgba(0, 0, 0, 0.28);
        outline: none;
      }
      .indicatorsToolbar button:active {
        transform: translateY(1px);
      }
      .indicatorToolRow {
        display: flex;
        align-items: stretch;
        gap: 6px;
        width: 100%;
      }
      .indicatorToolRow .emaToggleBtn {
        flex: 1 1 auto;
        min-width: 0;
      }
      .indicatorToolRow .indicatorSettingsBtn {
        flex: 0 0 38px;
        min-width: 38px;
        width: 38px;
        justify-content: center;
        padding-inline: 0;
      }
      .indicatorsToolbar button.toolActive,
      .indicatorsToolbar .macdToggleBtn.is-on,
      .indicatorsToolbar .emaToggleBtn.is-on {
        border-color: rgba(212, 175, 55, 0.74) !important;
        background:
          linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(140, 101, 8, 0.13)),
          #121214 !important;
        color: #f8e7aa !important;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.2) inset,
          0 0 20px rgba(212, 175, 55, 0.18),
          0 12px 24px rgba(0, 0, 0, 0.36) !important;
      }
      .indicatorsToolbar .indicatorsToolbarTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
        margin: -1px 1px 1px;
        padding: 3px 5px 5px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.16);
        color: rgba(246, 229, 168, 0.78);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 900;
      }
      #btnIndicatorsMenuToggle {
        display: none;
      }
      @media (min-width: 901px) {
        .indicatorsToolbar.desktopCollapsible:not(.desktopOpen) > .indicatorToolRow {
          display: none !important;
        }
        .indicatorsToolbar.desktopCollapsible.desktopOpen > .indicatorToolRow {
          display: flex !important;
        }
      }
      @media (max-width: 900px) {
        .indicatorsToolbar {
          top: 64px;
          left: 112px;
          right: auto;
          gap: 6px;
          min-width: 112px;
          padding: 7px;
          border-radius: 14px;
        }
        .indicatorsToolbar .indicatorsToolbarTitle {
          display: none;
        }
        #btnIndicatorsMenuToggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 96px;
          width: 100%;
          text-align: center;
        }
        .indicatorsToolbar > button:not(#btnIndicatorsMenuToggle),
        .indicatorsToolbar > .indicatorToolRow {
          display: none !important;
        }
        .indicatorsToolbar.mobileOpen > button:not(#btnIndicatorsMenuToggle) {
          display: inline-flex !important;
        }
        .indicatorsToolbar.mobileOpen > .indicatorToolRow {
          display: flex !important;
        }
        .indicatorsToolbar button {
          min-width: 96px;
        }
      }
      @media (max-width: 640px) {
        .indicatorsToolbar {
          top: 64px;
          left: 104px;
          right: auto;
          gap: 6px;
          min-width: 98px;
          padding: 7px;
        }
        .indicatorsToolbar button {
          min-width: 84px;
          min-height: 34px;
          padding: 7px 9px;
          font-size: 11px;
        }
        #btnIndicatorsMenuToggle {
          min-width: 84px;
        }
      }

      .sessionTimerBadge {
        position: absolute;
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 44;
        display: none;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border: 1px solid rgba(96, 165, 250, 0.3);
        border-radius: 999px;
        background: rgba(11, 16, 32, 0.82);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        white-space: nowrap;
      }
      .sessionTimerBadge .sessionTimerLabel {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .sessionTimerBadge .sessionTimerValue {
        font-family: var(--mono);
        font-size: 16px;
        font-weight: 900;
        color: #bfdbfe;
        letter-spacing: 0.04em;
      }
      @media (max-width: 900px) {
        .sessionTimerBadge {
          top: 74px;
          max-width: calc(100vw - 150px);
          padding: 7px 12px;
        }
        .sessionTimerBadge .sessionTimerLabel {
          font-size: 9px;
        }
        .sessionTimerBadge .sessionTimerValue {
          font-size: 14px;
        }
      }
      @media (max-width: 640px) {
        .sessionTimerBadge {
          top: 72px;
          max-width: calc(100vw - 120px);
          padding: 6px 10px;
        }
        .sessionTimerBadge .sessionTimerLabel {
          font-size: 8px;
        }
        .sessionTimerBadge .sessionTimerValue {
          font-size: 13px;
        }
      }

      .mobileChartControls,
      .mobileDrawActions {
        display: none;
      }
      @media (max-width: 900px) {
        .chartTopControls {
          display: none !important;
        }
      }
      @media (max-width: 900px) {
        .mobileChartControls {
          position: absolute;
          top: 54px;
          right: 108px;
          z-index: 46;
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px;
          border: 1px solid rgba(36, 48, 86, 0.9);
          border-radius: 14px;
          background: rgba(11, 16, 32, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        }
        .mobileChartControls button,
        .mobileChartControls select,
        .mobileDrawActions button {
          min-height: 34px;
          padding: 6px 9px;
          border-radius: 10px;
          font-size: 11px;
          font-weight: 800;
        }
        .mobileChartControls select {
          width: 52px;
          max-width: 52px;
          color: #000 !important;
          background: rgba(255, 255, 255, 0.88) !important;
        }
        .mobileDrawActions {
          position: absolute;
          right: 10px;
          bottom: calc(14px + env(safe-area-inset-bottom));
          z-index: 46;
          display: none;
          align-items: center;
          gap: 8px;
          padding: 7px;
          border: 1px solid rgba(36, 48, 86, 0.9);
          border-radius: 14px;
          background: rgba(11, 16, 32, 0.82);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        }
        .mobileDrawActions.show {
          display: flex;
        }
        .drawToolbar .mobileDrawActions {
          position: static;
          right: auto;
          bottom: auto;
          z-index: auto;
          width: 100%;
          justify-content: space-between;
          padding: 0 0 2px;
          margin: 0 0 2px;
          border: none;
          border-radius: 0;
          background: transparent;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          box-shadow: none;
        }
        .drawToolbar .mobileDrawActions button {
          flex: 1 1 0;
          text-align: center;
        }
      }
      @media (min-width: 901px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
        .mobileChartControls {
          position: absolute;
          top: 58px;
          right: 112px;
          z-index: 46;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px 10px;
          border: 1px solid rgba(36, 48, 86, 0.9);
          border-radius: 14px;
          background: rgba(11, 16, 32, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        }
        .mobileChartControls button,
        .mobileChartControls select,
        .mobileDrawActions button {
          min-height: 38px;
          padding: 8px 12px;
          border-radius: 10px;
          font-size: 10px;
          font-weight: 800;
        }
        .mobileChartControls select {
          max-width: 86px;
          color: #000 !important;
          background: rgba(255, 255, 255, 0.88) !important;
        }
        .mobileDrawActions {
          position: absolute;
          right: 14px;
          bottom: calc(14px + env(safe-area-inset-bottom));
          z-index: 46;
          display: none;
          align-items: center;
          gap: 8px;
          padding: 8px 10px;
          border: 1px solid rgba(36, 48, 86, 0.9);
          border-radius: 14px;
          background: rgba(11, 16, 32, 0.82);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
        }
        .mobileDrawActions.show {
          display: flex;
        }
      }
      @media (max-width: 640px) {
        .mobileChartControls {
          top: 52px;
          right: 68px;
          gap: 5px;
          padding: 5px;
        }
        .mobileDrawActions {
          right: 8px;
          bottom: calc(10px + env(safe-area-inset-bottom));
          gap: 6px;
          padding: 6px;
        }
        .mobileChartControls button,
        .mobileChartControls select,
        .mobileDrawActions button {
          min-height: 32px;
          padding: 5px 7px;
          font-size: 10px;
        }
      }

/* ===== Pasted text (3).txt ===== */
/* ===== Tooltip Mode glow ===== */

.tooltip-theme-active {
  background: var(--tooltip-accent-gradient-strong) !important;
  border-color: rgba(var(--tooltip-accent-rgb), 0.95) !important;
  color: var(--tooltip-accent-ink) !important;
  box-shadow:
    0 0 0 1px rgba(var(--tooltip-accent-soft-rgb), 0.45),
    0 0 20px rgba(var(--tooltip-accent-rgb), 0.45) !important;
}

.tooltip-theme-pill {
  border-color: var(--tooltip-accent-border) !important;
  color: var(--tooltip-accent-text) !important;
  box-shadow: 0 0 0 1px rgba(var(--tooltip-accent-rgb), 0.14) inset;
}

.tooltip-theme-timeframe {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
  border-color: rgba(var(--tooltip-accent-rgb), 0.98) !important;
  color: var(--tooltip-accent-text) !important;
  box-shadow:
    0 0 0 1px rgba(var(--tooltip-accent-soft-rgb), 0.48),
    0 0 18px rgba(var(--tooltip-accent-rgb), 0.42),
    inset 0 0 0 1px rgba(var(--tooltip-accent-rgb), 0.18) !important;
}

      .tipTarget {
        position: relative;
        z-index: 20;
        cursor: pointer;
      }

      .tipMode .tipTarget {
        position: relative;
        isolation: isolate;
        animation: tipPulse 1.8s ease-in-out infinite;
      }

      .tipMode .tipTarget::after {
        content: "";
        position: absolute;
        inset: -3px;
        border: 2px solid var(--tooltip-accent-border-strong);
        border-radius: 12px;
        pointer-events: none;
        box-shadow:
          0 0 0 1px rgba(var(--tooltip-accent-soft-rgb), 0.18),
          0 0 18px rgba(var(--tooltip-accent-rgb), 0.3);
      }

      .tipMode #repsOfRiskTitle.tipTarget {
        animation: none;
      }
      .tipMode #repsOfRiskTitle.tipTarget::after {
        inset: -6px -10px;
        border-radius: 12px;
      }

      .tipMode button.tipTarget::after,
      .tipMode input.tipTarget::after,
      .tipMode select.tipTarget::after,
      .tipMode .tipBtn.tipTarget::after,
      .tipMode .promo-btn.tipTarget::after,
      .tipMode .back-btn-top.tipTarget::after,
      .tipMode .pill.tipTarget::after,
      .tipMode .symbol.tipTarget::after,
      .tipMode .tag.tipTarget::after,
      .tipMode .qty-step-btn.tipTarget::after,
      .tipMode .mi.tipTarget::after {
        inset: -4px;
        border-radius: 14px;
      }

      /* Tooltip Mode button attractor (when tooltip mode is OFF) */
@keyframes tipBtnPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(250, 204, 21, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
  }
}

.tipNudge {
  animation: tipBtnPulse 1.8s infinite;
  border-color: rgba(250, 204, 21, 0.7) !important;
}

      /* Animate only in tooltip mode */
      @keyframes tipPulse {
        0% {
          box-shadow:
            0 0 0 3px rgba(var(--tooltip-accent-rgb), 0.95),
            0 0 0 10px rgba(var(--tooltip-accent-rgb), 0.22),
            0 18px 40px rgba(0, 0, 0, 0.35);
        }
        50% {
          box-shadow:
            0 0 0 3px rgba(var(--tooltip-accent-rgb), 0.95),
            0 0 0 16px rgba(var(--tooltip-accent-rgb), 0.12),
            0 18px 40px rgba(0, 0, 0, 0.35);
        }
        100% {
          box-shadow:
            0 0 0 3px rgba(var(--tooltip-accent-rgb), 0.95),
            0 0 0 10px rgba(var(--tooltip-accent-rgb), 0.22),
            0 18px 40px rgba(0, 0, 0, 0.35);
        }
      }
      /* Make menu items glow without messing up layout */
      .tipMode .menu .mi.tipTarget {
        box-shadow:
          0 0 0 2px rgba(var(--tooltip-accent-rgb), 0.9),
          0 0 0 8px rgba(var(--tooltip-accent-rgb), 0.18);
        outline: 2px solid rgba(var(--tooltip-accent-rgb), 0.58);
        outline-offset: 0;
      }
      .tipMode .menu .mi.tipTarget::after {
        inset: -3px;
        border-radius: 12px;
      }
      .tipMode .tipTarget:hover {
        transform: translateY(-1px);
        box-shadow:
          0 0 0 3px rgba(var(--tooltip-accent-rgb), 1),
          0 0 0 14px rgba(var(--tooltip-accent-rgb), 0.25),
          0 22px 50px rgba(0, 0, 0, 0.45);
      }

.tipMode #tfSel.tipTarget,
.tipMode #tfSelMobile.tipTarget {
  box-shadow:
    0 0 0 2px rgba(var(--tooltip-accent-rgb), 0.95),
    0 0 10px rgba(var(--tooltip-accent-rgb), 0.25) !important;
}

      .small {
        font-size: 11px;
        color: var(--muted);
        line-height: 1.35;
        margin-top: 10px;
      }

      .orders {
        flex: 1;
        overflow: auto;
        padding-right: 4px;
      }
      .orders::-webkit-scrollbar {
        width: 8px;
      }
      .orders::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 99px;
      }
      .orderItem {
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px;
        background: rgba(2, 6, 23, 0.35);
      }
.lesson-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#d7dbe4;
}

.lesson-intro{
  font-size:15px;
  line-height:1.55;
  color:#dfe5ef;
}

.lesson-tradeoff{
  font-size:15px;
  line-height:1.55;
  color:#cfd6e4;
}

.lesson-divider{
  border:0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,209,102,.95), rgba(255,209,102,.18));
  margin:2px 0 4px;
}

.lesson-section{
  padding:8px 0 8px 12px;
  border-left:3px solid transparent;
}

.lesson-section-title{
  display:inline-block;
  margin-bottom:4px;
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
}

.lesson-section p{
  margin:0;
  line-height:1.55;
  color:#c9d1dd;
}

.lesson-section.info{
  border-left-color:#57a6ff;
}
.lesson-section.info .lesson-section-title{
  color:#57a6ff;
  text-shadow:0 0 8px rgba(87,166,255,.18);
}

.lesson-section.truth{
  border-left-color:#b388ff;
}
.lesson-section.truth .lesson-section-title{
  color:#b388ff;
  text-shadow:0 0 8px rgba(179,136,255,.18);
}

.lesson-section.warning{
  border-left-color:#ff7b72;
}
.lesson-section.warning .lesson-section-title{
  color:#ff7b72;
  text-shadow:0 0 8px rgba(255,123,114,.18);
}

.lesson-section.action{
  border-left-color:#4cd964;
}
.lesson-section.action .lesson-section-title{
  color:#4cd964;
  text-shadow:0 0 8px rgba(76,217,100,.18);
}

.lesson-section.lesson{
  border-left-color:#ffd166;
}
.lesson-section.lesson .lesson-section-title{
  color:#ffd166;
  text-shadow:0 0 10px rgba(255,209,102,.22);
}

.key-gold{
  color:#ffd166;
  font-weight:700;
}

.key-blue{
  color:#57a6ff;
  font-weight:700;
}

.key-red{
  color:#ff7b72;
  font-weight:700;
}

.key-green{
  color:#4cd964;
  font-weight:700;
}

.key-purple{
  color:#b388ff;
  font-weight:700;
}

.lesson-quote{
  display:block;
  margin-top:2px;
  color:#b8c0cc;
  font-style:italic;
}

.lesson-list{
  margin:4px 0 0 0;
  padding-left:18px;
}

.lesson-list li{
  margin:3px 0;
  color:#c9d1dd;
}

.modal-callout{
  background:linear-gradient(145deg, rgba(255,209,102,.10), rgba(255,209,102,.04));
  border:1px solid rgba(255,209,102,.26);
  border-radius:12px;
  padding:14px 16px;
  color:#f3e6b3;
  line-height:1.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 16px rgba(255,209,102,.05);
}

.modal-callout .callout-title{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#ffd166;
}

.modal-callout .risk{
  color:#ff9b8f;
  font-weight:700;
}

.modal-callout .warn{
  color:#ffd166;
  font-weight:700;
}
.welcome-guide {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.welcome-hero {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background:
    linear-gradient(180deg, rgba(91, 33, 182, 0.18), rgba(15, 23, 42, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 18px 40px rgba(0,0,0,0.28);
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.35);
  color: #fde68a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-heading {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
  color: #ffffff;
  font-weight: 900;
}

.welcome-subtext {
  margin: 0;
  color: #dbe4ff;
  font-size: 13px;
  line-height: 1.6;
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.welcome-mini-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 28px rgba(0,0,0,0.22);
}

.welcome-mini-card p {
  margin: 0;
  color: #d6ddf5;
  font-size: 12px;
  line-height: 1.55;
}

.welcome-mini-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.welcome-mini-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
  background: linear-gradient(180deg, #facc15, #eab308);
  box-shadow: none;
  flex: 0 0 30px;
}

.welcome-mini-title {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.welcome-mini-card.apex {
  border-color: rgba(250, 204, 21, 0.22);
}

.welcome-mini-card.session {
  border-color: rgba(96, 165, 250, 0.22);
}

.welcome-mini-card.controls {
  border-color: rgba(34, 197, 94, 0.22);
}

.welcome-mini-card.chart {
  border-color: rgba(244, 114, 182, 0.22);
}

.welcome-summary-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.16), rgba(15, 23, 42, 0.88));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 28px rgba(0,0,0,0.2);
}

.welcome-summary-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #dcfce7;
}

.welcome-summary-card p {
  margin: 0;
  color: #d6ddf5;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .welcome-grid {
    grid-template-columns: 1fr;
  }

  .welcome-heading {
    font-size: 18px;
  }

  .welcome-mini-card,
  .welcome-summary-card,
  .welcome-hero {
    padding: 13px;
  }
}

/* ===== Pasted text (4).txt ===== */
.orderTop {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: flex-start;
      }
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        color: var(--muted);
        background: rgba(255, 255, 255, 0.02);
      }
      .tag.buy {
        color: rgba(34, 197, 94, 0.95);
        border-color: rgba(34, 197, 94, 0.35);
      }
      .tag.sell {
        color: rgba(251, 113, 133, 0.95);
        border-color: rgba(251, 113, 133, 0.35);
      }
      .tag.bracket {
        color: rgba(251, 191, 36, 0.95);
        border-color: rgba(251, 191, 36, 0.35);
      }
      .orderMeta {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
      }
      .orderActions {
        display: flex;
        gap: 6px;
      }
      .orderActions button {
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
      }

      .right {
        padding-bottom: env(safe-area-inset-bottom);
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        min-width: 0;
      }
      #cv {
        position: relative;
        z-index: 0;
        pointer-events: auto;
      }
      .topbar {
        height: 46px;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: wrap;
        padding: 0 14px;
        background: rgba(15, 23, 42, 0.75);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(6px);
      }
      .topbar .leftside {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }

      .topbar .centerside {
        position: absolute;
        left: 50%;
        transform: translateX(
          -50%
        ); /* centered for tooltip/find/timeframe controls */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        pointer-events: auto;
      }

      .promo-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .topbar .centerside .promo-actions {
        justify-content: center;
      }

      .desktopAutoHidden {
        display: none !important;
      }

      .promo-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: nowrap;

        padding: 10px 18px;
        border-radius: 999px;

        border: 1px solid rgba(148, 163, 184, 0.2);
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.02)
          ),
          radial-gradient(
            circle at 30% 0%,
            rgba(96, 165, 250, 0.1),
            transparent 60%
          ),
          rgba(15, 23, 42, 0.72);

        color: rgba(241, 245, 249, 0.92);
        font-size: 14px;
        font-weight: 650;
        text-decoration: none;
        letter-spacing: 0.01em;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease,
          filter 0.18s ease;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .promo-btn::after {
        content: "↗";
        font-size: 13px;
        opacity: 0.85;
        transition:
          transform 0.18s ease,
          opacity 0.18s ease;
      }

      .apexPromoWrap {
        width: 100%;
      }

      .apex-side-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 14px;
        font-size: 13px;
        text-align: center;
      }

      .promo-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(234, 179, 8, 0.38);
        box-shadow: 0 12px 38px rgba(0, 0, 0, 0.42);
        filter: brightness(1.04);
      }

      .promo-btn:hover::after {
        transform: translateX(3px);
        opacity: 1;
      }

      .gold-border {
        border: 1px solid rgba(234, 179, 8, 0.55) !important;
        box-shadow:
          0 0 0 1px rgba(234, 179, 8, 0.12) inset,
          0 10px 26px rgba(0, 0, 0, 0.24);
      }

      .gold-border:hover {
        border-color: rgba(234, 179, 8, 0.8) !important;
        box-shadow:
          0 0 0 1px rgba(234, 179, 8, 0.18) inset,
          0 12px 34px rgba(0, 0, 0, 0.28);
      }

      .topRight {
        margin-left: auto; /* desktop: keep it on the far right */
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        max-width: 48%;
      }

      /* mobile: move right cluster UNDER the left cluster (so it’s not crowded) */
      @media (max-width: 900px) {
        .topRight {
          margin-left: 0;
          width: 100%;
          max-width: none;
          justify-content: flex-start;
        }
      }
      @media (max-width: 900px) {
        .topbar .centerside {
          position: static;
          transform: none;
          width: 100%;
          height: auto;
          justify-content: center;
          padding: 6px 0;
        }
      }

      .symbol {
        font-family: var(--mono);
        border: 1px solid var(--line);
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
      }
      .status {
        font-size: 10px;
        color: var(--muted);
      }
      canvas {
        touch-action: none;
        -webkit-user-select: none;
        min-height: 0;
        flex: 1;
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.02),
          transparent 18%
        );
      }

/* ===== Pasted text (6).txt ===== */
/* Context menu */
      .menu {
        position: absolute;
        min-width: 220px;
        background: rgba(15, 23, 42, 0.96);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 8px;
        z-index: 50;
        display: none;
      }
      .menu .mi {
        padding: 10px 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        cursor: pointer;
        font-size: 13px;
      }
      .menu .mi:hover {
        background: rgba(255, 255, 255, 0.06);
      }
      .menu .sub {
        font-size: 11px;
        color: var(--muted);
        font-family: var(--mono);
      }
      .divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 8px 0;
      }

      /* Modal */
      .modalWrap {
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, 0.6);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 60;
      }
      .modal {
        width: 440px;
        max-width: calc(100% - 26px);
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: var(--shadow);
        padding: 14px;
      }
      .modal h2 {
        margin: 0 0 8px 0;
        font-size: 14px;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
      }
      .field {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.03);
      }
      .field label {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .field input,
      .field select {
        width: 100%;
        padding: 9px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(2, 6, 23, 0.35);
        color: var(--ink);
        font-family: var(--mono);
        font-size: 16px;
        outline: none;
      }
      .modal .actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 12px;
      }
      .hint {
        font-size: 11px;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.35;
      }
      .kbd {
        font-family: var(--mono);
        border: 1px solid var(--line);
        padding: 2px 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.02);
      }
      .field.hidden {
        display: none;
      }
      #btnBracket,
      #btnBracketToggle,
      #qtyStepper {
        flex: 1 1 120px;
      }
      #qtyInput {
        width: 100%;
        max-width: none;
        text-align: center;
      }
      #qtyStepper {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 132px;
      }
      .qty-step-btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.05);
        color: var(--ink);
        font-weight: 900;
        font-size: 22px;
        line-height: 1;
      }
      .qty-step-btn:active {
        transform: translateY(1px);
      }
      @media (max-width: 900px) {
        #btnBracket,
        #btnBracketToggle {
          flex: 1 1 calc(50% - 4px);
        }
        #qtyStepper {
          order: 3;
          flex: 1 1 100%;
          min-width: 100%;
          width: 100%;
          margin-top: 2px;
        }
        #qtyInput {
          font-size: 18px !important;
        }
      }
      @media (max-width: 640px) {
        #btnBracket,
        #btnBracketToggle {
          flex: 1 1 100%;
        }
        #qtyStepper {
          margin-top: 0;
        }
      }
      /* ==== Back Button (non-blocking) ==== */
      .back-btn-top {
        position: relative; /* was absolute */
        top: auto;
        left: auto;

        display: inline-flex;
        align-items: center;
        white-space: nowrap;

        padding: 7px 10px;
        border-radius: 10px;
        border: 1px solid rgba(168, 85, 247, 0.38);
        color: var(--blue);
        text-decoration: none;
        font-weight: 700;
        font-size: 10px;
        background: rgba(2, 6, 23, 0.35);
        backdrop-filter: blur(6px);
        transition: 0.18s;
        z-index: auto;
      }
      .back-btn-top:hover {
        transform: translateX(-2px);
        color: var(--warn);
        border-color: rgba(251, 191, 36, 0.6);
      }

      /* Make room so it never overlaps topbar content (JS will set this) */
      .topbar {
        padding-left: 14px;
      }
      /* Always show tick info (desktop + mobile) */
      #tickInfo {
        display: inline-flex;
        white-space: nowrap;
      }
      @media (max-width: 900px) {
        .topbar {
          padding-left: 150px;
        }
      }
      @media (max-width: 520px) {
        .topbar {
          padding-left: 120px;
        }
      }

      /* Ensure overlays/menus always sit above */
      .menu {
        z-index: 50;
      }
      .modalWrap {
        z-index: 60;
      }

      #tipLockBanner {
        position: absolute;
        top: 64px;
        left: calc(50% - 35px);
        transform: translateX(-50%);
        z-index: 1200;

        max-width: 760px;
        width: fit-content;
        text-align: center;

        padding: 10px 18px;
        border-radius: 14px;
        background: var(--tooltip-accent-fill);
        border: 1px solid var(--tooltip-accent-border);
        color: var(--tooltip-accent-text);
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 0.2px;

        display: none;
        pointer-events: none;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
      }

      /* ===== Tooltip Mode ===== */
      .tipOverlay {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(2, 6, 23, 0.72);
        backdrop-filter: blur(6px);
        z-index: 9999;
        padding: 18px;
      }
.tipModal {
  width: min(760px, 96vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--tooltip-accent-border-soft);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
      .tipHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        background: rgba(var(--tooltip-accent-rgb), 0.18);
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
      }
      .tipHeader .t {
        font-weight: 900;
        color: var(--tooltip-accent-text);
        font-size: 14px;
      }
.tipBody {
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
      .tipBody p {
        margin: 0 0 10px 0;
        color: #e2e8f0;
      }
      .tipCallout {
        background: var(--tooltip-accent-fill-soft);
        border: 1px solid var(--tooltip-accent-border-soft);
        color: var(--tooltip-accent-text);
        border-radius: 14px;
        padding: 10px 12px;
        font-size: 13px;
        margin-top: 10px;
      }
      .tipFooter {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding: 12px 14px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(2, 6, 23, 0.35);
      }
.tipHeader,
.tipFooter {
  flex: 0 0 auto;
}

.tipBody {
  flex: 1 1 auto;
}
.tipBtn {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid var(--tooltip-accent-border);
  background: var(--tooltip-accent-fill);
  color: var(--tooltip-accent-text);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
      .tipBtn.primary {
        background: rgba(var(--tooltip-accent-rgb), 0.95);
        color: var(--tooltip-accent-ink);
        border-color: rgba(var(--tooltip-accent-rgb), 0.52);
      }

      /* ===== Timeframe selector readability ===== */
      #tfSel {
        color: #000 !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
      }
      #tfSel option {
        color: #000;
      }

      /* ===== Lobby HUD collapse ===== */
      #lobbyHud.collapsed #lobbyHudBody {
        display: none;
      }
      #lobbyHud.collapsed {
        padding: 10px 10px;
        min-width: 220px;
        max-width: 320px;
      }
      #btnLobbyCollapse {
        white-space: nowrap;
      }
      @media (max-width: 900px) {
        #lobbyHud {
          left: 14px !important;
        } /* keep visible on small screens */
      }

/* ===== Pasted text (7).txt ===== */
/* ===== Mobile portrait lock overlay ===== */
      .rotateLock {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(2, 6, 23, 0.85);
        backdrop-filter: blur(6px);
        z-index: 10000;
      }
      .rotateCard {
        width: min(520px, 92vw);
        border: 1px solid rgba(168, 85, 247, 0.26);
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.96);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
        padding: 16px;
        text-align: center;
      }
      .rotateCard h2 {
        margin: 0 0 8px 0;
        font-size: 16px;
      }
      .rotateCard p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
      }
      /* ===== Toasts ===== */
      .toast {
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        background: rgba(15, 23, 42, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        color: var(--ink);
        padding: 10px 12px;
        border-radius: 14px;
        font-size: 10px;
        max-width: min(680px, calc(100vw - 24px));
        z-index: 20000;
        display: none;
        align-items: center;
        gap: 10px;
      }
      .toast .dot {
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: rgba(96, 165, 250, 0.95);
      }
      .toast.good .dot {
        background: rgba(34, 197, 94, 0.95);
      }
      .toast.bad .dot {
        background: rgba(251, 113, 133, 0.95);
      }
      .toast.warn .dot {
        background: rgba(251, 191, 36, 0.95);
      }
      .toast .msg {
        line-height: 1.3;
      }

      /* show lock ONLY on small screens when in portrait */
      @media (max-width: 900px) {
        .tickText {
          display: inline-flex;
          font-size: 10px;
          opacity: 0.9;
          white-space: nowrap;
        }
        .tickInfoBtn {
          display: inline-flex !important;
        }
      }
      @media (max-width: 900px) and (orientation: portrait) {
        .rotateLock {
          display: flex;
        }
        body {
          overflow: hidden;
        } /* prevent scrolling behind overlay */
      }
      /* ===== Candle hover tooltip ===== */
      .candleTip {
        position: absolute;
        display: none;
        z-index: 12000;
        pointer-events: none;
        background: rgba(15, 23, 42, 0.96);
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        border-radius: 14px;
        padding: 10px 12px;
        font-size: 10px;
        max-width: 280px;
      }
      .candleTip .t {
        font-weight: 900;
        color: #bfdbfe;
        margin-bottom: 6px;
      }
      .candleTip .mono {
        font-family: var(--mono);
        color: rgba(229, 231, 235, 0.9);
        line-height: 1.35;
      }
      .candleTip .muted {
        color: var(--muted);
        margin-top: 6px;
        line-height: 1.35;
      }

      /* ==== FIX: Prevent report text from overflowing modal ==== */
      #reportHtml,
      #reportHtml * {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
      }

      #reportHtml ul {
        padding-left: 18px;
        margin: 10px 0;
      }

      #reportHtml li {
        line-height: 1.45;
        margin-bottom: 6px;
      }
      /* ==== END FIX ==== */

      /* Also hide any related tooltip/info buttons if desired */
      #tickInfoBtn {
        display: none !important;
      }
      /* ==== END REMOVE ==== */

      /* ===== Responsive tightening (topbar) ===== */
      @media (max-width: 900px) {
        .topbar {
          gap: 8px;
          padding: 0 10px;
          height: auto;
        }
        .topbar button,
        .topbar select {
          padding: 6px 8px !important;
          font-size: 11px !important;
          border-radius: 10px !important;
        }
        .symbol {
          padding: 5px 8px;
          font-size: 10px;
        }
        .status {
          font-size: 11px;
        }
      }

      /* ===== Lobby HUD: mobile dock + compact ===== */
      #mobileLobbyHudDock {
        display: none !important;
      }
      @media (max-width: 900px) {
        #mobileLobbyHudDock {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow: hidden;
          position: relative;
          z-index: 1;
        }
        #mobileLobbyHudDock.active {
          display: block;
        }
        #lobbyHud.mobileDocked {
          position: relative !important;
          top: auto !important;
          right: auto !important;
          bottom: auto !important;
          left: auto !important;
          transform: none !important;
          z-index: 1 !important;
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          max-height: min(42vh, 360px) !important;
          margin: 0 !important;
          border-radius: 16px !important;
          padding: 10px !important;
          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
          overflow: hidden !important;
          touch-action: pan-y !important;
        }
        #lobbyHud.mobileDocked #lobbyCodeTxt {
          max-width: 32vw !important;
        }
        #lobbyHud {
          position: fixed !important;
          top: auto !important;
          left: 14px !important;
          right: auto !important;
          bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px)) !important;
          transform: none !important;

          width: auto !important;
          max-width: min(220px, calc(100vw - 20px)) !important;
          min-width: min(160px, calc(100vw - 20px)) !important;
          max-height: min(72dvh, calc(100dvh - 20px)) !important;
          border-radius: 18px !important;
          padding: 12px !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          touch-action: pan-y;
        }
        #lobbyHud.collapsed {
          max-height: none !important;
          padding: 10px !important;
        }
        #lobbyHud.collapsed {
          max-width: min(190px, calc(100vw - 20px)) !important;
          min-width: min(150px, calc(100vw - 20px)) !important;
        }
        #lobbyHudTop {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
        }
        #lobbyHudIdentity {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          min-width: 0;
        }
        #lobbyCodeTxt {
          max-width: 44vw !important;
          text-align: right;
        }
        #lobbyCodeWrap {
          display: flex;
          align-items: center;
          gap: 8px;
          min-width: 0;
        }
        #btnCopyLobbyCode {
          width: auto !important;
          min-width: auto !important;
          flex: 0 0 auto;
        }
        #lobbyHudQuickActions,
        #lobbyHudMobileActions {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          width: 100%;
        }
        #lobbyHudBody {
          margin-top: 8px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          padding-right: 2px;
        }
        #lobbyHud .tipBtn,
        #lobbyDurationSel {
          width: 100%;
          min-width: 0;
          padding: 8px 10px !important;
          font-size: 11px !important;
        }
        #btnLobbyEditRules {
          grid-column: 1 / -1;
        }
        #lobbyRulesMini {
          margin-top: 8px;
          padding: 10px;
          border: 1px solid rgba(148, 163, 184, 0.16);
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.03);
        }
        #lobbyDurationRow {
          margin-top: 10px !important;
        }
      }

      /* ===== MOBILE TRADING LAYOUT OVERRIDES ===== */
      @media (max-width: 900px) {
        body {
          overflow: hidden;
          flex-direction: row;
        }

        .left {
          border-left: none;
          border-right: 1px solid var(--line);

          width: min(300px, 42vw);
          min-width: 250px;
          padding: 10px;
          gap: 10px;
        }

        .card {
          padding: 10px;
          border-radius: 12px;
        }

        .brand {
          padding: 9px 10px;
          border-radius: 12px;
        }

        .brand h1 {
          font-size: 13px;
        }

        .pill,
        .label,
        .value,
        .small {
          font-size: 11px;
        }

        .btns {
          gap: 8px;
          margin-top: 8px;
        }

        button {
          padding: 8px 9px;
          font-size: 11px;
          border-radius: 10px;
        }

        #qtyInput {
          max-width: 88px;
          min-width: 88px;
          padding: 8px 8px !important;
          font-size: 14px !important;
        }

        .right {
          min-width: 0;
        }

        .topbar {
          min-height: 44px;
          height: auto;
          padding: 6px 10px !important;
          gap: 8px !important;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
        }

        .topbar .leftside,
        .topbar .topRight {
          display: none !important;
        }

        .topbar .centerside {
          position: static !important;
          left: auto !important;
          transform: none !important;
          width: 100%;
          height: auto;
          display: flex;
          justify-content: center;
          padding: 0;
        }

        .promo-actions {
          width: 100%;
          justify-content: center;
          gap: 0;
        }

        .promo-actions > * {
          display: none !important;
        }

        .promo-actions #btnLobby {
          display: inline-flex !important;
          width: auto;
          max-width: min(92vw, 340px);
          padding: 8px 14px !important;
          font-size: 12px !important;
          white-space: nowrap;
        }

        .promo-actions .promo-btn {
          display: none !important;
        }

        #lobbyHud {
          position: fixed !important;
          top: 56px !important;
          bottom: 46px !important;
          left: auto !important;
          right: 110px !important;
          max-width: min(280px, calc(100vw - 20px)) !important;
          min-width: min(220px, calc(100vw - 20px)) !important;
          max-height: none !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          touch-action: pan-y;
        }

        #tipLockBanner {
          top: 54px;
          left: 50%;
          width: auto;
          max-width: calc(100vw - 16px);
          padding: 8px 12px;
          font-size: 11px;
        }
      }

      @media (max-width: 760px) {
        .left {
          width: min(280px, 48vw);
          min-width: 232px;
          padding: 8px;
        }

        .row {
          gap: 8px;
        }

        .btns {
          gap: 6px;
        }

        button {
          padding: 7px 8px;
          font-size: 10px;
        }

        .orderItem {
          padding: 8px;
        }

        #qtyInput {
          max-width: 78px;
          min-width: 78px;
          font-size: 13px !important;
        }

        .promo-actions #btnLobby {
          max-width: min(90vw, 300px);
          padding: 7px 12px !important;
          font-size: 11px !important;
        }
      }

      @media (max-width: 900px) and (orientation: landscape) {
        .left {
          width: min(290px, 39vw);
          min-width: 240px;
        }

        .topbar {
          min-height: 42px;
          padding: 4px 8px !important;
        }

        .promo-actions #btnLobby {
          padding: 7px 12px !important;
          font-size: 11px !important;
        }
      }

      /* ===== MOBILE TOP BAR / LOBBY CLEANUP ===== */
      @media (max-width: 900px) {
        .topbar {
          min-height: 48px !important;
          height: auto !important;
          padding: 8px 10px !important;
          gap: 8px !important;
          justify-content: center !important;
          align-items: stretch !important;
          flex-wrap: wrap !important;
        }

        .topbar .leftside,
        .topbar .topRight,
        .topbar .back-btn-top,
        .topbar #btnTips,
        .topbar #btnTipsOff,
        .topbar .promo-actions .promo-btn {
          display: none !important;
        }

        .topbar .centerside {
          position: static !important;
          left: auto !important;
          transform: none !important;
          width: 100% !important;
          height: auto !important;
          display: flex !important;
          justify-content: center !important;
          align-items: stretch !important;
          padding: 0 !important;
          margin: 0 !important;
        }

        .promo-actions {
          width: 100% !important;
          max-width: 460px !important;
          margin: 0 auto !important;
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 8px !important;
          align-items: stretch !important;
        }

        .promo-actions > * {
          display: none !important;
        }

        .promo-actions #btnJoinLobbyOpen,
        .promo-actions #btnHostLobbyOpen {
          display: inline-flex !important;
          width: 100% !important;
          max-width: none !important;
          justify-content: center !important;
          align-items: center !important;
          padding: 8px 12px !important;
          margin: 0 !important;
          font-size: 12px !important;
          white-space: nowrap !important;
        }

        #lobbyOverlayCard {
          width: min(560px, 100%) !important;
        }

        #lobbyOverlayBody {
          gap: 12px !important;
        }

        #lobbyOverlayBody > * {
          width: 100% !important;
        }
      }

      @media (min-width: 901px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
        .topbar {
          min-height: 48px !important;
          height: auto !important;
          padding: 8px 12px !important;
          gap: 8px !important;
          align-items: center !important;
          flex-wrap: wrap !important;
        }

        .topbar .leftside {
          display: flex !important;
          flex: 1 1 auto !important;
          min-width: 0 !important;
          gap: 8px !important;
          flex-wrap: wrap !important;
        }

        .topbar .topRight {
          display: flex !important;
          flex: 0 1 auto !important;
          min-width: 0 !important;
          gap: 8px !important;
          flex-wrap: wrap !important;
          justify-content: flex-end !important;
        }

        .topbar .centerside {
          position: static !important;
          left: auto !important;
          transform: none !important;
          width: 100% !important;
          height: auto !important;
          display: flex !important;
          justify-content: center !important;
          align-items: stretch !important;
          padding: 0 !important;
          margin: 0 !important;
          order: 3 !important;
        }

        .promo-actions {
          width: 100% !important;
          max-width: 520px !important;
          margin: 0 auto !important;
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 8px !important;
          align-items: stretch !important;
        }

        .promo-actions .promo-btn {
          display: none !important;
        }

        .promo-actions #btnJoinLobbyOpen,
        .promo-actions #btnHostLobbyOpen {
          display: inline-flex !important;
          width: 100% !important;
          max-width: none !important;
          justify-content: center !important;
          align-items: center !important;
          padding: 8px 12px !important;
          margin: 0 !important;
          font-size: 12px !important;
          white-space: nowrap !important;
        }

        #lobbyOverlayCard {
          width: min(560px, 100%) !important;
        }

        #lobbyOverlayBody {
          gap: 12px !important;
        }

        #lobbyOverlayBody > * {
          width: 100% !important;
        }
      }

      /* ===== Prevent iPhone text selection / copy callout on controls ===== */
      html,
      body,
      canvas,
      button,
      .menu,
      .menu *,
      .topbar,
      .promo-actions,
      .tipBtn,
      .promo-btn,
      .back-btn-top {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }
      input,
      textarea,
      select {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
      }

      @media (max-width: 900px) {
        #lobbyOverlay {
          align-items: flex-start !important;
          justify-content: center !important;
          padding: max(12px, env(safe-area-inset-top)) 12px
            max(12px, env(safe-area-inset-bottom)) !important;
        }
        #lobbyOverlayCard {
          width: min(560px, 100%) !important;
          max-height: calc(
            100dvh -
              max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))
          ) !important;
          margin: 0 auto !important;
        }
        #lobbyOverlayBody {
          padding-bottom: 18px !important;
        }
      }

      @media (max-width: 900px) {
        #reportOverlay {
          align-items: flex-start !important;
          justify-content: center !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          padding: max(12px, env(safe-area-inset-top)) 12px
            max(12px, env(safe-area-inset-bottom)) !important;
        }
        #reportOverlay .tipModal {
          width: min(680px, 100%) !important;
          max-height: calc(
            100dvh -
              max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))
          ) !important;
          display: flex !important;
          flex-direction: column !important;
          margin: 0 auto !important;
        }
        #reportOverlay .tipHeader {
          position: sticky;
          top: 0;
          z-index: 2;
        }
        #reportOverlay .tipBody {
          flex: 1 1 auto;
          min-height: 0;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          padding: 12px !important;
        }
        #reportOverlay .tipFooter {
          position: sticky;
          bottom: 0;
          z-index: 2;
          gap: 8px;
          padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
        #reportOverlay .tipBtn {
          flex: 1 1 calc(50% - 8px);
          min-width: 0;
          padding: 9px 10px;
          font-size: 10px;
        }

        .lobbyResultsGrid {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 10px !important;
        }
        .lobbyResultRow {
          padding: 9px 10px !important;
          gap: 8px !important;
        }
        .lobbyResultRank {
          min-width: 44px !important;
          font-size: 12px !important;
        }
        .lobbyResultName {
          font-size: 13px !important;
        }
        .lobbyResultMeta {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 6px 10px !important;
          white-space: normal !important;
          font-size: 11px !important;
          line-height: 1.35 !important;
        }
      }

      /* ensure Start Solo Session shows on desktop */
      @media (hover: hover) and (pointer: fine) {
        .promo-actions #btnSessionStart {
          display: inline-flex !important;
        }
      }

      @media (hover: none) and (pointer: coarse), (max-width: 1024px) {
        .promo-actions #btnSessionStart {
          display: none !important;
        }
      }

      /* Desktop: keep draw action buttons inside the draw rail */
      @media (min-width: 901px) {
        #mobileDrawActions {
          z-index: 50;
        }
        .drawToolbar .mobileDrawActions {
          display: none;
          position: static !important;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
          padding: 2px 0 3px;
          margin: 0 0 2px;
          border: none;
          border-radius: 0;
          background: transparent;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          box-shadow: none;
        }
        .drawToolbar.desktopOpen .mobileDrawActions.show,
        .drawToolbar:not(.desktopCollapsible) .mobileDrawActions.show {
          display: flex !important;
        }
        .drawToolbar .mobileDrawActions button {
          flex: 1 1 0;
          min-width: 0;
          min-height: 36px;
          justify-content: center;
          text-align: center;
        }
      }

      /* Host lobby action button in left panel */
      #btnHostLobbyAction {
        display: none !important;
      }
      #btnHostLobbyActionHud {
        display: none;
      }

      /* Mobile/tablet: give chart more room and make lobby overlay smaller */
      @media (max-width: 900px) {
        .left {
          width: min(230px, 36vw) !important;
          min-width: 190px !important;
          padding: 8px !important;
          gap: 8px !important;
        }
        .card {
          padding: 8px !important;
          border-radius: 10px !important;
        }
        .brand {
          padding: 8px 9px !important;
          border-radius: 10px !important;
        }
        .brand h1 {
          font-size: 12px !important;
        }
        .label,
        .value,
        .small,
        .pill {
          font-size: 10px !important;
        }
        .row {
          gap: 6px !important;
        }
        .btns {
          gap: 6px !important;
          margin-top: 6px !important;
        }
        .btns > button {
          min-width: 0 !important;
          flex: 1 1 0 !important;
          padding: 7px 6px !important;
          font-size: 10px !important;
        }
        .left .card + .card {
          margin-top: 0 !important;
        }
        #lobbyOverlay {
          padding: max(8px, env(safe-area-inset-top)) 8px
            max(8px, env(safe-area-inset-bottom)) !important;
        }
        #lobbyOverlayCard {
          width: min(420px, 94vw) !important;
          max-height: calc(100dvh - 16px) !important;
          border-radius: 14px !important;
        }
        #lobbyOverlayCard > div:first-child {
          padding: 10px 12px !important;
        }
        #lobbyOverlayBody {
          gap: 10px !important;
          padding-bottom: 10px !important;
        }
        #lobbyOverlayBody .card,
        #lobbyOverlayBody .panel,
        #lobbyOverlayBody > div {
          padding: 8px !important;
        }
        #lobbyOverlayBody button,
        #lobbyOverlayBody input,
        #lobbyOverlayBody select {
          min-height: 34px !important;
          padding: 7px 8px !important;
          font-size: 11px !important;
        }
      }
      @media (max-width: 760px) {
        .left {
          width: min(210px, 34vw) !important;
          min-width: 178px !important;
          padding: 7px !important;
        }

        .apex-side-btn {
          padding: 9px 10px !important;
          font-size: 11px !important;
        }
        .label,
        .value,
        .small {
          font-size: 9.5px !important;
        }
        .btns > button {
          padding: 6px 5px !important;
          font-size: 9px !important;
        }
        #lobbyOverlayCard {
          width: min(380px, 94vw) !important;
        }
      }
      /* ===== DESKTOP FONT FIX (RESTORE NORMAL SIZE) ===== */
      @media (min-width: 901px) {
        .label {
          font-size: 12px !important;
        }

        .value {
          font-size: 13px !important;
        }

        .pill {
          font-size: 11px !important;
        }

        .small {
          font-size: 12px !important;
        }

        button {
          font-size: 12px !important;
        }
      }
      /* ===== DESKTOP TOP BAR BUTTON SIZE BOOST ===== */
      @media (min-width: 901px) {
        .topbar .promo-btn,
        .topbar .tipBtn,
        .topbar button,
        .topbar select {
          font-size: 14px !important;
          padding: 10px 14px !important;
        }

        /* optional: make the dropdown (1m, 5m etc) match nicely */
        #tfSel {
          font-size: 14px !important;
          padding: 8px 10px !important;
        }
      }
      @media (min-width: 901px) {
        .topbar {
          display: grid !important;
          grid-template-columns: auto minmax(260px, 1fr) auto;
          grid-template-areas: "left center right";
          align-items: center;
          column-gap: 16px;
          row-gap: 10px;
          min-height: 60px;
          height: auto;
          padding: 10px 14px !important;
          overflow: visible;
        }

        .topbar .leftside {
          grid-area: left;
          display: flex !important;
          align-items: center;
          justify-content: flex-start;
          min-width: 0;
        }

        .topbar .centerside {
          grid-area: center;
          position: relative !important;
          left: auto !important;
          transform: none !important;
          width: 100%;
          height: auto;
          display: flex !important;
          justify-content: center;
          align-items: center;
          min-width: 0;
          overflow: visible;
        }

        .topbar .topRight {
          grid-area: right;
          margin-left: 0;
          max-width: none;
          min-width: 0;
          display: flex !important;
          justify-content: flex-end;
          align-items: center;
          gap: 10px;
          flex-wrap: nowrap;
        }

        .topbar-center-actions,
        .topbar-right-actions {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          min-width: 0;
        }

        .topbar-center-actions {
          justify-content: center;
          gap: 8px;
        }

        .topbar-right-actions {
          justify-content: flex-end;
          gap: 10px;
        }

        .topbar .tipBtn,
        .topbar button,
        .topbar select,
        .topbar .promo-btn,
        .topbar .back-btn-top {
          font-size: clamp(12px, 0.72vw, 14px) !important;
          line-height: 1.1;
        }

        .topbar .tipBtn,
        .topbar button,
        .topbar select,
        .topbar .promo-btn {
          padding: 8px 12px !important;
        }

        .topbar .back-btn-top {
          padding: 8px 12px !important;
        }

        .topbar #tfSel {
          width: 76px;
          min-width: 76px;
          padding-right: 28px !important;
        }

        .topbar-right-actions #btnSessionStart {
          max-width: 190px;
        }
      }

      @media (min-width: 901px) and (max-width: 1400px) {
        .topbar {
          grid-template-columns: auto 1fr auto;
          column-gap: 12px;
          padding: 8px 12px !important;
        }

        .topbar .tipBtn,
        .topbar button,
        .topbar select,
        .topbar .promo-btn {
          padding: 7px 10px !important;
          font-size: 12px !important;
        }

        .topbar-right-actions {
          gap: 8px;
        }

        .topbar-center-actions {
          gap: 6px;
        }

        .topbar-right-actions #btnSessionStart {
          max-width: 168px;
        }
      }

      @media (min-width: 901px) and (max-width: 1240px) {
        .topbar {
          grid-template-columns: auto 1fr auto;
          grid-template-areas:
            "left . right"
            "center center center";
          align-items: center;
        }

        .topbar .centerside {
          justify-content: center;
        }

        .topbar .topRight {
          justify-content: flex-end;
        }
      }

      @media (min-width: 901px) and (max-width: 1080px) {
        .topbar-right-actions #btnSessionStart {
          max-width: 152px;
        }

        .topbar-right-actions #btnJoinLobbyOpen,
        .topbar-right-actions #btnHostLobbyOpen,
        .topbar-right-actions #btnSessionStart {
          padding-left: 9px !important;
          padding-right: 9px !important;
        }
      }

      @media (min-width: 901px) {
        .back-btn-top {
          font-size: 13px !important;
          padding: 9px 12px !important;
        }
      }

      /* ===== Left panel action controls ===== */
      .actionControlCard {
        padding: 12px;
      }
      .repsOfRiskCard {
        gap: 0;
      }
      .repsOfRiskToggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
        text-align: left;
      }
      .repsOfRiskToggle:hover {
        background: transparent;
      }
      .repsOfRiskToggleLeft {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .repsOfRiskHeading {
        margin: 0;
        font-size: 14px;
        letter-spacing: 0.2px;
      }
      .repsOfRiskChevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        min-width: 24px;
        font-size: 16px;
        font-weight: 900;
        color: var(--muted);
        transition: transform 0.18s ease, color 0.18s ease;
      }
      .repsOfRiskCard.is-open .repsOfRiskChevron {
        transform: rotate(0deg);
      }
      .repsOfRiskCard.is-collapsed .repsOfRiskChevron {
        transform: rotate(-90deg);
      }
      .repsOfRiskContent {
        margin-top: 12px;
      }
      .repsOfRiskContent[hidden] {
        display: none !important;
      }
      .actionControlCard .controlSection + .controlSection {
        margin-top: 10px;
      }
      .actionControlCard .controlSection {
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        padding: 12px;
        background: rgba(2, 6, 23, 0.18);
      }
      .actionControlCard .controlTitle {
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 800;
        margin-bottom: 8px;
      }
      .actionControlCard .btns {
        margin-top: 0;
        gap: 8px;
      }
      .actionControlCard .btns + .btns {
        margin-top: 8px;
      }
      .actionControlCard .topbar-center-actions,
      .actionControlCard .topbar-right-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
      }
      .actionControlCard .topbar-center-actions > *,
      .actionControlCard .topbar-right-actions > * {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
      }
      .actionControlCard .topbar-right-actions > #btnSessionStart {
        flex: 0 1 calc(50% - 4px);
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
      }
      .actionControlCard .apexPromoWrap {
        margin-top: 0;
      }
      .actionControlCard #tfSel {
        min-width: 88px;
        width: 100%;
        max-width: none;
      }
      .actionControlCard button,
      .actionControlCard select {
        min-height: 40px;
        padding: 9px 10px !important;
        font-size: 12px !important;
        border-radius: 12px !important;
      }
      .actionControlCard #btnResults {
        display: none;
      }

      /* ===== Top bar simplified ===== */
      @media (min-width: 901px) {
        .topbar {
          display: flex !important;
          align-items: center;
          justify-content: flex-start;
          gap: 12px;
          min-height: 56px;
          height: auto;
          padding: 10px 14px !important;
          overflow: visible;
        }
        .topbar .leftside {
          display: flex !important;
          align-items: center;
        }
        .topbar .centerside,
        .topbar .topRight {
          display: none !important;
        }
      }

      @media (max-width: 900px) {
        .repsOfRiskToggle {
          align-items: center;
        }
        .repsOfRiskToggleLeft {
          min-width: 0;
          flex-wrap: wrap;
        }
        .repsOfRiskHeading {
          font-size: 13px;
        }
        .actionControlCard button,
        .actionControlCard select {
          min-height: 36px;
          font-size: 11px !important;
          padding: 8px 9px !important;
        }
        .actionControlCard .topbar-center-actions > *,
        .actionControlCard .topbar-right-actions > * {
          flex: 1 1 100%;
        }
      }

      /* ===== FINAL MOBILE TOP BAR HIDE ===== */
      @media (max-width: 900px) {
        .topbar {
          display: none !important;
        }
      }

      /* ===== FINAL MOBILE CONTROL POSITION TWEAKS ===== */
      @media (max-width: 900px) {
        .drawToolbar {
          top: 8px !important;
          left: 8px !important;
        }
      }

      @media (max-width: 640px) {
        .drawToolbar {
          top: 6px !important;
          left: 6px !important;
        }
      }

      /* ===== FINAL MOBILE CHART CONTROL TWEAKS ===== */
      @media (max-width: 900px) {
        .mobileChartControls {
          position: fixed !important;
          top: max(8px, env(safe-area-inset-top)) !important;
          right: max(8px, env(safe-area-inset-right)) !important;
          left: auto !important;
          display: flex !important;
          align-items: center !important;
          gap: 6px !important;
          z-index: 1200 !important;
          visibility: visible !important;
          opacity: 1 !important;
        }

        .mobileChartControls select,
        #tfSelMobile {
          width: 64px !important;
          min-width: 64px !important;
          max-width: 64px !important;
        }

        #btnFindMobile {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          min-width: 40px !important;
          visibility: visible !important;
          opacity: 1 !important;
        }

        .mobileChartControls,
        .mobileChartControls * {
          visibility: visible !important;
          opacity: 1 !important;
        }

        /* remove tooltip mode on mobile only */
        #btnTips,
        #btnTipsOff {
          display: none !important;
        }
      }

      @media (max-width: 640px) {
        .mobileChartControls {
          top: max(6px, env(safe-area-inset-top)) !important;
          right: max(6px, env(safe-area-inset-right)) !important;
          left: auto !important;
          gap: 4px !important;
        }

        .mobileChartControls select,
        #tfSelMobile {
          width: 60px !important;
          min-width: 60px !important;
          max-width: 60px !important;
        }

        #btnFindMobile {
          min-width: 52px !important;
          padding: 7px 8px !important;
        }
      }

      /* ===== FINAL MOBILE LOBBY HUD TWEAKS ===== */
      @media (max-width: 900px) {
        #lobbyHud {
          top: auto !important;
          bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px)) !important;
          right: max(-142px, calc(-38vw)) !important;
          left: auto !important;
          width: min(208px, calc(100vw - 18px)) !important;
          min-width: min(168px, calc(100vw - 18px)) !important;
          max-width: min(208px, calc(100vw - 18px)) !important;
          max-height: min(58dvh, calc(100dvh - 24px)) !important;
          padding: 10px !important;
          border-radius: 16px !important;
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
          transition: right 0.18s ease, transform 0.18s ease, opacity 0.18s ease !important;
          z-index: 1150 !important;
        }

        #lobbyHud:hover,
        #lobbyHud:focus-within {
          right: max(8px, env(safe-area-inset-right)) !important;
        }

        #lobbyHud.collapsed {
          right: max(-152px, calc(-42vw)) !important;
          width: 58px !important;
          min-width: 58px !important;
          max-width: 58px !important;
          max-height: 58px !important;
          overflow: hidden !important;
          padding: 8px !important;
          border-radius: 16px !important;
        }

        #lobbyHud.collapsed:hover,
        #lobbyHud.collapsed:focus-within {
          right: max(8px, env(safe-area-inset-right)) !important;
        }

        #lobbyHud.collapsed #lobbyHudBody,
        #lobbyHud.collapsed #lobbyCodeWrap,
        #lobbyHud.collapsed #btnLobbyEditRules,
        #lobbyHud.collapsed #btnCopyLobbyCode {
          display: none !important;
        }

        #lobbyHud.collapsed #lobbyHudTop {
          gap: 0 !important;
        }

        #lobbyHud.collapsed #lobbyHudIdentity {
          justify-content: center !important;
        }

        #lobbyHud.collapsed #lobbyHudIdentity > div:first-child {
          font-size: 0 !important;
          line-height: 0 !important;
        }

        #lobbyHud.collapsed #lobbyHudIdentity > div:first-child::before {
          content: '☰' !important;
          font-size: 20px !important;
          line-height: 1 !important;
          color: #bfdbfe !important;
          display: inline-block !important;
        }

        #lobbyHud.collapsed #lobbyHudQuickActions {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          width: 100% !important;
        }

        #lobbyHud.collapsed #btnLobbyCollapse {
          width: 100% !important;
          min-width: 0 !important;
          padding: 6px !important;
          font-size: 0 !important;
        }

        #lobbyHud.collapsed #btnLobbyCollapse::before {
          content: 'Open' !important;
          font-size: 10px !important;
          font-weight: 900 !important;
        }

        #lobbyHud:not(.collapsed) #btnLobbyCollapse::after {
          content: '' !important;
        }

        #lobbyOverlayCard {
          width: min(360px, 92vw) !important;
          max-height: calc(100dvh - 20px) !important;
        }
      }

      @media (max-width: 640px) {
        #lobbyHud {
          right: max(-148px, calc(-52vw)) !important;
          width: min(192px, calc(100vw - 14px)) !important;
          min-width: min(160px, calc(100vw - 14px)) !important;
          max-width: min(192px, calc(100vw - 14px)) !important;
          bottom: max(8px, calc(env(safe-area-inset-bottom) + 6px)) !important;
        }

        #lobbyHud.collapsed {
          right: max(-146px, calc(-56vw)) !important;
          width: 54px !important;
          min-width: 54px !important;
          max-width: 54px !important;
          max-height: 54px !important;
        }

        #lobbyOverlayCard {
          width: min(320px, 92vw) !important;
        }
      }


/* ===== MOBILE SOLO SESSION TIMER WORKING FIX ===== */
@media (max-width: 900px) {
  #sessionTimerBadge {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(28px) !important;
    z-index: 1300 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: min(46vw, 220px) !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  #sessionTimerLabel,
  #sessionTimerTxt {
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  #sessionTimerBadge {
    top: max(6px, env(safe-area-inset-top)) !important;
    transform: translateX(20px) !important;
    max-width: min(52vw, 210px) !important;
  }
}



/* ===== FINAL PATCH: MOBILE TIMEFRAME/FIND + REMOVE MOBILE LOBBY CHAT ===== */
@media (max-width: 900px) {
  /* keep Find + timeframe snug just left of the right-side price scale */
  .mobileChartControls {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(112px, calc(env(safe-area-inset-right) + 112px)) !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 1200 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobileChartControls select,
  #tfSelMobile {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  #btnFindMobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }


  /* remove "Chart Controls" title on mobile only */
  .actionControlCard .controlSection .controlTitle {
    display: none !important;
  }

  /* mobile users can join lobby or start solo only */
  #btnHostLobbyOpen {
    display: none !important;
  }

  .actionControlCard .topbar-right-actions > #btnJoinLobbyOpen,
  .actionControlCard .topbar-right-actions > #btnSessionStart {
    flex: 1 1 calc(50% - 4px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* remove lobby chat on mobile only */
  #lobbyChatDock,
  #lobbyChatPanel,
  #lobbyChatHeader,
  #lobbyChatBody,
  #lobbyChatComposer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 640px) {
  .mobileChartControls {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(104px, calc(env(safe-area-inset-right) + 104px)) !important;
    left: auto !important;
    gap: 4px !important;
  }

  .mobileChartControls select,
  #tfSelMobile {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  #btnFindMobile {
    min-width: 38px !important;
    padding: 7px 8px !important;
  }
}

/* ===== Pasted text (8).txt ===== */
/* ===== FINAL MOBILE: REMOVE LEFT PANEL CHART CONTROLS ===== */
      @media (max-width: 900px) {
        /* remove any chart control blocks from left panel */
        .left .chartControls,
        .left #chartControls,
        .left .chart-controls {
          display: none !important;
        }
      }
      /* ===== FINAL MOBILE: ONLY HIDE LEFT PANEL CHART CONTROLS ===== */
      @media (max-width: 900px) {
        /* hide only the chart-control widgets in the left panel */
        .left #tfSel,
        .left #btnFind,
        .left #btnSearch,
        .left button[id*="find"] {
          display: none !important;
        }

        /* if there is a label/title for chart controls, hide just that text */
        .left .label[for="tfSel"],
        .left .chart-controls-label,
        .left .chartControlsLabel {
          display: none !important;
        }
      }

      /* ===== Lobby chat ===== */
      #lobbyChatDock {
        display: none;
        position: absolute;
        top: 64px;
        height: 50%;
        bottom: auto;
        right: 75px;
        width: min(340px, 28vw);
        min-width: 280px;
        max-width: 360px;
        z-index: 47;
        pointer-events: none;
      }
      #lobbyChatDock.show {
        display: block !important;
      }
      #lobbyChatPanel {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(96, 165, 250, 0.22);
        border-radius: 18px;
        overflow: hidden;
        background: rgba(11, 16, 32, 0.86);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
        pointer-events: auto;
      }
      #lobbyChatPanel.minimized {
        height: auto;
        max-height: none;
      }
      #lobbyChatPanel.minimized #lobbyChatBody,
      #lobbyChatPanel.minimized #lobbyChatComposer {
        display: none;
      }
      #lobbyChatHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(30, 41, 59, 0.55);
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
      }
      #lobbyChatHeader:active {
        cursor: grabbing;
      }
      #lobbyHudTop {
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
      }
      #lobbyHudTop:active {
        cursor: grabbing;
      }
      #lobbyHud.isDragging,
      #lobbyChatDock.isDragging {
        transition: none !important;
      }
      #lobbyHud.isDragging #lobbyHudTop,
      #lobbyChatDock.isDragging #lobbyChatHeader {
        cursor: grabbing;
      }
      #lobbyChatTitleWrap {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      #lobbyChatTitle {
        font-size: 13px;
        font-weight: 900;
        color: #e2e8f0;
      }
      #lobbyChatMeta {
        font-size: 10px;
        color: var(--muted);
      }
      #lobbyChatHeaderActions {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      #lobbyChatUnreadBadge {
        display: none;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 900;
        color: #111827;
        background: rgba(168, 85, 247, 0.95);
      }
      #lobbyChatUnreadBadge.show {
        display: inline-flex;
      }
      #btnLobbyChatToggle,
      #btnLobbyChatMin {
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 900;
      }
      #lobbyChatBody {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .lobbyChatEmpty {
        margin: auto 0;
        padding: 10px 12px;
        border: 1px dashed rgba(148, 163, 184, 0.2);
        border-radius: 14px;
        color: var(--muted);
        font-size: 11px;
        text-align: center;
      }
      .lobbyChatMsg {
        max-width: 92%;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(148, 163, 184, 0.12);
      }
      .lobbyChatMsg.self {
        align-self: flex-end;
        background: rgba(96, 165, 250, 0.14);
        border-color: rgba(96, 165, 250, 0.24);
      }
      .lobbyChatMsg .meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        font-size: 10px;
        color: var(--muted);
      }
      .lobbyChatMsg .name {
        font-weight: 900;
        color: #bfdbfe;
      }
      .lobbyChatMsg.self .name {
        color: #f3e8ff;
      }
      .lobbyChatMsg .body {
        font-size: 12px;
        line-height: 1.4;
        white-space: pre-wrap;
        word-break: break-word;
        color: #f8fafc;
      }
      #lobbyChatComposer {
        display: flex;
        gap: 8px;
        padding: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(2, 6, 23, 0.36);
      }
      #lobbyChatInput {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        color: var(--ink);
        font-size: 12px;
        outline: none;
      }
      #btnLobbyChatSend {
        flex: 0 0 auto;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 900;
      }
      @media (max-width: 900px) {
        #lobbyChatDock {
          right: 8px;
          left: auto;
          top: auto;
          bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
          width: min(320px, calc(100vw - 16px));
          min-width: 0;
          max-width: calc(100vw - 16px);
          height: min(44dvh, 360px);
        }
        #lobbyChatPanel.minimized {
          width: 100%;
        }
      }

      /* ===== PREMIUM BRAND THEME OVERRIDES ===== */
      :root {
        --bg: #050505 !important;
        --panel: #0b0b0c !important;
        --card: #111111 !important;
        --ink: #f5f5f5 !important;
        --muted: #a1a1aa !important;
        --line: rgba(212, 175, 55, 0.18) !important;
        --good: #22c55e !important;
        --bad: #ef4444 !important;
        --warn: #facc15 !important;
        --blue: #3b82f6 !important;
        --gold: #d4af37;
        --gold-soft: #facc15;
        --gold-glow: transparent;
        --gold-line: rgba(212, 175, 55, 0.24);
        --gold-line-strong: rgba(212, 175, 55, 0.44);
        --panel-2: #101014;
        --panel-3: #15151b;
        --white-soft: rgba(255, 255, 255, 0.05);
        --shadow: 0 18px 44px rgba(0, 0, 0, 0.52) !important;
        --sans:
          Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
      }
      html {
        color-scheme: dark;
        background: #050505;
      }
      body {
        font-family: var(--sans) !important;
        letter-spacing: 0.15px;
        background: #050505 !important;
        color: var(--ink) !important;
      }
      canvas {
        background: #050505 !important;
      }
      .left {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.015)
          ),
          rgba(11, 11, 12, 0.94) !important;
        border-left: 1px solid var(--gold-line) !important;
        box-shadow: inset 1px 0 0 rgba(212, 175, 55, 0.04);
      }
      .brand,
      .card,
      .orderItem,
      .field,
      .symbol,
      .tag,
      .kbd,
      .pill {
        border-color: var(--gold-line) !important;
      }
      .brand,
      .card,
      .field,
      .modal,
      .menu,
      .tipModal,
      .rotateCard,
      .toast,
      #lobbyHud,
      #lobbyChatPanel,
      .drawToolbar,
      .indicatorsToolbar,
      .mobileChartControls,
      .mobileDrawActions,
      .sessionTimerBadge {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
          ),
          rgba(10, 10, 10, 0.84) !important;
        border: 1px solid var(--gold-line) !important;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.06) inset,
          0 18px 40px rgba(0, 0, 0, 0.46) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .brand {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.012)
          ),
          rgba(10, 10, 10, 0.86) !important;
      }
      .brand h1,
      .tipHeader .t,
      #lobbyChatTitle,
      #lobbyHud .name,
      #lobbyHudTitle,
      .modal h2,
      #lobbyHudTop strong,
      #lobbyCodeTxt,
      .valueStrong,
      .orderTop strong {
        color: #fff7d6;
      }
      .pill,
      .tag,
      .symbol,
      .kbd {
        background: rgba(255, 255, 255, 0.03) !important;
        color: #f3e7b0 !important;
        box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.05);
      }
      .card {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
          ),
          rgba(12, 12, 14, 0.8) !important;
      }
      .card:hover,
      .orderItem:hover,
      .menu .mi:hover,
      .promo-btn:hover,
      .back-btn-top:hover {
        border-color: rgba(212, 175, 55, 0.38) !important;
      }
      .label,
      .small,
      .status,
      .menu .sub,
      .tipBody p,
      #lobbyChatMeta,
      .lobbyChatMsg .meta,
      .hint {
        color: var(--muted) !important;
      }
      .value,
      .orderMeta,
      .tipBody,
      .lobbyChatMsg .body,
      #reportHtml,
      #reportHtml * {
        color: var(--ink);
      }
      button,
      .tipBtn,
      .promo-btn,
      .back-btn-top,
      .qty-step-btn {
        touch-action: manipulation;
        cursor: pointer;
        color: var(--ink) !important;
        border: 1px solid rgba(212, 175, 55, 0.24) !important;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.015)
          ),
          rgba(10, 10, 10, 0.88) !important;
        box-shadow:
          0 8px 20px rgba(0, 0, 0, 0.34),
          0 0 0 1px rgba(212, 175, 55, 0.05) inset;
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease,
          filter 0.18s ease,
          background 0.18s ease;
      }
      button:hover,
      .tipBtn:hover,
      .promo-btn:hover,
      .back-btn-top:hover,
      .qty-step-btn:hover {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
          ),
          rgba(14, 14, 16, 0.94) !important;
        border-color: rgba(212, 175, 55, 0.62) !important;
        box-shadow:
          0 12px 28px rgba(0, 0, 0, 0.46),
          0 0 0 1px rgba(212, 175, 55, 0.12) inset !important;
        filter: brightness(1.03);
      }
      button:active,
      .tipBtn:active,
      .promo-btn:active,
      .back-btn-top:active,
      .qty-step-btn:active {
        transform: translateY(1px);
      }
      button.primary,
      .tipBtn.primary,
      #btnLobbyChatSend,
      .promo-btn.gold-border {
        color: #161616 !important;
        background: linear-gradient(
          180deg,
          #f7d66b 0%,
          #d4af37 58%,
          #ae8c22 100%
        ) !important;
        border-color: rgba(212, 175, 55, 0.82) !important;
        box-shadow:
          0 10px 26px rgba(0, 0, 0, 0.38),
          0 0 0 1px rgba(255, 244, 200, 0.22) inset !important;
      }
      button.primary:hover,
      .tipBtn.primary:hover,
      #btnLobbyChatSend:hover,
      .promo-btn.gold-border:hover {
        color: #f7d66b !important;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.015)
          ),
          rgba(10, 10, 10, 0.88) !important;
        border-color: #f7d66b !important;
        box-shadow:
          0 12px 28px rgba(0, 0, 0, 0.46),
          0 0 0 1px rgba(212, 175, 55, 0.12) inset !important;
        filter: none;
      }
      button.danger {
        border-color: rgba(239, 68, 68, 0.44) !important;
        color: #ffd5d5 !important;
        background:
          linear-gradient(
            180deg,
            rgba(239, 68, 68, 0.12),
            rgba(239, 68, 68, 0.04)
          ),
          rgba(18, 10, 10, 0.9) !important;
      }
      button.toolActive,
      .tipTarget,
      .gold-glow,
      #btnLobbyChatToggle.toolActive,
      #btnLobbyChatMin.toolActive {
        border-color: rgba(var(--tooltip-accent-rgb), 0.78) !important;
        background: rgba(var(--tooltip-accent-rgb), 0.14) !important;
        box-shadow:
          0 0 0 1px rgba(var(--tooltip-accent-rgb), 0.2) inset,
          0 0 18px rgba(var(--tooltip-accent-rgb), 0.16),
          0 12px 24px rgba(0, 0, 0, 0.35) !important;
      }
      .topbar {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.01)
          ),
          rgba(8, 8, 9, 0.92) !important;
        border-bottom: 1px solid var(--gold-line) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
      }
      .menu {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.01)
          ),
          rgba(10, 10, 10, 0.96) !important;
      }
      .menu .mi:hover {
        background: rgba(212, 175, 55, 0.1) !important;
      }
      .modalWrap,
      .tipOverlay {
        background: rgba(1, 1, 2, 0.72) !important;
      }
      .modal,
      .tipModal,
      .rotateCard {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.012)
          ),
          rgba(10, 10, 12, 0.96) !important;
      }
      .tipHeader,
      #lobbyChatHeader,
      #lobbyHudTop {
        background:
          linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.14),
            rgba(255, 255, 255, 0.02) 45%
          ),
          rgba(18, 18, 22, 0.86) !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
      }
      .tipCallout {
        background: rgba(212, 175, 55, 0.1) !important;
        border-color: rgba(212, 175, 55, 0.24) !important;
        color: #f3e7b0 !important;
      }
      .tipFooter,
      #lobbyChatComposer {
        background: rgba(12, 12, 14, 0.72) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.16) !important;
      }
      .field input,
      .field select,
      #lobbyChatInput,
      input,
      select,
      textarea {
        color: var(--ink) !important;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.01)
          ),
          rgba(7, 7, 8, 0.9) !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.03);
      }
      .field input:focus,
      .field select:focus,
      #lobbyChatInput:focus,
      input:focus,
      select:focus,
      textarea:focus {
        outline: none !important;
        border-color: rgba(212, 175, 55, 0.56) !important;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.14) inset,
          0 0 0 3px rgba(212, 175, 55, 0.08) !important;
      }
      #tfSel,
      .mobileChartControls select {
        color: #f8f3df !important;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
          ),
          rgba(16, 16, 18, 0.92) !important;
        border-color: rgba(212, 175, 55, 0.24) !important;
      }
      #tfSel option,
      .mobileChartControls select option {
        color: #f5f5f5;
        background: #101012;
      }
      .drawToolbar .drawToolbarTitle,
      .indicatorsToolbar .indicatorsToolbarTitle,
      .sessionTimerBadge .sessionTimerLabel,
      .tipHeader .t,
      #lobbyChatTitle,
      #lobbyHudTop,
      .brand h1,
      .modal h2 {
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .sessionTimerBadge {
        border-color: rgba(212, 175, 55, 0.24) !important;
      }
      .sessionTimerBadge .sessionTimerValue {
        color: #f6e5a8 !important;
      }
      .drawToolbar #btnDrawClearAll,
      .drawToolbar #btnDrawDeleteMobile {
        border-color: rgba(239, 68, 68, 0.34) !important;
        color: #ffd5d5 !important;
        background:
          linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.045)),
          rgba(18, 10, 10, 0.88) !important;
      }
      .drawToolbar #btnDrawDoneMobile {
        border-color: rgba(34, 197, 94, 0.34) !important;
        color: #dcfce7 !important;
        background:
          linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.045)),
          rgba(8, 18, 12, 0.88) !important;
      }
      #lobbyChatUnreadBadge,
      .toast .dot {
        background: #d4af37 !important;
      }
      .toast.good .dot {
        background: #22c55e !important;
      }
      .toast.bad .dot {
        background: #ef4444 !important;
      }
      .toast.warn .dot {
        background: #facc15 !important;
      }
      .lobbyChatEmpty {
        border-color: rgba(212, 175, 55, 0.18) !important;
        background: rgba(255, 255, 255, 0.02);
      }
      .lobbyChatMsg {
        background: rgba(255, 255, 255, 0.035) !important;
        border-color: rgba(212, 175, 55, 0.14) !important;
      }
      .lobbyChatMsg.self {
        background: rgba(212, 175, 55, 0.12) !important;
        border-color: rgba(212, 175, 55, 0.24) !important;
      }
      .lobbyChatMsg .name,
      .tipHeader .t,
      .sessionTimerBadge .sessionTimerValue {
        color: #f6e5a8 !important;
      }
      .lobbyChatMsg.self .name {
        color: #fff0b5 !important;
      }
      .tag.buy {
        color: #8ff0ad !important;
        border-color: rgba(34, 197, 94, 0.34) !important;
      }
      .tag.sell {
        color: #ffb1b1 !important;
        border-color: rgba(239, 68, 68, 0.34) !important;
      }
      .tag.bracket {
        color: #f6e5a8 !important;
        border-color: rgba(212, 175, 55, 0.34) !important;
      }
      .promo-btn,
      .back-btn-top {
        border-radius: 999px !important;
      }
      .promo-btn::after {
        opacity: 0.92;
      }
      .gold-border {
        border-color: rgba(212, 175, 55, 0.58) !important;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.12) inset,
          0 12px 28px rgba(0, 0, 0, 0.3) !important;
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(212, 175, 55, 0.28);
        border-radius: 999px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
      }
      ::selection {
        background: rgba(212, 175, 55, 0.28);
        color: #fff8e1;
      }

/* ===== Buy (green) ===== */
.btn-buy {
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.45);
  color: #4ade80;
}

.btn-buy:hover {
  background: rgba(34,197,94,.25);
}

/* ===== Sell (red) ===== */
.btn-sell {
  background: rgba(251,113,133,.15);
  border: 1px solid rgba(251,113,133,.45);
  color: #fb7185;
}

.btn-sell:hover {
  background: rgba(251,113,133,.25);
}
/* ===== Accent buttons: cooler base, reserved gold for session starts ===== */
.btn-gold {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.22),
    rgba(37, 99, 235, 0.18)
  ) !important;
  color: #dbeafe !important;
  font-weight: 900;
  border: 1px solid rgba(96, 165, 250, 0.52) !important;
  box-shadow:
    0 0 0 1px rgba(191, 219, 254, 0.08) inset,
    0 10px 24px rgba(15, 23, 42, 0.34),
    0 0 18px rgba(59, 130, 246, 0.12);
  transition: all 0.15s ease;
}

.btn-gold:hover {
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.3),
    rgba(37, 99, 235, 0.24)
  ) !important;
  border-color: rgba(125, 211, 252, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(219, 234, 254, 0.1) inset,
    0 14px 30px rgba(15, 23, 42, 0.4),
    0 0 22px rgba(56, 189, 248, 0.16);
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* keep session entry buttons gold */
#btnJoinLobbyOpen.btn-gold,
#btnHostLobbyOpen.btn-gold,
#btnSessionStart.btn-gold,
.promo-actions #btnJoinLobbyOpen.btn-gold,
.promo-actions #btnHostLobbyOpen.btn-gold,
.promo-actions #btnSessionStart.btn-gold,
.topbar-right-actions #btnJoinLobbyOpen.btn-gold,
.topbar-right-actions #btnHostLobbyOpen.btn-gold,
.topbar-right-actions #btnSessionStart.btn-gold {
  background: linear-gradient(
    180deg,
    rgba(250, 204, 21, 1),
    rgba(234, 179, 8, 0.95)
  ) !important;
  color: #111 !important;
  border: 1px solid rgba(234, 179, 8, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#btnJoinLobbyOpen.btn-gold:hover,
#btnHostLobbyOpen.btn-gold:hover,
#btnSessionStart.btn-gold:hover,
.promo-actions #btnJoinLobbyOpen.btn-gold:hover,
.promo-actions #btnHostLobbyOpen.btn-gold:hover,
.promo-actions #btnSessionStart.btn-gold:hover,
.topbar-right-actions #btnJoinLobbyOpen.btn-gold:hover,
.topbar-right-actions #btnHostLobbyOpen.btn-gold:hover,
.topbar-right-actions #btnSessionStart.btn-gold:hover {
  background: linear-gradient(
    180deg,
    rgba(253, 224, 71, 1),
    rgba(245, 158, 11, 1)
  ) !important;
  border-color: rgba(245, 158, 11, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  filter: brightness(1.05);
}

/* utility / info actions */
#btnFind.btn-gold,
#btnFindMobile.btn-gold,
#btnSearch.btn-gold,
#btnResults.btn-gold {
  background: linear-gradient(
    180deg,
    rgba(34, 211, 238, 0.22),
    rgba(8, 145, 178, 0.18)
  ) !important;
  color: #d5fbff !important;
  border-color: rgba(34, 211, 238, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(207, 250, 254, 0.08) inset,
    0 10px 22px rgba(8, 47, 73, 0.28),
    0 0 18px rgba(34, 211, 238, 0.12) !important;
}

#btnFind.btn-gold:hover,
#btnFindMobile.btn-gold:hover,
#btnSearch.btn-gold:hover,
#btnResults.btn-gold:hover {
  background: linear-gradient(
    180deg,
    rgba(34, 211, 238, 0.3),
    rgba(14, 116, 144, 0.24)
  ) !important;
  border-color: rgba(103, 232, 249, 0.68) !important;
}

/* guidance / lobby controls */
#btnTips.btn-gold,
#btnTipsOff.btn-gold,
#btnLobby.btn-gold,
#btnLobbyCollapse.btn-gold,
#btnLobbyEditRules.btn-gold,
#btnCopyLobbyCode.btn-gold {
  background: var(--tooltip-accent-gradient) !important;
  color: var(--tooltip-accent-text) !important;
  border-color: rgba(var(--tooltip-accent-rgb), 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(var(--tooltip-accent-soft-rgb), 0.08) inset,
    0 10px 22px var(--tooltip-accent-shadow),
    0 0 18px rgba(var(--tooltip-accent-rgb), 0.12) !important;
}

#btnTips.btn-gold:hover,
#btnTipsOff.btn-gold:hover,
#btnLobby.btn-gold:hover,
#btnLobbyCollapse.btn-gold:hover,
#btnLobbyEditRules.btn-gold:hover,
#btnCopyLobbyCode.btn-gold:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--tooltip-accent-rgb), 0.3),
    rgba(var(--tooltip-accent-strong-rgb), 0.24)
  ) !important;
  border-color: rgba(var(--tooltip-accent-rgb), 0.68) !important;
}

/* bracket / flatten / close style actions */
#btnBracket.btn-gold,
#btnBracketToggle.btn-gold,
#btnHostLobbyAction.btn-gold,
#btnHostLobbyActionHud.btn-gold {
  background: linear-gradient(
    180deg,
    rgba(251, 146, 60, 0.22),
    rgba(194, 65, 12, 0.18)
  ) !important;
  color: #ffedd5 !important;
  border-color: rgba(251, 146, 60, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(255, 237, 213, 0.07) inset,
    0 10px 22px rgba(67, 20, 7, 0.28),
    0 0 18px rgba(249, 115, 22, 0.12) !important;
}

#btnBracket.btn-gold:hover,
#btnBracketToggle.btn-gold:hover,
#btnHostLobbyAction.btn-gold:hover,
#btnHostLobbyActionHud.btn-gold:hover {
  background: linear-gradient(
    180deg,
    rgba(253, 186, 116, 0.28),
    rgba(234, 88, 12, 0.24)
  ) !important;
  border-color: rgba(253, 186, 116, 0.68) !important;
}
/* ===== APEX BUTTON OVERRIDE ===== */
.promo-btn.apex-side-btn,
.promo-btn.apex-side-btn.gold-border {
  border: 1px solid rgba(37, 99, 235, 0.68) !important;
  background:
    linear-gradient(180deg, rgba(19, 35, 84, 0.96), rgba(2, 6, 23, 0.98)) !important;
  color: #f8fafc !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.14) inset,
    0 10px 26px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(37, 99, 235, 0.12) !important;
}

.promo-btn.apex-side-btn:hover,
.promo-btn.apex-side-btn.gold-border:hover {
  border-color: rgba(250, 204, 21, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(29, 78, 216, 0.94), rgba(2, 6, 23, 0.98)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.12) inset,
    0 12px 32px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(37, 99, 235, 0.16) !important;
}

.promo-btn.apex-side-btn::after,
.promo-btn.apex-side-btn.gold-border::after {
  color: rgba(250, 204, 21, 0.95);
}

.promo-btn.apex-side-btn:hover::after,
.promo-btn.apex-side-btn.gold-border:hover::after {
  color: #fde68a;
}

.lesson-banner {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(780px, calc(100vw - 32px));
  pointer-events: none;
}
.lesson-banner-inner {
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(11, 16, 32, 0.9);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lesson-banner-kicker {
  color: #facc15;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lesson-banner-title {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  color: #f8fafc;
}
.lesson-banner-step {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #dbeafe;
}
.lesson-banner-status {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
}
.lessons-modal {
  width: min(580px, 94vw);
}
.lessonsIntro {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 12px;
}
.lessonsIntroTitle {
  font-size: 12px;
  font-weight: 900;
  color: #f8fafc;
  margin-bottom: 8px;
}
.lessonsIntro p {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.55;
}
.lessonsPickerRow {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.lessonsPickerLabel {
  font-size: 11px;
  font-weight: 900;
  color: #93a4c7;
  min-width: 52px;
}
.lessonsPickerSelect {
  min-width: 220px;
  flex: 1;
}
.lessonsMetaCard {
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 12px;
}
.lessonsMetaRow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.lessonsMetaRow + .lessonsMetaRow {
  margin-top: 10px;
}
.lessonsMetaRow.stack {
  flex-direction: column;
  align-items: flex-start;
}
.lessonsMetaLabel {
  font-size: 10px;
  font-weight: 900;
  color: #93a4c7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lessonsMetaValue,
.lessonsMetaStatus {
  font-family: var(--mono);
  font-size: 12px;
  color: #e5e7eb;
}
.lessonsMetaStatus {
  line-height: 1.5;
  white-space: normal;
}
.lessonsFooter {
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .lesson-banner {
    top: 58px;
    width: min(94vw, calc(100vw - 20px));
  }
  .lesson-banner-inner {
    padding: 10px 12px;
  }
  .lesson-banner-title {
    font-size: 14px;
  }
  .lesson-banner-step {
    font-size: 12px;
  }
  .lesson-banner-status {
    font-size: 11px;
  }
}



/* ===== Lesson guided mode ===== */
.lesson-highlight {
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.9) !important;
  border-color: rgba(250, 204, 21, 0.95) !important;
  animation: lessonPulse 1s ease-in-out infinite;
}
@keyframes lessonPulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.02); }
}
.lesson-banner {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  width: min(680px, calc(100% - 180px));
  pointer-events: none;
}
.lesson-banner-inner {
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.lesson-banner-kicker {
  color: #facc15;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lesson-banner-title {
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  margin-top: 3px;
}
.lesson-banner-step {
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}
.lesson-banner-status {
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 6px;
}
.lessons-modal {
  max-width: 560px;
  width: calc(100vw - 32px);
}
.lessonsFooter {
  justify-content: center;
}
.lesson-complete-modal .tipBody {
  padding-top: 4px;
}
.lesson-chart-cue {
  position: absolute;
  left: 0;
  right: 86px;
  top: 0;
  bottom: 0;
  z-index: 54;
  pointer-events: none;
}
.lesson-chart-cue-line {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 0;
  border-top: 2px dashed rgba(250, 204, 21, 0.95);
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}
.lesson-chart-cue-label {
  position: absolute;
  right: 20px;
  transform: translateY(-50%);
  background: rgba(250, 204, 21, 0.98);
  color: #111827;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .lesson-banner {
    top: 56px;
    width: calc(100% - 28px);
  }
  .lesson-chart-cue {
    right: 80px;
  }
}


/* lesson compact adjustments */
.lesson-banner {
  top: 58px;
  width: min(560px, calc(100% - 220px));
}
.lesson-banner-inner {
  padding: 7px 10px;
  border-radius: 12px;
}
.lesson-banner-kicker {
  font-size: 9px;
  letter-spacing: .1em;
}
.lesson-banner-title {
  font-size: 13px;
  margin-top: 1px;
  line-height: 1.15;
}
.lesson-banner-step {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.2;
}
.lesson-banner-status {
  font-size: 10px;
  margin-top: 3px;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .lesson-banner {
    top: 54px;
    width: calc(100% - 96px);
  }
  .lesson-banner-inner {
    padding: 6px 8px;
  }
  .lesson-banner-title {
    font-size: 12px;
  }
  .lesson-banner-step,
  .lesson-banner-status {
    font-size: 10px;
  }
}


/* tighter lesson popup spacing */
.lessons-modal .tipHeader {
  padding: 12px 14px;
}
.lessons-modal .tipBody {
  padding: 12px 14px;
}
.lessons-modal .tipFooter {
  padding: 10px 14px 12px;
  gap: 8px;
}
.lessonsIntro {
  padding: 12px 14px;
  border-radius: 12px;
}
.lessonsIntroTitle {
  font-size: 12px;
  margin-bottom: 8px;
}
.lessonsIntro p {
  margin: 0;
  line-height: 1.45;
  font-size: 12px;
}
.lessonsPickerRow {
  margin-top: 12px;
  gap: 8px;
}
.lessonsPickerLabel {
  font-size: 11px;
}
.lessonsPickerSelect {
  min-height: 42px;
  padding: 8px 12px;
}
.lessonsFooter .tipBtn {
  min-height: 40px;
  padding: 8px 12px;
}
@media (max-width: 900px) {
  .lessons-modal {
    width: calc(100vw - 20px);
  }
  .lessons-modal .tipHeader {
    padding: 10px 12px;
  }
  .lessons-modal .tipBody {
    padding: 10px 12px;
  }
  .lessons-modal .tipFooter {
    padding: 8px 12px 10px;
    gap: 6px;
  }
  .lessonsIntro {
    padding: 10px 12px;
  }
  .lessonsIntro p {
    font-size: 11px;
    line-height: 1.35;
  }
  .lessonsPickerRow {
    margin-top: 10px;
  }
  .lessonsFooter .tipBtn {
    min-height: 38px;
    padding: 7px 10px;
  }
}


/* ===== Lesson completion modal refresh ===== */
.lesson-complete-modal{
  width:min(780px, 94vw);
  max-width:min(780px, 94vw);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 30%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(8,13,28,.98));
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

.lesson-complete-hero{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(90deg, rgba(34,197,94,.08), rgba(96,165,250,.05) 50%, rgba(96,165,250,.03));
}

.lesson-complete-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background:linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.07));
  color:#dcfce7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(34,197,94,.10);
}

.lesson-complete-title-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lesson-complete-title{
  font-size:24px !important;
  font-weight:1000;
  letter-spacing:.01em;
  color:#f8fafc;
}

.lesson-complete-subtitle{
  color:#b8c4da;
  font-size:13px;
  line-height:1.45;
}

.lesson-complete-body{
  padding:18px !important;
}

.lesson-complete-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.lesson-complete-section{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 16px 15px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    rgba(2,6,23,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 28px rgba(0,0,0,.22);
  min-height:140px;
}

.lesson-complete-section-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:16px;
  font-weight:1000;
  line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.lesson-complete-section-content{
  min-width:0;
  flex:1;
}

.lesson-complete-section-label{
  margin-bottom:8px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}

.lesson-complete-section--success{
  border-color:rgba(76,217,100,.22);
  background:
    linear-gradient(180deg, rgba(76,217,100,.11), rgba(76,217,100,.03)),
    rgba(2,6,23,.38);
}
.lesson-complete-section--success .lesson-complete-section-icon{
  background:linear-gradient(180deg, rgba(76,217,100,.25), rgba(76,217,100,.10));
  border:1px solid rgba(76,217,100,.28);
  color:#86efac;
}
.lesson-complete-section--success .lesson-complete-section-label{
  color:#86efac;
}

.lesson-complete-section--info{
  border-color:rgba(87,166,255,.22);
  background:
    linear-gradient(180deg, rgba(87,166,255,.11), rgba(87,166,255,.03)),
    rgba(2,6,23,.38);
}
.lesson-complete-section--info .lesson-complete-section-icon{
  background:linear-gradient(180deg, rgba(87,166,255,.25), rgba(87,166,255,.10));
  border:1px solid rgba(87,166,255,.28);
  color:#93c5fd;
}
.lesson-complete-section--info .lesson-complete-section-label{
  color:#93c5fd;
}

.lesson-complete-section--gold{
  border-color:rgba(255,209,102,.24);
  background:
    linear-gradient(180deg, rgba(255,209,102,.11), rgba(255,209,102,.03)),
    rgba(2,6,23,.38);
}
.lesson-complete-section--gold .lesson-complete-section-icon{
  background:linear-gradient(180deg, rgba(255,209,102,.25), rgba(255,209,102,.10));
  border:1px solid rgba(255,209,102,.28);
  color:#fde68a;
}
.lesson-complete-section--gold .lesson-complete-section-label{
  color:#fde68a;
}

.lesson-complete-section--warning{
  border-color:rgba(255,123,114,.24);
  background:
    linear-gradient(180deg, rgba(255,123,114,.11), rgba(255,123,114,.03)),
    rgba(2,6,23,.38);
}
.lesson-complete-section--warning .lesson-complete-section-icon{
  background:linear-gradient(180deg, rgba(255,123,114,.25), rgba(255,123,114,.10));
  border:1px solid rgba(255,123,114,.28);
  color:#fda4af;
}
.lesson-complete-section--warning .lesson-complete-section-label{
  color:#fda4af;
}

.lesson-complete-section ul,
.lesson-complete-section p{
  margin:0;
}

.lesson-complete-section ul{
  padding-left:18px;
}

.lesson-complete-section li{
  margin:5px 0;
  color:#dbe5f5;
  line-height:1.5;
}

#lessonCompleteTakeaway,
#lessonCompleteMistake{
  color:#e8eef9;
  line-height:1.55;
  font-size:14px;
}

#lessonCompleteTakeaway{
  font-weight:800;
}

.lesson-complete-summary{
  margin-top:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#dbe5f5;
}

.lesson-complete-footer{
  padding:14px 18px 18px !important;
  justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.03));
}

.lesson-complete-footer #btnLessonContinue{
  min-width:140px;
  font-size:12px;
  padding:11px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
/* ===== Lesson Banner Upgrade ===== */
.lessonBanner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;

  padding: 10px 16px;
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(20,30,60,.95), rgba(10,18,40,.95)),
    radial-gradient(circle at top, rgba(96,165,250,.12), transparent);

  border: 1px solid rgba(255,215,0,.25);

  box-shadow:
    0 12px 30px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05);

  min-width: 420px;
  max-width: 600px;
}

.lessonBanner .title {
  font-size: 13px;
  font-weight: 800;
  color: #facc15; /* gold */
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.lessonBanner .step {
  font-size: 13px;
  font-weight: 700;
  color: #e5e7eb;
}

.lessonBanner .status {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

@media (max-width: 720px){
  .lesson-complete-hero{
    flex-direction:column;
    align-items:flex-start;
  }
  .lesson-complete-badge{
    min-width:auto;
  }
  .lesson-complete-grid{
    grid-template-columns:1fr;
  }
  .lesson-complete-section{
    min-height:auto;
  }
  .lesson-complete-title{
    font-size:21px !important;
  }
}


/* ===== Lesson banner themed app override ===== */
.lesson-banner {
  position: absolute;
  top: 12px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 46;
  min-width: 420px;
  max-width: min(760px, calc(100vw - 280px));
  width: auto !important;
  pointer-events: none;
}

.lesson-banner-inner {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(234, 179, 8, 0.45) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 34, 0.96)),
    radial-gradient(circle at top, rgba(96, 165, 250, 0.12), transparent 55%) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lesson-banner-toprow,
.lesson-banner-bottomrow {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.lesson-banner-kicker {
  display: none !important;
}

.lesson-banner-title {
  margin: 0 !important;
  min-width: 0;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.lesson-banner-step {
  margin: 0 !important;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #facc15 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.lesson-banner-status {
  margin: 0 !important;
  min-width: 0;
  font-size: 11px !important;
  color: #cbd5e1 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  .lesson-banner {
    top: 52px !important;
    min-width: 0;
    max-width: none;
    width: calc(100% - 110px) !important;
  }

  .lesson-banner-inner {
    padding: 10px 12px !important;
  }

  .lesson-banner-title {
    font-size: 12px !important;
  }

  .lesson-banner-step {
    font-size: 11px !important;
  }

  .lesson-banner-status {
    font-size: 10px !important;
  }
}

@media (max-width: 640px) {
  .lesson-banner {
    width: calc(100% - 92px) !important;
  }

  .lesson-banner-inner {
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  .lesson-banner-title {
    font-size: 11px !important;
  }

  .lesson-banner-step,
  .lesson-banner-status {
    font-size: 10px !important;
  }
}


/* ===== Lesson banner restart + chart placement override ===== */
.lesson-banner {
  position: absolute;
  top: 58px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 46;
  min-width: 420px;
  max-width: min(760px, calc(100vw - 280px));
  width: auto !important;
  pointer-events: none;
}

.lesson-banner-inner {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lesson-banner-toprow,
.lesson-banner-bottomrow {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.lesson-banner-kicker {
  display: none !important;
}

.lesson-banner-title {
  margin: 0 !important;
  min-width: 0;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.lesson-banner-step {
  margin: 0 !important;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #facc15 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.lesson-banner-status {
  margin: 0 !important;
  min-width: 0;
  font-size: 11px !important;
  color: #cbd5e1 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  .lesson-banner {
    top: 74px !important;
    min-width: 0;
    max-width: none;
    width: calc(100% - 110px) !important;
  }

  .lesson-banner-inner {
    padding: 10px 12px !important;
  }

  .lesson-banner-title {
    font-size: 12px !important;
  }

  .lesson-banner-step {
    font-size: 11px !important;
  }

  .lesson-banner-status {
    font-size: 10px !important;
  }
}

@media (max-width: 640px) {
  .lesson-banner {
    width: calc(100% - 92px) !important;
  }

  .lesson-banner-inner {
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  .lesson-banner-title {
    font-size: 11px !important;
  }

  .lesson-banner-step,
  .lesson-banner-status {
    font-size: 10px !important;
  }
}

/* ===== Flatten All Matte Black Button ===== */
#btnFlattenAll {
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-weight: 900 !important;
}

#btnFlattenAll:hover {
  background: linear-gradient(180deg, #262626, #111111) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.btn-matte{
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-weight: 900;
}

.btn-matte:hover{
  background: linear-gradient(180deg, #262626, #111111) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* ===== FINAL BUTTON STYLES ===== */

/* 🖤 Lobby buttons → black with white text */
.btn-gold-dark {
  background: linear-gradient(180deg, #161616, #080808) !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.34);
}

.btn-gold-dark:hover {
  background: linear-gradient(180deg, #202020, #0d0d0d) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.40);
}

/* 🟢 Leave lessons as-is (clean green) */
.btn-green {
  background: linear-gradient(180deg, #14532d, #052e16);
  color: #dcfce7;
  border: 1px solid rgba(34,197,94,0.35);
  font-weight: 900;
}

.btn-green:hover {
  background: linear-gradient(180deg, #166534, #064e3b);
}


/* 🟢 DARK GREEN (Start Lessons) */
.btn-green {
  background: linear-gradient(180deg, #166534, #022c22) !important;
  color: #dcfce7 !important;
  border: 1px solid rgba(34,197,94,0.6) !important;
  font-weight: 900;
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.15) inset,
    0 8px 20px rgba(0,0,0,0.35),
    0 0 18px rgba(34,197,94,0.25);
}

.btn-green:hover {
  background: linear-gradient(180deg, #22c55e, #14532d) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.25) inset,
    0 10px 26px rgba(0,0,0,0.4),
    0 0 24px rgba(34,197,94,0.35);
}
/* ===== GOLD PULSE (Tooltip Mode attractor) ===== */

@keyframes goldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(250,204,21,0.55);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(250,204,21,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250,204,21,0);
  }
}

/* Replace the default blue pulse */
.tipNudge {
  animation: goldPulse 1.8s infinite !important;
  border-color: rgba(250,204,21,0.7) !important;
}

      .emaSettingsWindow {
        position: absolute;
        left: 276px;
        top: 64px;
        z-index: 47;
        display: none;
        width: 238px;
        max-width: calc(100vw - 20px);
        border: 1px solid rgba(212, 175, 55, 0.34);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
          rgba(7, 7, 8, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.08) inset,
          0 16px 34px rgba(0, 0, 0, 0.48);
        color: #f4ecd0;
        pointer-events: auto;
      }
      .emaSettingsWindow.open {
        display: block;
      }
      .emaSettingsWindow.isDragging {
        user-select: none;
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.22) inset,
          0 20px 42px rgba(0, 0, 0, 0.56);
      }
      .emaSettingsHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 10px 8px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.16);
        color: rgba(246, 229, 168, 0.9);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 900;
        cursor: move;
        touch-action: none;
      }
      .emaSettingsHeader button {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
      }
      .emaSettingsBody {
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .emaSettingsLabel {
        color: var(--muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .emaSettingsInput {
        width: 100%;
        min-height: 38px;
        padding: 9px 10px;
        border-radius: 12px;
        border: 1px solid rgba(212, 175, 55, 0.24);
        background: rgba(255, 255, 255, 0.055);
        color: var(--ink);
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 800;
      }
      .emaSettingsInput:focus {
        outline: none;
        border-color: rgba(250, 204, 21, 0.62);
        box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.13);
      }
      .emaSettingsHint {
        color: rgba(147, 164, 199, 0.88);
        font-size: 10px;
        line-height: 1.35;
      }
      .emaSettingsActions {
        display: flex;
        gap: 8px;
        margin-top: 2px;
      }
      .emaSettingsActions button {
        flex: 1 1 0;
        min-height: 34px;
      }
      @media (max-width: 900px) {
        .emaSettingsWindow {
          left: 8px;
          top: 116px;
          width: min(238px, calc(100vw - 16px));
          z-index: 70;
        }
      }