/* =========================================================
   MONEYFY PENNY STOCKS — HOMEPAGE
   Visual direction: navy / royal blue / yellow / green
   Inspired by the supplied reference layout.
   ========================================================= */

:root {
    --navy: #061936;
    --navy-2: #082450;
    --navy-3: #0b2d63;
    --blue: #1265df;
    --blue-light: #3ca9ff;
    --cyan: #22d3ee;
    --green: #18b84b;
    --green-bright: #39e54c;
    --yellow: #ffc400;
    --yellow-2: #ffdf36;
    --red: #ef4444;
    --white: #ffffff;
    --ink: #101b31;
    --muted: #61708b;
    --line: #d8e1ee;
    --soft: #f4f7fb;
    --panel: #ffffff;
    --shadow: 0 8px 24px rgba(12, 34, 70, .10);
    --radius: 12px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #eef3f9;
    line-height: 1.45;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.container {
    width: min(1480px, calc(100% - 56px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    background:
        linear-gradient(110deg, #06152f 0%, #071f49 55%, #061631 100%);
    color: white;
    border-bottom: 1px solid rgba(90, 160, 255, .28);
}

.header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    width: 180px;
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-main {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -1.8px;
    color: #fff;
}

.brand-main span {
    color: #8bd42c;
}

.brand-sub {
    font-size: 11px;
    color: #d5deef;
    margin-top: 3px;
}

.main-nav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex: 1;
    height: 72px;
}

.main-nav a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: #f0f4fc;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--yellow);
}

.main-nav a.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--yellow);
}

.header-search {
    width: 395px;
    height: 48px;
    display: flex;
    border: 2px solid #9adf24;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(0, 0, 0, .20);
    box-shadow: 0 0 0 2px rgba(154, 223, 36, .06);
}

.header-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 16px;
    background: transparent;
    color: #fff;
}

.header-search input::placeholder {
    color: #e3e8f1;
}

.header-search button {
    width: 55px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .10);
    color: var(--yellow);
    background: rgba(0, 0, 0, .20);
    font-size: 28px;
    cursor: pointer;
}

.mobile-menu-btn {
    display: none;
    color: white;
    background: transparent;
    border: 0;
    font-size: 26px;
}


/* =========================================================
   MARKET WATCH
   ========================================================= */

.market-watch {
    background: #061631;
    color: #fff;
    border-bottom: 1px solid #173e75;
}

.market-watch-inner {
    min-height: 52px;
    display: flex;
    align-items: stretch;
}

.market-status,
.market-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 19px;
    border-right: 1px solid rgba(99, 154, 220, .30);
}

.market-status {
    min-width: 305px;
}

.market-time {
    font-size: 12px;
    color: #c8d5e8;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #19c84b;
    box-shadow: 0 0 0 5px rgba(25, 200, 75, .10);
}

.market-item strong {
    font-size: 13px;
}

.market-item span {
    font-size: 15px;
    font-weight: 800;
}

.market-item small {
    font-size: 10px;
    color: #c6d2e4;
    display: block;
    margin-left: -5px;
}

.positive {
    color: var(--green-bright);
}

.confidence-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    min-width: 180px;
}

.confidence-item span {
    color: var(--green-bright);
}

.shield-icon {
    margin-left: auto;
    width: 58px;
    display: grid;
    place-items: center;
    color: #59e735;
    font-size: 30px;
    font-weight: 900;
}


/* =========================================================
   HERO DASHBOARD
   ========================================================= */

.hero-dashboard {
    background: #061a39;
    padding: 9px 0 14px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(460px, 1fr);
    gap: 12px;
}

