/* ui/assets/responsive.css
   Clean responsive rules for current WOI Scanner layout
   Consolidated mobile/tablet behavior
*/

/* -------------------------
   Base visibility helpers
------------------------- */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* -------------------------
   Tablet + mobile
------------------------- */
@media (max-width: 1032px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; }

  .woi-shell{
    padding: 10px 10px 64px 10px !important;
  }

  /* Controls */
  .control{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .control > div:last-child{
    width: 100% !important;
  }

  .control > div:last-child > div{
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .control input,
  #sym-search,
  #wl-note{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .control button,
  .btn,
  button,
  input,
  select{
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .btn,
  button{
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }

  .top-actions .btn,
  .top-actions .btn-help,
  .watchlist-bar .btn,
  .watchlist-bar button,
  #btn-refresh,
  #btn-help-open,
  #btn-search,
  #financials-go-btn{
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  /* Market overview */
  .mkt-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .mkt-card{
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .mkt-card-top{
    gap: 6px !important;
  }

  .mkt-hdr,
  .mkt-badge,
  .mkt-stat-k,
  .mkt-stat-v,
  .mkt-meta{
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .mkt-stats{
    gap: 6px !important;
  }

  .mkt-fig{
    height: 84px !important;
  }

  /* Main chart + side panel */
  .scanner-chart-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .scanner-side-col{
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .chartwrap{
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #side-screener-shell{
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  #side-screener-title{
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  #side-screener-select{
    margin-bottom: 6px !important;
  }

  #side-screener-list{
    min-height: 0 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
  }

  #side-screener-list button{
    padding: 6px 8px !important;
    border-radius: 8px !important;
    margin-bottom: 5px !important;
  }

  #side-screener-page-meta{
    font-size: 11px !important;
  }

  #side-screener-prev,
  #side-screener-next{
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Chart & overlays */
  .overlaybox{
    margin-bottom: 6px !important;
    padding: 8px 8px !important;
  }

  .overlays-checklist{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    max-width: 100% !important;
  }

  .overlays-checklist label{
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-right: 4px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .overlays-checklist input[type="checkbox"]{
    margin-right: 3px !important;
    transform: scale(0.95) !important;
  }

  .fibo-row{
    margin-left: 0 !important;
    margin-top: 3px !important;
    gap: 3px !important;
  }

  .fibo-row button,
  #btn-fibo-a,
  #btn-fibo-b,
  #btn-fibo-clear{
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 5px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
  }

  #fibo-status{
    font-size: 10px !important;
  }

  #chart{
    height: 420px !important;
  }

  #chart .modebar{
    transform: scale(0.88);
    transform-origin: top right;
  }

  #chart .legend text,
  #chart .legendttext,
  #chart g.legend text{
    font-size: 9px !important;
  }

  #chart g.legend rect,
  #chart g.legend path,
  #chart g.legend circle{
    transform-box: fill-box;
  }

  /* Content blocks */
  #analysis-wrap,
  #narrative-wrap,
  #details-howto,
  #explore-analysis-wrap,
  .watchlist-bar,
  .tablewrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .watchlist-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .watchlist-bar > *{
    min-width: 0 !important;
  }

  .dash-table-container{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* keep chart first on analysis pages */
  body[data-page*="analysis"] .scanner-side-col{
    order: 2 !important;
  }

  body[data-page*="analysis"] .chartwrap{
    order: 1 !important;
  }
}

/* -------------------------
   Small phones
------------------------- */
@media (max-width: 680px) {
  .woi-shell{
    padding: 8px 8px 56px 8px !important;
  }

  .mkt-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .mkt-card{
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .mkt-hdr,
  .mkt-badge,
  .mkt-stat-k,
  .mkt-stat-v,
  .mkt-meta{
    font-size: 9px !important;
  }

  .mkt-fig{
    height: 72px !important;
  }

  #side-screener-shell{
    padding: 8px !important;
  }

  #side-screener-list{
    max-height: 150px !important;
  }

  #chart{
    height: 460px !important;
  }

  .fibo-row button,
  #btn-fibo-a,
  #btn-fibo-b,
  #btn-fibo-clear{
    min-height: 18px !important;
    height: 18px !important;
    padding: 1px 4px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
  }

  #chart .legend text,
  #chart .legendttext,
  #chart g.legend text{
    font-size: 8px !important;
  }
}


/* =========================================
   MOBILE SCREENER SLOT
   ========================================= */
@media (max-width: 808px) {
  #mobile-screener-slot {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #mobile-screener-slot #side-screener-shell {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* === Side panel context tag === */
.side-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.15);
    color: #9aa4b2;
}

.side-tag.green {
    background: rgba(22, 199, 132, 0.15);
    color: #16c784;
}

