/* AlphaOS V9 App Styling — enterprise-grade baseline */

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────
   Journal — Timeline Viewer (read-only)
───────────────────────────────────────────────────────────── */

#journalRoot{ width:100%; max-width:100%; overflow-x:hidden; display:flex; flex-direction:column; min-height:0; height: calc(100vh - 132px); }

.jTop{ display:flex; flex-direction:column; gap: 12px; }

.jTimelineBox{
  flex: 1;
  min-height: 0;

  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  border: var(--border-w) solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow: hidden;
}

.jTimelineHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: var(--border-w) solid var(--border);
  background: rgba(255,255,255,.02);
}

.jCount{ display:flex; align-items:center; gap:10px; padding: 8px 10px; border: var(--border-w) solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); }
.jNav{ display:flex; align-items:center; gap: 8px; }

.jCarousel{
  padding: 12px;
  min-height:0;
}

.jTrack{
  display:flex;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jTrack::-webkit-scrollbar{ width: 0; height: 0; }

.jTrack .jCard{
  flex: 0 0 auto;
  min-width: clamp(200px, 72vw, 280px);
  max-width: clamp(220px, 78vw, 300px);
  scroll-snap-align: start;
}

.jModalNav{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; margin-inline-end:8px; }
.jModalNav .btn{ padding-inline: 10px; }

.jCard{
  width: 100%;
  text-align: start;
  border: var(--border-w) solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: 18px;
  padding: 12px;
  cursor:pointer;
  transition: transform var(--trans), border-color var(--trans), background var(--trans);
}
.jCard:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); }
.jCard.sel{ border-color: rgba(0,200,150,.35); box-shadow: 0 0 0 1px rgba(0,200,150,.08) inset; }

.jCardTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.jSym{ display:flex; align-items:center; gap: 10px; }
.jDir{ width: 28px; height: 28px; display:grid; place-items:center; border-radius: 12px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); font-weight: 700; }
.jDir.long{ color: rgba(0, 255, 200, .95); }
.jDir.short{ color: rgba(255, 120, 120, .95); }
.jChip{ font-size: 12px; padding: 4px 8px; border-radius: 999px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); }
.jChip.ghost{ opacity: .8; }
.jMeta{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
.jTime{ font-size: 12px; opacity: .85; }

.jPreview{ margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }
.jBar{ height: 10px; border-radius: 999px; border: var(--border-w) solid var(--border); overflow:hidden; background: rgba(255,255,255,.02); position:relative; }
.jBar > span{ display:block; height:100%; width: 100%; opacity:.9; }
.jBar.pos > span{ background: linear-gradient(90deg, rgba(0,200,150,.15), rgba(0,200,150,.55)); }
.jBar.neg > span{ background: linear-gradient(90deg, rgba(255,110,110,.18), rgba(255,110,110,.55)); }
.jBar.neu > span{ background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18)); }

.jStats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jStat{ border: var(--border-w) solid var(--border); border-radius: 14px; padding: 8px 10px; background: rgba(255,255,255,.02); display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.jStat b{ font-size: 14px; }
.jStat i{ font-style: normal; opacity:.7; font-size: 12px; }
.jStat.pos b{ color: rgba(0, 255, 200, .95); }
.jStat.neg b{ color: rgba(255, 120, 120, .95); }

.jBottom{ margin-top: 10px; display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.jSetup{ opacity:.85; font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 60%; }
.jThumbs{ display:flex; align-items:center; gap: 6px; }
.jThumbs img{ width: 32px; height: 32px; object-fit: cover; border-radius: 10px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); }
.jNoThumb{ width: 32px; height: 32px; display:grid; place-items:center; border-radius: 10px; border: var(--border-w) solid var(--border); opacity: .75; }

.jInspector{ display:flex; flex-direction:column; gap: 10px; }
.jInspectorHead{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px; border: var(--border-w) solid var(--border); border-radius: 18px; background: rgba(255,255,255,.02); }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.miniGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.mini{ padding: 10px; border-radius: 14px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); }
.mini b{ display:block; }
.mini span{ opacity:.7; font-size: 12px; }
.sep{ height: 1px; background: var(--border); margin: 12px 0; }
.kv{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv > div{ padding: 10px; border-radius: 14px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); display:flex; justify-content:space-between; gap: 10px; }
.kv span{ opacity:.7; font-size: 12px; }
.noteBox{ margin-top: 10px; padding: 12px; border-radius: 14px; border: var(--border-w) solid var(--border); background: rgba(255,255,255,.02); min-height: 88px; }

.jGallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jImgBtn{ padding:0; border: var(--border-w) solid var(--border); border-radius: 14px; overflow:hidden; background: rgba(255,255,255,.02); cursor:pointer; }
.jImgBtn img{ width:100%; height: 120px; object-fit: cover; display:block; }

.jLightbox{ position: fixed; inset:0; z-index: 1000; display:grid; place-items:center; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); padding: 18px; }
.jLightboxInner{ width: min(1000px, 96vw); max-height: 92vh; display:flex; flex-direction:column; gap: 12px; align-items:center; }
.jLightboxInner img{ width: 100%; max-height: 78vh; object-fit: contain; border-radius: 16px; border: var(--border-w) solid rgba(255,255,255,.18); background: rgba(255,255,255,.02); }

@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
  .miniGrid{ grid-template-columns: 1fr 1fr; }
  .jGallery{ grid-template-columns: repeat(2, 1fr); }
  .jTrack .jCard{ min-width: 82vw; max-width: 86vw; }
}

/* Journal — Desktop sizing + no page overflow (v9p84) */
#journalRoot{
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
}
.jTimelineBox, .jCarousel, .jTrack{ max-width: 100% !important; }
.jTrack{ overscroll-behavior-x: contain; }
.jTrack .jCard{
  min-width: clamp(220px, 32vw, 320px) !important;
  max-width: clamp(240px, 34vw, 340px) !important;
}
@media (max-width: 980px){
  .jTrack .jCard{ min-width: 82vw !important; max-width: 86vw !important; }
}

/* Modal — Compact inspector (no tabs) */
.jModalCompact{ width: 100%; }
.jCompactGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jCompactCard{ min-height: 0; }
.jAiCard{ grid-column: 1 / -1; }
.jMiniGrid{ grid-template-columns: repeat(4, 1fr); }
.jKv{ grid-template-columns: 1fr 1fr; }
.jNoteBox{ min-height: 72px; }

@media (max-width: 980px){
  .jCompactGrid{ grid-template-columns: 1fr; }
  .jAiCard{ grid-column: auto; }
  .jMiniGrid{ grid-template-columns: 1fr 1fr; }
}

/* Ensure modal body doesn't create horizontal scroll */
.modalBody{ overflow-x: hidden !important; }

/* Journal — show ALL recorded fields + kill horizontal scroll (v9p85) */
.main, .content{ min-width: 0; }
.content{ overflow-x: hidden; }
#journalRoot{ min-width: 0 !important; overflow-x: hidden !important; }
.jTop, .jTimelineBox, .jCarousel{ min-width: 0 !important; max-width: 100% !important; }
.jTrack{ max-width: 100% !important; }

/* Compact inspector additions */
.jChipWrap{ display:flex; flex-direction:column; gap:8px; }
.jChipTitle{ font-size:12px; opacity:.75; }
.jChipRow{ display:flex; flex-wrap:wrap; gap:8px; }
.jChipSm{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: var(--border-w) solid var(--border);
  background: rgba(255,255,255,.02);
  opacity: .92;
}
.jChecklist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.jCheckItem{
  border: var(--border-w) solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 8px 10px;
  display:flex;
  align-items:flex-start;
  gap: 8px;
  min-width: 0;
}
.jCheckItem .jCheck{
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  border: var(--border-w) solid var(--border);
  background: rgba(255,255,255,.02);
  flex: 0 0 auto;
}
.jCheckItem.on .jCheck{ background: rgba(0,200,150,.14); border-color: rgba(0,200,150,.28); }
.jCheckTxt{ font-size:12px; opacity:.92; line-height:1.35; overflow:hidden; text-overflow:ellipsis; }

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

