html {
    --upload-bg: var(--clr-bg-nav);
    --upload-text: var(--clr-text-primary);
    --upload-button-bg: var(--clr-button);
    --upload-button-border: var(--clr-sublist-arrow);
    --upload-button-text: var(--clr-sublist-arrow);
    --upload-button-hover-bg: var(--clr-sublist-arrow);
    --upload-button-hover-text: var(--clr-bg-primary);
    --upload-border: transparent;

    --progress-bg: var(--clr-bg-nav-hover);
    --progress-fill: var(--clr-sublist-arrow);
    --progress-text: var(--clr-text-primary);

    --controls-bg: #2d2d2d;

    --control-label-clr: #ccc;
    --control-input-bg: #1a1a1a;
    --control-input-border: #555;
    --control-input-text: #e0e0e0;

    --stat-bg: #2d2d2d;
    --stat-border-left: #4caf50;
    --stat-header-clr: #4caf50;
    --stat-header-border-bottom: #444;
    --stat-border-bottom: #333;
    --stat-label-clr: #ccc;
    --stat-value-clr: #4caf50;

    --toplist-bg: #2d2d2d;
    --toplist-border-left: #ff9800;
    --toplist-header-clr: #ff9800;
    --toplist-header-border-bottom: #444;
    --toplist-border-bottom: #333;
    --toplist-label-clr: #ccc;
    --toplist-value-clr: #ff9800;
    --toplist-rank-bg: #ff9800;
    --toplist-rank-text: #1a1a1a;

    --error-bg: #f44336;
    --error-text: white;

    --chart-bg: #2d2d2d;
    --chart-border-left: #2196f3;
    --chart-header-clr: #2196f3;
    --chart-header-border-bottom: #444;
    --chart-label-clr: #ccc;
    --chart-bar-bg: #1a1a1a;
    --chart-fill-gradient-start: #2196f3;
    --chart-fill-gradient-end: #64b5f6;
    --chart-value-clr: #2196f3;
}

html.light {
    --upload-bg: #fcfcfb;
    --upload-text: #222222;
    --upload-button-bg: #dfd6ac;
    --upload-button-border: #ac9956;
    --upload-button-text: #5a4f20;
    --upload-button-hover-bg: #ac9956;
    --upload-button-hover-text: #fcfcfb;
    --upload-border: #bfb48d;

    --progress-bg: #d5d3c3;
    --progress-fill: #ac9956;
    --progress-text: #222222;

    --controls-bg: #e6e6d9;

    --control-label-clr: #444444;
    --control-input-bg: #fefefe;
    --control-input-border: #9c9b87;
    --control-input-text: #222222;

    --stat-bg: #f5f5eb;
    --stat-border-left: #388e3c;
    --stat-header-clr: #388e3c;
    --stat-header-border-bottom: #a2a294;
    --stat-border-bottom: #b0afa2;
    --stat-label-clr: #555555;
    --stat-value-clr: #388e3c;

    --toplist-bg: #f5f5eb;
    --toplist-border-left: #d17d00;
    --toplist-header-clr: #d17d00;
    --toplist-header-border-bottom: #a2a294;
    --toplist-border-bottom: #b0afa2;
    --toplist-label-clr: #555555;
    --toplist-value-clr: #d17d00;
    --toplist-rank-bg: #d17d00;
    --toplist-rank-text: #2a280b;

    --error-bg: #f99a9a;
    --error-text: #5a0000;

    --chart-bg: #f5f5eb;
    --chart-border-left: #1565c0;
    --chart-header-clr: #1565c0;
    --chart-header-border-bottom: #a2a294;
    --chart-label-clr: #555555;
    --chart-bar-bg: #e1e2d8;
    --chart-fill-gradient-start: #1565c0;
    --chart-fill-gradient-end: #5ea2f7;
    --chart-value-clr: #1565c0;
}

main {
    max-width: 1500px;
    width: 100%;
    margin: auto;
}

.upload-section {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    background-color: var(--upload-bg);
    padding: 1.5em 2em;
    border-radius: 4px;
    text-align: center;
    border: 1px solid var(--upload-border);
}

.upload-section > h2 {
    margin: 0 0 0.5em 0;
    font-weight: bold;
    font-size: 1.8rem;
}

.upload-section > p {
    margin: 0 0 1.5em 0;
    font-size: 1rem;
    color: var(--upload-text);
    opacity: 0.8;
}

