:root{
  --bg:#060b10;
  --panel:#0c141e;
  --panel2:#0a111a;
  --line:#1b2a3a;
  --text:#e8eef6;
  --muted:#8aa0b5;

  --title:#fbcb45;
  --green:#00e676;
  --red:#ff4d4d;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding: 0 0px;        /* adjust: 18–28 */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,var(--bg), #05080c 60%, #040608);
  color:var(--text);
}


/* =========================
   TOP BAR / HEADER
   ========================= */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding: 22px 26px 10px;
}

.topbar-left{ flex:1 1 auto; min-width:0; }
.topbar-right{ flex:0 0 auto; padding-top: 6px; }

.support-btn{
  background:#fbcb45;
  color:#0b0f14;
  font-weight:900;
  font-size:13px;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(251,203,69,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.support-btn:hover{ filter:brightness(1.05); }
.support-btn:active{ transform: translateY(1px); }

/* page container */
.page{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 22px 26px;
}

.masthead{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 10px;
}

.title{
  margin:0;
  font-size:40px;
  line-height: 1.05;
  letter-spacing:.2px;
  color:var(--title);
  font-weight:900;
}

.disclaimer{
  color:var(--muted);
  font-size:13px;
  margin: 0;
}

.meta{
  color: rgba(232,238,246,.92);
  font-size: 16px;
  margin-top: 2px;
}

/* =========================
   ACTIONS ROW (matches your screenshot)
   ========================= */

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12,20,30,0.55);
  border-radius: 14px;
  margin: 12px 0 14px;
}

.actions-spacer{ flex: 1; }

.action-btn{
  padding: 10px 14px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.86);
  font-weight: 800;
  cursor:pointer;
}
.action-btn:hover{ border-color: rgba(255,255,255,0.26); }
.action-btn.ghost{ color: rgba(255,255,255,0.70); }

/* search/sort controls */
.search{
  width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.search:focus{
  border-color: rgba(251,203,69,0.42);
  box-shadow: 0 0 0 3px rgba(251,203,69,0.12);
}

.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
}

/* =========================
   FILTERS DRAWER
   ========================= */

.filters-drawer{
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12,20,30,0.55);
  border-radius: 14px;
  margin-bottom: 12px;
}

.filters-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.filters-row label{
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.filters-row input{
  width: 180px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: var(--text);
}

.filters-actions{
  display:flex;
  gap:10px;
}

.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.86);
  font-weight: 900;
  cursor:pointer;
}
.btn.ghost{ color: rgba(255,255,255,0.70); }

.filters-hint{
  margin-top: 10px;
  color: rgba(138,160,181,0.90);
  font-size: 12px;
}

/* =========================
   PANELS (THIS is where your edge problem is)
   ========================= */

.panel{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12,20,30,0.55);
  border-radius: 16px;
  padding: 14px 14px;                 /* ✅ more inner breathing room */
  margin-bottom: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-title{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 18px;
}

/* ===== Panel header right-side label (clean badge) ===== */
.panel-sub{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(232,238,246,0.80);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* optional tiny dot on badge */
.panel-sub::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(251,203,69,0.85);
  box-shadow: 0 0 0 3px rgba(251,203,69,0.10);
}


/* =========================
   TABLE CARD (real inset + aligned columns)
   ========================= */

.table-wrap{
  /* ✅ this creates the inset look AND keeps columns off the edges */
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(6,10,16,0.35);
  overflow: hidden;                    /* ✅ clip header bg to rounded corners */
}

/* if table needs horizontal scroll on small screens */
.table-scroll{
  overflow:auto;
  border-radius: 12px;
}

/* the table */
.table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;                 /* ✅ stops Trigger from pushing Price */
  min-width: 100%;                     /* ✅ do NOT force a wide min-width */
}

/* header */
.table thead th{
  text-align: left;
  font-size: 12px;
  letter-spacing: .6px;
  color: rgba(138,160,181,0.95);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(10,17,26,0.90), rgba(10,17,26,0.55));
}

/* body cells */
.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(232,238,246,0.92);
}

