/*
 * InvestNow Browse — widget styles.
 * Scoped entirely under #cb-app. Light mode paints its own light surface;
 * dark mode (the default) now paints its own dark surface so the widget is
 * self-contained on any page background.
 */
#cb-app{--steel:#7FA8D9;--ink:#F5F8FC;--faint:#3A5882;--card:#1D3E6B;--dim:#C9D8EE; --up:#7FD9A8;--down:#E8A0A0;--panel:#0C1E38;--rowbg:rgba(29,62,107,.45);--spark:#7FA8D9; color:var(--ink);font-size:16px} #cb-app.light{--steel:#3D6FB0;--ink:#173359;--faint:#B9CBE4;--card:#FFFFFF;--dim:#4A6285; --up:#1E7A4B;--down:#B54545;--panel:#E7EEF8;--rowbg:#FFFFFF;--spark:#3D6FB0; background:#F5F8FC;border-radius:14px;padding:1rem} #cb-app *{box-sizing:border-box} #cb-app .cb-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 .9rem;align-items:center} #cb-app input[type=search],#cb-app select{background:var(--card);border:1px solid var(--faint); color:var(--ink);border-radius:8px;padding:.5rem .7rem;font-size:.9rem} #cb-app input[type=search]{min-width:220px} #cb-app .cb-reset{border:1px solid var(--faint);background:transparent;color:var(--dim); border-radius:8px;padding:.5rem .8rem;font-size:.85rem;cursor:pointer} #cb-app .cb-reset:hover{border-color:var(--steel);color:var(--steel)} #cb-app .cb-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem} #cb-app .cb-chip{border:1px solid var(--faint);border-radius:999px;padding:.3rem .8rem; font-size:.82rem;color:var(--dim);cursor:pointer;background:transparent} #cb-app .cb-chip.on{border-color:var(--steel);color:var(--steel);background:rgba(127,168,217,.12)} #cb-app .cb-count{color:var(--dim);font-size:.85rem;margin-left:auto} #cb-app .cb-rows{display:flex;flex-direction:column;gap:.55rem} #cb-app .cb-row{border:1.5px solid var(--faint);border-radius:12px;background:var(--rowbg); cursor:pointer;transition:border-color .15s} #cb-app .cb-row:hover,#cb-app .cb-row.open{border-color:var(--steel)} #cb-app .cb-row.open{background:var(--card)} #cb-app .cb-rhead{display:grid;grid-template-columns:38px 1.5fr .95fr .7fr .7fr .8fr 1fr .85fr; gap:.7rem;align-items:center;padding:.7rem 1rem;font-size:.88rem} #cb-app .cb-logo{width:32px;height:32px;border-radius:7px;background:rgba(127,168,217,.18); color:var(--steel);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem} #cb-app .cb-name{font-weight:700} #cb-app .cb-sec{color:var(--dim);font-size:.76rem;font-weight:400} #cb-app .cb-num{font-variant-numeric:tabular-nums} #cb-app .cb-chg.up{color:var(--up)}#cb-app .cb-chg.down{color:var(--down)} #cb-app .cb-depth{font-size:.7rem;border-radius:5px;padding:.12rem .4rem;display:inline-block} #cb-app .cb-depth.rich{background:rgba(127,217,168,.15);color:var(--up)} #cb-app .cb-depth.moderate{background:rgba(127,168,217,.15);color:var(--steel)} #cb-app .cb-depth.thin{background:rgba(232,160,160,.12);color:var(--down)} #cb-app .cb-na{color:var(--faint);font-style:italic;font-size:.82rem} #cb-app .cb-spark{height:26px;width:100%;color:var(--spark)} #cb-app .cb-tier{font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;border-radius:4px; padding:.08rem .35rem;margin-left:.4rem;vertical-align:middle} #cb-app .cb-tier.company{background:rgba(127,217,168,.2);color:var(--up)} #cb-app .cb-tier.press{background:rgba(127,168,217,.22);color:var(--steel)} #cb-app .cb-tier.reported{background:rgba(58,88,130,.32);color:var(--dim)} #cb-app .cb-head{color:var(--dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em; display:grid;grid-template-columns:38px 1.5fr .95fr .7fr .7fr .8fr 1fr .85fr;gap:.7rem;padding:.2rem 1rem .5rem} #cb-app .cb-detail{display:none;border-top:1px solid var(--faint);padding:1rem;gap:1.2rem} #cb-app .cb-row.open .cb-detail{display:grid;grid-template-columns:1.2fr 1fr 1fr} #cb-app .cb-d h4{font-size:.78rem;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .5rem} #cb-app .cb-d p,#cb-app .cb-d li{font-size:.85rem;color:var(--dim);line-height:1.5} #cb-app .cb-d ul{padding-left:1rem;margin:.3rem 0} #cb-app .cb-d a.cb-site{display:inline-block;margin-top:.5rem;font-weight:600;color:var(--steel)} #cb-app .cb-prov{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--steel); border:1px solid var(--faint);border-radius:8px;padding:.5rem .7rem;margin-top:.6rem;line-height:1.5} #cb-app .cb-src{font-size:.72rem;color:var(--faint);margin-top:.5rem;font-style:italic} #cb-app .cb-btnrow{margin-top:.8rem;display:flex;gap:.5rem;flex-wrap:wrap} #cb-app button.cb-act,#cb-app a.cb-act{border:1px solid var(--steel);background:transparent; color:var(--steel);border-radius:8px;padding:.45rem .8rem;font-size:.82rem;cursor:pointer;text-decoration:none} #cb-app button.cb-act[disabled]{opacity:.45;cursor:not-allowed} #cb-app .cb-more{margin:1rem auto;display:block} #cb-app .cb-tray{position:fixed;bottom:0;left:0;right:0;background:var(--panel); border-top:1px solid var(--steel);padding:.7rem 4vw;display:none;gap:1rem;align-items:center; font-size:.85rem;z-index:50;flex-wrap:wrap} #cb-app .cb-tray.on{display:flex} #cb-app .cb-slot{border:1px solid var(--faint);border-radius:8px;padding:.35rem .7rem;color:var(--dim)} #cb-app .cb-slot b{color:var(--ink)} #cb-app .cb-empty{border:1.5px dashed var(--faint);border-radius:12px;padding:1.6rem; text-align:center;color:var(--dim);font-size:.9rem} #cb-app .cb-mode{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--dim)} #cb-app .cb-switch{width:44px;height:24px;border-radius:999px;border:1.5px solid var(--steel); background:transparent;position:relative;cursor:pointer;padding:0} #cb-app .cb-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px; border-radius:50%;background:var(--steel);transition:left .2s} #cb-app.light .cb-switch::after{left:22px} @media(max-width:960px){#cb-app .cb-rhead,#cb-app .cb-head{grid-template-columns:34px 1.4fr .9fr 1fr} #cb-app .cb-rhead>:nth-child(n+5),#cb-app .cb-head>:nth-child(n+5){display:none} #cb-app .cb-row.open .cb-detail{grid-template-columns:1fr}}
/* Dark mode is the default state (no .light class). Give it a solid dark
   surface mirroring the light-mode treatment, so rows and headers are
   legible on a light page background instead of washing out. */
#cb-app:not(.light){background:#102644;border-radius:14px;padding:1rem}

/* Loading state shown while live data is retrieved (v1.1.0). */
#cb-app .cb-loading{display:flex;align-items:center;gap:1rem;border:1.5px solid var(--faint);border-radius:12px;background:var(--card);padding:1.4rem 1.6rem;color:var(--dim);font-size:.95rem;line-height:1.5}
#cb-app .cb-loading b{color:var(--ink)}
#cb-app .cb-spin{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:3px solid var(--faint);border-top-color:var(--steel);animation:cb-rot 0.9s linear infinite}
@keyframes cb-rot{to{transform:rotate(360deg)}}