/*
 * OptionsGEX Design System V1
 * Canonical presentation contract for all new NSE / Crypto / System screens.
 * No strategy logic. No execution logic.
 */

:root{
  color-scheme:dark;

  /* Typography */
  --ogx-font-sans:Inter,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ogx-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --ogx-text-2xs:.625rem;
  --ogx-text-xs:.6875rem;
  --ogx-text-sm:.75rem;
  --ogx-text-md:.875rem;
  --ogx-text-lg:1rem;
  --ogx-text-xl:1.25rem;
  --ogx-text-2xl:1.5rem;
  --ogx-text-3xl:2rem;
  --ogx-text-4xl:2.5rem;

  --ogx-weight-regular:400;
  --ogx-weight-medium:500;
  --ogx-weight-semibold:650;
  --ogx-weight-bold:750;
  --ogx-weight-black:850;

  /* Core theme */
  --ogx-color-canvas:#070b12;
  --ogx-color-canvas-elevated:#09111c;
  --ogx-color-surface-1:#0c1420;
  --ogx-color-surface-2:#101b2a;
  --ogx-color-surface-3:#162238;
  --ogx-color-surface-hover:#192941;
  --ogx-color-overlay:rgba(4,9,16,.82);

  --ogx-color-text-1:#f4f7fb;
  --ogx-color-text-2:#c7d2e3;
  --ogx-color-text-3:#91a2bb;
  --ogx-color-text-4:#667b98;

  --ogx-color-border-1:#203451;
  --ogx-color-border-2:rgba(123,159,206,.18);
  --ogx-color-divider:rgba(123,159,206,.10);

  /* Brand / interaction */
  --ogx-color-primary:#2e8bff;
  --ogx-color-primary-hover:#4b9cff;
  --ogx-color-primary-soft:rgba(46,139,255,.12);
  --ogx-color-cyan:#22d3ee;
  --ogx-color-violet:#8b5cf6;

  /* Semantic trading colors */
  --ogx-color-bull:#16e0a1;
  --ogx-color-bull-soft:rgba(22,224,161,.11);
  --ogx-color-bear:#ff516c;
  --ogx-color-bear-soft:rgba(255,81,108,.11);
  --ogx-color-wait:#ffb547;
  --ogx-color-wait-soft:rgba(255,181,71,.11);
  --ogx-color-info:#5aa7ff;
  --ogx-color-info-soft:rgba(90,167,255,.11);

  /* GEX-specific semantics */
  --ogx-color-call-wall:#ff516c;
  --ogx-color-put-wall:#16e0a1;
  --ogx-color-zero-gamma:#2e8bff;
  --ogx-color-net-gex-pos:#16e0a1;
  --ogx-color-net-gex-neg:#ff516c;
  --ogx-color-replay:#9a6cff;
  --ogx-color-stale:#ffb547;
  --ogx-color-locked:#ff516c;

  /* Compatibility aliases for pre-V3 presentation modules */
  --ogx-bg:var(--ogx-color-canvas);
  --ogx-surface:var(--ogx-color-surface-1);
  --ogx-surface-2:var(--ogx-color-surface-2);
  --ogx-surface-3:var(--ogx-color-surface-3);
  --ogx-line:var(--ogx-color-border-1);
  --ogx-line-soft:var(--ogx-color-border-2);
  --ogx-text:var(--ogx-color-text-1);
  --ogx-muted:var(--ogx-color-text-3);
  --ogx-blue:var(--ogx-color-primary);
  --ogx-cyan:var(--ogx-color-cyan);
  --ogx-green:var(--ogx-color-bull);
  --ogx-red:var(--ogx-color-bear);
  --ogx-amber:var(--ogx-color-wait);
  --ogx-violet:var(--ogx-color-violet);

  /* Spacing */
  --ogx-space-0:0;
  --ogx-space-1:.25rem;
  --ogx-space-2:.5rem;
  --ogx-space-3:.75rem;
  --ogx-space-4:1rem;
  --ogx-space-5:1.25rem;
  --ogx-space-6:1.5rem;
  --ogx-space-8:2rem;
  --ogx-space-10:2.5rem;
  --ogx-space-12:3rem;

  /* Radius */
  --ogx-radius-xs:6px;
  --ogx-radius-sm:10px;
  --ogx-radius-md:14px;
  --ogx-radius-lg:18px;
  --ogx-radius-xl:22px;
  --ogx-radius-pill:999px;
  --ogx-radius:var(--ogx-radius-lg);

  /* Shadows */
  --ogx-shadow-xs:0 2px 8px rgba(0,0,0,.20);
  --ogx-shadow-sm:0 8px 22px rgba(0,0,0,.22);
  --ogx-shadow-md:0 18px 45px rgba(0,0,0,.28);
  --ogx-shadow-lg:0 28px 70px rgba(0,0,0,.34);
  --ogx-shadow:var(--ogx-shadow-md);

  /* Motion */
  --ogx-ease:cubic-bezier(.2,.8,.2,1);
  --ogx-duration-fast:120ms;
  --ogx-duration-normal:180ms;
  --ogx-duration-slow:260ms;

  /* Touch */
  --ogx-touch-min:44px;

  /* Layout */
  --ogx-content-max:1440px;
  --ogx-mobile-max:820px;
  --ogx-bottom-nav-height:68px;

  /* Layering */
  --ogx-z-base:1;
  --ogx-z-sticky:100;
  --ogx-z-nav:200;
  --ogx-z-sheet:600;
  --ogx-z-modal:800;
  --ogx-z-toast:1000;
}

