body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #000000;
    color: #f5f5f7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a1c; }
::-webkit-scrollbar-thumb { background: #4a4a4f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5c5c62; }

.card {
    background-color: rgba(28, 28, 30, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px 2px var(--tw-shadow-color);
}
.status-open {
    background-color: #32d74b;
    --tw-shadow-color: rgba(50, 215, 75, 0.4);
}
.status-closed {
    background-color: #ff453a;
    --tw-shadow-color: rgba(255, 69, 58, 0.4);
}

.time-display, .price-display, .defi-output, .index-value, .date-calc-output span, .analysis-output {
    font-feature-settings: "tnum"; 
}

select, input[type="time"], input[type="number"], input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #1c1c1e;
    border: 1px solid #3a3a3c;
    color: #f5f5f7;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select:focus, input:focus {
     outline: none;
     border-color: #0a84ff;
     box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
}

select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.2em 1.2em;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

.calc-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0a84ff;
    color: #fff;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}
.calc-button:hover {
    background-color: #3395ff;
}

.day-strip {
    background-color: #2c2c2e;
    border-bottom: 3px solid transparent;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.day-strip:hover {
    transform: translateY(-4px);
    background-color: #3a3a3c;
}
.day-strip.current {
    border-color: #0A84FF;
    background-color: #3a3a3c;
}
.market-activity-bar {
    background-color: #4a4a4f;
    height: 6px; border-radius: 3px; overflow: hidden;
}
.market-activity-fill {
    background: linear-gradient(90deg, #32d74b, #30d158);
    height: 100%;
}

.toolkit-tab {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 9999px;
    color: #8e8e93;
}
.toolkit-tab.active {
    background-color: #0a84ff;
    color: #ffffff;
}
.toolkit-tab:not(.active):hover {
    background-color: #2c2c2e;
    color: #f5f5f7;
}
.toolkit-tab-content { display: none; }
.toolkit-tab-content.active { display: block; }

.result-panel {
    background-color: #1c1c1e;
    border: 1px solid #3a3a3c;
}

@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.ticker-wrap {
    width: 100%;
    overflow: hidden;
}
.ticker-content {
    display: flex;
    width: 200%;
    animation: marquee 60s linear infinite;
}
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}
.price-ticker-item {
    flex-shrink: 0;
    width: 192px; 
    margin-right: 16px; 
}

#fng-gauge {
    transition: stroke-dashoffset 1s ease-out, stroke 1s ease;
}