/* hover */
.table tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* truncation */
.table th,
.table td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* numeric alignment */
.table th.num,
.table td.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ✅ column sizing (consistent across both tables) */
.table th:nth-child(1), .table td:nth-child(1){ width: 110px; } /* Ticker */
.table th:nth-child(2), .table td:nth-child(2){ width: 110px; } /* State */
.table th:nth-child(3), .table td:nth-child(3){ width: auto; }  /* Trigger */
.table th:nth-child(4), .table td:nth-child(4){ width: 120px; } /* Price */
.table th:nth-child(5), .table td:nth-child(5){ width: 95px; }  /* RelVol */
.table th:nth-child(6), .table td:nth-child(6){ width: 130px; } /* Volume */

.empty{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.70);
  margin: 10px 0;
}

/* footer */
.footer{
  margin-top: 16px;
  color: rgba(138,160,181,0.92);
  font-size: 12px;
  text-align:left;
}

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

@media (max-width: 900px){
  .topbar{ padding: 18px 14px 10px; }
  .page{ padding: 0 14px 20px; }
  .title{ font-size: 32px; }
  .search{ width: 220px; }
}

/* =========================
   MODAL
   ========================= */

   .modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-card{
    width: 520px;
    max-width: 92%;
    background: #0f1823;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 40px 80px rgba(0,0,0,.6);
    padding: 22px;
  }
  
  .modal-head{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  
  .modal-title{
    font-weight: 900;
    font-size: 18px;
  }
  
  .modal-close{
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor:pointer;
  }
  
  .modal-body{
    font-size: 14px;
    color: rgba(232,238,246,.9);
    line-height: 1.6;
  }

  /* Wide + scrollable modal variant (use on long content modals) */
.modal-card--wide{
  width: min(920px, 94vw);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 0;         /* move padding into head/body so body can scroll */
  overflow: hidden;   /* prevents the card itself from growing */
}

.modal-card--wide .modal-head{
  padding: 22px 22px 10px;
  margin-bottom: 0;   /* overrides the base 14px */
  flex: 0 0 auto;
}

.modal-card--wide .modal-body{
  padding: 10px 22px 18px;
  flex: 1 1 auto;
  overflow: auto;     /* key: scroll INSIDE the modal */
  -webkit-overflow-scrolling: touch;
}

/* mobile */
@media (max-width: 520px){
  .modal-card--wide{
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .modal-card--wide .modal-head{ padding: 16px 16px 8px; }
  .modal-card--wide .modal-body{ padding: 8px 16px 14px; }
}

  /* =========================
   DISCLAIMER MODAL SIZING (hard override)
   ========================= */

#disclaimerModal .modal-card{
  width: min(920px, 94vw);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 0;              /* move padding to sections so scrolling works */
  overflow: hidden;         /* prevents the card from growing */
}

#disclaimerModal .modal-head{
  padding: 22px 22px 10px;
  margin-bottom: 0;         /* override your global margin-bottom:14px */
  flex: 0 0 auto;
}

#disclaimerModal .modal-body{
  padding: 10px 22px 18px;
  flex: 1 1 auto;
  overflow: auto;           /* key: scroll INSIDE */
  -webkit-overflow-scrolling: touch;
}

/* keep the button visible + aligned */
#disclaimerModal .modal-body > div:last-child{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(15,24,35,0), #0f1823 45%);
}

/* mobile tweaks */
@media (max-width: 520px){
  #disclaimerModal .modal-card{
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  #disclaimerModal .modal-head{ padding: 16px 16px 8px; }
  #disclaimerModal .modal-body{ padding: 8px 16px 14px; }
}

/* Disclaimer is forced-ack: no X, no overlay click affordance */
#disclaimerModal .modal-close { display: none; }
#disclaimerModal { cursor: default; }
#disclaimerModal .modal-card { cursor: default; }

/* FORCE-ACK disclaimer: block ALL interaction behind it */
#disclaimerModal{
  position: fixed;
  inset: 0;
  z-index: 99999;          /* higher than anything else */
  pointer-events: auto;    /* ensure it receives clicks */
}

#disclaimerModal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  pointer-events: auto;    /* overlay catches clicks */
}