/* Standard type contract */
html,body,button,input,select,textarea{
  font-family:var(--ogx-font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--ogx-color-canvas);
  color:var(--ogx-color-text-1);
}
code,pre,.ogx-mono{
  font-family:var(--ogx-font-mono);
}
button,input,select,textarea{
  font-size:var(--ogx-text-md);
}

/* Utilities */
.ogx-text-primary{color:var(--ogx-color-text-1)!important}
.ogx-text-secondary{color:var(--ogx-color-text-2)!important}
.ogx-text-muted{color:var(--ogx-color-text-3)!important}
.ogx-tone-bull{color:var(--ogx-color-bull)!important}
.ogx-tone-bear{color:var(--ogx-color-bear)!important}
.ogx-tone-wait{color:var(--ogx-color-wait)!important}
.ogx-tone-info{color:var(--ogx-color-info)!important}
.ogx-tone-replay{color:var(--ogx-color-replay)!important}

/* App screen */
.ogx-screen{
  width:min(100%,var(--ogx-content-max));
  margin:0 auto;
  padding:var(--ogx-space-4);
}
.ogx-screen-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ogx-space-3);
  margin-bottom:var(--ogx-space-4);
}
.ogx-screen-title{
  margin:0;
  font-size:var(--ogx-text-2xl);
  line-height:1.1;
  font-weight:var(--ogx-weight-black);
  letter-spacing:-.025em;
}
.ogx-screen-subtitle{
  margin-top:var(--ogx-space-1);
  color:var(--ogx-color-text-3);
  font-size:var(--ogx-text-sm);
}

/* Card */
.ogx-card{
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-lg);
  background:
    linear-gradient(180deg,var(--ogx-color-surface-2),var(--ogx-color-surface-1));
  box-shadow:var(--ogx-shadow-sm);
}
.ogx-card--flat{
  box-shadow:none;
}
.ogx-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ogx-space-3);
  padding:var(--ogx-space-4) var(--ogx-space-4) 0;
}
.ogx-card__body{padding:var(--ogx-space-4)}
.ogx-card__footer{
  padding:0 var(--ogx-space-4) var(--ogx-space-4);
}

