:root {
    color-scheme: dark;

    --bg: #080d18;
    --bg-soft: #0d1423;
    --panel: #111a2b;
    --panel-hover: #162238;
    --border: #25324a;

    --text: #edf3ff;
    --muted: #8e9db7;
    --muted-light: #b3bfd2;

    --green: #35d69a;
    --green-soft: rgba(53, 214, 154, 0.12);

    --red: #ff6b7d;
    --red-soft: rgba(255, 107, 125, 0.12);

    --blue: #72a7ff;
    --blue-soft: rgba(114, 167, 255, 0.12);

    --yellow: #f7c86a;
    --purple: #b69aff;

    --radius: 18px;
    --radius-small: 12px;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(
            ellipse at top left,
            rgba(44, 77, 136, 0.13),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

    font-size: 14px;
    line-height: 1.5;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;
}

button,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.app-shell {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;

    padding:
        0
        max(18px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
}


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

.topbar {
    min-height: 84px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.brand-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: linear-gradient(135deg, #5c8dff, #a48bff);

    color: #ffffff;

    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 15px;

    box-shadow: 0 8px 24px rgba(92, 141, 255, 0.2);

    flex-shrink: 0;
}

.brand-copy h1 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.6px;
}

.brand-copy p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.market-status {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--muted-light);
    font-size: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;

    background: var(--yellow);
    border-radius: 50%;

    flex-shrink: 0;
}

.status-dot.open {
    background: var(--green);
    box-shadow: 0 0 10px rgba(53, 214, 154, 0.4);
}

.status-dot.closed {
    background: var(--muted);
}

.icon-button {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--panel);
    color: var(--text);

    cursor: pointer;

    font-size: 23px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.icon-button:hover {
    background: var(--panel-hover);
}

.icon-button:active {
    transform: scale(0.96);
}

#refreshIcon.spinning {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================
   MAIN CONTENT
   ========================= */

.main-content {
    padding-top: 30px;
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
}

.page-heading h2,
.section-heading h2 {
    margin: 5px 0 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(22px, 3vw, 30px);

    letter-spacing: -0.8px;
}

.muted {
    color: var(--muted);
}

.page-heading .muted {
    margin: 8px 0 0;
}

.eyebrow {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.updated-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;

    text-align: right;

    flex-shrink: 0;
}

.updated-box > span:first-child {
    font-size: 11px;
}

.updated-box strong {
    font-size: 13px;
    font-weight: 600;
}

.data-status {
    color: var(--muted);
    font-size: 11px;
}

.data-status.success {
    color: var(--green);
}

.data-status.error {
    color: var(--red);
}

.small-text {
    font-size: 12px;
}

.section {
    margin-top: 34px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 16px;
}

.section-heading h2 {
    font-size: 21px;
}

.panel {
    min-width: 0;

    background:
        linear-gradient(
            145deg,
            rgba(22, 34, 56, 0.55),
            rgba(17, 26, 43, 0.98)
        );

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 22px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-heading h3 {
    margin: 5px 0 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
}


/* =========================
   OVERALL SCORE
   ========================= */

.overall-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
}

.score-panel {
    position: relative;
    overflow: hidden;
}

.score-panel::before {
    content: "";

    position: absolute;
    width: 240px;
    height: 240px;

    top: -150px;
    right: -70px;

    background: rgba(114, 167, 255, 0.07);

    filter: blur(25px);
    border-radius: 50%;

    pointer-events: none;
}

.panel-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.live-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border: 1px solid rgba(114, 167, 255, 0.25);
    border-radius: 7px;

    color: var(--blue);
    background: var(--blue-soft);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.score-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-top: 22px;
}

.overall-score {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(38px, 6vw, 56px);
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -2px;
}

.overall-label {
    margin-top: 8px;

    font-size: 14px;
    font-weight: 700;

    color: var(--muted-light);
}

.overall-label.bullish {
    color: var(--green);
}

.overall-label.bearish {
    color: var(--red);
}

.overall-label.neutral {
    color: var(--yellow);
}

.score-gauge {
    width: 100px;
    height: 100px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--green) 0deg,
            var(--green) 90deg,
            var(--border) 90deg,
            var(--border) 360deg
        );

    position: relative;
}

.score-gauge::before {
    content: "";

    position: absolute;
    inset: 8px;

    background: var(--panel);
    border-radius: 50%;
}

.gauge-inner {
    z-index: 1;

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.gauge-inner span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 23px;
    font-weight: 700;
}

.gauge-inner small {
    color: var(--muted);
    font-size: 10px;
}