.upload-section > .upload-button {
    margin-bottom: 1.5em;
}

.upload-section > .upload-button > label {
    padding: 0.5rem 1.25rem;
    background-color: var(--upload-button-bg);
    border: 1px solid var(--upload-button-border);
    border-radius: 4px;
    color: var(--upload-button-text);
    font-family: var(--fonts);
    font-size: var(--global-fs);
    cursor: pointer;
    -webkit-transition:
        background-color 0.3s ease,
        color 0.3s ease;
    -o-transition:
        background-color 0.3s ease,
        color 0.3s ease;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
    width: 100%;
}

.upload-section > .upload-button > label:hover,
.upload-section > .upload-button > label:focus {
    background-color: var(--upload-button-hover-bg);
    color: var(--upload-button-hover-text);
}

.upload-section > .upload-button > input[type="file"] {
    display: none;
}

.progress-container {
    width: 100%;
    height: 16px;
    background-color: var(--progress-bg);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5em;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.progress-bar {
    height: 100%;
    background-color: var(--progress-fill);
    width: 0%;
    -webkit-transition: width 0.4s ease;
    -o-transition: width 0.4s ease;
    transition: width 0.4s ease;
}

.progress-text {
    font-size: 0.875rem;
    color: var(--progress-text);
    text-align: center;
    min-height: 1.2em;
    font-family: var(--fonts-mono);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.controls {
    margin-top: 20px;
    background: var(--controls-bg);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    display: none;
}

.control-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.control-group label {
    color: var(--control-label-clr);
    font-weight: 500;
}

.control-group input {
    background: var(--control-input-bg);
    border: 1px solid var(--control-input-border);
    color: var(--control-input-text);
    padding: 8px 12px;
    border-radius: 5px;
    width: 80px;
}

.stat-card {
    background: var(--stat-bg);
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid var(--stat-border-left);
}

.stat-card h3 {
    color: var(--stat-header-clr);
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--stat-header-border-bottom);
    padding-bottom: 10px;
}

.stat-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 8px 0;
    padding: 5px 0;
    border-bottom: 1px solid var(--stat-border-bottom);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    font-weight: 500;
    color: var(--stat-label-clr);
}

.stat-value {
    color: var(--stat-value-clr);
    font-weight: bold;
}

.top-list {
    background: var(--toplist-bg);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--toplist-border-left);
}

.top-list h3 {
    color: var(--toplist-header-clr);
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--toplist-header-border-bottom);
    padding-bottom: 10px;
}

.top-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--toplist-border-bottom);
    word-break: break-all;
}

.top-item:last-child {
    border-bottom: none;
}

.top-rank {
    background: var(--toplist-rank-bg);
    color: var(--toplist-rank-text);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 10px;
    min-width: 25px;
    text-align: center;
}

.top-label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 10px;
    font-size: 0.9rem;
    color: var(--toplist-label-clr);
}

.top-value {
    color: var(--toplist-value-clr);
    font-weight: bold;
    white-space: nowrap;
}

.error {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    text-align: center;
}

.chart-container {
    background: var(--chart-bg);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--chart-border-left);
}

.chart-container h3 {
    color: var(--chart-header-clr);
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--chart-header-border-bottom);
    padding-bottom: 10px;
}

.chart-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 8px 0;
    padding: 5px 0;
}

.chart-label {
    min-width: 150px;
    font-size: 0.9rem;
    color: var(--chart-label-clr);
    text-align: right;
    margin-right: 10px;
}

.chart-visual {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: var(--chart-bar-bg);
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.chart-fill {
    height: 100%;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(var(--chart-fill-gradient-start)),
        to(var(--chart-fill-gradient-end))
    );
    background: -o-linear-gradient(
        left,
        var(--chart-fill-gradient-start),
        var(--chart-fill-gradient-end)
    );
    background: linear-gradient(
        90deg,
        var(--chart-fill-gradient-start),
        var(--chart-fill-gradient-end)
    );
    border-radius: 10px;
    -webkit-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    transition: width 0.5s ease;
}

.chart-value {
    margin-left: 10px;
    color: var(--chart-value-clr);
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 150px;
}

@media (max-width: 900px) {
    .control-group {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    .stats-container {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .top-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 5px;
    }

    .top-rank {
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    .chart-label,
    .chart-value {
        min-width: -moz-min-content;
        min-width: -webkit-min-content;
        min-width: min-content;
    }
}