body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #121723;
    color: #f0f0f0;
    margin: 0;
}
.spinner-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #121723; display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; transition: opacity 0.5s ease; }
.spinner { border: 6px solid #2d3748; border-top: 6px solid #f0b90b; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.page-container.hidden { opacity: 0; visibility: hidden; }
.page-container { display: flex; padding: 20px; gap: 20px; width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.sidebar { flex: 0 0 400px; }
.main-content { flex-grow: 1; }
/* ZMENA: Pridané .about-card do zoznamu */
.portfolio-card, .chart-card, .tabbed-card, .progress-card, .about-card { 
    background-color: #1e2533; 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); 
    margin-bottom: 25px; 
}
.portfolio-card { padding: 20px 30px; text-align: center; }

/* ZMENA: Nové štýly pre kartu About */
.about-card h3 {
    text-align: center;
    color: #f0b90b;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1em;
    text-transform: uppercase;
}
.about-card p {
    font-size: 0.9em;
    color: #a0aec0;
    line-height: 1.6;
    margin: 0 0 15px 0;
    text-align: center;
}
.contact-info {
    padding-top: 15px;
    border-top: 1px solid #2d3748;
    font-size: 0.9em;
    color: #a0aec0;
    text-align: center;
}
.contact-info a {
    color: #00E0C6;
    text-decoration: none;
}
.contact-info a:hover {
    text-decoration: underline;
}

.progress-section {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #2d3748;
}
.progress-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #a0aec0;
    position: relative;
}
.progress-header span:first-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.progress-header span:last-child { font-weight: bold; color: #f0f0f0; }
.progress-bar-background { width: 100%; background-color: #2d3748; height: 10px; border-radius: 5px; overflow: hidden; }
.progress-bar-foreground {
    height: 100%; width: 0%; border-radius: 5px; transition: width 0.5s ease-out;
    background: linear-gradient(90deg, #00E0C6 40%, #a7ffeb 50%, #00E0C6 60%);
    background-size: 200% 100%; animation: shimmer 2s linear infinite;
}
.progress-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 0.8em; color: #a0aec0; }

.card-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #2d3748; }
.card-header .portfolio-title { margin: 0; font-size: 1.2em; color: #f0b90b; font-weight: bold; text-transform: uppercase; }
.card-header .stat-item { display: flex; flex-direction: column; align-items: center; flex-basis: 100px; }
.card-header .stat-label { font-size: 0.7em; color: #a0aec0; text-transform: uppercase; }
.card-header .stat-value { font-size: 1.2em; font-weight: bold; margin-top: 2px; }

.value-and-change-wrapper { display: flex; justify-content: center; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.portfolio-card h2 { margin: 0; font-size: 2.8em; color: #00E0C6; transition: all 0.3s ease; }
.daily-change-container { display: flex; align-items: center; gap: 15px; font-size: 1.1em; margin-top: 0; }
.daily-change-container span { transition: all 0.3s ease; }
.positive-change { color: #00E0C6; }
.negative-change { color: #ef5350; }
.timeframe-change-container { 
    margin-top: 20px; 
    padding-top: 20px; 
    border-top: 1px solid #2d3748; 
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1em; 
    color: #a0aec0;
}
.change-row { display: flex; justify-content: space-between; align-items: center; }
.change-label { text-align: left; flex-basis: 30%; }
.change-value { font-weight: bold; text-align: center; flex-basis: 40%; }
.change-pct { font-weight: bold; text-align: right; flex-basis: 30%; }
#ath-value { color: #26a69a; }
#atl-value { color: #ef5350; }

@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-wrap { width: 100%; overflow: hidden; padding: 10px 0; background-color: #1e2533; white-space: nowrap; }
.ticker-move { display: inline-block; animation: ticker-scroll 40s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; padding: 0 2rem; color: #cbd5e0; }
.ticker-item img { width: 20px; height: 20px; margin-right: 10px; }
.ticker-item .price { font-weight: bold; color: #fff; margin-left: 10px; }
.ticker-item .change { margin-left: 10px; font-size: 0.9em; }

.chart-card { height: 450px; }
.tabbed-card { height: 360px; display: flex; flex-direction: column; }
.tab-nav { display: flex; border-bottom: 1px solid #2d3748; flex-shrink: 0; }
.tab-btn { flex-grow: 1; padding: 10px; background-color: transparent; border: none; color: #a0aec0; cursor: pointer; font-size: 1em; border-bottom: 3px solid transparent; transition: all 0.2s ease; }
.tab-btn:hover { background-color: rgba(255, 255, 255, 0.05); }
.tab-btn.active { color: #f0b90b; border-bottom: 3px solid #f0b90b; }
.tab-content { padding-top: 15px; flex-grow: 1; overflow-y: auto; }
.tab-panel { display: none; height: 100%; }
.tab-panel.active { display: flex; flex-direction: column; }

.table-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #4a5568 #2d3748;
    scrollbar-width: thin;
    min-height: 0;
}
table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #2d3748; }
thead th { position: sticky; top: 0; background-color: #1e2533; }
td:nth-child(2), td:nth-child(3), td:nth-child(4) { text-align: right; }
.pie-chart-wrapper { height: 180px; position: relative; margin-bottom: 15px; }
.allocation-summary { font-size: 0.9em; color: #cbd5e0; margin-top: auto; }
.allocation-summary div { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.allocation-summary .coin-name { display: flex; align-items: center; }
.allocation-summary .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.allocation-summary span:last-child { font-weight: bold; }
.blurred-text { filter: blur(4px); transition: filter 0.2s ease; cursor: pointer; }
.blurred-text:hover { filter: blur(0px); }
.timeframe-selector, .table-timeframe-selector { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; }
.table-timeframe-selector { margin-top: 0; margin-bottom: 15px; }
.timeframe-btn, .table-timeframe-btn { background-color: #2d3748; color: #cbd5e0; border: 1px solid #4a5568; padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; }
.timeframe-btn:hover, .table-timeframe-btn:hover { background-color: #4a5568; }
.timeframe-btn.active, .table-timeframe-btn.active { background-color: #f0b90b; color: #121723; border-color: #f0b90b; font-weight: bold; }
#daterange-picker { text-align: center; width: 90px; }
#daterange-picker::placeholder { color: #cbd5e0; }
.table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: #1e2533; }
.table-wrapper::-webkit-scrollbar-thumb { background-color: #4a5568; border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
@media (max-width: 900px) {
    .page-container { flex-direction: column; max-width: 100%; }
    .sidebar { flex: 1 1 auto; width: 100%; order: 2; }
    .main-content { order: 1; }
    .tabbed-card { height: 360px; }
      .table-wrapper {
        overflow-x: auto;
        max-height: 400px;
    }
}
#toplist-counter { display: none; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes flash-positive { 50% { color: #a7ffeb; transform: scale(1.05); } }
@keyframes flash-negative { 50% { color: #ff8a80; transform: scale(1.05); } }
@keyframes flash-neutral { 50% { color: #ffffff; transform: scale(1.03); } }
.flash-positive { animation: flash-positive 0.7s ease-out; }
.flash-negative { animation: flash-negative 0.7s ease-out; }
.flash-neutral { animation: flash-neutral 0.7s ease-out; }

/* FINÁLNE A OPRAVENÉ ŠTÝLY PRE KALENDÁR */
.litepicker {
    background-color: #1e2533 !important;
    border-color: #4a5568 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}
.litepicker .container__months, .litepicker .container__footer {
    background-color: #1e2533 !important;
}
.litepicker .month-item-header, .litepicker .month-item .day-item {
    color: #f0f0f0 !important;
}
.litepicker .month-item .day-item:hover {
    background-color: #2d3748 !important;
    color: #fff !important;
}
.litepicker .month-item .day-item.is-selected {
    background-color: #f0b90b !important;
    color: #121723 !important;
}
.litepicker .month-item .day-item.is-in-range {
    background-color: rgba(240, 185, 11, 0.15) !important;
    color: #f0b90b !important;
}
.litepicker .month-item-weekdays-row > div {
    color: #a0aec0 !important;
}
.litepicker .litepicker__button-previous-month,
.litepicker .litepicker__button-next-month {
    color: #f0f0f0 !important;
}
.litepicker .litepicker__button-previous-month:hover,
.litepicker .litepicker__button-next-month:hover {
    background-color: #2d3748 !important;
}
.litepicker .container__footer {
    border-top-color: #4a5568 !important;
}
.litepicker .litepicker__button {
    background-color: #2d3748 !important;
    color: #f0f0f0 !important;
}
.litepicker .litepicker__button:hover {
    background-color: #4a5568 !important;
}