.score-track,
.coverage-track {
    height: 6px;

    overflow: hidden;

    background: #27334a;
    border-radius: 999px;
}

.score-track {
    margin-top: 25px;
}

.score-track-fill,
.coverage-fill {
    width: 0;
    height: 100%;

    background: var(--green);
    border-radius: inherit;

    transition: width 0.35s ease;
}

.score-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 8px;

    color: var(--muted);
    font-size: 10px;
}

.score-panel > .small-text {
    margin-top: 16px;
    margin-bottom: 0;
}

.coverage-value {
    margin: 22px 0 14px;
}

.coverage-value span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 39px;
    font-weight: 700;
}

.coverage-track {
    margin-bottom: 12px;
}

.summary-divider {
    height: 1px;
    background: var(--border);

    margin: 18px 0;
}

.summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;

    font-size: 12px;
}

.summary-row span {
    color: var(--muted);
}

.summary-row strong {
    text-align: right;
    font-weight: 600;
    overflow-wrap: anywhere;
}


/* =========================
   INDEX CARDS
   ========================= */

.index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.index-card {
    min-width: 0;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    padding: 20px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.index-card:hover {
    transform: translateY(-2px);
    border-color: #3a4e70;
}

.index-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.index-name {
    font-size: 13px;
    font-weight: 600;
}

.index-symbol {
    margin-top: 3px;

    color: var(--muted);
    font-size: 10px;
}

.index-price {
    margin-top: 22px;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(22px, 3vw, 29px);
    font-weight: 700;

    letter-spacing: -0.8px;
    overflow-wrap: anywhere;
}

.index-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 8px;

    font-size: 12px;
    font-weight: 700;
}

.change-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.negative {
    color: var(--red);
}

.neutral {
    color: var(--yellow);
}

.positive-bg {
    background: var(--green-soft);
    color: var(--green);
}

.negative-bg {
    background: var(--red-soft);
    color: var(--red);
}

.neutral-bg {
    background: rgba(247, 200, 106, 0.12);
    color: var(--yellow);
}

.index-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-top: 22px;
    padding-top: 14px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 11px;
}

.index-card-bottom strong {
    color: var(--text);
    font-size: 12px;
}


/* =========================
   CHARTS
   ========================= */

.chart-section-heading {
    align-items: flex-end;
}

.chart-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.control-select {
    min-height: 42px;

    padding: 0 32px 0 12px;

    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--text);

    max-width: 100%;
    cursor: pointer;
}

.timeframe-buttons {
    display: flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 11px;
}

.timeframe-buttons button {
    min-width: 42px;
    min-height: 34px;

    padding: 6px 9px;

    background: transparent;
    border: 0;
    border-radius: 7px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.timeframe-buttons button.active {
    background: #253a5c;
    color: #ffffff;
}

.chart-panel {
    overflow: hidden;
}

.chart-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
}

.chart-instrument {
    color: var(--muted);
    font-size: 12px;
}

.chart-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 5px;
}

.chart-price-line strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    letter-spacing: -0.6px;
}

.chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;

    color: var(--muted);
    font-size: 10px;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.sma20 {
    background: #f5c86c;
}

.sma50 {
    background: #7daaff;
}

.sma100 {
    background: #c49bff;
}

.price-chart {
    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;
}

.volume-chart {
    width: 100%;
    height: 105px;

    overflow: hidden;
}

.rsi-chart {
    width: 100%;
    height: 135px;

    overflow: hidden;
}

.chart-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 18px;
    margin-bottom: 6px;

    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.chart-subheading span:last-child {
    font-weight: 500;
    letter-spacing: 0;
}

.chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding-top: 12px;
    margin-top: 12px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 10px;
}

.chart-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    color: var(--muted);
    font-size: 12px;
}


/* =========================
   TECHNICAL CARDS
   ========================= */