/* Trades — ensure tabs bar shows all tabs (Notes included) */
.tradeEntryMain .tabs{
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: none;
}
.tradeEntryMain .tabs::-webkit-scrollbar{ display:none; }
.tradeEntryMain .tab{ flex: 0 0 auto; }

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background: rgba(0,200,150,.25); }

#app{ min-height:100%; }

.shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.sidebar{
  position: sticky;
  top:0;
  height: 100vh;
  padding: 18px 14px;
  border-inline-end: var(--border-w) solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  overflow: auto;

  /* Hide ugly scrollbars but keep scroll */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
.sidebar::-webkit-scrollbar{ width: 0; height: 0; } /* Webkit */

body[data-sidebar="collapsed"] .shell{
  grid-template-columns: 92px 1fr;
}
body[data-sidebar="collapsed"] .sidebar{
  padding: 18px 10px;
}
body[data-sidebar="collapsed"] .brand{
  justify-content: center;
}
body[data-sidebar="collapsed"] .brand .title{
  display:none;
}
body[data-sidebar="collapsed"] .nav a{
  justify-content: center;
}
body[data-sidebar="collapsed"] .nav .lbl{
  display:none;
}
body[data-sidebar="collapsed"] .nav .ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  font-size: 18px;
}
.collapseBtn{
  margin-inline-start: auto;
}
body[data-sidebar="collapsed"] .collapseBtn{
  margin-inline-start: 0;
}

.mobileOverlay{
  display:none;
}

/* Mobile drawer behavior */
@media (max-width: 980px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 86vw);
    height: 100vh;
    z-index: 50;
    transform: translateX(-110%);
    transition: transform var(--trans);
    border-inline-end: var(--border-w) solid var(--border);
    box-shadow: var(--shadow);
  }
  html[dir="rtl"] .sidebar{
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(110%);
  }

  body[data-mobile-nav="open"] .sidebar{
    transform: translateX(0);
  }
  .mobileOverlay{
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    display:none;
  }
  body[data-mobile-nav="open"] .mobileOverlay{ display:block; }

  /* In mobile, collapse state is ignored */
  body[data-sidebar="collapsed"] .shell{ grid-template-columns: 1fr; }
  body[data-sidebar="collapsed"] .brand .title{ display:block; }
  body[data-sidebar="collapsed"] .nav .lbl{ display:flex; }
}


.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.brand .logo{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-soft);
}
.brand .title{
  display:flex;
  flex-direction: column;
  gap:2px;
}
.brand .title b{ font-weight: 800; letter-spacing: .2px; }
.brand .title span{ font-size: 12px; color: var(--muted); }

.nav{
  display:flex; flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: transform var(--trans-fast), background var(--trans-fast), border-color var(--trans-fast);
}
.nav a:hover{
  background: var(--chip);
  border-color: var(--glass-border);
}
.nav a[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color: var(--glass-border);
}
.nav .ic{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: var(--chip);
  border: 1px solid var(--glass-border);
}
.nav .lbl{ display:flex; flex-direction: column; gap:2px; }
.nav .lbl span{ font-size: 12px; color: var(--muted); }

.main{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

.header{
  position: sticky;
  top:0;
  z-index: 20;
  padding: 14px 18px;
  border-bottom: var(--border-w) solid var(--border);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(var(--blur));
}
.headerRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
}
.hgroup{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.hgroup h1{
  margin:0;
  font-size: 18px;
  font-weight: 800;
}
.hgroup .crumb{
  font-size: 12px;
  color: var(--muted);
}

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

/* Mobile header: prevent title/actions overlap (AI page and others) */
@media (max-width: 520px){
  .headerRow{ flex-wrap: wrap; align-items: flex-start; }
  .hgroup{ min-width: 0; }
  .hgroup h1{ font-size: 16px; line-height: 1.15; }
  .actions{ width: 100%; justify-content: flex-end; flex-wrap: wrap; gap:8px; }
  .actions .btn{ padding: 8px 10px; border-radius: 12px; }
  .actions .btn.mini{ padding: 6px 9px; }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--chip);
  cursor:pointer;
  transition: transform var(--trans-fast), background var(--trans-fast), border-color var(--trans-fast);
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.btn.mini{ padding: 6px 10px; border-radius: 10px; font-size: 12px; }
.btn.primary{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, #0B0B0B), color-mix(in srgb, var(--accent) 22%, #0B0B0B));
  color: var(--text);
  border-color: rgba(255,255,255,.10);
}
.btn.ghost{ background: transparent; }

.content{
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.grid{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items:start; }

.card{
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  overflow: hidden;
}

.card.tradesCard{ overflow: visible; }
.cardHeader{
  padding: 14px 14px 10px 14px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: var(--border-w) solid rgba(255,255,255,.06);
}
.cardHeader h2{
  margin:0;
  font-size: 14px;
  font-weight: 800;
}
.cardHeader p{
  margin:4px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}
.cardBody{ padding: 14px; }

.kpi{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.kpi b{ font-size: 20px; }
.kpi span{ font-size: 12px; color: var(--muted); }

.tabs{
  display:flex;
  gap:8px;
  padding: 10px;
  border-bottom: var(--border-w) solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-wrap: wrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  color: var(--muted);
}
.tab[aria-selected="true"]{
  color: var(--text);
  background: var(--chip);
  border-color: var(--glass-border);
}

.input, select.input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
  outline: none;
}
body[data-theme="light"] .input, body[data-theme="light"] select.input{
  background: rgba(13,15,20,.03);
  border-color: rgba(13,15,20,.12);
}

.row{ display:flex; gap: 10px; }
.col{ display:flex; flex-direction: column; gap:8px; }
.label{ font-size: 12px; color: var(--muted); }

/* Toast */
.toastStack{
  position: fixed;
  inset-inline-end: 14px;
  inset-block-start: 14px;
  inset-block-end: auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 120;
}
.toast{
  min-width: 260px;
  max-width: 360px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}
body[data-theme="light"] .toast{
  background: rgba(255,255,255,.85);
}
.toast b{ display:block; font-size: 13px; margin-bottom: 4px; }
.toast p{ margin:0; font-size: 12px; color: var(--muted); }

/* Modal */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:grid;
  place-items: center;
  z-index: 70;
  padding: 18px;
}
.modal{
  width: min(720px, 100%);
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modalHead{
  padding: 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  border-bottom: var(--border-w) solid rgba(255,255,255,.06);
}
.modalHead b{ font-size: 14px; }
.modalBody{ padding: 14px; }
.modalFoot{
  padding: 14px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: var(--border-w) solid rgba(255,255,255,.06);
}

/* Tooltip */
.tooltip{
  position: fixed;
  z-index: 80;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--text);
  max-width: 260px;
}
body[data-theme="light"] .tooltip{
  background: rgba(255,255,255,.92);
  color: var(--text);
}

@media (max-width: 980px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{
    position: relative;
    height: auto;
    border-inline-end: none;
    border-bottom: var(--border-w) solid var(--border);
  }
}

/* Header controls visibility */
.mobileMenuBtn{ display:none; }
@media (max-width: 980px){
  .mobileMenuBtn{ display:inline-flex; }
  .collapseBtn{ display:none; } /* collapse button hidden on mobile; use drawer */
}


/* ===========================
   Mobile Layout Hard Fix (v9p3)
   =========================== */
@media (max-width: 980px){
  .shell{
    display: block;
    min-height: 100vh;
  }

  .sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    z-index: 50;
    transform: translateX(-110%);
    transition: transform var(--trans);
    border-inline-end: var(--border-w) solid var(--border);
    box-shadow: var(--shadow);
  }

  html[dir="rtl"] .sidebar{
    left: auto;
    right: 0;
    transform: translateX(110%);
  }

  body[data-mobile-nav="open"] .sidebar{
    transform: translateX(0);
  }

  .mobileOverlay{
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--trans-fast);
  }

  body[data-mobile-nav="open"] .mobileOverlay{
    opacity: 1;
    pointer-events: auto;
  }

  .main{
    min-height: 100vh;
  }

  .header{
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
}


