:root {
    color-scheme: light;
    --page-bg: #f2f2f2;
    --card-bg: #ffffff;
    --card-border: #c0c0c0;
    --text: #111111;
    --muted: #242424;
    --field-bg: #fafafa;
    --field-border: #cfcfcf;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    --radius: 6px;
    --results-space: 16.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --page-bg: #111111;
        --card-bg: #1a1a1a;
        --card-border: #303030;
        --text: #f5f5f5;
        --muted: #b9b9b9;
        --field-bg: #222222;
        --field-border: #3a3a3a;
        --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 1.25rem 1.25rem 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: var(--page-bg);
    color: var(--text);
}

.app {
    width: min(100%, 28rem);
    display: grid;
    gap: 0.9rem;
}

.converter {
    width: 100%;
    display: grid;
    gap: 0.9rem;
    padding: 0;
    align-content: start;
}

.title,
#inputField,
#resetBtn,
.result-row {
    border-radius: var(--radius);
}

.title {
    text-align: center;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}

#inputField,
#resetBtn {
    width: 100%;
    min-height: 3rem;
    border-radius: var(--radius);
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
}

#inputField {
    padding: 0.75rem 0.95rem;
    text-align: center;
}

#inputField::placeholder {
    color: var(--muted);
}

#inputField:focus,
#resetBtn:focus {
    outline: 2px solid var(--text);
    outline-offset: 0px;
}

#resetBtn {
    cursor: pointer;
    font-weight: 700;
}

#resetBtn:hover {
    background: var(--card-bg);
}

.results {
    min-height: var(--results-space);
    display: grid;
    gap: 0.5rem;
}

.result-row {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    color: var(--text);
    white-space: nowrap;
}

.result-label {
    color: var(--muted);
    font-weight: 700;
}

.result-value {
    min-width: 5ch;
    text-align: right;
    display: inline-block;
}

@media (max-width: 480px) {
    body {
        padding: 0.75rem 0.75rem 0;
    }

    .results {
        min-height: 15.5rem;
    }

    .result-row {
        gap: 0.5rem;
    }
}