.technical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.technical-card {
    min-width: 0;

    padding: 18px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.technical-card h3 {
    margin: 0;

    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.technical-card .technical-value {
    margin-top: 12px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.technical-card .technical-status {
    display: inline-block;

    margin-top: 10px;

    font-size: 11px;
    font-weight: 700;
}

.technical-card p {
    margin: 10px 0 0;

    color: var(--muted);
    font-size: 11px;
}


/* =========================
   OPTIONS
   ========================= */

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pcr-value {
    margin-top: 20px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 42px;
    font-weight: 700;
}

.level-row {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 0;

    border-bottom: 1px solid var(--border);
}

.level-row:last-of-type {
    border-bottom: 0;
}

.level-indicator {
    width: 4px;
    height: 39px;

    border-radius: 999px;
    flex-shrink: 0;
}

.resistance-level .level-indicator {
    background: var(--red);
}

.support-level .level-indicator {
    background: var(--green);
}

.level-row small {
    display: block;

    color: var(--muted);
    font-size: 11px;
}

.level-row strong {
    display: block;

    margin-top: 3px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
}

.options-source {
    overflow-wrap: anywhere;
}

.options-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.option-card {
    padding: 20px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.option-card.call {
    border-top: 3px solid var(--green);
}

.option-card.put {
    border-top: 3px solid var(--red);
}

.option-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.option-card-header h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
}

.option-card .option-premium {
    margin-top: 18px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    font-weight: 700;
}

.option-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-top: 20px;
}

.option-stat {
    min-width: 0;
}

.option-stat span {
    display: block;

    color: var(--muted);
    font-size: 11px;
}

.option-stat strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    overflow-wrap: anywhere;
}

.section-subheading {
    margin: 22px 0 12px;
}

.section-subheading h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
}


/* =========================
   GLOBAL MARKETS
   ========================= */

.global-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.global-card {
    min-width: 0;

    padding: 16px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.global-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.global-name {
    font-size: 12px;
    font-weight: 700;
}

.global-category {
    margin-top: 4px;

    color: var(--muted);
    font-size: 10px;
}

.global-price {
    margin-top: 18px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.global-change {
    margin-top: 7px;

    font-size: 11px;
    font-weight: 700;
}


/* =========================
   WEEKLY PERFORMANCE
   ========================= */

.weekly-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.weekly-card {
    padding: 18px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.weekly-card h3 {
    margin: 0;

    font-size: 13px;
    font-weight: 600;
}

.weekly-change {
    margin-top: 12px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    font-weight: 700;
}

.weekly-card p {
    margin: 5px 0 0;

    color: var(--muted);
    font-size: 11px;
}


/* =========================
   SCORE BREAKDOWN
   ========================= */

.breakdown-panel {
    padding-top: 10px;
}

.breakdown-header,
.breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 16px;

    align-items: center;
}

.breakdown-header {
    padding: 12px 0;

    color: var(--muted);
    font-size: 11px;
}

.breakdown-header span:last-child {
    text-align: right;
}

.breakdown-row {
    padding: 15px 0;

    border-top: 1px solid var(--border);
}

.breakdown-name {
    font-size: 12px;
    font-weight: 600;
}

.breakdown-meta {
    margin-top: 5px;

    color: var(--muted);
    font-size: 10px;
}

.breakdown-value {
    text-align: right;

    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.breakdown-meter {
    height: 4px;

    margin-top: 9px;

    background: #27334a;
    border-radius: 999px;
    overflow: hidden;
}

.breakdown-meter-fill {
    height: 100%;
    border-radius: inherit;
}


/* =========================
   NEWS
   ========================= */

.news-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 16px;
}

.news-summary-chip {
    padding: 8px 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--panel);

    color: var(--muted-light);
    font-size: 11px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.news-card {
    min-width: 0;

    padding: 18px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.news-card-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 10px;
}

.news-tag {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.news-tag.bullish {
    color: var(--green);
    background: var(--green-soft);
}

.news-tag.bearish {
    color: var(--red);
    background: var(--red-soft);
}

.news-tag.neutral {
    color: var(--yellow);
    background: rgba(247, 200, 106, 0.12);
}

.news-source {
    color: var(--muted);
    font-size: 10px;
}

.news-card h3 {
    margin: 0;

    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.news-card h3 a {
    color: var(--text);
}

.news-card h3 a:hover {
    color: var(--blue);
}

.news-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 14px;

    color: var(--muted);
    font-size: 10px;
}


/* =========================
   HISTORY
   ========================= */

.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 18px;
}

.history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;

    width: 100%;

    padding: 15px;

    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 11px;

    color: var(--text);
    text-align: left;

    cursor: pointer;

    transition: border-color 0.2s ease;
}

.history-item:hover {
    border-color: var(--blue);
}

.history-item.selected {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.history-date {
    font-size: 12px;
    font-weight: 700;
}

.history-time {
    margin-top: 4px;

    color: var(--muted);
    font-size: 10px;
}

.history-score {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.history-label {
    font-size: 11px;
    font-weight: 700;
}


/* =========================
   DISCLAIMER AND FOOTER
   ========================= */

.disclaimer-panel {
    margin-top: 34px;
    padding: 18px;

    background: rgba(247, 200, 106, 0.05);
    border: 1px solid rgba(247, 200, 106, 0.2);
    border-radius: var(--radius-small);
}

.disclaimer-panel strong {
    color: var(--yellow);
    font-size: 12px;
}

.disclaimer-panel p {
    margin: 8px 0 0;

    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    padding: 24px 0 10px;
    margin-top: 15px;

    color: var(--muted);
    font-size: 11px;
}

.back-to-top {
    padding: 8px 11px;

    background: transparent;
    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--muted-light);

    cursor: pointer;
}

.back-to-top:hover {
    background: var(--panel);
}


/* =========================
   LOADING AND EMPTY STATES
   ========================= */

.loading-card,
.empty-state {
    padding: 22px;

    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius-small);

    color: var(--muted);
    font-size: 12px;

    text-align: center;
}

.loading-card {
    grid-column: 1 / -1;
}

.empty-state {
    margin-top: 8px;
}

.toast {
    position: fixed;

    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));

    z-index: 1000;

    width: max-content;
    max-width: calc(100vw - 32px);

    padding: 12px 16px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #1a2941;
    color: var(--text);

    box-shadow: var(--shadow);

    opacity: 0;
    transform: translate(-50%, 12px);

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    font-size: 12px;
}

.toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

    .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .overall-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    body {
        font-size: 13px;
    }

    .app-shell {
        padding-left: max(13px, env(safe-area-inset-left));
        padding-right: max(13px, env(safe-area-inset-right));
    }

    .topbar {
        min-height: 72px;
        gap: 10px;
    }

    .brand {
        gap: 9px;
    }

    .brand-icon {
        width: 38px;
        height: 38px;

        border-radius: 12px;

        font-size: 13px;
    }

    .brand-copy h1 {
        font-size: 17px;
    }

    .brand-copy p {
        font-size: 10px;
    }

    .header-actions {
        gap: 9px;
    }

    .market-status {
        gap: 6px;
        font-size: 10px;
    }

    .status-dot {
        width: 7px;
        height: 7px;
    }

    .icon-button {
        width: 39px;
        height: 39px;

        border-radius: 11px;
    }

    .main-content {
        padding-top: 22px;
    }

    .page-heading {
        flex-direction: column;
        gap: 14px;

        margin-bottom: 19px;
    }

    .page-heading h2 {
        font-size: 25px;
    }

    .page-heading .muted {
        max-width: 400px;
        font-size: 12px;
        line-height: 1.7;
    }

    .updated-box {
        align-items: flex-start;
        text-align: left;

        display: grid;
        grid-template-columns: auto 1fr;
        gap: 3px 10px;
    }

    .updated-box > span:first-child {
        grid-column: 1;
    }

    .updated-box strong {
        grid-column: 2;
    }

    .updated-box .data-status {
        grid-column: 1 / -1;
    }

    .overall-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .panel {
        padding: 17px;
        border-radius: 15px;
    }

    .score-main {
        margin-top: 18px;
    }

    .overall-score {
        font-size: 43px;
    }

    .overall-label {
        font-size: 13px;
    }

    .score-gauge {
        width: 82px;
        height: 82px;
    }

    .score-gauge::before {
        inset: 7px;
    }

    .gauge-inner span {
        font-size: 20px;
    }

    .score-track {
        margin-top: 20px;
    }

    .coverage-value {
        margin-top: 16px;
    }

    .coverage-value span {
        font-size: 32px;
    }

    .section {
        margin-top: 28px;
    }

    .section-heading {
        margin-bottom: 13px;
    }

    .section-heading h2 {
        font-size: 20px;
    }

    .index-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .index-card {
        padding: 17px;
    }

    .index-price {
        margin-top: 13px;
        font-size: 27px;
    }

    .index-card-bottom {
        margin-top: 16px;
        padding-top: 12px;
    }

    .chart-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .chart-controls {
        width: 100%;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
    }

    .control-select {
        flex: 1;
        min-width: 0;
        min-height: 42px;

        padding-left: 10px;
        padding-right: 24px;

        font-size: 12px;
    }

    .timeframe-buttons {
        flex-shrink: 0;
        gap: 2px;
        padding: 3px;
    }

    .timeframe-buttons button {
        min-width: 35px;
        min-height: 35px;

        padding: 5px 6px;
        font-size: 10px;
    }

    .chart-panel {
        padding: 13px;
    }

    .chart-summary {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
    }

    .chart-price-line strong {
        font-size: 23px;
    }

    .chart-legend {
        justify-content: flex-start;
        gap: 12px;
        font-size: 10px;
    }

    .price-chart {
        height: 300px;
    }

    .volume-chart {
        height: 85px;
    }

    .rsi-chart {
        height: 110px;
    }

    .chart-subheading {
        margin-top: 14px;
        font-size: 9px;
    }

    .chart-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        font-size: 10px;
    }

    .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .technical-card {
        padding: 14px;
    }

    .technical-card .technical-value {
        font-size: 20px;
    }

    .options-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .pcr-value {
        font-size: 37px;
    }

    .options-cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .option-card {
        padding: 17px;
    }

    .option-card .option-premium {
        font-size: 27px;
    }

    .global-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .global-card {
        padding: 13px;
    }

    .global-price {
        margin-top: 13px;
        font-size: 17px;
    }

    .global-name {
        font-size: 11px;
    }

    .weekly-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .weekly-card {
        padding: 16px;
    }

    .weekly-change {
        font-size: 23px;
    }

    .breakdown-panel {
        padding: 12px;
    }

    .breakdown-header,
    .breakdown-row {
        grid-template-columns: minmax(0, 1fr) 75px;
        gap: 10px;
    }

    .breakdown-name {
        font-size: 11px;
        line-height: 1.6;
    }

    .breakdown-value {
        font-size: 12px;
    }

    .news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .news-card {
        padding: 15px;
    }

    .news-card h3 {
        font-size: 12px;
    }

    .history-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;

        padding: 13px;
    }

    .history-label {
        grid-column: 1 / -1;
    }

    .history-score {
        font-size: 16px;
    }

    .disclaimer-panel {
        margin-top: 27px;
        padding: 15px;
    }

    .footer {
        gap: 10px;
        font-size: 10px;
    }

}


