/* ── Options Pro AI · Frontend Shortcode ── */
.opa-fe {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    color: #111827;
}

/* Header */
.opa-fe-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f3f4f6;
}
.opa-fe-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}
.opa-fe-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

/* Section label */
.opa-fe-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

/* Grid */
.opa-fe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Card */
.opa-fe-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-top: 4px solid #9ca3af;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.opa-fe-card.call  { border-top-color: #22c55e; }
.opa-fe-card.put   { border-top-color: #ef4444; }
.opa-fe-card.no_trade { border-top-color: #9ca3af; }

/* Card top row — badge + risk */
.opa-fe-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.opa-fe-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}
.opa-fe-badge.call     { background: #22c55e; color: #fff; }
.opa-fe-badge.put      { background: #ef4444; color: #fff; }
.opa-fe-badge.no_trade { background: #9ca3af; color: #fff; }
.opa-fe-risk {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}

/* Symbol & price */
.opa-fe-sym {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}
.opa-fe-price {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pre/after market */
.opa-fe-pm {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f9fafb;
    border-radius: 6px;
    padding: 5px 8px;
}
.opa-fe-pm-label {
    font-weight: 700;
    color: #374151;
}
.opa-fe-pm-price {
    font-weight: 600;
    color: #111827;
}

/* Score pills */
.opa-fe-pills {
    display: flex;
    gap: 6px;
}
.opa-fe-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 8px;
}
.opa-fe-pill-c { background: rgba(34,197,94,.12);  color: #16a34a; }
.opa-fe-pill-p { background: rgba(239,68,68,.12);  color: #dc2626; }

/* Confidence bar */
.opa-fe-bar-wrap {
    height: 4px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}
.opa-fe-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .4s;
}
.opa-fe-conf {
    font-size: 11px;
    color: #6b7280;
}

/* 2-col data grid */
.opa-fe-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.opa-fe-cell {
    background: #f9fafb;
    border-radius: 8px;
    padding: 7px 10px;
}
.opa-fe-cell-l {
    font-size: 9px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}
.opa-fe-cell-v {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

/* Factors */
.opa-fe-factors {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.opa-fe-for, .opa-fe-ag {
    font-size: 11px;
    line-height: 1.5;
    color: #4b5563;
}

/* Rationale */
.opa-fe-rat {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 10px;
}

/* AI text */
.opa-fe-ai {
    font-size: 11px;
    line-height: 1.7;
    color: #1d4ed8;
    background: rgba(59,130,246,.06);
    border-radius: 6px;
    padding: 9px 11px;
}
.opa-fe-ai strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

/* Empty state */
.opa-fe-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
.opa-fe-empty-icon { font-size: 40px; display: block; margin-bottom: 10px; opacity: .4; }
.opa-fe-empty-t { font-size: 16px; font-weight: 600; color: #6b7280; margin-bottom: 5px; }
.opa-fe-empty-s { font-size: 13px; }

/* Disclaimer */
.opa-fe-disc {
    font-size: 11px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
    .opa-fe-grid { grid-template-columns: 1fr; }
    .opa-fe-title { font-size: 18px; }
}

/* ══════════════════════════════════════════
   SHARED NEWS WRAPPER
══════════════════════════════════════════ */
.opa-fe-news-wrap {
    margin-top: 40px;
    border-top: 2px solid #f3f4f6;
    padding-top: 28px;
}
.opa-fe-news-header  { margin-bottom: 16px; }
.opa-fe-news-title   { font-size: 20px; font-weight: 800; color: #111827; }
.opa-fe-news-sub     { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.opa-fe-news-empty   {
    background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 10px;
    padding: 20px; text-align: center; font-size: 13px; color: #9ca3af; line-height: 1.7;
}
.opa-fe-news-empty strong { color: #6b7280; }

/* ── Clickable card ── */
.opa-fe-card {
    transition: transform .15s, box-shadow .15s;
}
.opa-fe-card:active {
    transform: scale(.98);
}
.opa-fe-tap-hint {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
    margin-top: -4px;
    margin-bottom: 2px;
}

/* ── GENERAL MARKET NEWS (Groq) ── */
.opa-fe-gen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.opa-fe-gen-item   { border-radius: 8px; padding: 12px 14px; }
.opa-fe-gen-cat    { font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 5px; }
.opa-fe-gen-row    { display: flex; align-items: flex-start; gap: 6px; }
.opa-fe-gen-icon   { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.opa-fe-gen-t      { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.4; }
.opa-fe-gen-s      { font-size: 12px; color: #4b5563; line-height: 1.5; margin-top: 5px; padding-left: 19px; }
.opa-fe-gen-footer {
    font-size: 11px; color: #9ca3af; text-align: center;
    padding: 8px; background: #f9fafb; border-radius: 8px;
}

/* ── STOCK NEWS (per ticker) ── */
.opa-fe-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.opa-fe-news-col {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    scroll-margin-top: 80px;   /* offset for sticky nav */
    transition: box-shadow .3s;
}
.opa-fe-news-sym {
    font-size: 15px; font-weight: 800; color: #111827;
    padding-bottom: 8px; border-bottom: 2px solid #f3f4f6;
}
.opa-fe-news-item  { border-radius: 7px; padding: 9px 11px; }
.opa-fe-news-row   { display: flex; align-items: flex-start; gap: 6px; }
.opa-fe-news-icon  { font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.opa-fe-news-t     { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.45; }
.opa-fe-news-s     { font-size: 11px; color: #6b7280; line-height: 1.5; margin-top: 4px; padding-left: 18px; }
.opa-fe-news-meta  { display: flex; justify-content: space-between; margin-top: 5px; padding-left: 18px; }
.opa-fe-news-src   { font-size: 10px; font-weight: 600; color: #9ca3af; }
.opa-fe-news-dt    { font-size: 10px; color: #d1d5db; }

/* ── STICKY NAV BAR ── */
.opa-fe-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(17,24,39,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    white-space: nowrap;
}
.opa-fe-nav.opa-fe-nav-visible {
    opacity: 1;
    pointer-events: auto;
}
.opa-fe-nav-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 30px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.opa-fe-nav-btn:hover,
.opa-fe-nav-btn:active {
    background: rgba(255,255,255,.25);
}
@media (max-width: 380px) {
    .opa-fe-nav     { gap: 5px; padding: 7px 8px; bottom: 12px; }
    .opa-fe-nav-btn { font-size: 11px; padding: 6px 9px; }
}

/* ══════════════════════════════════════════
   SENTIMENT BAR
══════════════════════════════════════════ */
.opa-fe-sentiment-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.opa-fe-sent-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all .2s;
}
/* Active states — vivid colors */
.opa-fe-sent-item.active-bull {
    color: #fff;
    background: #22c55e;
    box-shadow: 0 2px 8px rgba(34,197,94,.35);
}
.opa-fe-sent-item.active-bear {
    color: #fff;
    background: #ef4444;
    box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
.opa-fe-sent-item.active-flat {
    color: #fff;
    background: #f59e0b;
    box-shadow: 0 2px 8px rgba(245,158,11,.35);
}
/* Inactive — light grey, faded */
.opa-fe-sent-item.inactive {
    color: #cbd5e1;
    background: #f1f5f9;
}
.opa-fe-sent-count {
    font-size: 10px;
    font-weight: 800;
    opacity: .85;
    background: rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 1px 5px;
}
.opa-fe-sent-item.inactive .opa-fe-sent-count {
    background: rgba(0,0,0,.06);
}
.opa-fe-sent-sep {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 300;
}

.opa-fe-trend-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin: 12px 0 8px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* ── PM extra fields ── */
.opa-fe-pm-chg { font-weight: 700; }
.opa-fe-pm-vs  { font-size: 10px; color: #94a3b8; white-space: nowrap; }

/* ══════════════════════════════════════════
   OIL PRICE TICKER BAR — WTI + Brent
══════════════════════════════════════════ */
.opa-fe-oil-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.opa-fe-oil-icon { font-size: 22px; flex-shrink: 0; }
.opa-fe-oil-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.opa-fe-oil-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.opa-fe-oil-price {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}
.opa-fe-oil-chg {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.opa-fe-oil-divider {
    color: #334155;
    font-size: 18px;
    font-weight: 300;
}
.opa-fe-oil-src {
    font-size: 10px;
    color: #334155;
    margin-left: auto;
    white-space: nowrap;
}
@media (max-width: 520px) {
    .opa-fe-oil-bar    { gap: 10px; padding: 10px 12px; }
    .opa-fe-oil-price  { font-size: 15px; }
    .opa-fe-oil-src    { display: none; }
    .opa-fe-oil-divider{ display: none; }
    .opa-fe-oil-item   { gap: 5px; }
}

/* Symbol navigation */

.opa-fe-card:target{outline:3px solid rgba(59,130,246,.22);scroll-margin-top:90px}

/* ═══════════════════════════════════════════════════
   SYMBOL NAV — Filter row + colored chips
   Matches the screenshot design exactly
═══════════════════════════════════════════════════ */

/* Outer wrapper */
.opa-sym-wrap {
    margin: 14px 0 6px;
    padding: 0 2px;
}

/* ── Filter row (All / Bullish N | Bearish N | Neutral) ── */
.opa-sym-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.opa-filt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .18s;
    background: #f3f4f6;
    color: #6b7280;
    white-space: nowrap;
    line-height: 1;
}

/* Dot indicator inside filter button */
.opa-filt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.opa-filt-dot-all  { background: #9ca3af; }
.opa-filt-dot-call { background: #16a34a; }
.opa-filt-dot-put  { background: #dc2626; }
.opa-filt-dot-flat { background: #9ca3af; }

/* Count badge inside filter button */
.opa-filt-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,.08);
    color: inherit;
}

/* Separator */
.opa-filt-sep {
    color: #d1d5db;
    font-size: 16px;
    user-select: none;
    padding: 0 2px;
}

/* Default state */
.opa-filt-btn:hover { background: #e5e7eb; color: #374151; }

/* ACTIVE states — match screenshot */
.opa-filt-all.active,  .opa-filt-all:focus-visible  {
    background: #111827; color: #fff; border-color: #111827;
}
.opa-filt-all.active .opa-filt-dot-all { background: #fff; }
.opa-filt-all.active .opa-filt-count   { background: rgba(255,255,255,.2); }

.opa-filt-call.active, .opa-filt-call:focus-visible {
    background: #16a34a; color: #fff; border-color: #16a34a;
}
.opa-filt-call.active .opa-filt-dot-call { background: #fff; }
.opa-filt-call.active .opa-filt-count    { background: rgba(255,255,255,.25); }

.opa-filt-put.active,  .opa-filt-put:focus-visible  {
    background: #dc2626; color: #fff; border-color: #dc2626;
}
.opa-filt-put.active .opa-filt-dot-put { background: #fff; }
.opa-filt-put.active .opa-filt-count   { background: rgba(255,255,255,.25); }

.opa-filt-flat.active, .opa-filt-flat:focus-visible {
    background: #6b7280; color: #fff; border-color: #6b7280;
}

/* ── Symbol chips row ────────────────────────────── */
.opa-sym-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    padding: 2px 0 4px !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Base chip — strong override of theme button styles */
.opa-fe button.opa-chip,
button.opa-chip,
.opa-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    border-width: 2px !important;
    border-style: solid !important;
    cursor: pointer !important;
    transition: all .16s !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    user-select: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: auto !important;
}

/* CALL chip — green */
.opa-fe button.opa-chip-call,
button.opa-chip-call,
.opa-chip-call {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}
.opa-chip-call:hover {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.25) !important;
}

/* PUT chip — red/pink */
.opa-fe button.opa-chip-put,
button.opa-chip-put,
.opa-chip-put {
    background: #fff1f2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
.opa-chip-put:hover {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220,38,38,.25) !important;
}

/* NEUTRAL chip — gray */
.opa-fe button.opa-chip-neutral,
button.opa-chip-neutral,
.opa-chip-neutral {
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
}
.opa-chip-neutral:hover {
    background: #374151 !important;
    color: #fff !important;
    border-color: #374151 !important;
    transform: translateY(-1px) !important;
}

/* Selected chip */
.opa-chip.opa-chip-selected {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px !important;
}

/* Hidden card when filtered */
.opa-fe-card.opa-hidden { display: none !important; }

/* ── Memory badge on cards ───────────────────────── */
.opa-mem-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #0369a1;
    margin-top: 6px;
}
.opa-mem-badge.opa-mem-hot {
    background: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
}


/* ══════════════════════════════════════════════════════
   MARKET SEMAPHORE — v9
══════════════════════════════════════════════════════ */
.opa-semaphore {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid transparent;
}
.opa-sem-green  { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #86efac; }
.opa-sem-red    { background: linear-gradient(135deg,#fff1f2,#fee2e2); border-color: #fca5a5; }
.opa-sem-yellow { background: linear-gradient(135deg,#fefce8,#fef9c3); border-color: #fde047; }

.opa-sem-left   { display: flex; align-items: center; gap: 8px; }
.opa-sem-light  { font-size: 22px; line-height: 1; }
.opa-sem-label  { font-size: 14px; font-weight: 800; letter-spacing: .02em; }

.opa-sem-tickers { display: flex; gap: 14px; margin-left: auto; }
.opa-sem-tick   { display: flex; gap: 5px; align-items: center; font-size: 13px; }
.opa-sem-sep    { opacity: .4; }

.opa-sem-wr     { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; }
.opa-sem-wr-label { opacity: .7; }
.opa-sem-wr-sub { opacity: .6; font-size: 11px; }

@media (max-width: 600px) {
    .opa-semaphore { flex-direction: column; align-items: flex-start; }
    .opa-sem-tickers { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════
   WIN RATE BADGE — per symbol card — v9
══════════════════════════════════════════════════════ */
.opa-wr-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    margin: 6px 0 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}
.opa-wr-hot     { background: rgba(34,197,94,.12);  border-color: #86efac; color: #15803d; }
.opa-wr-ok      { background: rgba(251,191,36,.12); border-color: #fde047; color: #854d0e; }
.opa-wr-cold    { background: rgba(239,68,68,.10);  border-color: #fca5a5; color: #dc2626; }
.opa-wr-learning{ background: rgba(99,102,241,.08); border-color: #c7d2fe; color: #4338ca; }

.opa-wr-main    { font-size: 12px; font-weight: 700; }
.opa-wr-streak  { letter-spacing: 2px; font-size: 13px; }
.opa-wr-detail  { opacity: .85; font-size: 10.5px; }
.opa-wr-qual    { opacity: .75; font-size: 10px; margin-left: auto; }

/* ══════════════════════════════════════════════════════
   CONFLUENCE + R/R BADGES — v10
══════════════════════════════════════════════════════ */
.opa-confluence-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 11px;
    font-weight: 600;
}
.opa-conf-item {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.opa-conf-ok   { background: rgba(34,197,94,.12); border-color: #86efac; color: #15803d; }
.opa-conf-warn { background: rgba(251,191,36,.12); border-color: #fde047; color: #854d0e; }

.opa-rr-badge {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
}
.opa-rr-ok  { background: rgba(34,197,94,.12); border-color: #86efac; color: #15803d; }
.opa-rr-low { background: rgba(239,68,68,.10); border-color: #fca5a5; color: #dc2626; }