/* Keep the card above the overlay pseudo-element */
#disclaimerModal .modal-card{
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Hide the X (forced accept) */
#disclaimerModal .modal-close{
  display: none !important;
}

/* =========================
   SCORE LEGEND MODAL SIZING (hard override)
   ========================= */

   #legendModal .modal-card{
    width: min(920px, 94vw);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    padding: 0;              /* move padding to head/body so scrolling works */
    overflow: hidden;         /* prevents the card from growing */
  }
  
  #legendModal .modal-head{
    padding: 22px 22px 10px;
    margin-bottom: 0;         /* override any global margin-bottom */
    flex: 0 0 auto;
  }
  
  #legendModal .modal-body{
    padding: 10px 22px 18px;
    flex: 1 1 auto;
    overflow: auto;           /* key: scroll INSIDE */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Optional: tighten spacing inside long legend */
  #legendModal .modal-body p{
    margin: 10px 0;
  }
  
  /* mobile tweaks */
  @media (max-width: 520px){
    #legendModal .modal-card{
      width: calc(100vw - 24px);
      max-height: calc(100vh - 24px);
    }
    #legendModal .modal-head{ padding: 16px 16px 8px; }
    #legendModal .modal-body{ padding: 8px 16px 14px; }
  }

.actions-spacer { flex: 1; }

/* ===== Pills inside Trigger column ===== */
.pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  flex: 0 0 auto;
}

.pill.calls{
  border-color: rgba(0,230,118,0.35);
  background: rgba(0,230,118,0.10);
  color: rgba(0,230,118,0.95);
}

.pill.puts{
  border-color: rgba(255,77,77,0.35);
  background: rgba(255,77,77,0.10);
  color: rgba(255,77,77,0.95);
}

.pill.strong{
  border-color: rgba(251,203,69,0.35);
  background: rgba(251,203,69,0.12);
  color: rgba(251,203,69,0.95);
}

.pill.lean{
  border-color: rgba(138,160,181,0.30);
  background: rgba(138,160,181,0.10);
  color: rgba(200,215,230,0.92);
}

.pill.neutral{
  opacity: 0.85;
}

.dot{
  color: rgba(138,160,181,0.8);
  margin: 0 4px;
}

/* ===== Hint pills ===== */
.pill.ideal{
  border-color: rgba(0,230,118,0.35);
  background: rgba(0,230,118,0.10);
  color: rgba(0,230,118,0.95);
}
.pill.late{
  border-color: rgba(251,203,69,0.35);
  background: rgba(251,203,69,0.12);
  color: rgba(251,203,69,0.95);
}
.pill.exhausted{
  border-color: rgba(255,77,77,0.35);
  background: rgba(255,77,77,0.10);
  color: rgba(255,77,77,0.95);
}
.pill.live, .pill.near{
  border-color: rgba(138,160,181,0.30);
  background: rgba(138,160,181,0.10);
  color: rgba(200,215,230,0.92);
}

/* ===== Score pills ===== */
.pill.score-hi{
  border-color: rgba(0,230,118,0.35);
  background: rgba(0,230,118,0.08);
  color: rgba(0,230,118,0.95);
}
.pill.score-mid{
  border-color: rgba(251,203,69,0.35);
  background: rgba(251,203,69,0.08);
  color: rgba(251,203,69,0.95);
}
.pill.score-lo{
  border-color: rgba(138,160,181,0.30);
  background: rgba(0,0,0,0.20);
  color: rgba(200,215,230,0.85);
}

/* ===== Size pills ===== */
.pill.size-full{
  border-color: rgba(0,230,118,.45);
  background: rgba(0,230,118,.18);
  color: rgba(0,230,118,.95);
}
.pill.size-80{ border-color: rgba(63,167,255,.35); background: rgba(63,167,255,.10); color: rgba(127,195,255,.95); }
.pill.size-60{ border-color: rgba(251,192,45,.35); background: rgba(251,192,45,.10); color: rgba(255,213,79,.95); }
.pill.size-40{ border-color: rgba(255,152,0,.35);  background: rgba(255,152,0,.10);  color: rgba(255,183,77,.95); }
.pill.size-25{ border-color: rgba(255,112,67,.35); background: rgba(255,112,67,.10); color: rgba(255,138,101,.95); }
.pill.size-none{
  border-color: rgba(150,150,150,.25);
  background: rgba(0,0,0,.20);
  color: rgba(200,200,200,.70);
}

