UI: fix featured-card proportions to match v2 mockup

- lvl-grid: repeat(3,1fr) -> repeat(6,1fr) on desktop so Entry/Stop/RR/TP1/TP2/TP3 render in one row like the mockup's grid6 (was wrapping to 2 rows)
- Featured card left rail widened 220px->280px and confidence ring enlarged 110px->148px to match mockup's proportions
- Left rail now shows only simple HMM/MK state pills (matching mockup) instead of the full bordered state-strip+forecast panel, which was making the rail look cluttered/cramped
- Full detailed state-strip (forecast bars, conflict note, etc.) relocated to the right column in its original position - no data lost, just moved to where there's room for it
- Verified locally against live scan data before redeploying

static/index.html

@@ -1139,7 +1139,7 @@ nav {
 
 /* ── Levels grid ── */
 /* Color-coded: each box tells a story at a glance (trading convention) */
-.lvl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px; }
+.lvl-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:10px; }
 .lvl-pnl { font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
 .lvl-pnl.pos { color:var(--profit); }
 .lvl-pnl.neg { color:var(--loss); }
@@ -1560,6 +1560,28 @@ nav {
 .conf-ring-center span { font-size:8px; font-weight:700; letter-spacing:0.1em; color:var(--t3); }
 .featured-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.06em; color:var(--teal); text-transform:uppercase; }
 
+/* ── Featured two-column layout: ring/grade/state/score rail + main content ── */
+.featured-layout { display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; }
+.featured-left {
+  display:flex; flex-direction:column; align-items:center; gap:14px;
+  padding:20px 16px; border-radius:16px; text-align:center;
+  background:linear-gradient(160deg, var(--mints, rgba(61,220,151,0.08)), transparent 70%);
+  border:1px solid var(--gb);
+}
+.featured-left .conf-ring-wrap { width:148px; height:148px; }
+.featured-left .conf-ring-center b { font-size:34px; }
+.featured-left .state-strip, .featured-left .panel, .featured-left .featured-state-pills { width:100%; text-align:left; }
+.featured-left .featured-state-pills { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
+.featured-right { display:flex; flex-direction:column; gap:16px; min-width:0; }
+.tag-grade { display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:0.06em; padding:5px 13px; border-radius:9px; }
+.tag-grade.gA { color:var(--profit, var(--green)); background:var(--mints, rgba(61,220,151,0.11)); border:1px solid rgba(61,220,151,0.3); }
+.tag-grade.gB { color:var(--warn, var(--amber)); background:var(--ambers, rgba(245,181,42,0.12)); border:1px solid rgba(245,181,42,0.3); }
+.tag-grade.gC { color:var(--loss, var(--red)); background:var(--reds, rgba(255,107,122,0.10)); border:1px solid rgba(255,107,122,0.3); }
+@media (max-width:900px) {
+  .featured-layout { grid-template-columns:1fr; }
+  .featured-left { flex-direction:row; flex-wrap:wrap; justify-content:center; text-align:left; }
+}
+
 .row-summary { display:none; }
 .card.row-mode .row-summary {
   display:grid; cursor:pointer;
@@ -1677,6 +1699,7 @@ nav {
   .hero { padding:100px 20px 50px; }
   #signals-grid { grid-template-columns:1fr; }
   .hero-stats { gap:8px; }
+  .lvl-grid { grid-template-columns:repeat(3,1fr); }
 }
 
 /* ═══════════════════════════════════════════════
@@ -3235,6 +3258,7 @@ function buildCard(c, account, risk, meta) {
 
   // ── Market State block (Markov + HMM) ──
   let stateHTML = '';
+  let stateBadgesSimpleHTML = ''; // lightweight HMM/MK pills only — used in the featured card's left rail
   let cardStateConf = null; // exposed on card root so applyStateFilter() works (bug fix)
   const mkData = ms.markov, hmmData = ms.hmm;
   if (mkData || hmmData) {
@@ -3250,6 +3274,7 @@ function buildCard(c, account, risk, meta) {
     let badges = '';
     if (hmmData) badges += `<span class="state-badge ${hmmData.state}" title="HMM: probabilistic inference">HMM · ${hmmData.state} <span class="state-conf">${Math.round(hmmData.confidence*100)}%</span></span>`;
     if (mkData)  badges += `<span class="state-badge ${mkData.state}" title="Markov: state + transition matrix">MK · ${mkData.state} <span class="state-conf">${Math.round(mkData.confidence*100)}%</span></span>`;
+    stateBadgesSimpleHTML = `<div class="state-badges featured-state-pills">${badges}</div>`;
 
     // Forecast bars for 1d, 3d, 7d
     let forecastHTML = '';
@@ -3546,43 +3571,46 @@ function buildCard(c, account, risk, meta) {
       <span class="rs-exp">▾</span>
     </div>` : '';
 
-  // ── Featured ring — shown only on the #1 ranked "Top Setup" card ──
+  // ── Featured ring + grade tag — shown only on the #1 ranked "Top Setup" card ──
   const ringCirc = 226.2; // 2*pi*36
-  const featuredRingHTML = featured ? `
-    <div class="featured-ring-row">
+  const gradeLetter = conf>=7 ? 'A' : conf>=5 ? 'B' : 'C';
+  const gradeCssCls = isVetoed ? 'gC' : gradeLetter==='A' ? 'gA' : gradeLetter==='B' ? 'gB' : 'gC';
+  const gradeTagLabel = isVetoed ? 'VETOED · NO TRADE' : `GRADE ${gradeLetter} · TRADEABLE`;
+  const featuredRingWrapHTML = featured ? `
       <div class="conf-ring-wrap">
         <svg viewBox="0 0 84 84">
           <circle class="conf-ring-bg" cx="42" cy="42" r="36" stroke-width="7"/>
           <circle class="conf-ring-val" cx="42" cy="42" r="36" stroke-width="7" stroke="${confColor}" stroke-dasharray="${ringCirc}" stroke-dashoffset="${(ringCirc-(ringCirc*confPct/100)).toFixed(1)}"/>
         </svg>
         <div class="conf-ring-center"><b>${conf}</b><span>/ 10</span></div>
-      </div>
-      <span class="featured-tag"><svg class="ic"><use href="#i-zap"/></svg> Top Setup · highest conviction</span>
-    </div>` : '';
+      </div>` : '';
 
-  el.innerHTML=`${rowSummaryHTML}
-    <div class="card-detail"><div class="card-detail-inner">
-    ${featuredRingHTML}
+  // ── Named content blocks — shared between the normal single-column layout
+  //    and the featured two-column layout, so nothing is duplicated or lost ──
+  const chHTML = `
     <div class="ch">
       <div class="ch-left">
         <div class="ch-sym">${base}<span class="q">${quote}</span></div>
         <div class="ch-badges">${exchBadge}${cvBadge}${newsBadge}${chgBadge}${volBadge}${frBadge}${takerBadge}${oiBadge}</div>
       </div>
       <span class="dir-tag ${dir}">${dir.toUpperCase()}</span>
-    </div>
+    </div>`;
 
+  const confBoxHTML = `
     <div class="conf-box">
       <div class="conf-row">
         <span class="conf-lbl">Confidence Score</span>
         <span class="conf-num" style="color:${confColor}">${conf}<span class="conf-denom">/10</span></span>${(()=>{const g=(c.price_action||{}).confluence_grade;if(!g)return '';const gc=g==='A+'?'pa-grade-ap':g==='A'?'pa-grade-a':g==='B'?'pa-grade-b':g==='C'?'pa-grade-c':'pa-grade-d';return `<span class="pa-conf-grade ${gc}">${g}</span>`;})()}
       </div>
       <div class="conf-bar"><div class="conf-fill ${confCls}" style="width:${confPct}%"></div></div>
-    </div>
+    </div>`;
 
+  const tfBlockHTML = `
     ${vetoBanner}
     <div class="tf-row">${tfHTML}</div>
-    <div class="rule"></div>
+    <div class="rule"></div>`;
 
+  const lvlGridHTML = `
     <div class="lvl-grid">
       ${(()=>{
         // Dollar P&L at each level using recommended leverage
@@ -3602,22 +3630,20 @@ function buildCard(c, account, risk, meta) {
       <div class="lvl tp">  <div class="lvl-lbl">TP 2</div><div class="lvl-val">${sf(lv.tp2)}</div>${fmt(pTP2)}</div>
       <div class="lvl tp">  <div class="lvl-lbl">TP 3</div><div class="lvl-val">${sf(lv.tp3)}</div>${fmt(pTP3)}</div>`;
       })()}
-    </div>
+    </div>`;
 
+  const szStripHTML = `
     <div class="sz-strip">
       <div class="sz-item"><div class="sz-lbl">Risk $</div><div class="sz-val">${fu(sz.risk_usd)}</div></div>
       <div class="sz-item"><div class="sz-lbl">BingX qty</div><div class="sz-val">${sz.units??'—'}<span style="display:block;font-size:9px;color:var(--warn);font-weight:700;margin-top:1px">← enter on BingX</span></div></div>
       <div class="sz-item"><div class="sz-lbl">Notional</div><div class="sz-val">${fu(sz.notional)}</div></div>
-    </div>
-
-    ${probHTML}${levHTML}${durHTML}${stateHTML}${btHTML}${buildLiveAccPanel(sym)}
-    ${narr?`<div class="narr">${narr}</div>`:''}
-    <div class="rule"></div>
+    </div>`;
 
-    <div class="ev-title">Score Breakdown — ${c.pa_available ? '35/20/15/15/15' : '40/20/20/20'}</div>
-    ${evHTML}
-    ${buildPriceActionSection(c)}
+  const narrHTML = `${narr?`<div class="narr">${narr}</div>`:''}<div class="rule"></div>`;
+  const evTitleHTML = `<div class="ev-title">Score Breakdown — ${c.pa_available ? '35/20/15/15/15' : '40/20/20/20'}</div>${evHTML}`;
+  const priceActionHTML = buildPriceActionSection(c);
 
+  const cardActsHTML = `
     <div class="card-acts">
       <a class="ca ca-chart" href="${tvUrl}" target="_blank" rel="noopener">
         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
@@ -3630,7 +3656,43 @@ function buildCard(c, account, risk, meta) {
       <button class="ca ca-ref" data-sym="${sym}" data-acc="${account}" data-risk="${risk}" data-rank="${rank??''}" data-featured="${featured?'1':'0'}" title="Refresh this card">
         <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
       </button>
-    </div>
+    </div>`;
+
+  // ── Featured cards: two-column layout (ring/grade/state/score rail + main content).
+  //    Non-featured cards: original single-column stacked layout, unchanged. ──
+  const bodyHTML = featured ? `
+    <div class="featured-layout">
+      <div class="featured-left">
+        ${featuredRingWrapHTML}
+        <span class="tag-grade ${gradeCssCls}">${gradeTagLabel}</span>
+        ${stateBadgesSimpleHTML}
+        <div class="panel">${evTitleHTML}</div>
+      </div>
+      <div class="featured-right">
+        ${chHTML}
+        ${tfBlockHTML}
+        ${lvlGridHTML}
+        ${szStripHTML}
+        ${probHTML}${levHTML}${durHTML}${stateHTML}${btHTML}${buildLiveAccPanel(sym)}
+        ${narrHTML}
+        ${priceActionHTML}
+        ${cardActsHTML}
+      </div>
+    </div>` : `
+    ${chHTML}
+    ${confBoxHTML}
+    ${tfBlockHTML}
+    ${lvlGridHTML}
+    ${szStripHTML}
+    ${probHTML}${levHTML}${durHTML}${stateHTML}${btHTML}${buildLiveAccPanel(sym)}
+    ${narrHTML}
+    ${evTitleHTML}
+    ${priceActionHTML}
+    ${cardActsHTML}`;
+
+  el.innerHTML=`${rowSummaryHTML}
+    <div class="card-detail"><div class="card-detail-inner">
+    ${bodyHTML}
     </div></div>`;
 
   if (isRowMode) {