.side-tag.orange {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.side-tag.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.side-tag.purple {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}


/* =========================================================
   Mobile compact setup box overlay
   Keeps chart overlay behavior, but reduces obstruction
   ========================================================= */
@media (max-width: 808px) {
  #setup-box-dummy {
    max-width: 268px !important;
    padding: 7px 9px !important;
    background: rgba(7, 13, 20, 0.48) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    top: 72px !important;
    left: 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14) !important;
  }

  #setup-box-dummy > div:nth-child(1) {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  #setup-box-dummy > div:nth-child(2) {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  #setup-box-dummy > div:nth-child(3),
  #setup-box-dummy > div:nth-child(4),
  #setup-box-dummy > div:nth-child(5),
  #setup-box-dummy > div:nth-child(6) {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
}

/* === MOBILE: show side screener only on scanner/chart tab === */


/* Mobile button cleanup */
@media (max-width: 1032px) {
  .btn,
  .btn-help,
  button {
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .watchlist-bar {
    align-items: center !important;
    gap: 8px !important;
  }

  .watchlist-bar .btn,
  .watchlist-bar button,
  #btn-refresh,
  #btn-help-open,
  #btn-search,
  #financials-go-btn {
    flex: 0 0 auto !important;
  }
}


/* Mobile main view tabs cleanup */
@media (max-width: 1032px) {
  #main-view-tabs{
    gap: 8px !important;
  }

  #main-view-tabs .btn,
  #btn-view-market,
  #btn-view-scanner,
  #btn-view-guides{
    min-height: 56px !important;
    height: 56px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }
}

@media (max-width: 1032px) {
  #tbl-mobile {
    display: none !important;
  }

  #side-recent-shell {
    display: none !important;
  }
}


/* Financial page mobile cleanup */
@media (max-width: 768px) {
  .financial-grid-2col {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .financial-grid-2col .js-plotly-plot,
  .financial-grid-2col .plot-container,
  .financial-grid-2col .svg-container {
    width: 100% !important;
  }
}


/* === Scanner controls mobile === */
@media (max-width: 768px) {
  #scanner-controls-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 8px 0 10px;
  }

  #scanner-controls-shell .scanner-controls-group {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Compact mobile symbol search */
  #scanner-controls-shell .scanner-controls-symbol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas: "input button";
    align-items: center;
    gap: 8px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 50px;

    box-sizing: border-box;
    overflow: hidden;
    padding: 6px;

    border: 1px solid rgba(99, 102, 241, 0.90);
    border-left: 3px solid #22d3ee;
    border-radius: 12px;

    background:
      radial-gradient(
        circle at 90% 50%,
        rgba(124, 58, 237, 0.16),
        transparent 42%
      ),
      rgba(15, 23, 42, 0.55);

    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.13);
  }

  #scanner-controls-shell .scanner-symbol-heading {
    display: none;
  }

  #scanner-controls-shell .scanner-symbol-input-wrap {
    grid-area: input;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #scanner-controls-shell .scanner-controls-symbol #sym-search {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 38px !important;

    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }

  #scanner-controls-shell .scanner-controls-symbol .scanner-search-btn {
    grid-area: button;
    justify-self: end;

    width: 52px !important;
    min-width: 52px;
    height: 38px;

    padding: 0;
    margin: 0 !important;
  }

  /* Watchlist buttons */
  #scanner-controls-shell .scanner-controls-watchlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  #scanner-controls-shell .scanner-controls-watchlist .btn,
  #scanner-controls-shell .scanner-controls-watchlist button {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  /* Note input and Save Note */
  #scanner-controls-shell .scanner-controls-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  #scanner-controls-shell .scanner-controls-note .lbl {
    display: none;
  }

  #scanner-controls-shell .scanner-controls-note #wl-note {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: 40px !important;
  }

  #scanner-controls-shell .scanner-controls-note .btn {
    width: auto !important;
    min-width: 70px;
    height: 40px;

    padding-left: 12px;
    padding-right: 12px;
    margin: 0 !important;
  }

  #scanner-controls-shell .scanner-controls-status {
    display: none !important;
  }

  #scanner-controls-shell .btn {
    border-radius: 11px;
  }
}


/* Narrative / Pattern card mobile fix */
@media (max-width: 768px){
  #narrative-panel,
  #narrative-panel *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Pattern setup main flex card */
  #narrative-panel div[style*="display: flex"][style*="gap: 18px"]{
    flex-direction:column !important;
    gap:12px !important;
  }

  /* Fixed/min-width columns inside pattern card */
  #narrative-panel div[style*="minWidth"],
  #narrative-panel div[style*="min-width"]{
    min-width:0 !important;
    width:100% !important;
  }

  #narrative-panel img{
    width:100% !important;
    height:auto !important;
    max-height:120px !important;
    object-fit:cover !important;
  }

  /* Metric grids: 2 columns -> 1 column on mobile */
  #narrative-panel div[style*="gridTemplateColumns"],
  #narrative-panel div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  #narrative-panel h2,
  #narrative-panel h3{
    line-height:1.25 !important;
  }
}