/* ===== Hold pills ===== */
.pill.hold-long{
  border-color: rgba(0,230,118,.35);
  background: rgba(0,230,118,.08);
  color: rgba(0,230,118,.95);
}
.pill.hold-mid{
  border-color: rgba(63,167,255,.35);
  background: rgba(63,167,255,.08);
  color: rgba(127,195,255,.95);
}
.pill.hold-short{
  border-color: rgba(251,192,45,.35);
  background: rgba(251,192,45,.08);
  color: rgba(255,213,79,.95);
}
.pill.hold-dead{
  border-color: rgba(255,112,67,.35);
  background: rgba(255,112,67,.08);
  color: rgba(255,138,101,.95);
}

.trigger-text{
  color: rgba(232,238,246,0.92);
}

/* ===== Trigger pills ===== */
.trigger-cell{
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.trigger-cell .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  flex: 0 0 auto;
}

.trigger-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232,238,246,0.92);
}

.state{ font-weight: 800; letter-spacing: .2px; }
.state.go, .state.strong-go{ color: rgba(0,230,118,0.95); }
.state.setup{ color: rgba(251,203,69,0.95); }
.state.wait{ color: rgba(138,160,181,0.95); }

.panel.trade-now .panel-sub::before{ background: rgba(0,230,118,0.85); }
.panel.watchlist .panel-sub::before{ background: rgba(138,160,181,0.75); }

.statusbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 14px;
}
.pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  font-weight:700;
}
.pill.subtle{
  opacity:.8;
  font-weight:600;
}
#refreshSeconds{ font-variant-numeric: tabular-nums; }

/* ================= MARKET CLOSED FULLSCREEN OVERLAY ================= */

.market-closed{
  position: fixed;

  top: 90px;          /* push overlay below navbar */
  left: 0;

  width: 100vw;
  height: calc(100vh - 90px);

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

  background: rgba(0,0,0,0.96);

  z-index: 50;        /* below navbar (navbar is 100) */
}

/* overlay text styling */
.market-closed h1 {
  color: #cd9a09;
  margin-bottom: 8px;
  text-align: center;
}

.market-closed p {
  font-size: 14px;
  text-align: center;
}

.closed-topbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  background: rgba(0,0,0,0.55);
  border-bottom: none;
}

.closed-brand{
  color: #cd9a09;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.5px;
}

.closed-tagline{
  color: rgba(255,255,255,0.75);
  font-size: 16px;
}

/* Tradier metrics block inside Options+Trigger */
.tradier-block{
  display:flex;
  gap:16px;
  margin:6px 0;                 /* gives breathing room */
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
}

.metric{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
  min-width: 56px;
}

.metric-label{
  font-size:10px;
  opacity:0.65;
  letter-spacing:0.7px;
  text-transform:uppercase;
  margin-bottom:3px;
}

.metric-val{
  font-size:12px;
  font-weight:800;
  font-variant-numeric: tabular-nums; /* important */
  font-feature-settings: "tnum";
}