/* =========================
   VERY SMALL PHONES
   ========================= */

@media (max-width: 380px) {

    .brand-copy h1 {
        font-size: 15px;
    }

    .brand-copy p {
        font-size: 9px;
    }

    .market-status {
        font-size: 9px;
    }

    .icon-button {
        width: 35px;
        height: 35px;
    }

    .overall-score {
        font-size: 38px;
    }

    .score-gauge {
        width: 72px;
        height: 72px;
    }

    .gauge-inner span {
        font-size: 17px;
    }

    .control-select {
        font-size: 11px;
    }

    .timeframe-buttons button {
        min-width: 30px;
        padding: 4px;
        font-size: 9px;
    }

    .global-grid {
        gap: 8px;
    }

    .global-card {
        padding: 11px;
    }

    .global-price {
        font-size: 15px;
    }

}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}
/* Price Action Decision Panel */
#priceActionDecision {
  margin-top: 20px;
}

#criteriaSummary {
  overflow-x: auto;
  margin-bottom: 20px;
}

#criteriaSummary table {
  width: 100%;
  border-collapse: collapse;
}

#criteriaSummary th,
#criteriaSummary td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color, #333);
  text-align: left;
}

#niftyTradeDecision {
  padding: 18px;
  border-radius: 12px;
  background: var(--card-bg, #171b24);
}

#niftyTradeDecision h3 {
  margin-top: 0;
}

#niftyTradeDecision .market-data-note {
  padding: 10px 12px;
  border: 1px solid rgba(247, 200, 106, 0.25);
  border-radius: 8px;
  background: rgba(247, 200, 106, 0.08);
  color: var(--muted-light);
  font-size: 12px;
}

#niftyTradeDecision .buy-call {
  color: #22c55e;
}

#niftyTradeDecision .buy-put {
  color: #ef4444;
}

#niftyTradeDecision .wait {
  color: #facc15;
}

#detailCards[hidden] {
  display: none;
}

.detail-toggle {
  margin-top: 14px;
}

.combined-decision-panel {
  display: grid;
  gap: 20px;
}

.combined-decision-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.combined-decision-value {
  margin-top: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(25px, 4vw, 38px);
  font-weight: 700;
}

.combined-decision-reason {
  margin: 7px 0 0;
  max-width: 760px;
}

.combined-data-age {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.combined-data-age.stale {
  color: var(--yellow);
}

.combined-bias {
  min-width: 180px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(8, 13, 24, 0.5);
}

.combined-bias strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
}

.combined-bias span:last-child {
  font-size: 13px;
}

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

.combined-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(8, 13, 24, 0.32);
}

.combined-metric strong {
  overflow-wrap: anywhere;
}

.combined-metric small {
  color: var(--muted);
  font-size: 11px;
}

.combined-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .combined-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .combined-decision-header {
    flex-direction: column;
  }

  .combined-bias {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .combined-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}