.hero-panel,
.top-pick-panel {
    min-height: 330px;
    position: relative;
    overflow: hidden;
    border: 1px solid #15509c;
    border-radius: 11px;
    background: linear-gradient(120deg, #071b3c, #082858 68%, #061b3a);
}

.hero-panel {
    padding: 25px 28px 18px;
}

.chart-bg {
    position: absolute;
    inset: 0;
    opacity: .55;
    background:
        linear-gradient(rgba(24, 107, 202, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 107, 202, .13) 1px, transparent 1px);
    background-size: 30px 30px;
}

.chart-bg::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: 5%;
    width: 64%;
    height: 66%;
    opacity: .45;
    background:
        linear-gradient(145deg,
            transparent 0 12%,
            rgba(24, 210, 238, .22) 12.5% 13%,
            transparent 13.5% 24%,
            rgba(25, 200, 75, .25) 24.5% 25%,
            transparent 25.5% 42%,
            rgba(42, 139, 255, .28) 42.5% 43%,
            transparent 43.5% 55%,
            rgba(25, 200, 75, .28) 55.5% 56%,
            transparent 56.5% 68%,
            rgba(42, 139, 255, .30) 68.5% 69%,
            transparent 69.5%),
        linear-gradient(to top, rgba(22, 104, 208, .30), transparent);
    clip-path: polygon(0 85%, 7% 73%, 14% 78%, 22% 55%, 30% 64%, 38% 42%, 45% 50%, 54% 31%, 63% 38%, 71% 18%, 80% 28%, 89% 5%, 100% 17%, 100% 100%, 0 100%);
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 610px;
}

.hero-eyebrow {
    color: #b8e73b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.hero-copy h1 {
    color: white;
    margin: 8px 0 9px;
    font-size: clamp(35px, 4vw, 54px);
    line-height: .98;
    letter-spacing: -2px;
}

.hero-copy h1 strong {
    display: block;
    color: var(--yellow);
    font-weight: 900;
}

.hero-copy p {
    max-width: 480px;
    margin: 0 0 17px;
    color: #f1f5fc;
    font-size: 16px;
    font-weight: 500;
}