/* Buttons */
.ogx-btn{
  min-height:var(--ogx-touch-min);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ogx-space-2);
  padding:.65rem .95rem;
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-md);
  background:var(--ogx-color-surface-2);
  color:var(--ogx-color-text-2);
  font-weight:var(--ogx-weight-bold);
  cursor:pointer;
  transition:
    transform var(--ogx-duration-fast) var(--ogx-ease),
    background var(--ogx-duration-normal) var(--ogx-ease),
    border-color var(--ogx-duration-normal) var(--ogx-ease);
}
.ogx-btn:hover{
  background:var(--ogx-color-surface-hover);
  border-color:var(--ogx-color-border-1);
}
.ogx-btn:active{transform:scale(.98)}
.ogx-btn--primary{
  color:#fff;
  border-color:rgba(75,156,255,.55);
  background:linear-gradient(180deg,#378fff,#236fdf);
}
.ogx-btn--bull{
  color:var(--ogx-color-bull);
  border-color:rgba(22,224,161,.34);
  background:var(--ogx-color-bull-soft);
}
.ogx-btn--bear{
  color:var(--ogx-color-bear);
  border-color:rgba(255,81,108,.34);
  background:var(--ogx-color-bear-soft);
}
.ogx-btn--ghost{
  background:transparent;
}
.ogx-icon-btn{
  width:var(--ogx-touch-min);
  height:var(--ogx-touch-min);
  min-width:var(--ogx-touch-min);
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-md);
  background:var(--ogx-color-surface-2);
  color:var(--ogx-color-text-2);
}

/* Chips / badges */
.ogx-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 9px;
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-pill);
  background:rgba(12,20,32,.84);
  color:var(--ogx-color-text-2);
  font-size:var(--ogx-text-xs);
  font-weight:var(--ogx-weight-bold);
  letter-spacing:.035em;
  white-space:nowrap;
}
.ogx-chip[data-tone="bull"]{
  color:var(--ogx-color-bull);
  border-color:rgba(22,224,161,.32);
  background:var(--ogx-color-bull-soft);
}
.ogx-chip[data-tone="bear"]{
  color:var(--ogx-color-bear);
  border-color:rgba(255,81,108,.32);
  background:var(--ogx-color-bear-soft);
}
.ogx-chip[data-tone="wait"]{
  color:var(--ogx-color-wait);
  border-color:rgba(255,181,71,.32);
  background:var(--ogx-color-wait-soft);
}
.ogx-chip[data-tone="info"]{
  color:var(--ogx-color-info);
  border-color:rgba(90,167,255,.32);
  background:var(--ogx-color-info-soft);
}
.ogx-chip[data-tone="replay"]{
  color:var(--ogx-color-replay);
  border-color:rgba(154,108,255,.34);
  background:rgba(154,108,255,.10);
}

/* Segmented control / tabs */
.ogx-segmented{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-md);
  background:var(--ogx-color-surface-1);
  overflow-x:auto;
  scrollbar-width:none;
}
.ogx-segmented::-webkit-scrollbar{display:none}
.ogx-segmented button{
  min-height:36px;
  flex:0 0 auto;
  padding:6px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ogx-color-text-3);
  font-weight:var(--ogx-weight-semibold);
}
.ogx-segmented button[aria-selected="true"],
.ogx-segmented button.is-active{
  background:var(--ogx-color-primary-soft);
  color:#fff;
  box-shadow:0 0 0 1px rgba(46,139,255,.42) inset;
}

/* Metric cards */
.ogx-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ogx-space-3);
}
.ogx-metric{
  min-width:0;
  padding:var(--ogx-space-3);
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-md);
  background:var(--ogx-color-surface-1);
}
.ogx-metric__label{
  color:var(--ogx-color-text-3);
  font-size:var(--ogx-text-xs);
  font-weight:var(--ogx-weight-semibold);
}
.ogx-metric__value{
  margin-top:4px;
  color:var(--ogx-color-text-1);
  font-size:var(--ogx-text-xl);
  font-weight:var(--ogx-weight-black);
  letter-spacing:-.02em;
}
.ogx-metric__meta{
  margin-top:3px;
  color:var(--ogx-color-text-4);
  font-size:var(--ogx-text-2xs);
}