/* ===========================
   Form System (v9p6)
   =========================== */
.formGrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.fcol-12{ grid-column: span 12; }
.fcol-6{ grid-column: span 12; }
.fcol-4{ grid-column: span 12; }
.fcol-3{ grid-column: span 12; }
@media (min-width: 900px){
  .fcol-6{ grid-column: span 6; }
  .fcol-4{ grid-column: span 4; }
  .fcol-3{ grid-column: span 3; }
}

textarea.input{
  min-height: 110px;
  resize: vertical;
}

.fieldHint{
  font-size: 12px;
  color: var(--muted);
}

.kv{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.kv .pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--chip);
  font-size: 12px;
}

@media (max-width: 980px){
  .modal{
    width: 100%;
    border-radius: 16px;
  }
  .modalHead{ padding: 12px; }
  .modalBody{ padding: 12px; }
  .modalFoot{ padding: 12px; }
}


/* ===========================
   Trade Entry System (v9p7)
   =========================== */

.seg{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
}
.seg .segBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  font-size: 12px;
}
.seg .segBtn.active{
  border-color: var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.btnGroup{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btnPill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  color: var(--text);
  font-size: 12px;
}
.btnPill.active{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

.previewPanel{
  position: sticky;
  top: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px;
}
.previewPanel h3{
  font-size: 13px;
  margin: 0 0 8px 0;
}
.previewGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.previewItem{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 10px;
}
.previewItem .k{
  font-size: 11px;
  color: var(--muted);
}
.previewItem .v{
  font-size: 13px;
  margin-top: 3px;
}

.rating{
  display:flex;
  gap:6px;
  align-items:center;
}
.rating button{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  color: var(--muted);
}
.rating button.active{
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.thumbWrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.thumbWrap .thumb{
  position:relative;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--glass-border);
}
.thumbWrap .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumbWrap .thumb .x{
  position:absolute;
  top:6px;
  right:6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor:pointer;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 980px){
  .previewPanel{
    position: static;
  }
  .previewGrid{ grid-template-columns: 1fr; }
}


/* ===========================
   Grid span utilities (v9p7e)
   Fixes messy layout for cards/modals
   =========================== */
[class^="span-"]{ grid-column: span 12; }
@media (min-width: 980px){
  .span-1{ grid-column: span 1; }
  .span-2{ grid-column: span 2; }
  .span-3{ grid-column: span 3; }
  .span-4{ grid-column: span 4; }
  .span-5{ grid-column: span 5; }
  .span-6{ grid-column: span 6; }
  .span-7{ grid-column: span 7; }
  .span-8{ grid-column: span 8; }
  .span-9{ grid-column: span 9; }
  .span-10{ grid-column: span 10; }
  .span-11{ grid-column: span 11; }
  .span-12{ grid-column: span 12; }
}


/* ===========================
   Modal sizing (v9p7f)
   Prevent hidden footer buttons
   =========================== */
.modal{
  max-height: 92vh;
  display:flex;
  flex-direction:column;
}
.modalHead{ flex: 0 0 auto; }
.modalBody{
  flex: 1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.modalFoot{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
}
body[data-theme="light"] .modalFoot{
  background: rgba(255,255,255,.75);
  border-top: 1px solid rgba(13,15,20,.12);
}
@media (max-width: 520px){
  .modal{
    max-height: 94vh;
  }
}


/* ===========================
   Tabs overflow fix (v9p7g)
   Ensures last tabs visible in Advanced mode
   =========================== */
.tabs{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.tabs::-webkit-scrollbar{ height: 0; }
.tab{
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ===========================
   Tabs desktop scroll + mobile modal fixes (v9p7h)
   =========================== */

/* Tabs: never wrap; allow scroll on desktop too */
.tabs{
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox (shows on desktop) */
}
.tabs::-webkit-scrollbar{ height: 8px; }
.tabs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
body[data-theme="light"] .tabs::-webkit-scrollbar-thumb{
  background: rgba(13,15,20,.18);
}

/* Make sure tabs container can scroll (some parents set overflow hidden) */
.tabsRoot{ overflow: visible; }
.tab{ flex: 0 0 auto; white-space: nowrap; }

/* Modal mobile stability */
@media (max-width: 520px){
  .modal{
    width: calc(100% - 20px);
    margin: 10px;
    border-radius: 16px;
  }
  .modalBody{
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* grids inside modal should become one column on phones */
  .modalBody .grid{ stroke: rgba(255,255,255,.08); stroke-width:1; }
  .modalBody .previewPanel{
    position: static !important;
  }
  .modalFoot{
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}


/* ===========================
   UI scrollbarless + modal width + journal mobile fix (v9p7i)
   =========================== */

/* Global: hide scrollbars but keep scrolling */
.scrollbarless, 
.modalBody,
.tabs,
.tableWrap,
body{
  scrollbar-width: none; /* Firefox */
}
.scrollbarless::-webkit-scrollbar,
.modalBody::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.tableWrap::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Tabs: desktop = wrap (no scroll). mobile = swipe scroll */
@media (min-width: 721px){
  .tabs{
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 720px){
  .tabs{
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .tab{ flex: 0 0 auto; white-space: nowrap; }
}

/* Modal: wider on desktop, scroll inside without visible scrollbars */
@media (min-width: 900px){
  .modal{ width: min(1040px, 92vw) !important; }
}
.modalBody{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Journal: mobile list layout */
@media (max-width: 720px){
  /* prevent horizontal table overflow */
  table.table{ min-width: 0 !important; }
}


/* ===========================
   Hide journal view toggle on mobile (v9p7j)
   =========================== */
@media (max-width: 720px){
  /* Hide List/Card toggle on phone (we auto-render mobile-friendly lists) */
  .seg[data-jv="seg"]{ display:none !important; }
}


/* ===========================
   Required field validation (v9p7k)
   =========================== */
.input.isInvalid{
  border-color: rgba(255, 77, 77, .85) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, .16) !important;
}
body[data-theme="light"] .input.isInvalid{
  box-shadow: 0 0 0 3px rgba(255, 77, 77, .12) !important;
}


/* ===========================
   Journal list + kebab menu (v9p7l)
   =========================== */
.tradeList{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.tradeRow{
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}
.tradeRowTop{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
}
.tradeMeta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}
.tradeChip{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 6px 10px;
  border-radius: 999px;
}
body[data-theme="light"] .tradeChip{
  border: 1px solid rgba(13,15,20,.10);
  background: rgba(13,15,20,.02);
}

.kebab{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.kebab:hover{ background: rgba(255,255,255,.06); }

.menu{
  position:absolute;
  top: 44px;
  right: 0;
  min-width: 160px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(20,20,20,.92);
  backdrop-filter: blur(12px);
  padding: 6px;
  z-index: 99999;
  display:none;
}
body[data-theme="light"] .menu{
  background: rgba(255,255,255,.92);
}
.menu.open{ display:block; }
.menu button{
  width:100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-size: 13px;
}
.menu button:hover{
  background: rgba(255,255,255,.06);
}
.menu .danger{ color: rgba(255,77,77,.95); }

.tradeActionsWrap{
  position: relative;
  flex: 0 0 auto;

  position: relative;
  z-index: 60;
}

@media (max-width: 720px){
  .tradeRow{ padding: 12px; }
  .tradeMeta{ gap: 8px; }
  .tradeChip{ font-size: 12px; padding: 6px 10px; }
}

/* keep dropdown visible */
.tradeRow{ overflow: visible; }


/* ===========================
   Dropdown theming (v9p7p)
   Fix select/option contrast across themes
   =========================== */

/* Base select */
select.input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* Dropdown list (options) - many browsers only apply partially */
select.input option,
select.input optgroup{
  background: var(--select-bg, #161616);
  color: var(--select-text, rgba(255,255,255,.92));
}

/* Dark-like themes */
body:not([data-theme="light"]){
  --select-bg: #161616;
  --select-text: rgba(255,255,255,.92);
}

/* Light theme */
body[data-theme="light"]{
  --select-bg: #ffffff;
  --select-text: #0d0f14;
}

/* Improve focus visibility */
select.input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,120,255,.14);
}
body[data-theme="light"] select.input:focus{
  box-shadow: 0 0 0 3px rgba(60,80,255,.12);
}


/* ===========================
   Mobile polish (v9p7q)
   Stabilize pages + modals on phone
   =========================== */
@media (max-width: 720px){
  .page{ padding: 12px !important; }
  .card{ border-radius: 18px; }
  .cardHead{ padding: 12px; }
  .cardBody{ padding: 12px; }
  .formGrid{ grid-template-columns: 1fr !important; gap: 10px !important; }
  .field{ margin: 0 !important; }
  .row{ flex-wrap: wrap; }
  .input{ font-size: 14px; }
  .btn{ width: auto; }
  .tradeRowTop{ align-items: flex-start; }
  .menu{ right: 0; left: auto; }
}

/* Modals: ensure header/footer visible and content scrolls nicely */
.modalOverlay{ padding: 10px; }
.modal{ width: min(1040px, 92vw); }
@media (max-width: 520px){
  .modal{ width: calc(100% - 20px) !important; margin: 10px !important; }
  .modalHead .row{ gap: 8px; }
  .tabs{ gap: 8px; }
}


/* ===========================
   Menu z-index fix (v9p7s)
   =========================== */
.tradeActionsWrap{ position: relative; z-index: 5; }
.menu{ z-index: 9999; }

/* disabled input visual */
.input.isDisabled{ opacity:.65; cursor:not-allowed; }

.input.invalid{ box-shadow: 0 0 0 2px rgba(255,80,80,.35); border-color: rgba(255,80,80,.6) !important; }

.btnPill.invalid{ box-shadow: 0 0 0 2px rgba(255,80,80,.35); border-color: rgba(255,80,80,.6) !important; }

.grid2{ display:grid; grid-template-columns: 320px 1fr; gap:14px; }
@media(max-width:820px){ .grid2{ grid-template-columns: 1fr; } }
.listRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background: var(--panel); margin-bottom:10px; }
.rowActions{ display:flex; gap:8px; }
.btnIcon{ border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px; padding:6px 8px; }
.card.mini{ padding:12px; margin-bottom:12px; }
.cardTitle.small{ font-size:13px; opacity:.85; margin:8px 0; }
.checkGrid{ display:grid; grid-template-columns: 1fr; gap:8px; }
.checkItem{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background: var(--panel2); }
.checkItem input{ margin-top:3px; }
.checkRow{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.rowEnd{ display:flex; justify-content:flex-end; margin-top:8px; }

/* Strategy Hub */
.strategyHub{ display:grid; grid-template-columns: 320px 1fr; gap:14px; }
@media(max-width: 900px){ .strategyHub{ grid-template-columns: 1fr; } }

.shLeft{ position:sticky; top:10px; height: calc(100vh - 24px); overflow:auto; }
@media(max-width:900px){ .shLeft{ position:relative; height:auto; } }

.searchRow{ margin:10px 0 12px; }
.shList{ display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.shItem{ text-align:start; border:1px solid var(--border); background: var(--panel2); color:var(--text); border-radius:14px; padding:10px 12px; }
.shItem.active{ box-shadow: 0 0 0 2px rgba(120,160,255,.18); border-color: rgba(120,160,255,.35); }
.shItemTitle{ font-weight:700; }
.shItemSub{ opacity:.7; font-size:12px; margin-top:2px; }

.shRight{ display:flex; flex-direction:column; gap:14px; }

.setupGrid{ display:grid; grid-template-columns: 280px 1fr; gap:12px; align-items:start; }
@media(max-width: 900px){ .setupGrid{ grid-template-columns: 1fr; } }
.setupList{ display:flex; flex-direction:column; gap:8px; }
.setupItem{ text-align:start; border:1px solid var(--border); background: var(--panel2); color:var(--text); border-radius:14px; padding:10px 12px; }
.setupItem.active{ box-shadow: 0 0 0 2px rgba(120,160,255,.18); border-color: rgba(120,160,255,.35); }
.setupTitle{ font-weight:700; }
.setupSub{ opacity:.7; font-size:12px; margin-top:2px; }

.rowBetween{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.imgPreviewWrap{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.imgPreview{ width:100%; max-height:320px; object-fit:cover; border-radius:16px; border:1px solid var(--border); background: var(--panel2); }
.empty.small{ font-size:12px; opacity:.7; }
.checkList{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }

/* Strategy Hub Pro */
.strategyHub{ display:grid; grid-template-columns: 340px 1fr; gap:16px; align-items:start; }
@media(max-width: 980px){ .strategyHub{ grid-template-columns: 1fr; } }

.shLeft{ position:sticky; top:12px; height: calc(100vh - 32px); overflow:auto; padding:14px; }
@media(max-width:980px){ .shLeft{ position:relative; height:auto; } }

.shLeft::-webkit-scrollbar{ width:0; height:0; }
.shLeft{ scrollbar-width:none; }

.searchRow{ margin:10px 0 12px; }
.shList{ display:flex; flex-direction:column; gap:10px; padding-bottom:12px; }

.shItem{ text-align:start; border:1px solid var(--border); background: linear-gradient(180deg, var(--panel2), var(--panel)); color:var(--text); border-radius:16px; padding:12px 14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.shItem:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.shItem.active{ box-shadow: 0 0 0 2px rgba(120,160,255,.20), 0 12px 34px rgba(0,0,0,.20); border-color: rgba(120,160,255,.40); }

.shItemTitle{ font-weight:800; letter-spacing:.2px; }
.shItemSub{ opacity:.72; font-size:12px; margin-top:4px; }

.shRight{ display:flex; flex-direction:column; gap:16px; }

.shHero{ padding:16px; }
.shHeroTitle{ font-size:16px; font-weight:900; }
.shHeroSub{ margin-top:6px; opacity:.75; font-size:12px; line-height:1.6; }

.setupGrid{ display:grid; grid-template-columns: 300px 1fr; gap:14px; align-items:start; }
@media(max-width: 980px){ .setupGrid{ grid-template-columns: 1fr; } }

.setupList{ display:flex; flex-direction:column; gap:10px; }
.setupItem{ text-align:start; border:1px solid var(--border); background: linear-gradient(180deg, var(--panel2), var(--panel)); color:var(--text); border-radius:16px; padding:12px 14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.setupItem:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.setupItem.active{ box-shadow: 0 0 0 2px rgba(120,160,255,.20), 0 12px 34px rgba(0,0,0,.20); border-color: rgba(120,160,255,.40); }

.setupTitle{ font-weight:800; }
.setupSub{ opacity:.72; font-size:12px; margin-top:4px; }

.setupCard{ padding:16px; }
.rowBetween{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.imgPreview{ width:100%; max-height:340px; object-fit:cover; border-radius:18px; border:1px solid var(--border); background: var(--panel2); }

.checkRow .input{ flex:1; }
.btnIcon{ border:1px solid var(--border); background: var(--panel2); color:var(--text); border-radius:12px; padding:8px 10px; }

/* tighter card heads */
.cardHead{ gap:12px; }

/* Strategy Hub — Screenshot layout */
.shWrap{ padding: 4px 0; }
.shTop{ display:flex; align-items:center; justify-content:flex-start; margin: 6px 0 12px; }
.shPills{ display:flex; gap:10px; align-items:center; }
.pill{ border:1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); border-radius: 999px; padding: 10px 14px; font-weight:800; }
.pill:disabled{ opacity:.5; }

.shGrid{ display:grid; grid-template-columns: 1.1fr 1.2fr .9fr; gap: 16px; align-items:start; }
@media(max-width: 1100px){ .shGrid{ grid-template-columns: 1fr; } }

.glassCard{
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    linear-gradient(180deg, var(--glass), transparent);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

/* Strategy glass polish */
.glassCard .sectionTitle{ font-size: 13px; }
.strategyRow, .setupRow{
  transition: transform var(--trans), border-color var(--trans), background var(--trans);
}
.strategyRow:hover, .setupRow:hover{ transform: translateY(-1px); background: rgba(255,255,255,.045); }

/* Trades — card view polish */
.tradeCard{
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(120% 120% at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
}
.tradeCard:hover{ box-shadow: var(--shadow); }

/* Trade Entry modal layout */
.tradeEntryLayout{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items:start;
}
.tradeEntryMain{ grid-column: span 8; }
.tradeEntryPreview{ grid-column: span 4; position: sticky; top: 12px; }
@media (max-width: 900px){
  .tradeEntryMain{ grid-column: span 12; }
  .tradeEntryPreview{ grid-column: span 12; position: static; }
}

.sectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.sectionTitle{ font-weight: 900; letter-spacing:.2px; }
.sectionSub{ opacity:.75; font-size: 12px; margin-top: 4px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

.bigTitle{ font-size: 18px; font-weight: 950; margin-top: 10px; line-height:1.3; }
.muted{ opacity:.72; margin-top: 6px; line-height:1.6; }

.fieldBlock{ margin-top: 12px; }
.textarea{
  width:100%;
  border:1px solid var(--border);
  background: rgba(0,0,0,.10);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 12px;
  outline:none;
}

.emptyCenter{ padding: 26px 10px; opacity:.7; text-align:center; }

.strategyList, .setupList{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.strategyRow, .setupRow{
  width:100%;
  text-align:start;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: var(--text);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.strategyRow:hover, .setupRow:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px rgba(0,0,0,.30); }
.strategyRow.active, .setupRow.active{ border-color: rgba(120,160,255,.45); box-shadow: 0 0 0 2px rgba(120,160,255,.18), 0 14px 44px rgba(0,0,0,.35); }

.rowLeft{ min-width: 0; }
.setupName{ font-weight: 900; }
.setupDesc{ opacity:.72; font-size: 12px; margin-top: 4px; line-height:1.4; }

.chips{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.chip{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); padding: 6px 10px; border-radius: 999px; font-size: 12px; opacity:.9; }

.shSetupEditor{ grid-column: 1 / span 2; }
@media(max-width:1100px){ .shSetupEditor{ grid-column: auto; } }

.twoCols{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
@media(max-width:900px){ .twoCols{ grid-template-columns: 1fr; } }

.sectionMini{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top: 6px; }
.miniTitle{ font-weight:900; }
.miniSub{ opacity:.7; font-size:12px; margin-top:4px; }

.imgBox{ margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }

/* mobile nice spacing */
@media(max-width: 600px){
  .glassCard{ padding: 14px; border-radius: 18px; }
  .shGrid{ gap: 12px; }
}

/* Strategy Hub columns LTR */
.shWrap{ direction:ltr; }
.shWrap *{ direction:inherit; }
.shGrid3{ display:grid; grid-template-columns: .9fr 1.1fr 1fr; gap: 16px; align-items:start; }
@media(max-width: 1100px){ .shGrid3{ grid-template-columns: 1fr; } }

.req{ font-size:11px; opacity:.8; padding:2px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; margin-inline-start:8px; }
.invalid{ box-shadow: 0 0 0 2px rgba(255,80,80,.35) !important; border-color: rgba(255,80,80,.55) !important; }

.miniStats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top: 12px; }
@media(max-width: 1100px){ .miniStats{ grid-template-columns: repeat(2, 1fr); } }
.statBox{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); border-radius:16px; padding:10px 12px; }
.statK{ font-size:12px; opacity:.75; }
.statV{ font-size:16px; font-weight:900; margin-top:4px; }

.checkRead{ margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.checkReadItem{ opacity:.9; font-size: 13px; line-height:1.4; padding: 6px 8px; border:1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(0,0,0,.08); }
.aboutBox{ margin-top: 10px; padding: 10px 12px; border:1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.08); line-height:1.6; opacity:.9; }
.rowEnd{ display:flex; justify-content:flex-end; margin-top:10px; }


.tableWrap{ overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th, .tbl td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; white-space:nowrap; }
.tbl thead th{ position:sticky; top:0; background: rgba(0,0,0,.25); backdrop-filter: blur(10px); }


.leakList{ display:flex; flex-direction:column; gap:10px; }
.leakRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background: rgba(0,0,0,.10); }
.leakName{ font-weight:700; }
.leakMeta{ opacity:.85; font-size:12px; }


.psyHeader{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; padding:14px 16px; border:1px solid var(--glass-border); border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); backdrop-filter: blur(var(--blur)); }
.psyTitle{ font-size:18px; font-weight:900; letter-spacing:.2px; }
.psySub{ opacity:.8; font-size:12px; }


.regList{ display:flex; flex-direction:column; gap:10px; padding-top:6px; }
.regRow{ display:flex; width:100%; text-align:left; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:16px; background: rgba(255,255,255,.03); color: inherit; backdrop-filter: blur(var(--blur)); }
.regRow:hover{ background: rgba(255,255,255,.05); }
.regRow.active{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }

.rowInline{ display:flex; gap:10px; align-items:center; }

.catList{ display:flex; flex-direction:column; gap:10px; }
.catRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:14px; background: rgba(255,255,255,.03); backdrop-filter: blur(var(--blur)); }
.catName{ font-weight:700; }


/* Psychology pick + chips */
.chipRow{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 10px; }
.selChip{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.10); }
.chipX{ border:none; background:transparent; color:inherit; opacity:.8; font-size:16px; line-height:1; cursor:pointer; }
.pickList{ display:flex; flex-direction:column; gap:10px; }
.pickRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); }
.pickRow.active{ border-color: rgba(255,255,255,.28); background: rgba(0,0,0,.18); }
.pickMark{ font-weight:800; }

/* Fix registry list contrast */
.regRow{ background: rgba(0,0,0,.10) !important; border:1px solid rgba(255,255,255,.10) !important; }
.regRow:hover{ background: rgba(0,0,0,.16) !important; }
.regRow.active{ border-color: rgba(255,255,255,.28) !important; background: rgba(0,0,0,.18) !important; }

/* Ensure analytics has bottom space */
#psyRoot{ padding-bottom: 120px; }

/* Better horizontal scroll for analytics tables (scrollbar hidden but swipe/trackpad works) */
.tableWrap{ max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.tbl{ min-width: 560px; }

/* (Psychology analytics UI moved to Reports) */

/* Reports KPIs */
.grid3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.grid2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 900px){ .grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid2{ grid-template-columns: 1fr; } }
.kpiLabel{ opacity:.75; font-size:12px; margin-bottom:6px; }
.kpiValue{ font-size:22px; font-weight:900; }
.kvGrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; padding-top:10px; }
.kv{ padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(0,0,0,.06); }
.kvK{ opacity:.75; font-size:12px; }
.kvV{ font-weight:800; font-size:16px; padding-top:3px; }

/* Reports equity chart */
.seg{ display:flex; gap:8px; align-items:center; }
.segBtn{ padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.10); color: var(--text); font-weight:800; cursor:pointer; }
.segBtn.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.equitySvg{ width:100%; height:260px; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.06); }
.equitySvg .g{ stroke: rgba(255,255,255,.08); stroke-width:1; }
.equitySvg .zero{ stroke: rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:6 6; }
.equitySvg .eqLine{ fill:none; stroke: rgba(125,211,252,.95); stroke-width:3; }
.equitySvg .dot{ fill: rgba(125,211,252,.95); }
.equitySvg .ddLine{ fill:none; stroke: rgba(252,165,165,.85); stroke-width:2; }
.equitySvg .ddFill{ fill: rgba(252,165,165,.10); stroke: none; }
.equitySvg .panelLbl{ fill: rgba(255,255,255,.72); font-size:12px; font-weight:900; }
.equitySvg .ddLbl{ fill: rgba(252,165,165,.95); }
[data-theme="light"] .equitySvg .panelLbl{ fill: rgba(0,0,0,.55); }
[data-theme="light"] .equitySvg .ddLbl{ fill: rgba(239,68,68,.85); }

/* Equity axes */
.equitySvg .axis{ stroke: rgba(255,255,255,.16); stroke-width:1; }
.equitySvg .tick{ stroke: rgba(255,255,255,.16); stroke-width:1; }
.equitySvg .lbl{ fill: rgba(255,255,255,.92); font-size: 15px; font-weight:900; }

/* Reports performance tables */
.miniTabs{ display:flex; gap:8px; padding-top:10px; }
.miniTab{ padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.10); color: var(--text); font-weight:900; cursor:pointer; }
.miniTab.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.tblWrap{ overflow:auto; scrollbar-width:none; }
.tblWrap::-webkit-scrollbar{ width:0; height:0; }
.score{ padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.08); font-weight:900; }

/* Reports layout polish */
.reportTabs{ display:flex; gap:10px; margin-top:12px; padding:10px; border-radius:16px;
  border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.06); overflow:auto; scrollbar-width:none; }
.reportTabs::-webkit-scrollbar{ width:0; height:0; }
.reportTab{ padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10); color: var(--text); font-weight:900; cursor:pointer; white-space:nowrap; }
.reportTab.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
.reportPanels{ margin-top:12px; display:block; }
.reportPanel > .grid3{ margin-top:0; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; }
.tbl thead th{ position:sticky; top:0; z-index:2; background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.9; }
.tbl th, .tbl td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.tbl tbody tr:nth-child(odd){ background: rgba(0,0,0,.06); }
.tbl tbody tr:hover{ background: rgba(255,255,255,.06); }
.tblWrap{ border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.04); }
@media (max-width: 520px){
  .tbl th, .tbl td{ padding:9px 10px; }
}

/* R Distribution histogram */
.histSvg{ width:100%; height:auto; aspect-ratio: 520 / 220; display:block; }
.histSvg .g{ stroke: rgba(255,255,255,.08); stroke-width:1; }
.histSvg .axis{ stroke: rgba(255,255,255,.16); stroke-width:1; }
.histSvg .barRect{ fill: rgba(167,243,208,.32); stroke: rgba(167,243,208,.55); stroke-width:1.2; }
.histSvg .barVal{ fill: rgba(255,255,255,.92); font-size:14px; font-weight:900; }
.histSvg .barLbl{ fill: rgba(255,255,255,.72); font-size:11px; font-weight:800; }
.histSvg .barPct{ fill: rgba(255,255,255,.75); font-size:11px; font-weight:800; }

/* Chart legend */
.chartLegend{
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.legendItem{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  opacity:.9;
}
.legendLine{
  width:28px;
  height:4px;
  border-radius:4px;
}
.legendEquity{
  background: linear-gradient(90deg, rgba(125,211,252,.95), rgba(96,165,250,.95));
}
.legendDD{
  background: linear-gradient(90deg, rgba(252,165,165,.95), rgba(244,63,94,.95));
}

/* Rolling legends */
.legendSwatch{ width:28px; height:4px; border-radius:4px; display:inline-block; }
.legendSwatch.cum{ background: rgba(255,255,255,.55); }
.legendSwatch.roll{ background: rgba(125,211,252,.95); box-shadow: 0 0 10px rgba(125,211,252,.20); }
[data-theme="light"] .legendSwatch.cum{ background: rgba(0,0,0,.45); }

/* Disable result pills when auto */
.resultGroup.isDisabled{ opacity:.65; pointer-events:none; }

/* Advanced reports */
.miniTitle{ font-weight:900; opacity:.9; margin:8px 0 10px; }
.tblWrap.wdScroll{ max-height: 260px; overflow:auto; -webkit-overflow-scrolling: touch; }
.heatWrap{ width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; }
.heatGrid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; }
.hmCell{ border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px; min-height:52px; }
.hmH{ font-weight:900; font-size:12px; opacity:.9; }
.hmV{ font-weight:900; font-size:14px; margin-top:4px; }
@media (max-width: 720px){
  .heatGrid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 520px){
  .tblWrap.wdScroll{ max-height: 220px; }
  .heatGrid{ gap:6px; }
  .hmCell{ padding:6px; min-height:40px; border-radius:12px; }
  .hmH{ font-size:10px; }
  .hmV{ font-size:11px; margin-top:3px; }
}

/* Monte Carlo mode segmented buttons */
.seg{ display:flex; gap:8px; align-items:center; }
.mcBtn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text, rgba(255,255,255,.92));
  padding:8px 12px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.mcBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.mcBtn.active{
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.55);
  color: var(--text, rgba(255,255,255,.95));
}
/* Light theme safety: if text var is dark, keep readable */
[data-theme="light"] .mcBtn{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  color: rgba(15,23,42,.92);
}
[data-theme="light"] .mcBtn.active{
  background: rgba(2,132,199,.14);
  border-color: rgba(2,132,199,.45);
  color: rgba(15,23,42,.95);
}

/* Reports Advanced layout tweaks */
.advGrid{ display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start; }
.advGrid > div{ min-width:0; }
@media (max-width: 960px){ .advGrid{ grid-template-columns: 1fr; } }

/* Advanced: weekday table scroll + mobile containment */
.wdTblBox .tblWrap{ max-height: 260px; overflow-y:auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 520px){
  .wdTblBox .tbl th, .wdTblBox .tbl td{ padding: 6px 8px; font-size: 12px; }
  .wdTblBox .tblWrap{ max-height: 220px; }
}

/* Make tables not cut */
.tblWrap{ overflow:auto; -ms-overflow-style:none; scrollbar-width:none; }
.tblWrap::-webkit-scrollbar{ width:0; height:0; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.tbl th, .tbl td{ padding:10px 12px; white-space:nowrap; }
.tbl thead th{ font-size:12px; opacity:.85; }
.tbl tbody tr{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.tbl tbody td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.tbl tbody td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* Compact heatmap */
.heatGrid{ grid-template-columns: repeat(6, 1fr); gap:8px; }
.hmCell{ padding:8px; min-height:44px; }
.hmH{ font-size:11px; }
.hmV{ font-size:12px; }
@media (max-width: 720px){
  .heatGrid{ grid-template-columns: repeat(4, 1fr); }
}

/* Mobile table containment */
@media (max-width: 720px){
  .tblWrap{ max-width: 100%; }
  .tbl{ min-width: 560px; } /* allow horizontal scroll within wrap */
  .tblWrap{ padding-bottom: 6px; }
}

/* Monte Carlo card */
.mcBody{ width:100%; }
.mcSeg{ flex-wrap:nowrap; }

.mcNote{ margin-top:10px; font-weight:800; opacity:.75; font-size:12px; }

/* Strong mobile containment for advanced time analysis tables */
@media (max-width: 720px){
  .glassCard{ overflow: hidden; }
  .tblWrap{ width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; }
  .tbl{ width: max-content; min-width: 520px; }
  .tbl th, .tbl td{ padding:10px 10px; }
}

@media (max-width: 720px){
  .tbl thead th{ font-size:11px; }
  .tbl tbody td{ font-size:12px; }
}

/* Compact tables (used in Psychology tab to prevent layout jumps) */
.tblWrap.compact{ max-height: 220px; overflow:auto; }
.kvGrid.compact{ max-height: 200px; overflow:auto; padding-right: 6px; }
.tbl.compact{ min-width: 520px; }
.tbl.compact th, .tbl.compact td{ padding:7px 8px; }
.tbl.compact thead th{ font-size:11px; }
.tbl.compact tbody td{ font-size:12px; }
.tbl.compact td:first-child{ white-space: normal; max-width: 260px; }

/* Psychology layout (Reports → Psychology) */
body{
  --psy0: var(--accent);
  --psy1: var(--info);
  --psy2: var(--warning);
  --psy3: var(--danger);
  --psy4: var(--success);
  --psy5: var(--accent-2);
  --psy6: var(--muted);
}

.psyStack{ display:flex; flex-direction:column; gap:12px; }
.psyBox{
  border: 1px solid var(--glass-border);
  /* Unified sub-card style across Reports (Psychology / Monte Carlo / Rolling) */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--glass) 92%, transparent),
    color-mix(in srgb, var(--glass) 42%, transparent)
  );
  border-radius: 18px;
  padding: 12px;
}
.psyRow{ display:grid; grid-template-columns: 1fr 190px; gap:12px; align-items:start; }