.hero-search {
    height: 52px;
    width: min(610px, 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid #42dc67;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
}

.search-icon {
    color: #71809a;
    font-size: 25px;
    padding-left: 14px;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 12px;
    color: #13203b;
}

.hero-search button {
    height: 100%;
    width: 100px;
    border: 0;
    background: linear-gradient(180deg, #26c943, #13a92f);
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.search-results {
    position: absolute;
    z-index: 20;
    width: min(610px, 100%);
}

.hero-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
    max-width: 790px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 0 16px;
    border-right: 1px solid rgba(103, 163, 231, .42);
}

.hero-stat:first-child {
    padding-left: 3px;
}

.hero-stat:last-child {
    border-right: 0;
}

.stat-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: white;
    font-size: 22px;
    font-weight: 900;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #2d92ff, #1152ce);
}

.stat-icon.green {
    background: linear-gradient(135deg, #20c94a, #079329);
}

.stat-icon.yellow {
    color: #111b30;
    background: linear-gradient(135deg, #ffe01e, #f3ad00);
}

.hero-stat strong {
    display: block;
    color: white;
    font-size: 27px;
    line-height: 1;
}

.hero-stat span:not(.stat-icon) {
    display: block;
    margin-top: 3px;
    color: #eef4fd;
    font-size: 13px;
    line-height: 1.12;
    font-weight: 600;
}


/* =========================================================
   TOP PICK
   ========================================================= */

.top-pick-panel {
    padding: 17px 21px;
    border-color: #278d35;
    background:
        radial-gradient(circle at 95% 5%, rgba(30, 212, 73, .10), transparent 35%),
        linear-gradient(135deg, #071b3d, #06152f);
}

.pick-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-size: 18px;
    font-weight: 900;
    border-bottom: 1px solid rgba(48, 170, 79, .35);
    padding-bottom: 13px;
}

.pick-topline b {
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 6px;
    color: white;
    background: #079c2b;
}

.featured-stock {
    color: white;
    height: calc(100% - 52px);
    display: flex;
    align-items: center;
}

.featured-stock > * {
    width: 100%;
}

.featured-stock .loading,
.loading {
    padding: 30px;
    text-align: center;
    color: #6d7b91;
}

.top-pick-panel .featured-stock {
    color: white;
}

.top-pick-panel .stock-name,
.top-pick-panel .featured-title {
    color: white;
}

.top-pick-panel .price,
.top-pick-panel .featured-price {
    color: white;
}


/* =========================================================
   CONTENT AREA
   ========================================================= */

.dashboard-content {
    padding: 0 0 14px;
    background: #eef3f9;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(460px, 1fr);
    gap: 12px;
}

.dashboard-left,
.dashboard-right {
    min-width: 0;
}

.data-panel,
.score-panel,
.explore-panel,
.info-panel,
.mini-panel {
    background: #fff;
    border: 1px solid #d8e1ec;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(14, 35, 70, .06);
}

.data-panel {
    overflow: hidden;
}

.panel-heading {
    min-height: 60px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.panel-heading.compact {
    min-height: 44px;
}

.panel-kicker {
    display: block;
    color: #158a2f;
    font-size: 12px;
    font-weight: 900;
}

.panel-heading h2,
.info-panel h2,
.explore-panel h2,
.mini-panel h2 {
    margin: 1px 0 0;
    color: #111b31;
    font-size: 17px;
    line-height: 1.1;
}

.panel-link,
.outline-btn,
.small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8ca9cf;
    border-radius: 6px;
    padding: 7px 11px;
    color: #0b4eb2;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.panel-link:hover,
.outline-btn:hover,
.small-btn:hover {
    border-color: #1565d8;
    color: #fff;
    background: #1565d8;
}


/* =========================================================
   STOCK TABLE
   ========================================================= */

.stock-grid {
    overflow-x: auto;
    padding: 0 13px 10px;
}

/*
 * These styles cover the table/card markup produced by app.js.
 * If app.js outputs its existing stock cards, the visual treatment
 * will still remain compact and dashboard-like.
 */

.stock-grid table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.stock-grid th {
    padding: 9px 10px;
    text-align: left;
    background: #f1f4f8;
    color: #34445e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.stock-grid td {
    padding: 9px 10px;
    border-top: 1px solid #e2e7ee;
    font-size: 13px;
    color: #18243b;
}

.stock-grid tr:hover td {
    background: #f7fbff;
}

.stock-card {
    background: #fff;
    border-bottom: 1px solid #e0e6ef;
    padding: 10px 12px;
}

.stock-card:last-child {
    border-bottom: 0;
}

.signal-buy,
.buy,
.stock-card .buy {
    color: #0b7d2c;
}

.signal-hold,
.hold,
.stock-card .hold {
    color: #a86800;
}


/* =========================================================
   LOWER PANELS
   ========================================================= */

.lower-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.info-panel {
    min-height: 190px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.info-panel p {
    max-width: 410px;
    margin: 11px 0 17px;
    color: #52627a;
    font-size: 13px;
}

.why-panel ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 13px;
}

.why-panel li {
    margin: 6px 0;
    font-size: 12px;
    font-weight: 600;
}

.why-panel li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    border-radius: 4px;
    color: white;
    background: #1db647;
    font-weight: 900;
}

.decorative-bull {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 78px;
    color: #d8f4df;
    transform: rotate(-10deg);
}

.growth-graphic {
    position: absolute;
    right: 18px;
    bottom: 10px;
    width: 205px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 10px;
    border-bottom: 2px solid #a8bad3;
}

.growth-graphic span {
    width: 22px;
    display: block;
    background: linear-gradient(to top, #1671dd, #3db9ff);
}

.growth-graphic span:nth-of-type(4),
.growth-graphic span:nth-of-type(5),
.growth-graphic span:nth-of-type(6) {
    background: linear-gradient(to top, #15a93c, #b2d92e);
}

.growth-graphic b {
    position: absolute;
    right: 6px;
    top: -18px;
    color: #f1bd00;
    font-size: 52px;
}


/* =========================================================
   SCORE PANEL
   ========================================================= */

.score-panel {
    overflow: hidden;
}

.score-layout {
    display: grid;
    grid-template-columns: 185px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 18px 18px;
}

.score-ring {
    width: 155px;
    height: 155px;
    margin: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(
            #0876e9 0 27%,
            #20ad4b 27% 43%,
            #ffc400 43% 59%,
            #11a8db 59% 70%,
            #39ae55 70% 86%,
            #f2a600 86% 91%,
            #7138d8 91% 100%
        );
}

.score-ring::before {
    content: "";
    position: absolute;
}

.score-ring > div {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    background: #fff;
}

.score-ring strong {
    color: #101b31;
    font-size: 28px;
    line-height: 1;
}

.score-ring span {
    margin-top: 5px;
    color: #53627a;
    font-size: 11px;
}

.score-bars {
    min-width: 0;
}

.score-row {
    display: grid;
    grid-template-columns: 14px 105px 1fr 42px;
    gap: 5px;
    align-items: center;
    margin: 7px 0;
    font-size: 11px;
}

.score-row > span {
    color: #1777e8;
}

.score-row:nth-child(2) > span {
    color: #23a747;
}

.score-row:nth-child(3) > span {
    color: #f4b800;
}

.score-row:nth-child(4) > span {
    color: #20a8df;
}

.score-row:nth-child(5) > span {
    color: #3fb357;
}

.score-row:nth-child(6) > span {
    color: #f29d00;
}

.score-row:nth-child(7) > span {
    color: #7138d8;
}

.score-row label {
    color: #34445e;
}

.score-row i {
    height: 9px;
    border-radius: 20px;
    overflow: hidden;
    background: #e4eaf2;
}

.score-row i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2d7ee8;
}

.score-row strong {
    text-align: right;
    color: #17233a;
}


/* =========================================================
   EXPLORE
   ========================================================= */

.explore-panel {
    margin-top: 12px;
    padding: 13px 14px 14px;
}

.explore-panel h2 {
    margin: 0 4px 10px;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.explore-card {
    min-height: 82px;
    padding: 13px 13px;
    border-radius: 8px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.explore-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.explore-card.buy {
    background: linear-gradient(135deg, #087f26, #17bd40);
}

.explore-card.hold {
    color: #171d2b;
    background: linear-gradient(135deg, #ffc000, #ffcf27);
}

.explore-card.all {
    background: linear-gradient(135deg, #0755c8, #147ff1);
}

.explore-card strong {
    font-size: 12px;
}

.explore-card span {
    margin-top: 2px;
    font-size: 11px;
}

.explore-card b {
    margin-top: 6px;
    font-size: 11px;
}


/* =========================================================
   RIGHT BOTTOM
   ========================================================= */

.right-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.mini-panel {
    min-height: 172px;
    padding: 15px 17px;
}

.mini-panel h2 {
    margin-bottom: 10px;
}

.mini-panel a:not(.small-btn) {
    display: block;
    margin: 7px 0;
    color: #11672c;
    font-size: 12px;
    font-weight: 650;
}

.mini-panel a:not(.small-btn):hover {
    color: #0758c7;
}

.small-btn {
    margin-top: 7px;
    padding: 5px 9px;
    font-size: 11px;
}

.calendar-icon {
    float: left;
    margin: 4px 13px 20px 0;
    color: #123e87;
    font-size: 37px;
}

.update-panel strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}

.update-panel p {
    margin: 5px 0 8px;
    color: #53627a;
    font-size: 11px;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.disclaimer-section {
    background: #eef3f9;
    padding: 0 0 15px;
}

.disclaimer-box {
    padding: 11px 15px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    background: #fff;
    color: #58677d;
    font-size: 11px;
}

.disclaimer-box strong {
    color: #8b5b00;
}

.disclaimer-box p {
    display: inline;
    margin: 0 0 0 8px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #061a39;
    color: #dce7f7;
    border-top: 1px solid #153e74;
}

.footer-inner {
    min-height: 100px;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.footer-inner > div:first-child strong {
    display: block;
    color: #fff;
    font-size: 20px;
}

.footer-inner > div:first-child span {
    color: #a9c4e6;
    font-size: 10px;
}

.footer-inner p {
    margin: 6px 0 0;
    color: #b9c8dc;
    font-size: 11px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
}

.footer-links a {
    color: #e2ebf7;
    font-size: 12px;
}

.footer-links a:hover {
    color: var(--yellow);
}

.copyright {
    padding: 9px 0 13px;
    border-top: 1px solid rgba(135, 169, 211, .20);
    color: #9fb2cb;
    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .main-nav a {
        padding: 0 11px;
        font-size: 13px;
    }

    .main-nav a.active::after {
        left: 11px;
        right: 11px;
    }

    .header-search {
        width: 310px;
    }

    .hero-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .top-pick-panel {
        min-height: 300px;
    }
}

@media (max-width: 900px) {

    .container {
        width: min(100% - 30px, 720px);
    }

    .main-nav {
        display: none;
    }

    .header-inner {
        min-height: 64px;
    }

    .header-search {
        margin-left: auto;
        width: min(350px, 50vw);
    }

    .mobile-menu-btn {
        display: block;
    }

    .market-watch-inner {
        overflow-x: auto;
        width: 100%;
    }

    .market-status {
        min-width: 220px;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stat {
        border-bottom: 1px solid rgba(103, 163, 231, .30);
    }

    .score-layout {
        grid-template-columns: 170px 1fr;
    }
}

@media (max-width: 620px) {

    .container {
        width: calc(100% - 20px);
    }

    .brand {
        width: 125px;
        flex-basis: 125px;
    }

    .brand-main {
        font-size: 24px;
    }

    .header-search {
        display: none;
    }

    .hero-panel {
        padding: 20px 16px 14px;
    }

    .hero-copy h1 {
        font-size: 38px;
    }

    .hero-copy p {
        font-size: 14px;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hero-stat {
        padding: 10px 5px;
    }

    .top-pick-panel {
        min-height: 320px;
    }

    .lower-two,
    .right-bottom {
        grid-template-columns: 1fr;
    }

    .score-layout {
        grid-template-columns: 1fr;
    }

    .score-ring {
        width: 145px;
        height: 145px;
    }

    .explore-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .disclaimer-box p {
        display: block;
        margin: 6px 0 0;
    }
}

/* ========================================================
   TODAY'S TOP PICK - COMPACT DASHBOARD
======================================================== */

.featured-stock {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}


.top-pick-card {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #071936 0%,
            #09254d 55%,
            #06162f 100%
        );

    border: 1px solid #168a57;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.22);

    color: #ffffff;

}



/* HEADER */

.top-pick-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 22px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);

}


.top-pick-title {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 20px;

}


.top-pick-fire {

    font-size: 23px;

}


.top-pick-rank {

    background: #08a63f;

    color: #ffffff;

    padding: 7px 14px;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 800;

}



/* MAIN */

.top-pick-main {

    display: grid;

    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(360px, 1.1fr);

    gap: 30px;

    padding: 24px 30px 20px;

}



/* LEFT */

.top-pick-company {

    position: relative;

    padding-right: 25px;

    border-right:
        1px solid rgba(255, 255, 255, 0.13);

}


.top-pick-buy {

    display: inline-block;

    background: #079b38;

    color: white;

    font-size: 16px;

    font-weight: 800;

    padding: 7px 20px;

    border-radius: 6px;

    margin-bottom: 12px;

}


.top-pick-symbol {

    font-size: 38px;

    line-height: 1;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 0.5px;

}


.top-pick-company-name {

    margin-top: 6px;

    font-size: 14px;

    color: #c8d5e8;

    font-weight: 600;

    max-width: 320px;

}


.top-pick-price {

    margin-top: 20px;

    font-size: 30px;

    font-weight: 900;

    color: #ffffff;

}


.top-pick-price span {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: #8fa6c3;

    font-weight: 500;

}



/* SCORE */

.top-pick-score {

    margin-top: 17px;

    max-width: 310px;

}


.score-label {

    font-size: 12px;

    color: #9fb2cb;

    margin-bottom: 3px;

}


.score-number {

    font-size: 24px;

    font-weight: 900;

}


.score-number span {

    font-size: 12px;

    color: #8fa6c3;

    font-weight: 500;

}


.score-bar {

    height: 7px;

    background: #263b5b;

    border-radius: 10px;

    overflow: hidden;

    margin-top: 7px;

}


.score-bar-fill {

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #08c95b,
            #b9ef22,
            #ffe600
        );

    border-radius: 10px;

}



/* RIGHT DETAILS */

.top-pick-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

}


.top-pick-stat {

    padding: 5px 22px 17px 0;

    margin-bottom: 14px;

}


.top-pick-stat:nth-child(even) {

    padding-left: 22px;

    border-left:
        1px solid rgba(255, 255, 255, 0.12);

}


.top-pick-stat span {

    display: block;

    color: #9fb2cb;

    font-size: 12px;

    margin-bottom: 5px;

}


.top-pick-stat strong {

    display: block;

    font-size: 24px;

    color: #ffffff;

    font-weight: 900;

}


.top-pick-stat .target-price {

    color: #ffd21a;

}


.top-pick-stat .upside-price {

    color: #26e66a;

}


.target-agreement {

    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    padding-top: 12px;

    margin-top: 0;

}


.target-agreement span {

    color: #9fb2cb;

    font-size: 12px;

}


.target-agreement strong {

    color: #26e66a;

    font-size: 13px;

}



/* FACTORS */

.top-pick-factors {

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    padding: 15px 30px;

    background:
        rgba(0, 0, 0, 0.12);

}


.factor-title {

    font-size: 10px;

    color: #7f9ab8;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 10px;

}


.factor-grid {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 8px;

}


.factor-item {

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 7px;

    padding: 8px 7px;

    text-align: center;

}


.factor-item span {

    display: block;

    color: #91a7c2;

    font-size: 10px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.factor-item strong {

    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 15px;

}



/* FOOTER */

.top-pick-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 14px 30px 17px;

}


.top-pick-highlights {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}


.top-pick-highlights span {

    color: #a9bfd8;

    font-size: 12px;

}


.top-pick-highlights span::first-letter {

    color: #22df61;

}


.top-pick-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 18px;

    border: 1px solid #ffd000;

    border-radius: 7px;

    color: #ffd000;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: all 0.2s ease;

}


.top-pick-button:hover {

    background: #ffd000;

    color: #06162f;

}



/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 900px) {

    .top-pick-main {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .top-pick-company {

        padding-right: 0;

        border-right: none;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);

        padding-bottom: 20px;

    }


    .factor-grid {

        grid-template-columns:
            repeat(4, 1fr);

    }

}


@media (max-width: 600px) {

    .top-pick-header {

        padding: 15px;

    }


    .top-pick-main {

        padding: 20px 15px;

    }


    .top-pick-symbol {

        font-size: 32px;

    }


    .top-pick-details {

        grid-template-columns: 1fr 1fr;

    }


    .top-pick-stat:nth-child(even) {

        padding-left: 12px;

    }


    .factor-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .top-pick-footer {

        align-items: stretch;

        flex-direction: column;

        padding: 15px;

    }


    .top-pick-button {

        width: 100%;

    }

}