/* Toolbars */
.ogx-toolbar{
  display:flex;
  align-items:center;
  gap:var(--ogx-space-2);
  overflow-x:auto;
  scrollbar-width:none;
}
.ogx-toolbar::-webkit-scrollbar{display:none}
.ogx-toolbar .ogx-btn{
  flex:0 0 auto;
}

/* Tables */
.ogx-table-wrap{
  overflow:auto;
  border:1px solid var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-lg);
  background:var(--ogx-color-surface-1);
}
.ogx-table{
  width:100%;
  border-collapse:collapse;
}
.ogx-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:#0d1725;
  color:var(--ogx-color-text-3);
  font-size:var(--ogx-text-xs);
  text-transform:uppercase;
  letter-spacing:.045em;
}
.ogx-table th,.ogx-table td{
  padding:.65rem .7rem;
  border-bottom:1px solid var(--ogx-color-divider);
  text-align:right;
  white-space:nowrap;
}
.ogx-table th:first-child,.ogx-table td:first-child{text-align:left}
.ogx-table tr:hover td{background:rgba(255,255,255,.018)}

/* Alert/activity row */
.ogx-activity{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--ogx-space-3);
  min-height:66px;
  padding:var(--ogx-space-3);
  border-bottom:1px solid var(--ogx-color-divider);
}
.ogx-activity:last-child{border-bottom:0}
.ogx-activity__icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  background:var(--ogx-color-surface-3);
}
.ogx-activity__title{
  color:var(--ogx-color-text-1);
  font-weight:var(--ogx-weight-bold);
}
.ogx-activity__meta{
  margin-top:3px;
  color:var(--ogx-color-text-3);
  font-size:var(--ogx-text-xs);
}

/* Bottom sheet / drawer */
.ogx-sheet{
  position:fixed;
  z-index:var(--ogx-z-sheet);
  left:50%;
  bottom:0;
  width:min(100%,720px);
  max-height:84vh;
  transform:translateX(-50%);
  overflow:auto;
  border:1px solid var(--ogx-color-border-1);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,#111d2e,#09121e);
  box-shadow:var(--ogx-shadow-lg);
}
.ogx-sheet__handle{
  width:46px;height:4px;
  margin:8px auto 4px;
  border-radius:99px;
  background:#4a607e;
}

/* Empty / skeleton */
.ogx-empty{
  min-height:140px;
  display:grid;
  place-items:center;
  padding:var(--ogx-space-6);
  border:1px dashed var(--ogx-color-border-2);
  border-radius:var(--ogx-radius-lg);
  background:var(--ogx-color-surface-1);
  color:var(--ogx-color-text-3);
  text-align:center;
}
.ogx-skeleton{
  border-radius:var(--ogx-radius-md);
  background:
    linear-gradient(100deg,transparent 20%,rgba(255,255,255,.045) 40%,transparent 60%) 0 0/220% 100%,
    var(--ogx-color-surface-2);
  animation:ogx-skeleton 1.8s linear infinite;
}
@keyframes ogx-skeleton{to{background-position:-220% 0}}

/* Standard icons */
ogx-icon{
  width:1.25em;
  height:1.25em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  vertical-align:-.15em;
}
ogx-icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* Accessibility */
:focus-visible{
  outline:2px solid var(--ogx-color-primary);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}

/* Responsive contract */
@media(max-width:820px){
  .ogx-screen{padding:var(--ogx-space-3)}
  .ogx-screen-title{font-size:var(--ogx-text-xl)}
  .ogx-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .ogx-screen{padding:var(--ogx-space-2)}
  .ogx-card{border-radius:var(--ogx-radius-md)}
}