/* Narrative mobile compact pass */
@media (max-width: 768px){
  html, body{
    overflow-x:hidden !important;
  }

  #narrative-panel{
    overflow-x:hidden !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  #narrative-panel div[style*="borderRadius: 16px"],
  #narrative-panel div[style*="border-radius: 16px"]{
    padding:12px !important;
    gap:10px !important;
  }

  /* Pattern image: compact */
  #narrative-panel img[src^="data:image/svg+xml"]{
    height:78px !important;
    max-height:78px !important;
    object-fit:cover !important;
  }

  /* Pattern card fixed left column */
  #narrative-panel div[style*="width: 210px"],
  #narrative-panel div[style*="minWidth: 210px"]{
    width:100% !important;
    min-width:0 !important;
  }

  /* Metric cards inside narrative: compact */
  #narrative-panel div[style*="padding: 11px 12px"]{
    padding:9px 10px !important;
    border-radius:10px !important;
  }

  /* Keep metrics/key cards as 2 columns on mobile when possible */
  #narrative-panel div[style*="repeat(2, minmax(135px, 1fr))"],
  #narrative-panel div[style*="repeat(2, minmax(120px, 1fr))"]{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* What this means compact */
  #narrative-panel div[style*="rgba(88,28,135"]{
    padding:10px !important;
    margin-top:8px !important;
  }

  /* Quick read rows compact */
  #narrative-panel div[style*="marginBottom: 8px"]{
    margin-bottom:6px !important;
  }

  /* Key levels: 2 columns on mobile */
  #narrative-panel div[style*="repeat(auto-fit, minmax(210px, 1fr))"]{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* Key level cards smaller */
  #narrative-panel div[style*="padding: 12px 14px"]{
    padding:10px !important;
  }

  #narrative-panel div[style*="width: 34px"]{
    width:30px !important;
    height:30px !important;
    margin-right:8px !important;
  }
}

@media (max-width: 430px){
  /* very small phones: key levels still readable */
  #narrative-panel div[style*="repeat(auto-fit, minmax(210px, 1fr))"]{
    grid-template-columns:1fr 1fr !important;
  }

  #narrative-panel div[style*="fontSize: 16px"],
  #narrative-panel div[style*="font-size: 16px"]{
    font-size:14px !important;
  }
}

/* Pattern image – tighter mobile sizing */
@media (max-width: 768px){

  /* SVG pattern image küçült */
  #narrative-panel img[src^="data:image/svg+xml"]{
    height:64px !important;
    max-height:64px !important;
    width:100% !important;
    object-fit:cover !important;
    border-radius:10px !important;
  }

  /* image container da küçülsün */
  #narrative-panel div[style*="height: 104px"],
  #narrative-panel div[style*="height:104px"]{
    height:68px !important;
  }
}

@media (max-width: 430px){
  #narrative-panel img[src^="data:image/svg+xml"]{
    height:58px !important;
    max-height:58px !important;
  }
}


/* Pattern SVG actual scale-down on mobile */
@media (max-width: 768px){
  #narrative-panel img[src^="data:image/svg+xml"]{
    width:68% !important;
    max-width:260px !important;
    height:58px !important;
    max-height:58px !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    margin:0 auto 8px auto !important;
    border-radius:10px !important;
  }
}

@media (max-width: 430px){
  #narrative-panel img[src^="data:image/svg+xml"]{
    width:62% !important;
    max-width:220px !important;
    height:52px !important;
    max-height:52px !important;
  }
}




/* ===== Triangle narrative mobile FINAL CLEAN ===== */
@media (max-width: 768px){
  .triangle-narrative-card{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    padding:12px !important;
  }

  .triangle-narrative-card .triangle-visual{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }

  .triangle-narrative-card .triangle-visual img{
    width:112px !important;
    height:60px !important;
    object-fit:cover !important;
  }

  .triangle-narrative-card .triangle-story{
    width:100% !important;
    min-width:0 !important;
  }

  .triangle-narrative-card .triangle-metrics{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .triangle-narrative-card .triangle-metrics > div{
    width:auto !important;
    min-width:0 !important;
    padding:10px 11px !important;
  }
}

/* Mobile: scanner controls should stack cleanly without large empty gaps */
@media (max-width: 720px){
  #scanner-controls-shell{
    gap:10px !important;
  }

  #scanner-controls-shell .scanner-controls-symbol,
  #scanner-controls-shell .scanner-controls-note,
  #scanner-controls-shell .scanner-controls-watchlist{
    width:100% !important;
    flex:0 0 100% !important;
  }

  #scanner-controls-shell .scanner-controls-symbol > div[style*="position: relative"]{
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
  }

  #scanner-controls-shell #sym-search,
  #scanner-controls-shell #wl-note{
    width:100% !important;
    max-width:none !important;
    flex:0 0 auto !important;
  }

  #scanner-controls-shell #btn-search,
  #scanner-controls-shell #btn-wl-save-note{
    width:100% !important;
  }
}

