/* STOCK Mining - all app styling. Plain CSS, no build step. */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
  :root{
    --bg:#0D0F12; --panel:#171A20; --panel2:#20242C; --line:#262B33;
    --text:#EDEFF2; --muted:#868D98; --accent:#27E7A8;
    --up:#27E7A8; --down:#FB5B72; --flat:#868D98;
    --purple:#7A5CFF; --purple2:#5B3FE0;
    --grad:linear-gradient(135deg,#27E7A8 0%,#12B98B 58%,#0C9E86 100%);
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1000px; margin:0 auto; padding:18px 16px 60px;}
  header{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:18px; background:var(--grad); border-radius:20px; padding:15px 18px;}
  header h1{font-size:19px; margin:0; font-weight:600; letter-spacing:.2px; color:#05271E;}
  header .brand{color:#05271E; font-weight:700;}
  header .status{color:#064032;}
  header .pill{background:rgba(4,35,27,.14); border:1px solid rgba(4,35,27,.22); color:#04231B;}
  .status{display:flex; align-items:center; gap:14px; margin-left:auto; font-size:12.5px; color:var(--muted); flex-wrap:wrap;}
  .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle;}
  .open{background:var(--up);} .closed{background:var(--down);}
  .pill{background:var(--panel); border:1px solid var(--line); padding:4px 10px; border-radius:999px;}
  button{
    font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel);
    color:var(--text); border-radius:999px; padding:8px 15px; transition:.15s;
  }
  button:hover{border-color:var(--accent); color:var(--accent);}
  /* Link that has to look like a toolbar button. Used for breakout.html, which is a
     SEPARATE self-contained page rather than a view in this app, so it needs a real
     href -- the nav's data-view router only knows about in-app views. */
  .tbtn{
    font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel);
    color:var(--text); border-radius:999px; padding:8px 15px; transition:.15s;
    display:inline-block; text-decoration:none; line-height:normal;
  }
  .tbtn:hover{border-color:var(--accent); color:var(--accent);}
  .toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 18px;}
  input[type=text]{
    font:inherit; background:var(--panel); border:1px solid var(--line); color:var(--text);
    border-radius:12px; padding:8px 13px; min-width:170px;
  }
  input[type=text]:focus{outline:none; border-color:var(--accent);}
  select{font:inherit; font-size:13px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 9px; cursor:pointer;}
  select:focus{outline:none; border-color:var(--accent);}
  .sechead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 2px 10px;}
  .sechead h2{margin:0;}
  .wlsel,.idxsel{font:inherit; font-size:14px; font-weight:500; padding:9px 13px; border-radius:12px;
    min-width:190px; background:var(--panel); border:1px solid var(--line); color:var(--text); cursor:pointer;}
  .idxsel{min-width:170px; margin-left:auto;}
  .wlsel:focus,.idxsel:focus{outline:none; border-color:var(--purple);}
  /* AI Analyst */
  /* Numeric rating ("4.5 ★"). Tabular figures so a column of them stays aligned. */
  .stars{color:#EF9F27; font-size:13.5px; font-weight:800; white-space:nowrap;
         font-variant-numeric:tabular-nums;}
  #pickTable .pickrow:hover td{background:rgba(255,255,255,.03);}
  /* Track record — how the past calls actually turned out */
  #trBox{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:13px 16px; margin:0 2px 14px;}
  #trHead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; user-select:none;}
  #trHead .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;}
  #trHead .one{font-size:13.5px; font-weight:500;}
  #trHead .caret{margin-left:auto; font-size:12px; color:var(--muted);}
  .trkpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin:14px 0 4px;}
  .trkpi{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 12px;}
  .trkpi .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);}
  .trkpi .v{font-size:21px; font-weight:700; margin-top:3px; line-height:1.15;}
  .trkpi .s{font-size:11px; color:var(--muted); margin-top:3px;}
  #trBody h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
    font-weight:600; margin:18px 2px 8px;}
  #trBody table{font-size:13px;} #trBody th,#trBody td{padding:8px 12px;}
  #trBody tbody tr{cursor:default;} #trBody tbody tr:hover td{background:transparent;}
  .note{font-size:12px; color:var(--muted); margin-left:auto; max-width:340px; text-align:right; line-height:1.4;}

  h2{font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:22px 2px 10px; font-weight:600;}
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px;}
  .card .name{font-size:13px; color:var(--muted); margin-bottom:8px;}
  .card .price{font-size:24px; font-weight:700;}
  .card .chg{font-size:13.5px; margin-top:4px; font-weight:600;}

  /* Tables carry more columns than a 375px phone can hold. Let the TABLE scroll inside
     this box; otherwise the whole PAGE scrolls sideways and every row looks misaligned
     against the header and cards (reported 2026-08-07 as "the layout is uneven"). */
  .tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px;}
  table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  th,td{padding:11px 14px; text-align:right; font-size:14px; border-bottom:1px solid var(--line);}
  th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px; background:var(--panel2);}
  th:first-child,td:first-child{text-align:left;}
  tr:last-child td{border-bottom:none;}
  td.sym{font-weight:700;} td.nm{color:var(--muted); font-size:12.5px;}
  /* Keep a ticker and its sector dot on one line — "GRWRHITECH" + 🔴 was wrapping the
     dot onto its own row and knocking the whole table out of alignment. Scoped to the
     Picks rows: the Sectors table puts a company name under the ticker and must wrap. */
  .pickrow td.sym{white-space:nowrap;}
  .up{color:var(--up);} .down{color:var(--down);} .flat{color:var(--flat);}
  .rm{border:none; background:none; color:var(--muted); padding:2px 8px; font-size:16px; line-height:1;}
  .rm:hover{color:var(--down);}
  .alrt{border:none; background:none; color:var(--muted); padding:2px 8px; font-size:16px; line-height:1;}
  .alrt:hover{color:var(--accent);}
  .spin{color:var(--muted); font-style:italic;}
  /* strength badge */
  .badge{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid transparent; letter-spacing:.3px; cursor:help; white-space:nowrap;}
  .badge.up{color:#bffbe8; background:rgba(39,231,168,.14); border-color:rgba(39,231,168,.5);}
  .badge.down{color:#ffd2d9; background:rgba(251,91,114,.14); border-color:rgba(251,91,114,.5);}
  .badge.flat{color:#cbd5e1; background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.4);}
  .badge.load{color:var(--muted); background:transparent; border-color:var(--line); font-weight:500;}
  td.strength{text-align:center;}

  /* ---- Watchlist cards (replaced the 7-column table, 2026-08-11) --------------
     The table was 432px wide on a 375px screen, so reading one stock meant
     scrolling the page sideways. One card per stock removes the cause rather
     than scrolling around it. Same markup at every width: the grid just hands
     desktop more columns, so there is only ever ONE render path to maintain. */
  .wlcards{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); align-items:start;}
  .wlempty{grid-column:1/-1; text-align:center; color:var(--muted); padding:22px; margin:0;
           background:var(--panel); border:1px solid var(--line); border-radius:14px;}
  .wcard{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:14px;
         overflow:hidden; cursor:pointer; transition:border-color .15s, transform .15s;}
  .wcard:hover{border-color:#39414d;}
  .wcard:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .wcard:active{transform:scale(.995);}
  /* Neutral until the daily build has actually said something about this stock -
     a stripe on every card would imply a verdict the app does not have. */
  .wc-stripe{flex:0 0 3px; background:var(--line);}
  .wcard.has-read .wc-stripe{background:var(--accent);}
  .wcard[data-call="avoid"] .wc-stripe{background:var(--down);}
  .wcard[data-call="watch"] .wc-stripe{background:var(--purple);}
  .wc-body{flex:1; min-width:0; padding:11px 13px 10px;}
  .wc-top{display:flex; align-items:center; gap:8px;}
  .wc-sym{font-weight:700; font-size:15px; letter-spacing:.2px; white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis;}
  .wc-stars{font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap;}
  /* The rank sits next to the star because the star alone no longer separates
     anything — 87% of a pre-screened scan rates 4★, but only one stock is #7. */
  .wc-rank{margin-left:5px; font-size:10.5px; font-weight:700; color:var(--muted);
           background:var(--panel2); border-radius:4px; padding:2px 5px; letter-spacing:.2px;}
  /* 34px box + the card's own padding clears a 44px touch target. The table's
     buttons were 20px, which is a miss on a phone - easy to hit "remove" while
     aiming for the card. Negative margin keeps the header row from growing. */
  .wc-acts{margin-left:auto; display:flex; gap:2px; flex:0 0 auto; margin:-6px -5px -6px 0;}
  .wc-acts button{min-width:34px; min-height:34px; display:flex; align-items:center;
                  justify-content:center; padding:0; border-radius:8px;}
  .wc-acts button:hover{background:var(--panel2);}
  .wc-acts button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .wc-name{color:var(--muted); font-size:12px; margin-top:1px;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .wc-say{display:none; font-size:12.5px; line-height:1.45; color:var(--text); margin-top:7px;}
  .wc-say b{color:var(--accent); font-weight:600;}
  .wc-pips{display:none; flex-wrap:wrap; gap:4px; margin-top:7px;}
  .pip{font-size:10px; font-weight:600; letter-spacing:.2px; padding:2px 6px; border-radius:4px;
       border:1px solid var(--line); color:var(--muted); white-space:nowrap;}
  .pip.on{border-color:rgba(39,231,168,.42); color:#bffbe8; background:rgba(39,231,168,.08);}
  .pip.off{border-color:rgba(251,91,114,.34); color:#ffd2d9;}
  .wc-nums{display:flex; justify-content:space-between; align-items:flex-end; gap:8px;
           margin-top:9px; padding-top:9px; border-top:1px solid var(--line);}
  .wc-nums > div{min-width:0; text-align:center;}
  .wc-nums > div:first-child{text-align:left;}
  .wc-nums .k{display:block; font-size:9px; letter-spacing:.6px; text-transform:uppercase;
              color:var(--muted); margin-bottom:2px;}
  .wc-nums .v{font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;}
  .wc-nums .strength{text-align:right;}
  .wc-nums .strength .badge{font-size:10.5px; padding:2px 7px;}
  @media (max-width:420px){
    .wlcards{grid-template-columns:1fr;}
    .wc-nums .v{font-size:13px;}
  }
  /* ---- Entry plan on the stock page (2026-08-11) --------------------------- */
  #entryPlan{margin-top:16px;}
  .ehead{font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:var(--muted);
         margin:18px 2px 8px; font-weight:700;}
  .ebanner{border-radius:14px; padding:14px 16px; border:1px solid var(--line); background:var(--panel);}
  .ebanner.up{border-color:rgba(39,231,168,.45); background:rgba(39,231,168,.07);}
  .ebanner.down{border-color:rgba(251,91,114,.35); background:rgba(251,91,114,.06);}
  .ebanner h4{margin:0 0 6px; font-size:16px; font-weight:700;}
  .ebanner.up h4{color:var(--accent);} .ebanner.down h4{color:var(--down);}
  .ebanner p{margin:0; font-size:13.5px; line-height:1.55; color:var(--text);}

  .eroutes{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  .eroute{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 14px;}
  .eroute.live{border-color:rgba(39,231,168,.5); background:rgba(39,231,168,.05);}
  .er-top{display:flex; align-items:center; gap:7px; margin-bottom:8px;}
  .er-n{font-size:15px; font-weight:700; color:var(--muted);}
  .er-t{font-size:13px; font-weight:700; letter-spacing:.3px;}
  .er-live{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
           color:#062; background:var(--accent); padding:3px 7px; border-radius:999px;}
  .er-px{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:7px;}
  .eroute.live .er-px{color:var(--accent);}
  .er-off{font-size:14px; color:var(--muted); font-weight:600;}
  .er-note{margin:0 0 9px; font-size:12.5px; line-height:1.5; color:var(--muted);}
  .er-stop{font-size:12px; padding-top:8px; border-top:1px solid var(--line); line-height:1.5;}
  .er-stop b{color:var(--down);}
  .er-stop .k{color:var(--muted);}

  /* price ladder: one line carrying every level that matters */
  .eladder{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 14px 12px;}
  .el-track{position:relative; height:6px; border-radius:3px; margin:0 6px 12px;
            background:linear-gradient(90deg,rgba(251,91,114,.55),rgba(134,141,152,.4),rgba(39,231,168,.55));}
  .el-pin{position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
          transform:translate(-50%,-50%); border:2px solid var(--panel); background:var(--muted);}
  .el-pin.up{background:var(--up);} .el-pin.down{background:var(--down);}
  .el-pin.mid{background:var(--purple);}
  .el-pin.now{background:#fff; width:14px; height:14px; box-shadow:0 0 0 3px rgba(255,255,255,.14);}
  .el-keys{display:flex; flex-wrap:wrap; gap:6px 14px;}
  .el-key{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; line-height:1.35;}
  .el-key b{display:block; font-size:12.5px; letter-spacing:0; text-transform:none;
            font-variant-numeric:tabular-nums; color:var(--text);}
  .el-key.up b{color:var(--up);} .el-key.down b{color:var(--down);} .el-key.now b{color:#fff;}

  /* moving-average stack */
  .emas{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
        display:flex; flex-direction:column; gap:8px;}
  .ema{display:flex; align-items:center; gap:10px;}
  .ema-l{flex:0 0 78px; font-size:11.5px; color:var(--muted);}
  .ema-bar{flex:1; height:7px; background:var(--panel2); border-radius:4px; overflow:hidden; min-width:0;}
  .ema-bar i{display:block; height:100%; border-radius:4px; background:var(--grad);}
  .ema-v{flex:0 0 auto; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; min-width:74px; text-align:right;}
  .ehint{font-size:12.5px; line-height:1.55; color:var(--muted); margin:9px 2px 0;}
  .ehint.dis{font-size:11.5px; opacity:.8; margin-top:12px;}
  @media (max-width:420px){ .ema-l{flex-basis:64px; font-size:11px;} .ema-v{min-width:66px;} }
  /* screener */
  .filebtn{display:inline-block; font-size:14px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:8px; padding:7px 12px; transition:.15s;}
  .filebtn:hover{border-color:var(--accent); color:var(--accent);}
  .addw{font-size:12.5px; padding:5px 10px; border-radius:7px;}
  #scrTable td:first-child{color:var(--muted); font-size:12px;}
  .banner{display:none; background:#7f1d1d; border:1px solid #b91c1c; color:#fecaca; padding:10px 14px; border-radius:10px; margin:14px 0; font-size:13px;}
  footer{margin-top:30px; font-size:11.5px; color:var(--muted); line-height:1.6;}
  @media(max-width:560px){
    .note{display:none;} .card .price{font-size:21px;} th,td{padding:10px;}
    th.hide-sm,td.hide-sm{display:none;}
  }
  /* clickable list + cards */
  tbody tr{cursor:pointer;}
  tbody tr:hover td{background:var(--panel2);}
  .card{cursor:pointer;}
  .card:hover{border-color:var(--accent);}
  .hint{font-size:12px; color:var(--muted); margin:0 2px 12px;}
  .ferr{display:none; font-size:12.5px; color:#fca5a5; margin:-4px 2px 10px; line-height:1.4;}
  #add[aria-invalid="true"]{border-color:#b91c1c; outline:1px solid #b91c1c;}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
  /* chart view */
  .chartHead{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;}
  .cName{font-size:20px; font-weight:700;}
  .cSub{font-size:13px; color:var(--muted); margin-top:2px;}
  .cPrice{font-size:20px; font-weight:700;}
  .cDay{font-size:13px; margin-top:2px;}

  /* ---- 52-week dial on the stock page (2026-08-11) ----
     Ring = where today's price sits between the 52-week low and high. The stroke
     is drawn from the LOW end, so a nearly-closed ring means "near its high".
     The circle is rotated -90deg so it starts at 12 o'clock rather than 3. */
  .chartDial{margin-left:auto; display:flex; flex-direction:column; align-items:center; flex:0 0 auto;}
  .cd-ring{position:relative; width:124px; height:124px;}
  .cd-ring svg{width:100%; height:100%; display:block; transform:rotate(-90deg);}
  .cd-bg{fill:none; stroke:var(--panel2); stroke-width:8;}
  .cd-fg{fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round;
         transition:stroke-dashoffset .5s ease-out, stroke .3s;}
  .cd-fg.low{stroke:var(--down);}
  .cd-fg.mid{stroke:var(--purple);}
  .cd-mid{position:absolute; inset:0; display:flex; flex-direction:column;
          align-items:center; justify-content:center; text-align:center; padding:0 12px;}
  .cd-mid .cPrice{font-size:17px; line-height:1.15; font-variant-numeric:tabular-nums;}
  .cd-mid .cDay{font-size:11px; margin-top:2px; font-variant-numeric:tabular-nums;}
  .cd-cap{font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
          margin-top:6px; text-align:center; min-height:13px;}
  @media (max-width:560px){
    .chartDial{margin-left:0;}
    .chartHead{align-items:center;}
  }
  @media (prefers-reduced-motion:reduce){ .cd-fg{transition:none;} }
  .tfbar{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0;}
  .tf{font-size:13px; padding:6px 13px;}
  .tf.active{border-color:var(--purple); color:#fff; background:var(--purple);}
  .lcount{font-size:11px; opacity:.55; margin-left:3px; font-weight:400;}
  .listctl{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px;}
  .listctl button{font-size:12.5px; padding:5px 11px; color:var(--muted);}
  .chartArea{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; min-height:200px;}
  .chartArea svg{display:block; width:100%; height:auto;}
  .chartRead{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
  .retHead{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:20px;}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; min-width:120px;}
  .stat .l{font-size:11.5px; color:var(--muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:.5px;}
  .stat .v{font-size:15px; font-weight:600;}
  /* overview: range sliders (Groww/Moneycontrol style) */
  .rng{flex:1; min-width:230px;}
  .rng .track{position:relative; height:6px; border-radius:3px; margin:12px 6px 6px;
    background:linear-gradient(90deg, rgba(239,68,68,.55), rgba(234,179,8,.5), rgba(34,197,94,.55));}
  .rng .dot{position:absolute; top:-4px; width:13px; height:13px; border-radius:50%;
    background:#fff; border:3px solid var(--bg); transform:translateX(-50%); box-shadow:0 0 0 1px var(--line);}
  .rng .ends{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); padding:0 2px;}
  /* overview: pros & cons (screener.in style) */
  .pcwrap{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .pcard{flex:1; min-width:250px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 15px;}
  .pcard h4{margin:0 0 8px; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase;}
  .pcard.pros h4{color:var(--up);} .pcard.cons h4{color:var(--down);}
  .pcard ul{margin:0; padding-left:17px;}
  .pcard li{font-size:13px; margin:5px 0; line-height:1.45;}
  .pcard .none{font-size:12.5px; color:var(--muted); font-style:italic;}
  /* .tvopen removed 2026-08-11 — the standalone TradingView button at the foot of
     the stock page became a chip inside Key stats, styled by .stat like its
     screener.in neighbour. Nothing carries this class any more. */
  /* playbook read */
  .play{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:14px;}
  .play h3{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:0 0 10px; font-weight:700;}
  .verdict{display:inline-block; font-size:15px; font-weight:800; padding:5px 13px; border-radius:999px;}
  .verdict.up{color:#bffbe8; background:rgba(39,231,168,.16); border:1px solid rgba(39,231,168,.55);}
  .verdict.down{color:#ffd2d9; background:rgba(251,91,114,.16); border:1px solid rgba(251,91,114,.55);}
  .verdict.flat{color:#e2e8f0; background:rgba(148,163,184,.16); border:1px solid rgba(148,163,184,.45);}
  .pgate{display:flex; gap:9px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px;}
  .pgate{margin-top:0;} .play > div + .pgate{margin-top:12px;}
  .pgate .ico{flex:0 0 auto; width:18px; text-align:center;}
  .pgate .lab{flex:0 0 88px; color:var(--muted); font-weight:600;}
  .pgate .val{flex:1; min-width:0;}
  .plevels{display:flex; flex-wrap:wrap; gap:10px; margin-top:13px;}
  .plev{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:8px 12px; min-width:118px; flex:1;}
  .plev .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
  .plev .v{font-size:14.5px; font-weight:700; margin-top:3px;}
  .pdisc{font-size:11px; color:var(--muted); margin-top:11px; line-height:1.45;}
  /* Panel of judges */
  .judges{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:12px;}
  .jhead{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .jwt{font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted); opacity:.85;}
  .jrow{display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-top:1px solid var(--line); font-size:13px; margin-top:7px;}
  .jrow:first-of-type{border-top:none;}
  .jico{flex:0 0 auto; width:20px; text-align:center; font-size:14px;}
  .jwho{flex:0 0 96px; font-weight:700; display:flex; flex-direction:column; gap:1px;}
  .jtag{font-size:9.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
  .jrow .ico{flex:0 0 auto; width:18px; text-align:center;}
  .jline{flex:1; min-width:0; color:#dbe4ee;}
  /* Persistent section nav (shown on every view except home) */
  .navbar{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0 4px;}
  .navbar.navhide{display:none;}
  .navbar button{font-size:12.5px; padding:7px 11px; border-radius:999px; cursor:pointer;
                 background:var(--panel2); color:var(--fg); border:1px solid var(--line); font-weight:600;}
  .navbar button:hover{border-color:rgba(56,140,255,.55);}
  .navback{font-weight:800 !important; background:rgba(56,140,255,.16) !important; border-color:rgba(56,140,255,.5) !important;}
  .navlink.active{background:rgba(56,140,255,.22) !important; border-color:rgba(56,140,255,.65) !important;}
  /* Phone: five pills wrapped 4-then-1, which read as a broken row. Give Back its own
     full-width row and let the four section links share the next row equally, so the bar
     is always a clean 1 + 4 instead of whatever happens to fit. */
  @media(max-width:560px){
    /* A 6-column grid: Back spans the full width, then 3 links (span 2) and 2 links
       (span 3). Squeezing all five into one flex row clipped four labels
       ("Screener" -> "Screen..."). Every label must stay readable. */
    .navbar{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
    .navbar button{padding:10px 6px; font-size:12px;}
    .navback{grid-column:1 / -1;}
    .navlink{grid-column:span 2; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .navlink:nth-last-of-type(2), .navlink:nth-last-of-type(1){grid-column:span 3;}
  }
  .secm{font-size:10px; vertical-align:middle; cursor:help;}
  /* Sectoral indices section */
  .seccard{background:var(--panel2); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; overflow:hidden;}
  .seccard.open{border-color:rgba(56,140,255,.45);}
  .sechead{display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; flex-wrap:wrap;}
  .sechead:hover{background:rgba(148,163,184,.07);}
  .seccaret{flex:0 0 auto; width:12px; color:var(--muted); font-size:11px;}
  .secname{flex:1 1 190px; min-width:0; font-weight:800; font-size:13.5px;}
  .secrel{flex:0 0 auto; font-size:12px; color:var(--muted);}
  .seclive{flex:0 0 auto; font-size:12.5px; font-weight:700; min-width:120px; text-align:right;}
  .secbadge{flex:0 0 auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
            padding:2px 7px; border-radius:999px; border:1px solid currentColor;}
  /* Darvas-box state. Same pill as the sector badge so the app keeps one vocabulary;
     colour comes from the up/flat/down classes the rest of the app already uses,
     with no class = the neutral "at the line". */
  .boxbadge{display:inline-block; white-space:nowrap; font-size:10px; font-weight:800;
            text-transform:uppercase; letter-spacing:.4px; padding:2px 7px;
            border-radius:999px; border:1px solid currentColor; color:var(--muted);}
  /* The card clips (overflow:hidden), so the table must scroll INSIDE this box or
     the right-hand columns get cut off and unreachable on a phone. */
  .secbody{padding:0 12px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .sectbl{width:100%; border-collapse:collapse; font-size:12.5px;}
  .sectbl th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
             font-weight:700; padding:6px 6px; border-bottom:1px solid var(--line);}
  .sectbl td{padding:7px 6px; border-bottom:1px solid rgba(148,163,184,.12); vertical-align:top;}
  .sectbl tr:last-child td{border-bottom:none;}
  .secrow:hover{background:rgba(56,140,255,.09);}
  @media(max-width:560px){
    .secrel{flex-basis:100%; order:5;} .seclive{min-width:0;}
    .sectbl{font-size:11.5px;} .sectbl th,.sectbl td{padding:6px 4px;}
    .secbody{padding:0 8px 10px;}
  }
  /* Advisory judge (sector): shown, but never counted in the weighted verdict. */
  .jinfo{border-top-style:dashed; opacity:.92;}
  .jadv{display:block; font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.3px; margin-top:2px;}
  .jtotal{display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
  .jtl{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; flex:0 0 auto;}
  .jmeter{flex:1; height:8px; border-radius:999px; background:rgba(148,163,184,.18); overflow:hidden; min-width:80px;}
  .jmeter i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#fb5b72,#eab308,#27e7a8);}
  .jtw{flex:0 0 auto; font-weight:800; font-size:13px;}
  .jtotal.pass .jtw{color:#27e7a8;} .jtotal.fail .jtw{color:#fb5b72;} .jtotal.warn .jtw{color:#eab308;}
  .jflag{margin-top:9px; font-size:12px; color:#ffd2d9; background:rgba(251,91,114,.12); border:1px solid rgba(251,91,114,.4); border-radius:8px; padding:7px 10px; line-height:1.4;}
  .pgates-h{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin-top:14px;}
  .ppyr{margin-top:10px; font-size:12.5px; color:#cfe9ff; background:rgba(56,140,255,.1); border:1px solid rgba(56,140,255,.34); border-radius:8px; padding:7px 10px; line-height:1.4;}
  .ptabs{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:14px;}
  .ptablabel{font-size:12px; color:var(--muted); margin-right:2px;}
  .ptab{font-size:12.5px; padding:5px 12px;}
  .ptab.active{border-color:var(--purple); color:#fff; background:var(--purple);}

  /* ---- motion & animation ---- */
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  @keyframes popIn{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:scale(1);}}
  @keyframes pulse{0%,100%{opacity:.45;} 50%{opacity:1;}}
  @keyframes flashG{from{background:rgba(34,197,94,.30);} to{background:transparent;}}
  @keyframes flashR{from{background:rgba(239,68,68,.30);} to{background:transparent;}}
  .view-in{animation:fadeUp .28s ease-out;}
  button:active{transform:scale(.96);}
  .cards .card{animation:fadeUp .35s ease-out backwards;}
  .cards .card:nth-child(2){animation-delay:.06s;} .cards .card:nth-child(3){animation-delay:.12s;} .cards .card:nth-child(4){animation-delay:.18s;}
  #wlCards .rowin{animation:fadeUp .3s ease-out backwards;}
  #wlCards .rowin:nth-child(2){animation-delay:.03s;} #wlCards .rowin:nth-child(3){animation-delay:.06s;}
  #wlCards .rowin:nth-child(4){animation-delay:.09s;} #wlCards .rowin:nth-child(5){animation-delay:.12s;}
  #wlCards .rowin:nth-child(6){animation-delay:.15s;} #wlCards .rowin:nth-child(7){animation-delay:.18s;}
  #wlCards .rowin:nth-child(n+8){animation-delay:.21s;}
  .chartArea svg{animation:fadeUp .4s ease-out;}
  td.strength .badge, .wc-nums .strength .badge, #chartBadge .badge, .verdict{animation:popIn .28s ease-out;}
  .rng .dot{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) .15s backwards;}
  #chartReturns .stat, #ovBox .stat{animation:fadeUp .3s ease-out backwards;}
  #chartReturns .stat:nth-child(2), #ovBox .stat:nth-child(2){animation-delay:.04s;}
  #chartReturns .stat:nth-child(3), #ovBox .stat:nth-child(3){animation-delay:.08s;}
  #chartReturns .stat:nth-child(4), #ovBox .stat:nth-child(4){animation-delay:.12s;}
  #chartReturns .stat:nth-child(5), #ovBox .stat:nth-child(5){animation-delay:.16s;}
  #chartReturns .stat:nth-child(6), #ovBox .stat:nth-child(6){animation-delay:.20s;}
  #chartReturns .stat:nth-child(7), #ovBox .stat:nth-child(7){animation-delay:.24s;}
  .pcard{animation:fadeUp .35s ease-out backwards;} .pcard.cons{animation-delay:.1s;}
  .spin{animation:pulse 1.2s ease-in-out infinite;}
  /* price tick flash — row or index card briefly glows green (up) / red (down) */
  #wlBody tr.fUp{animation:flashG 1s ease-out;} #wlBody tr.fDn{animation:flashR 1s ease-out;}
  .card.fUp{animation:flashG 1s ease-out;} .card.fDn{animation:flashR 1s ease-out;}
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* "+ Add to watchlist", shared by every list view */
  .addw{font-weight:700; line-height:1; min-width:30px;}
  .addw.has{color:var(--up); border-color:rgba(39,231,168,.45);}
  .sectbl .addw{padding:3px 7px; font-size:12px;}
  /* The picker is position:fixed and appended to <body>, NOT to the row: a table
     cell clips it and every one of these tables lives in an overflow-x box. */
  .wlpop{position:fixed; z-index:9999; min-width:210px; max-width:min(280px, calc(100vw - 16px));
    max-height:min(340px, calc(100vh - 16px)); overflow-y:auto;
    background:var(--panel2); border:1px solid var(--hair-strong,var(--line)); border-radius:12px;
    padding:6px; box-shadow:0 12px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);}
  .wlpop-h{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
    padding:6px 8px 8px; border-bottom:1px solid var(--line); margin-bottom:4px;}
  .wlpop-h b{color:var(--text);}
  .wlpop-i{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:none; border:0; border-radius:8px; padding:9px 10px; font-size:13.5px; color:var(--text);}
  .wlpop-i:hover:not(:disabled){background:var(--panel); border-color:transparent; color:var(--accent);}
  .wlpop-i .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .wlpop-i .ct{flex:0 0 auto; font-size:11.5px; color:var(--muted);}
  .wlpop-i:disabled{opacity:.5; cursor:default;}
  .wlpop-i.has .ct{color:var(--up);}
  .wlpop-new{border-top:1px solid var(--line); margin-top:4px; border-radius:0 0 8px 8px; color:var(--accent);}

  /* Size it — the position calculator's input grid */
  .szgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;}
  .szf{display:flex; flex-direction:column; gap:5px;}
  .szf label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
  .szf input[type=number], .szf select{font:inherit; font-size:15px; font-weight:600;
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    border-radius:9px; padding:9px 11px; width:100%;}
  .szf select{font-size:13px; font-weight:400;}
  .szf input[type=number]:focus, .szf select:focus{outline:none; border-color:var(--accent);}
  /* Phone keyboards show the number pad for these; the spinners just steal width. */
  .szf input[type=number]::-webkit-outer-spin-button,
  .szf input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .szf input[type=number]{-moz-appearance:textfield;}
  #szVerdict b.up{color:var(--up);} #szVerdict b.down{color:var(--down);}
  #szFrom .muted{color:var(--muted);}