.psyRow > div:first-child{ min-width:0; }
.psyRow > div:first-child .tblWrap{ max-width:100%; }
.psySide{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.psyPie{ display:block; width:120px; height:120px; }
.psyLegend{ width:100%; max-width: 190px; }
.psyLegItem{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.psyDot{ width:10px; height:10px; border-radius:999px; flex:0 0 auto; box-shadow: 0 0 0 1px var(--glass-border); }
.psyLegText{ font-size:11px; line-height:1.2; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 760px){
  .psyRow{ grid-template-columns: 1fr; }
  .psySide{ align-items:flex-start; }
  .psyLegend{ max-width: none; }
  .psyLegText{ white-space:normal; }
}

@media (max-width: 720px){
  .tblWrap.compact{ max-height: 180px; }
  .kvGrid.compact{ max-height: 160px; }
  .tbl.compact td:first-child{ max-width: 220px; }
}

/* Monte Carlo Pro */
.mcCharts{ display:grid; grid-template-columns: 1.7fr 1fr; gap:14px; align-items:start; }
.mcLeft,.mcRight{ background: linear-gradient(180deg,
  color-mix(in srgb, var(--glass) 92%, transparent),
  color-mix(in srgb, var(--glass) 42%, transparent)
); border:1px solid var(--glass-border); border-radius:18px; padding:12px; }
.mcSvg{ width:100%; height:auto; aspect-ratio: 1100 / 320; display:block; }
.mcBand{ fill: rgba(125,211,252,.16); stroke: rgba(125,211,252,.45); stroke-width:2.4; }
.mcPath{ fill:none; stroke: rgba(255,255,255,.22); stroke-width:1.2; }
.mcMedian{ fill:none; stroke: rgba(125,211,252,.98); stroke-width:3.4; filter: drop-shadow(0 0 4px rgba(125,211,252,.45)); }
.grid{ stroke: rgba(255,255,255,.08); stroke-width:1; }
.mcLegend{ display:flex; gap:14px; align-items:center; margin-top:10px; font-weight:900; font-size:12px; opacity:.85; flex-wrap:wrap; }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.med{ background: rgba(125,211,252,.95); }
.dot.band{ background: rgba(125,211,252,.25); border:1px solid rgba(125,211,252,.55); }
.dot.path{ background: rgba(255,255,255,.22); }
.miniHint{ margin-top:8px; font-size:12px; opacity:.75; font-weight:800; }
@media (max-width: 960px){ .mcCharts{ grid-template-columns: 1fr; } .mcSvg{ height:280px; } }
[data-theme="light"] .mcPath{ stroke: rgba(0,0,0,.20); }
[data-theme="light"] .grid{ stroke: rgba(255,255,255,.08); stroke-width:1; }

/* Monte Carlo Median Glow */
.mcMedian{ fill:none; stroke: rgba(125,211,252,.98); stroke-width:3.4; filter: drop-shadow(0 0 4px rgba(125,211,252,.45)); }

/* Monte Carlo actions */
.mcActions{ display:flex; align-items:center; gap:10px; }
.btnGhost{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
}
.btnGhost:hover{ background: rgba(255,255,255,.08); }
[data-theme="light"] .btnGhost{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
}

.mcSelect{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: var(--text); padding:8px 10px; border-radius:12px; font-weight:900; }
[data-theme="light"] .mcSelect{ background: rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.10); }

/* Rolling metrics charts */
.rollSvg{ width:100%; height:auto; aspect-ratio: 520 / 240; display:block; }
.rollSvg .grid{ stroke: rgba(255,255,255,.08); }
.rollSvg .axisLbl{ fill: rgba(255,255,255,.70); font-size:12px; font-weight:800; }
[data-theme="light"] .rollSvg .grid{ stroke: rgba(0,0,0,.10); }
[data-theme="light"] .rollSvg .axisLbl{ fill: rgba(0,0,0,.60); }

.rollSvg .lineCum{ fill:none; stroke: rgba(255,255,255,.55); stroke-width:2; }
.rollSvg .lineRoll{ fill:none; stroke: rgba(125,211,252,.95); stroke-width:3; filter: drop-shadow(0 0 4px rgba(125,211,252,.35)); }
[data-theme="light"] .rollSvg .lineCum{ stroke: rgba(0,0,0,.45); }

.chartLegend{ display:flex; gap:10px; align-items:center; justify-content:flex-start; margin-top:8px; font-weight:900; font-size:12px; opacity:.9; }
.chartLegend .lgCum{ color: rgba(255,255,255,.70); }
.chartLegend .lgRoll{ color: rgba(125,211,252,.95); }
[data-theme="light"] .chartLegend .lgCum{ color: rgba(0,0,0,.55); }
.chartLegend .lgSep{ opacity:.55; }

@media (max-width: 960px){
  .mcCharts{ grid-template-columns: 1fr !important; }
}

/* Rolling legend */
.chartLegend{ justify-content:center; }
.lgCumLine{ background: var(--accent); }
.lgRollLine{ background: var(--accent-2,#4ade80); }

/* AI & Coaching */
.aiRow{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:12px; }
.aiCard{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:14px; }
[data-theme="light"] .aiCard{ background: rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.10); }
.aiGauge{ width:100%; height:140px; }
.aiGauge .gBase{ fill:none; stroke: rgba(255,255,255,.12); stroke-width:10; stroke-linecap:round; }
[data-theme="light"] .aiGauge .gBase{ stroke: rgba(0,0,0,.10); }
.aiGauge .gFill{ fill:none; stroke: var(--accent); stroke-width:10; stroke-linecap:round; }
.aiGauge .gDot{ fill: var(--accent); }
.aiGauge .gText{ fill: var(--text); font-weight:900; font-size:26px; }
.aiList{ margin:0; padding:0 0 0 18px; }
.aiList li{ margin:6px 0; color: var(--muted); }
.coachList{ display:grid; gap:10px; }
.coachItem{ border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px 12px; background: rgba(255,255,255,.03); }
[data-theme="light"] .coachItem{ background: rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.10); }
.coachItem[data-level="high"]{ border-color: rgba(255,77,77,.35); }
.coachItem[data-level="med"]{ border-color: rgba(255,196,77,.30); }
.coachLvl{ color: var(--muted); font-size:12px; }
.coachTxt{ font-weight:800; margin-top:6px; }
@media (max-width: 860px){
  .aiRow{ grid-template-columns: 1fr; }
}

/* AI window controls */
.aiWinCtl{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.aiWinCtl .segBtns{ display:flex; gap:8px; }
.aiWinCtl .segBtn{ padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font-weight:800; }
.aiWinCtl .segBtn:hover{ filter:brightness(1.08); }
.aiWinCtl[data-aiwin-current="auto"] .segBtn[data-aiwin-mode="auto"],
.aiWinCtl[data-aiwin-current="trades"] .segBtn[data-aiwin-mode="trades"],
.aiWinCtl[data-aiwin-current="days"] .segBtn[data-aiwin-mode="days"]{ border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
[data-theme="light"] .aiWinCtl .segBtn{ border:1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.03); }
[data-theme="light"] .aiWinCtl[data-aiwin-current="auto"] .segBtn[data-aiwin-mode="auto"],
[data-theme="light"] .aiWinCtl[data-aiwin-current="trades"] .segBtn[data-aiwin-mode="trades"],
[data-theme="light"] .aiWinCtl[data-aiwin-current="days"] .segBtn[data-aiwin-mode="days"]{ border-color: rgba(0,0,0,.20); background: rgba(0,0,0,.06); }

.aiWinInputs{ display:flex; flex-direction:column; gap:8px; width: 360px; max-width: 100%; }
.aiWinRow{ display:flex; gap:10px; align-items:center; }
.aiWinRow .range{ width:100%; }
.aiWinHint{ color: var(--muted); font-size:12px; margin-top:2px; }

.aiWinBlock{ display:none; }
.aiWinCtl[data-aiwin-current="trades"] .aiWinBlock[data-aiwin-block="trades"]{ display:block; }
.aiWinCtl[data-aiwin-current="days"] .aiWinBlock[data-aiwin-block="days"]{ display:block; }

@media (max-width: 860px){
  .aiWinCtl{ align-items:stretch; }
  .aiWinInputs{ width:100%; }
}


/* AI window bar */
.aiWinBar{ margin: 10px 0 12px; padding: 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
[data-theme="light"] .aiWinBar{ border:1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.aiWinCtl{ align-items:stretch; }
.aiWinCtl .segBtns{ justify-content:flex-start; flex-wrap:wrap; }
.aiWinInputs{ width:100%; max-width:100%; }
.aiWinRow{ width:100%; }
.aiWinRow .range{ flex:1; }

/* SVG grid lines */
svg .grid, svg line.grid, svg g.grid{ stroke: rgba(255,255,255,.08); stroke-width:1; }
[data-theme="light"] svg .grid, [data-theme="light"] svg line.grid, [data-theme="light"] svg g.grid{ stroke: rgba(0,0,0,.10); }


.miniStatLine{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.coachMeta{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}



/* Dark theme glass tuning (keep Dark truly dark) */
body[data-theme="dark"] .glassCard{
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
}
body[data-theme="dark"] .tradeCard{
  background:
    radial-gradient(140% 140% at 10% 0%, rgba(255,255,255,.05), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.014));
}
body[data-theme="dark"] .btn.primary{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.16);
}
body[data-theme="dark"] .btn.primary:hover{
  border-color: rgba(255,255,255,.22);
}

.card.tradeCard{ overflow: visible; position: relative; }


/* Reports - Global Filter Bar */
.reportFilters .rfGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px;
  align-items:end;
}
.reportFilters .rfField{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  opacity:0.95;
}
.reportFilters .rfField input,
.reportFilters .rfField select{
  width:100%;
}
.reportFilters .rfActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  grid-column: 1 / -1;
  padding-top:6px;
}
@media (max-width: 980px){
  .reportFilters .rfGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .reportFilters .rfActions{ justify-content:stretch; }
  .reportFilters .rfActions .btn{ flex:1; }
}

.reportFilters .rfTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 6px 10px;
}
.reportFilters .rfTitle{
  font-size:12px;
  opacity:0.9;
  letter-spacing:0.2px;
}
.reportFilters .rfBody{
  padding: 0 10px 10px 10px;
}
.reportFilters .rfBody.collapsed{
  display:none;
}

.filterChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding: 0 10px 10px 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size:12px;
  line-height:1;
}
.chip b{ font-weight:800; }

/* Make filter inputs blend with themes (avoid white boxes) */
.reportFilters .rfField input,
.reportFilters .rfField select{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 10px;
  outline: none;
}
.reportFilters .rfField input::placeholder{
  opacity: 0.6;
}
.reportFilters .rfField input:focus,
.reportFilters .rfField select:focus{
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}



/* AI layout helpers */
.aiFilterWrap{ margin-bottom: 14px; }
.aiTabsCard{ margin-top: 14px; }
.aiCardStack{ display:grid; gap:10px; margin-top:10px; }
.aiPatternGrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:10px; margin-top:10px; }
.aiPatternCard.span6{ grid-column: span 6; }
.aiPatternCard.span12{ grid-column: span 12; }
@media (max-width: 720px){
  .aiPatternCard.span6{ grid-column: span 12; }
}
/* AI pattern list formatting + bidi safety */
.aiPatternList{ display:grid; gap:10px; margin-top:8px; }
.aiPatternItem{ border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px 12px; background: rgba(255,255,255,.03); }
[data-theme="light"] .aiPatternItem{ background: rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.10); }
.aiPatternItem[data-level="high"]{ border-color: rgba(255,77,77,.35); }
.aiPatternItem[data-level="med"]{ border-color: rgba(255,196,77,.25); }
.aiPatternItem[data-level="low"]{ border-color: rgba(77,255,196,.20); }

.aiPatternHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.aiPatternTitle{ font-weight:900; letter-spacing:.2px; }
.aiMeta{ font-size:12px; opacity:.85; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.12); unicode-bidi:isolate; direction:ltr; white-space:nowrap; }
[data-theme="light"] .aiMeta{ background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.10); }

.aiPatternBody, .aiPatternRec{ margin-top:8px; line-height:1.8; font-size:14px; color: var(--muted); unicode-bidi: plaintext; }
.aiPatternRec{ color: var(--text); opacity:.92; }
html[dir="rtl"] .aiPatternItem{ text-align:right; }
html[dir="rtl"] .aiPatternHead{ flex-direction:row-reverse; }
html[dir="rtl"] .aiMeta{ margin-left:0; margin-right:auto; }
.subTitle{ margin-top:12px; font-weight:900; opacity:.92; }

@media (max-width: 720px){
  #journalRoot{ overflow-x:hidden; height:auto; }
  .jTop{ gap: 10px; }
  .jTimelineBox{ margin-top: 8px; border-radius: 16px; }
  .jTimelineHead{ padding: 10px; }
  .jCarousel{ padding: 10px; }
  .jTrack{ gap: 10px; padding-bottom: 8px; }
  .jCard{ padding: 10px; border-radius: 16px; }
  .jPreview{ gap: 8px; }
  .jThumbs{ display:none; } /* keep cards compact on phone */
  .modal .modalBody{ max-height: 72vh; overflow:auto; }
  .jModalNav .btn{ padding-inline: 8px; }
}


/* Journal desktop fit (avoid page scroll) */
@media (min-width: 981px){
  #journalRoot{ height: calc(100vh - 140px); }
  .jCard{ padding: 10px; }
  .jStat{ padding: 7px 9px; }
  .jPreview{ gap: 8px; }
  .jBottom{ margin-top: 8px; }
  .jThumbs img, .jNoThumb{ width: 28px; height: 28px; border-radius: 9px; }
}



/* Trades — HARD FIX: ensure all tabs (including Notes) are reachable */
.tradeEntryMain .tabs{
  display:flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tradeEntryMain .tabs::-webkit-scrollbar{ display:none; }
.tradeEntryMain .tab{ flex: 0 0 auto !important; white-space: nowrap; }
/* prevent parent from clipping tab bar */
.tradeEntryMain .cardBody{ overflow: visible !important; }




/* Journal — Metrics card */
.jMetricsGrid .mini b.riskCmp.low{ color: rgba(255,170,0,.95); }
.jMetricsGrid .mini b.riskCmp.ok{ color: rgba(0,200,150,.95); }
.jMetricsGrid .mini b.riskCmp.high{ color: rgba(255,90,90,.95); }