/* PWA/mobile financial cards: reduce text overflow on small screens */
@media (max-width: 768px) {
  #financials-shell h1,
  #financials-shell .page-title {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.08 !important;
  }

  #financials-shell .financial-grid-2col {
    gap: 12px !important;
  }

  #financials-shell .financial-grid-2col > div {
    padding: 18px 16px !important;
  }

  #financials-shell .financial-grid-2col h2,
  #financials-shell .financial-grid-2col h3 {
    font-size: clamp(22px, 5.6vw, 30px) !important;
    line-height: 1.12 !important;
  }

  #financials-shell .financial-grid-2col div {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  #financials-shell .financial-grid-2col {
    gap: 10px !important;
  }

  #financials-shell .financial-grid-2col > div {
    padding: 16px 14px !important;
  }

  #financials-shell .financial-grid-2col h2,
  #financials-shell .financial-grid-2col h3 {
    font-size: clamp(20px, 5.2vw, 26px) !important;
  }
}

/* ===== Financials mobile repair ===== */
@media (max-width: 768px){

  .fin-premium-title{
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .fin-premium-sub{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .fin-premium-overview > div{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .fin-profile-card{
    padding: 12px !important;
    border-radius: 18px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .fin-profile-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .fin-profile-metric{
    min-width: 0 !important;
    padding: 8px 7px !important;
    overflow: hidden !important;
  }

  .fin-profile-metric > div:first-child{
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .fin-profile-metric > div:last-child{
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .fin-premium-chart-shell{
    padding: 10px !important;
    border-radius: 18px !important;
  }
}


/* =========================================================
   Mobile Find Stock autocomplete
   Keep suggestion popup outside the search control box.
   ========================================================= */
@media (max-width: 1032px) {

  #scanner-controls-shell .scanner-controls-symbol {
    overflow: visible !important;
    position: relative !important;
    z-index: 50 !important;
  }

  #scanner-controls-shell .scanner-symbol-input-wrap {
    overflow: visible !important;
    position: relative !important;
    z-index: 51 !important;
  }

  #scanner-controls-shell #sym-suggest-box {
    z-index: 10050 !important;
  }

  #scanner-controls-shell #sym-suggest-box > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   WOI MOBILE CHART WORKSPACE — COMPACT PASS
   Desktop untouched.
   Goal:
   Search
   Actions
   Market Opportunities
   Overlay / Chart Type / Indicators
   Draw
   Chart
   ============================================================ */

@media (max-width: 720px) {

  /* ----------------------------------------------------------
     1. GENERAL VERTICAL RHYTHM
     ---------------------------------------------------------- */

  #scanner-controls-shell {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .scanner-chart-col {
    gap: 6px !important;
  }


  /* ----------------------------------------------------------
     2. SEARCH — keep it visually dominant, but compact
     ---------------------------------------------------------- */

  #scanner-controls-shell .scanner-controls-symbol {
    min-height: 46px !important;
    padding: 4px !important;
    gap: 6px !important;
  }

  #scanner-controls-shell .scanner-controls-symbol #sym-search {
    height: 36px !important;
    min-height: 36px !important;
  }

  #scanner-controls-shell .scanner-controls-symbol .scanner-search-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 36px !important;
    min-height: 36px !important;
  }


  /* ----------------------------------------------------------
     3. WATCHLIST / ALERT
     Three controls stay on ONE ROW.
     ---------------------------------------------------------- */

  #scanner-controls-shell .scanner-controls-watchlist {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(0, 1.15fr)
      minmax(0, 1fr) !important;

    width: 100% !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  #scanner-controls-shell .scanner-controls-watchlist .btn,
  #scanner-controls-shell .scanner-controls-watchlist button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;

    padding: 4px 5px !important;
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* ----------------------------------------------------------
     4. NOTE — make existing note row much smaller.
     We keep functionality exactly as-is.
     ---------------------------------------------------------- */

  #scanner-controls-shell .scanner-controls-note {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;

    width: 100% !important;
    gap: 5px !important;
    align-items: center !important;
  }

  #scanner-controls-shell .scanner-controls-note .lbl {
    display: none !important;
  }

  #scanner-controls-shell #wl-note {
    width: 100% !important;
    max-width: none !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 4px 9px !important;
    font-size: 11px !important;
  }

  #scanner-controls-shell #btn-wl-save-note {
    width: 72px !important;
    min-width: 72px !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 3px 6px !important;
    font-size: 11px !important;
  }


  /* ----------------------------------------------------------
     5. PRICE ALERT PANEL — compact when opened
     ---------------------------------------------------------- */

  #scanner-price-alert-panel {
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  #scanner-price-alert-panel .btn,
  #scanner-price-alert-panel button,
  #scanner-price-alert-panel input {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }


  /* ----------------------------------------------------------
     6. MARKET OPPORTUNITIES
     Keep current location above chart.
     Turn it into a compact discovery strip.
     ---------------------------------------------------------- */

  #side-screener-shell {
    min-height: 0 !important;

    padding: 7px !important;
    margin: 0 !important;

    border-radius: 10px !important;
  }

  #side-screener-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px 0 !important;
  }

  #side-screener-select {
    margin-bottom: 4px !important;
  }

  #side-screener-select .Select-control {
    min-height: 32px !important;
    height: 32px !important;
  }

  #side-screener-select .Select-value,
  #side-screener-select .Select-placeholder {
    line-height: 30px !important;
    font-size: 11px !important;
  }

  /*
     Explanatory text is useful on desktop but consumes a large
     amount of prime mobile chart space.
  */
  #side-screener-help,
  #side-screener-usage {
    display: none !important;
  }

  #side-screener-stats {
    margin: 2px 0 4px 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }


  /* Horizontal stock strip instead of tall vertical list */

  #side-screener-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 5px !important;
    padding: 0 0 2px 0 !important;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  #side-screener-list::-webkit-scrollbar {
    display: none;
  }

  #side-screener-list > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  #side-screener-list button {
    width: auto !important;
    min-width: 105px !important;
    max-width: 135px !important;

    min-height: 48px !important;

    margin: 0 !important;
    padding: 5px 7px !important;

    border-radius: 8px !important;

    font-size: 10px !important;
    line-height: 1.15 !important;
  }


  /*
   * Desktop rail keeps sparklines.
   * Mobile horizontal cards prioritize symbol / price / status.
   */
  .side-screener-sparkline,
  .side-screener-spark-wrap {
    display: none !important;
  }


  /* Pagination is unnecessary while cards are horizontally scrollable */

  #side-screener-prev,
  #side-screener-next,
  #side-screener-page-meta {
    display: none !important;
  }


  /* ----------------------------------------------------------
     7. OVERLAY BAR
     Keep controls available, but reduce vertical footprint.
     ---------------------------------------------------------- */

  .overlaybox {
    padding: 5px 6px !important;
    margin: 0 0 3px 0 !important;
    border-radius: 9px !important;
  }

  .woi-overlay-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 4px !important;
  }

  .woi-overlay-inline-label {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .overlays-checklist {
    display: flex !important;
    flex: 1 1 100% !important;

    flex-wrap: nowrap !important;

    gap: 3px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none;
  }

  .overlays-checklist::-webkit-scrollbar {
    display: none;
  }

  .overlays-checklist label {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 3px 5px !important;

    font-size: 9px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  .overlays-checklist input[type="checkbox"] {
    margin-right: 2px !important;
    transform: scale(.82) !important;
  }


  /* Chart type + Indicators controls */

  .woi-indicator-menu {
    flex: 0 0 auto !important;
  }

  .woi-indicator-trigger {
    min-height: 28px !important;
    height: 28px !important;

    padding: 3px 7px !important;

    font-size: 10px !important;
    border-radius: 7px !important;
  }


  /* ----------------------------------------------------------
     8. DRAW TOOLBAR
     One horizontal tool rail. Swipe for less-used tools.
     No functionality removed.
     ---------------------------------------------------------- */

  .fibo-row {
    display: flex !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 3px 0 !important;

    gap: 4px !important;

    align-items: center !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    white-space: nowrap !important;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fibo-row::-webkit-scrollbar {
    display: none;
  }

  .woi-drawing-toolbar {
    display: flex !important;
    flex: 0 0 auto !important;

    align-items: center !important;
    gap: 4px !important;

    white-space: nowrap !important;
  }

  .woi-draw-label {
    flex: 0 0 auto !important;

    font-size: 9px !important;
    margin-right: 1px !important;
  }

  .woi-tool-group {
    display: flex !important;
    flex: 0 0 auto !important;

    gap: 3px !important;
    align-items: center !important;
  }

  .fibo-row .woi-draw-btn,
  .fibo-row button {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: auto !important;

    min-height: 28px !important;
    height: 28px !important;

    padding: 3px 6px !important;

    font-size: 9px !important;
    line-height: 1 !important;

    border-radius: 7px !important;

    white-space: nowrap !important;
  }

  #fibo-status {
    display: none !important;
  }


  /* ----------------------------------------------------------
     9. CHART — remove unnecessary gap before graph
     ---------------------------------------------------------- */

  #chart-wrap {
    margin-top: 0 !important;
  }

}


