/* --- Base & Body Styles --- */
   :root {
    /* Color Palette */
    --color-background: #f3f4f6;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-surface-muted: #f9fafb;
    --color-text-primary: #002A77;
    --color-text-secondary: #4b5563;
    --color-text-subtle: #000;
    --color-positive: #22c55e;
    --color-negative: #AE1326;
    --color-neutral: #6b7280; /* Color for no change */
    --color-gradient-start: #002A77;
    --color-gradient-end: #002A77;
    --color-indicator-border: #002A77;
    --black: #000;
    --white: #fff;

    /* Shadows */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 -6px 12px -4px rgba(0, 0, 0, 0.1);
}

body {
    font-family: "Saira", sans-serif;
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--color-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: 0rem 1rem; /* 16px */
}

/* --- Main Card Component --- */
.card {
    width: 100%;
    max-width: 56rem; /* 672px */
    background-color: var(--color-surface);
    border-radius: 1rem; /* 16px */
    /* box-shadow: var(--shadow-lg); */
    padding: 0.5rem 1.5rem; /* 24px */
}

/* --- Card Header --- */
.card-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1.5rem; /* 24px */
    border-bottom: 1px solid var(--color-border);
}
.card-header__info h1 {
    font-size: 1.5rem; /* 24px */
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.card-header__info p {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    color: var(--black);
    margin: 0;
}
.card-header__price {
    text-align: left;
    margin-top: 1rem; /* 16px */
}
.card-header__price .current-price {
    font-size: 2.25rem; /* 36px */
    font-weight: bold;
    letter-spacing: -0.025em;
    color: var(--color-text-primary);
    margin: 0;
}
.card-header__price .price-change-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.25rem; /* 4px */
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}
.price-change-container svg {
    height: 1.5rem; /* 24px */
    width: 1.5rem; /* 24px */
}
.price-change-container p {
    margin: 0 0 0 0.25rem; /* 4px */
}
.price-change-container.is-positive { color: var(--color-positive); }
.price-change-container.is-negative { color: var(--color-negative); }
.price-change-container.is-neutral { color: var(--color-neutral); }

/* --- Day's Range Visualizer --- */
.range-visualizer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.range-visualizer__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--color-text-subtle);
    margin-bottom: 0.5rem; /* 8px */
}
.range-visualizer__bar {
    position: relative;
    height: 0.5rem; /* 8px */
    background-color: var(--color-border);
    border-radius: 9999px;
}
.range-visualizer__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background-image: linear-gradient(to right, var(--color-gradient-start), var(--color-gradient-end));
    border-radius: 9999px;
}
.range-visualizer__indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.range-visualizer__indicator div {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    background-color: var(--color-surface);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-indicator-border);
}
.range-visualizer__values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 0.5rem; /* 8px */
}

/* --- Key Metrics Grid --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem; /* 24px */
    padding-top: 1.5rem; /* 24px */
    border-top: 1px solid var(--color-border);
}
.metric-item {
    background-color: var(--color-surface-muted);
    border-radius: 0.5rem; /* 8px */
    padding: 1rem; /* 16px */
}
.metric-item__label {
    font-size: 14px; /* 14px */
    font-weight: 500;
    color: var(--color-text-subtle);
    margin: 0;
}
.metric-item__label .date-label {
    font-weight: 400;
    margin-left: 0.5em;
}
.metric-item__value {
    font-size: 14px; /* 18px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0.25rem 0 0 0;
}

/* --- Card Footer --- */
.card-footer {
    text-align: center;
    margin-top: 2rem; /* 32px */
    font-size: 12px; /* 12px */
    color: var(--color-text-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poweredby img {
    height: 10px;
}

/* --- Loading Skeleton Styles --- */
.loading-placeholder {
    background-color: var(--color-border);
    border-radius: 0.25rem; /* 4px */
    color: transparent !important; /* Hide any text inside */
    user-select: none;
    animation: pulse 1.5s infinite ease-in-out;
    min-height: 1.2em; /* Ensure it has height */
    display: inline-block;
    width: 60%; /* Default placeholder width */
}
.loading-placeholder.w-full { width: 100%; }
.loading-placeholder.w-short { width: 30%; }
.loading-placeholder.w-price { width: 40%; }
.loading-placeholder.w-metric { width: 50%; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Responsive Styles --- */
@media (min-width: 768px) { /* Corresponds to Tailwind's 'md' breakpoint */
    .card {
        padding: 0rem 2rem; /* 32px */
    }
    .card-header {
        flex-direction: row;
        align-items: center;
    }
    .card-header__price {
        text-align: right;
        margin-top: 0;
    }
    .card-header__price .price-change-container {
        justify-content: flex-end;
    }
    .card-header__price .current-price {
        font-size: 55px; /* 72px */
    }
    .metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}