* {
    box-sizing:border-box
}
body {
    margin:0;
    color:#202124;
    background:#fff;
    font-family:Arial,sans-serif;
    font-size:14px
}
button,input {
    font:inherit
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
a {
    color:inherit;
    text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible {
    outline:3px solid #a8c7fa;
    outline-offset:3px
}
.finance-header {
    height:88px;
    padding:0 36px;
    display:flex;
    align-items:center;
    gap:28px;
    border-bottom:1px solid #f1f3f4
}
.brand {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:24px;
    color:#5f6368;
    white-space:nowrap
}
.google-word {
    font-size:27px;
    letter-spacing:-1.6px
}
.google-word b {
    font-weight:500
}
.google-word b:nth-child(1),.google-word b:nth-child(4) {
    color:#4285f4
}
.google-word b:nth-child(2),.google-word b:nth-child(6) {
    color:#ea4335
}
.google-word b:nth-child(3) {
    color:#fbbc05
}
.google-word b:nth-child(5) {
    color:#34a853
}
.market-search {
    max-width:650px;
    flex:1;
    display:flex;
    align-items:center;
    gap:12px;
    background:#f1f3f4;
    border-radius:10px;
    padding:0 16px;
    height:48px;
    margin:0 auto
}
.market-search>span {
    font-size:28px;
    color:#5f6368
}
.market-search input {
    border:0;
    outline:0;
    background:transparent;
    min-width:0;
    flex:1;
    font-size:15px
}
.market-search button {
    border:0;
    background:transparent;
    color:#1a73e8
}
.search-link {
    font-size:13px;
    color:#5f6368
}

.finance-nav {
    display:flex;
    justify-content:center;
    gap:35px;
    height:52px;
    border-bottom:1px solid #dadce0;
    color:#5f6368
}
.finance-nav>* {
    display:flex;
    align-items:center
}
.finance-nav .nav-active {
    color:#1967d2;
    border-bottom:3px solid #1a73e8
}
.finance-main {
    max-width:1280px;
    margin:0 auto;
    padding:35px 32px 48px
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px
}
.eyebrow {
    font-size:11px;
    letter-spacing:1.4px;
    color:#70757a;
    margin:0 0 10px;
    font-weight:600
}
h1 {
    font-size:30px;
    font-weight:400;
    margin:0 0 10px
}
h2 {
    font-size:20px;
    font-weight:400;
    margin:0
}
.muted {
    color:#70757a;
    line-height:1.5;
    margin:0
}
.market-note {
    color:#70757a;
    font-size:12px
}
.market-cards {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-bottom:32px
}
.market-card {
    text-align:left;
    border:1px solid #dadce0;
    background:white;
    border-radius:12px;
    padding:16px 13px;
    min-width:0;
    color:#202124
}
.market-card:hover {
    background:#f8fafd
}
.market-card.selected {
    border-color:#1a73e8;
    background:#f4f8ff;
    box-shadow:0 0 0 1px #1a73e8
}
.card-name {
    font-size:13px;
    font-weight:600;
    display:block;
    margin-bottom:10px
}
.card-price {
    display:block;
    font-size:20px;
    margin-bottom:8px;
    white-space:nowrap
}
.card-change {
    font-size:12px
}
.positive {
    color:#137333
}
.negative {
    color:#a50e0e
}
.finance-columns {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:32px
}
.market-panel {
    min-width:0
}
.detail-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
}
.detail-top h2 {
    font-size:25px
}
.asset-icon {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    background:#fef7e0;
    color:#9a6700;
    border-radius:12px;
    font-size:21px
}
.detail-price {
    font-size:40px;
    letter-spacing:-1.3px;
    margin-bottom:8px
}
.chart-heading {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #e8eaed;
    margin-top:26px;
    padding-bottom:12px;
    color:#1967d2;
    font-size:12px
}
.price-chart {
    height:235px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:repeating-linear-gradient(to bottom,transparent 0,transparent 57px,#f1f3f4 58px,#f1f3f4 59px);
    margin:8px 0
}
.price-chart svg {
    width:100%;
    height:100%;
    overflow:visible
}
.chart-empty {
    background:#fff;
    padding:12px;
    color:#70757a;
    text-align:center;
    line-height:1.6;
    max-width:340px
}
.quote-source {
    font-size:11px;
    color:#70757a;
    line-height:1.6;
    min-height:18px
}
.table-heading {
    margin-top:34px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
}
.table-heading span {
    font-size:12px;
    color:#70757a
}
.table-scroll {
    overflow:auto
}
.market-table {
    border-collapse:collapse;
    width:100%;
    white-space:nowrap
}
.market-table th {
    font-weight:400;
    color:#70757a;
    font-size:12px
}
.market-table td,.market-table th {
    padding:15px 10px;
    text-align:right;
    border-bottom:1px solid #e8eaed
}
.market-table td:first-child,.market-table th:first-child {
    text-align:left;
    padding-left:0
}
.market-table button {
    border:0;
    background:transparent;
    text-align:left;
    padding:0;
    color:#202124
}
.ticker {
    font-size:11px;
    display:block;
    margin-top:5px;
    color:#70757a
}
.market-status {
    font-size:12px;
    color:#70757a;
    line-height:1.6;
    margin-top:18px
}
.finance-sidebar {
    display:flex;
    flex-direction:column;
    gap:22px
}
.watchlist-panel,.explore-panel,.quick-panel {
    border:1px solid #dadce0;
    border-radius:16px;
    padding:20px
}
.side-heading {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.subtle-icon {
    font-size:25px;
    color:#5f6368
}
.side-description {
    font-size:12px;
    margin:8px 0 15px
}
.podcast-grid {
    display:flex;
    flex-direction:column;
    gap:2px
}
.podcast-card {
    width:100%;
    font:inherit;
    text-align:left;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 8px;
    border:0;
    border-bottom:1px solid #f1f3f4;
    background:#fff;
    cursor:pointer;
    border-radius:5px
}
.podcast-card:hover {
    background:#f8f9fa
}
.podcast-card-cover {
    display:flex
}
.podcast-card-body {
    flex:1;
    min-width:0
}
.podcast-card-title {
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.podcast-card-genre {
    font-size:10px;
    color:#70757a;
    margin-top:4px
}
.podcast-badges {
    display:flex;
    flex-direction:column;
    gap:4px
}
.badge-live,.badge-new {
    font-size:9px;
    padding:3px 4px;
    border-radius:4px;
    background:#e8f0fe;
    color:#1967d2
}
.badge-new {
    background:#fce8e6;
    color:#b3261e
}
.card-tint-blue {
    background:#fef7e0
}
.card-tint-violet {
    background:#f3f0ff
}
.location-new-indicator {
    font-size:10px;
    display:inline-block;
    background:#e6f4ea;
    color:#137333;
    padding:3px 5px;
    border-radius:8px;
    margin-left:5px
}
.explore-panel {
    background:#f0f6ff;
    border-color:#f0f6ff
}
.explore-icon {
    font-size:27px;
    color:#1a73e8;
    margin-bottom:16px
}
.explore-panel h2 {
    font-size:19px;
    line-height:1.4
}
.explore-panel p {
    font-size:13px;
    color:#5f6368;
    line-height:1.7
}
.explore-panel button {
    background:transparent;
    border:1px solid #dadce0;
    border-radius:20px;
    color:#1967d2;
    padding:10px 16px
}
.explore-panel button span {
    margin-left:15px
}
.quick-panel h2 {
    font-size:16px;
    margin-bottom:10px
}
.quick-panel button {
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:12px 0;
    background:none;
    border:0;
    border-bottom:1px solid #f1f3f4;
    color:#5f6368;
    font-size:12px
}
.finance-footer {
    border-top:1px solid #e8eaed;
    padding:24px 36px;
    display:flex;
    gap:24px;
    justify-content:space-between;
    color:#70757a;
    font-size:11px;
    line-height:1.5
}
.auth-hidden {
    display:none!important
}
.login-form {
    max-width:420px;
    margin:30px auto 0;
    border:1px solid #dadce0;
    border-radius:16px;
    padding:30px
}
.premium-label {
    font-size:24px;
    margin-bottom:10px
}
.premium-sublabel {
    color:#70757a;
    margin-bottom:20px
}
.input-row {
    display:flex;
    flex-direction:column;
    gap:12px
}
.login-input {
    border:1px solid #dadce0;
    padding:14px;
    border-radius:6px;
    width:100%
}
.login-button {
    border:0;
    background:#1a73e8;
    color:white;
    padding:12px;
    border-radius:20px
}
.secure-login-button {
    background:#e8f0fe;
    color:#1967d2
}
.login-button:disabled {
    opacity:.5
}
.error-message {
    color:#a50e0e;
    margin-top:12px
}
.apple-watch .finance-header,.apple-watch .finance-nav,.apple-watch .finance-main,.apple-watch .finance-footer {
    display:none!important
}

@media(min-width:1500px) {
    .finance-main {
        padding-top:46px
    }
    .market-cards {
        margin-bottom:40px
    }
    
}

@media(max-width:1000px) {
    .finance-header {
        gap:16px;
        padding:0 20px
    }
    .search-link {
        display:none
    }
    .finance-columns {
        grid-template-columns:minmax(0,1fr) 270px;
        gap:24px
    }
    .market-cards {
        grid-template-columns:repeat(3,1fr)
    }
    .finance-main {
        padding:28px 20px
    }
    .card-price {
        font-size:22px
    }
    
}

@media(max-width:700px) {
    .finance-header {
        height:auto;
        min-height:120px;
        flex-wrap:wrap;
        padding:16px;
        gap:16px
    }
    .brand {
        font-size:22px
    }

    .market-search {
        order:3;
        flex-basis:100%;
        height:42px
    }
    .finance-nav {
        height:46px;
        gap:24px;
        font-size:12px
    }
    .finance-main {
        padding:25px 16px
    }
    .page-heading {
        margin-bottom:20px
    }
    .market-note {
        display:none
    }
    h1 {
        font-size:26px
    }
    .market-cards {
        gap:8px;
        margin-bottom:26px
    }
    .market-card {
        padding:13px 10px
    }
    .card-price {
        font-size:18px
    }
    .card-name {
        font-size:12px
    }
    .card-change {
        font-size:10px
    }
    .finance-columns {
        grid-template-columns:1fr;
        gap:26px
    }
    .detail-price {
        font-size:36px
    }
    .price-chart {
        height:200px
    }
    .table-heading h2 {
        font-size:18px
    }
    .table-heading span {
        font-size:10px
    }
    .market-table td,.market-table th {
        padding:13px 7px;
        font-size:12px
    }
    .finance-sidebar {
        gap:16px
    }
    .finance-footer {
        padding:20px 16px;
        flex-wrap:wrap;
        gap:10px
    }
    .finance-footer span:nth-child(2) {
        flex-basis:100%;
        order:3
    }
    .login-form {
        padding:24px
    }
    .podcast-card {
        padding:13px 8px
    }
    
}


.mini-chart {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 12px;
}
.market-card {
    display: flex;
    flex-direction: column;
}

/* The small instrument marker carries unread-message state without changing a quote card. */
.asset-icon.message-tint-yellow {
    background: #fef7e0;
    color: #9a6700;
    border-color: #e6c65b;
}
.asset-icon.message-tint-violet {
    background: #f3f0ff;
    color: #6f42c1;
    border-color: #b39ddb;
}
.asset-icon.message-tint-red {
    background: #fce8e6;
    color: #b3261e;
    border-color: #f28b82;
}
/* No messages: keep the marker unfilled and outline it like the selected market card. */
.asset-icon.message-tint-blue {
    background: #fff;
    color: #1a73e8;
    border: 1px solid #1a73e8;
    box-shadow: 0 0 0 1px #1a73e8;
}