/* Extra tightening only for very narrow phones */
@media (max-width: 430px) {

  #scanner-controls-shell .scanner-controls-watchlist .btn,
  #scanner-controls-shell .scanner-controls-watchlist button {
    font-size: 10px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  #side-screener-list button {
    min-width: 100px !important;
  }

}


/* ============================================================
   WOI MOBILE — OVERLAYS AS DROPDOWN
   ============================================================ */

@media (max-width: 920px) {

  /*
   * Overlay box artık üç compact menu taşıyor:
   * Overlays | Chart Type | Indicators
   */
  .overlaybox {
    padding: 5px !important;
  }

  .woi-overlay-controls {
    display: grid !important;
    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.15fr)
      minmax(0, 1.05fr) !important;

    width: 100% !important;
    gap: 5px !important;
    align-items: center !important;
  }


  /* Eski açık OVERLAYS label artık kullanılmıyor */
  .woi-overlay-inline-label {
    display: none !important;
  }


  /* All three menu containers */
  .woi-overlay-controls > .woi-indicator-menu {
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
  }


  /* Summary buttons */
  .woi-overlay-controls .woi-indicator-trigger {
    display: flex !important;
    width: 100% !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 4px 7px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    border-radius: 8px !important;
  }


  .woi-overlays-label,
  .woi-chart-type-trigger-label,
  .woi-indicators-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * IMPORTANT:
   * checklist is no longer horizontal while inside the popup.
   */
  .woi-overlays-popover .overlays-checklist {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;

    overflow: visible !important;

    gap: 6px !important;
    padding: 0 !important;
  }


  .woi-overlays-popover .overlays-checklist label {
    width: 100% !important;

    margin: 0 !important;
    padding: 7px 8px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 1.15 !important;

    white-space: normal !important;
  }


  /* Overlay dropdown */
  .woi-overlays-popover {
    left: 0 !important;
    right: auto !important;

    width: min(310px, calc(100vw - 28px)) !important;
    min-width: 0 !important;

    padding: 9px !important;

    z-index: 1200 !important;
  }


  /*
   * Indicators opens from right side so it doesn't overflow viewport.
   */
  .woi-indicators-menu .woi-indicator-popover {
    right: 0 !important;
    left: auto !important;
  }


  /*
   * Chart type stays centered relative to its trigger.
   */
  .woi-chart-type-menu .woi-indicator-popover {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

}