.metric-val.positive{ color:#39d98a; }
.metric-val.negative{ color:#ff6b6b; }
.metric-val.neutral{ color:#9fb3c8; }


/* Never clip the Options + Trigger column */
.table td:nth-child(3),
.table th:nth-child(3){
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* Allow pills to wrap and never truncate */
.trigger-cell,
.trigger-stack,
.opt-row{
  min-width: 0;
  overflow: visible;
}

.opt-row{
  flex-wrap: wrap;
}

.tradier-block{
  max-width: 100%;
  flex-wrap: wrap;
}

.metric{
  min-width: 56px;  /* keeps label/value from collapsing */
}

/* ONLY these can wrap to avoid cutoff */
.pill.recent,
.pill.live,
.pill.near{
  white-space: normal;
}


/* =========================
   MINI LEGEND POPOVER
   ========================= */

   .mini-legend-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .mini-legend-btn{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.85);
    font-weight: 900;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mini-legend-btn:hover{
    border-color: rgba(255,255,255,0.28);
  }
  .mini-legend-btn:active{
    transform: translateY(1px);
  }
  
  .mini-popover{
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 320px;
    max-width: min(92vw, 320px);
    z-index: 2000;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(10,17,26,0.96);
    box-shadow: 0 22px 50px rgba(0,0,0,0.55);
    padding: 12px 12px 10px;
    backdrop-filter: blur(6px);
  }
  
  .mini-popover::before{
    content: "";
    position: absolute;
    right: 16px;
    top: -7px;
    width: 12px;
    height: 12px;
    background: rgba(10,17,26,0.96);
    border-left: 1px solid rgba(255,255,255,0.14);
    border-top: 1px solid rgba(255,255,255,0.14);
    transform: rotate(45deg);
  }
  
  .mini-popover-title{
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .2px;
    margin-bottom: 10px;
    color: rgba(232,238,246,0.92);
  }
  
  .mini-popover-grid{
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 8px 10px;
  }
  
  .mini-popover-grid .k{
    font-size: 11px;
    letter-spacing: .7px;
    color: rgba(138,160,181,0.95);
    font-weight: 900;
  }
  .mini-popover-grid .v{
    font-size: 12px;
    color: rgba(232,238,246,0.88);
    line-height: 1.35;
  }
  
  .mini-popover-note{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.10);
    font-size:11px;
    color:rgba(138,160,181,0.92);
    line-height:1.35;
  }
  
  /* label */
  .mini-note-title{
    font-weight:600;
    color:rgba(200,220,240,0.95);
    margin-bottom:3px;
    letter-spacing:.2px;
  }
  
  /* formula */
  .mini-note-formula{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color:rgba(170,195,220,0.85);
  }
  
  /* example (most important line visually) */
  .mini-note-example{
    margin-top:2px;
    color:#7fd1ff;
    font-weight:500;
  }

  .mini-note-example{
    color: var(--accent-green, #7fd1ff);
  }

  
  .hidden{ display:none !important; }

  .pill.hold { white-space: nowrap; }

  .edge-notice {
    background: rgba(255,165,0,0.08);
    border: 1px solid rgba(255,165,0,0.25);
    color: #ffcc80;
    padding: 10px 14px;
    margin: 10px 0 18px 0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
  }
  
  /* Action column stacked label */
.action-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;   /* left aligned like your screenshot */
  line-height: 1.05;
}

.action-stack .top,
.action-stack .bottom {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.action-single {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.mini-trigger{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(138,160,181,0.85);
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill.compact{
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.entry-wait-notice {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  margin: 10px 0 16px;

  border-radius: 12px;
  border: 1px solid rgba(77, 163, 255, 0.28);
  border-left: 5px solid #4da3ff;
  background: linear-gradient(
    90deg,
    rgba(77, 163, 255, 0.14) 0%,
    rgba(77, 163, 255, 0.06) 22%,
    rgba(77, 163, 255, 0.03) 100%
  );

  box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.04) inset;
  color: #f3f6fb;
  font-size: 14px;
  line-height: 1.4;
}

.entry-wait-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  background: rgba(77, 163, 255, 0.16);
  color: #4da3ff;
  font-size: 13px;
  animation: waitPulse 3s ease-in-out infinite;
}

.entry-wait-copy strong:last-of-type {
  color: #4da3ff;
}

@keyframes waitPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.site-nav{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(7,7,8,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.site-nav-wrap {
  width: 100%;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.site-brand{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-logo-img{
  height: 75px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,200,60,.35));
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.site-nav-links a{
  color: rgba(232,232,234,.82);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}

.site-nav-links a:hover{
  background: rgba(255,255,255,.05);
  color: #fff;
}

.site-nav-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.site-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  color: #e8e8ea;
  white-space: nowrap;
}

.site-btn-ghost{
  background: transparent;
}

.site-btn:hover{
  background: rgba(255,255,255,.05);
}

@media (max-width: 980px){
  .site-nav-wrap{
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-nav-links{
    width: 100%;
    justify-content: center;
  }

  .site-logo-img{
    height: 42px;
  }
}

.edge-notice{
  margin: 0;
  padding: 12px 18px;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}