@media (max-width: 430px) {

  .woi-overlay-controls {
    grid-template-columns:
      minmax(0, .92fr)
      minmax(0, 1.12fr)
      minmax(0, 1.05fr) !important;
  }

  .woi-overlay-controls .woi-indicator-trigger {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 9px !important;
  }

}


/* ============================================================
   MOBILE FINAL: CHART CONTROL MENUS IN ONE ROW
   ============================================================ */
@media (max-width: 920px) {

  #scanner-main-shell .chartwrap .overlaybox {
    width: 100% !important;
    padding: 5px !important;
    box-sizing: border-box !important;
  }

  #scanner-main-shell .chartwrap .overlaybox .woi-overlay-controls {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 5px !important;

    align-items: stretch !important;
  }

  #scanner-main-shell .chartwrap .overlaybox
  .woi-overlay-controls > details {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #scanner-main-shell .chartwrap .overlaybox
  .woi-overlay-controls > details > summary {
    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 4px 6px !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
    white-space: nowrap !important;

    font-size: 10px !important;
  }

  #scanner-main-shell .chartwrap
  .woi-overlays-label,

  #scanner-main-shell .chartwrap
  .woi-chart-type-trigger-label,

  #scanner-main-shell .chartwrap
  .woi-indicators-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

}


@media (max-width: 430px) {

  #scanner-main-shell .chartwrap .overlaybox
  .woi-overlay-controls > details > summary {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 9px !important;
  }

}


/* ============================================================
   MOBILE FINAL: WATCHLIST / ALERT / NOTE ACTION BAR
   ============================================================ */

/* Desktop: new compact mobile bar never appears */
.scanner-mobile-actionbar {
  display: none;
}


@media (max-width: 720px) {

  /* New single-row mobile action bar */
  #scanner-controls-shell .scanner-mobile-actionbar {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #scanner-controls-shell .scanner-mobile-action-btn {
    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 4px 7px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /*
   * Old action row remains in DOM because callbacks depend on
   * btn-wl-add / btn-wl-remove / btn-price-alert-open.
   */
  #scanner-controls-shell .scanner-controls-watchlist {
    display: none !important;
  }


  /*
   * Existing Note editor stays closed until mobile Note is tapped.
   */
  #scanner-controls-shell .scanner-controls-note {
    display: none !important;
  }


  #scanner-controls-shell
  .scanner-controls-note.mobile-note-open {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      72px !important;

    width: 100% !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
  }


  #scanner-controls-shell
  .scanner-controls-note.mobile-note-open #wl-note {

    height: 32px !important;
    min-height: 32px !important;

    font-size: 11px !important;
  }


  #scanner-controls-shell
  .scanner-controls-note.mobile-note-open #btn-wl-save-note {

    width: 72px !important;
    min-width: 72px !important;

    height: 32px !important;
    min-height: 32px !important;

    font-size: 10px !important;
  }

}


@media (max-width: 430px) {

  #scanner-controls-shell .scanner-mobile-action-btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 9px !important;
  }

}


/* ============================================================
   MOBILE WATCHLIST — LOGIN / VALUE MODAL
   ============================================================ */

.woi-mobile-auth-modal {
  display: none;
}


@media (max-width: 720px) {

  .woi-mobile-auth-modal.is-open {
    display: flex !important;

    position: fixed !important;
    inset: 0 !important;

    z-index: 20000 !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 18px !important;

    background: rgba(2, 6, 15, .72) !important;

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


  .woi-mobile-auth-card {
    position: relative !important;

    width: min(360px, 100%) !important;

    padding: 20px 18px 16px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(96, 165, 250, .25) !important;
    border-radius: 16px !important;

    background:
      linear-gradient(
        180deg,
        rgba(15, 23, 42, .99),
        rgba(7, 13, 24, .99)
      ) !important;

    box-shadow:
      0 22px 60px rgba(0,0,0,.50) !important;
  }


  .woi-mobile-auth-close {
    position: absolute !important;

    top: 8px !important;
    right: 9px !important;

    width: 30px !important;
    height: 30px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #94a3b8 !important;

    font-size: 20px !important;
    line-height: 30px !important;
  }


  .woi-mobile-auth-icon {
    margin-bottom: 8px !important;
    font-size: 25px !important;
  }


  .woi-mobile-auth-kicker {
    margin-bottom: 5px !important;

    color: #60a5fa !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    letter-spacing: .10em !important;
  }


  .woi-mobile-auth-card h3 {
    margin: 0 30px 7px 0 !important;

    color: #f8fafc !important;

    font-size: 17px !important;
    line-height: 1.22 !important;
  }


  .woi-mobile-auth-copy {
    margin: 0 0 12px !important;

    color: #cbd5e1 !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
  }


  .woi-mobile-auth-notification {
    margin: 0 0 14px !important;
    padding: 10px 11px !important;

    border: 1px solid rgba(45, 212, 191, .20) !important;
    border-radius: 10px !important;

    background: rgba(13, 148, 136, .08) !important;
  }


  .woi-mobile-auth-notification-title {
    margin-bottom: 4px !important;

    color: #99f6e4 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
  }


  .woi-mobile-auth-notification-copy {
    color: #cbd5e1 !important;

    font-size: 10.5px !important;
    line-height: 1.42 !important;
  }


  .woi-mobile-auth-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 7px !important;
  }


  .woi-mobile-auth-primary,
  .woi-mobile-auth-secondary {
    display: flex !important;

    min-height: 38px !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 9px !important;

    text-decoration: none !important;

    font-size: 11px !important;
    font-weight: 800 !important;
  }


  .woi-mobile-auth-primary {
    border: 1px solid rgba(96,165,250,.70) !important;

    background:
      linear-gradient(135deg,#2563eb,#4f46e5) !important;

    color: #fff !important;
  }


  .woi-mobile-auth-secondary {
    border: 1px solid rgba(148,163,184,.22) !important;

    background: rgba(30,41,59,.65) !important;

    color: #e2e8f0 !important;
  }


  .woi-mobile-auth-later {
    display: block !important;

    width: 100% !important;

    margin-top: 8px !important;
    padding: 6px !important;

    border: 0 !important;
    background: transparent !important;

    color: #94a3b8 !important;

    font-size: 10px !important;
  }

}


/* ============================================================
   WATCHLIST AUTH MODAL — ALL DEVICES
   ============================================================ */

.woi-mobile-auth-modal.is-open {
  display: flex !important;

  position: fixed !important;
  inset: 0 !important;

  z-index: 20000 !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 18px !important;

  background: rgba(2, 6, 15, .72) !important;

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


/* Desktop sizing */
@media (min-width: 721px) {

  .woi-mobile-auth-card {
    width: min(430px, calc(100vw - 40px)) !important;

    padding: 24px 22px 18px !important;
  }

  .woi-mobile-auth-card h3 {
    font-size: 20px !important;
  }

  .woi-mobile-auth-copy {
    font-size: 13px !important;
  }

  .woi-mobile-auth-notification-copy {
    font-size: 11.5px !important;
  }

}


/* ============================================================
   WATCHLIST AUTH MODAL — DESKTOP POLISH
   ============================================================ */

@media (min-width: 721px) {

  .woi-mobile-auth-modal.is-open {
    display: flex !important;

    position: fixed !important;
    inset: 0 !important;

    z-index: 20000 !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 32px !important;

    background: rgba(2, 6, 15, .70) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }


  .woi-mobile-auth-card {
    position: relative !important;

    width: 440px !important;
    max-width: calc(100vw - 64px) !important;

    padding: 28px 28px 22px !important;

    box-sizing: border-box !important;

    border:
      1px solid rgba(96, 165, 250, .22) !important;

    border-radius: 18px !important;

    background:
      linear-gradient(
        180deg,
        rgba(15, 23, 42, .995),
        rgba(7, 13, 24, .995)
      ) !important;

    box-shadow:
      0 26px 80px rgba(0, 0, 0, .58),
      0 0 0 1px rgba(255,255,255,.025) inset !important;
  }


  .woi-mobile-auth-close {
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    display: flex !important;

    width: 32px !important;
    height: 32px !important;

    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    border:
      1px solid rgba(148, 163, 184, .16) !important;

    border-radius: 8px !important;

    background: rgba(15, 23, 42, .72) !important;

    color: #94a3b8 !important;

    font-size: 18px !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  .woi-mobile-auth-close:hover {
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, .30) !important;
    background: rgba(30, 41, 59, .90) !important;
  }


  .woi-mobile-auth-icon {
    display: flex !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 0 14px !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;

    background: rgba(37, 99, 235, .14) !important;
    border:
      1px solid rgba(96, 165, 250, .20) !important;

    font-size: 20px !important;
  }


  .woi-mobile-auth-kicker {
    margin: 0 0 7px !important;

    color: #60a5fa !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: .11em !important;
  }


  .woi-mobile-auth-card h3 {
    margin: 0 36px 9px 0 !important;

    color: #f8fafc !important;

    font-size: 22px !important;
    font-weight: 800 !important;

    line-height: 1.20 !important;
  }


  .woi-mobile-auth-copy {
    margin: 0 0 18px !important;

    color: #cbd5e1 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
  }


  .woi-mobile-auth-notification {
    margin: 0 0 18px !important;

    padding: 13px 14px !important;

    border:
      1px solid rgba(45, 212, 191, .20) !important;

    border-radius: 12px !important;

    background:
      linear-gradient(
        135deg,
        rgba(13, 148, 136, .10),
        rgba(15, 23, 42, .40)
      ) !important;
  }


  .woi-mobile-auth-notification-title {
    margin: 0 0 5px !important;

    color: #99f6e4 !important;

    font-size: 12px !important;
    font-weight: 850 !important;

    line-height: 1.2 !important;
  }


  .woi-mobile-auth-notification-copy {
    color: #cbd5e1 !important;

    font-size: 11.5px !important;
    line-height: 1.48 !important;
  }


  .woi-mobile-auth-actions {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;

    width: 100% !important;
  }


  .woi-mobile-auth-primary,
  .woi-mobile-auth-secondary {
    display: flex !important;

    min-height: 42px !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 14px !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;

    text-decoration: none !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    transition:
      transform .12s ease,
      border-color .12s ease,
      background .12s ease !important;
  }


  .woi-mobile-auth-primary {
    border:
      1px solid rgba(96, 165, 250, .72) !important;

    background:
      linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
      ) !important;

    color: #ffffff !important;

    box-shadow:
      0 8px 22px rgba(37, 99, 235, .18) !important;
  }


  .woi-mobile-auth-primary:hover {
    transform: translateY(-1px) !important;
  }


  .woi-mobile-auth-secondary {
    border:
      1px solid rgba(148, 163, 184, .22) !important;

    background:
      rgba(30, 41, 59, .66) !important;

    color: #e2e8f0 !important;
  }


  .woi-mobile-auth-secondary:hover {
    border-color:
      rgba(148, 163, 184, .36) !important;

    background:
      rgba(30, 41, 59, .90) !important;
  }


  .woi-mobile-auth-later {
    display: block !important;

    width: 100% !important;

    margin: 10px 0 0 !important;
    padding: 7px !important;

    border: 0 !important;

    background: transparent !important;

    color: #94a3b8 !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
  }


  .woi-mobile-auth-later:hover {
    color: #cbd5e1 !important;
  }

}


/* ============================================================
   DESKTOP SCANNER WATCHLIST CTA
   ============================================================ */

@media (min-width: 721px) {

  #btn-desktop-watchlist {
    min-width: 170px !important;
  }

  /* Real callback proxy buttons stay hidden */
  #btn-wl-add,
  #btn-wl-remove {
    display: none !important;
  }

}