:root {
    --bg: #f5f5f5;
    --card: #ffffff;
    --border: #dedede;
    --text: #141414;
    --sub: #777777;
    --accent: #111111;
    --danger-bg: #ffe5e5;

    --res-bg: #f0f0f0;
    --toggle-bg: #e3e3e3;
    --toggle-knob: #ffffff;
}

html.theme-dark {
    --bg: #12151a;
    --card: #191d24;
    --border: #2a3039;
    --text: #f4f4f4;
    --sub: #a0a7b3;
    --accent: #ffffff;
    --danger-bg: #4a2225;

    --res-bg: #1f242d;
    --toggle-bg: #343b47;
    --toggle-knob: #f4f4f4;
}

html.theme-dark .toggle-knob {
    transform: translateX(20px);
}

html.theme-dark .input-shell {
    background: #1f242d;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}


body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

main.wrapper {
    flex: 1 0 auto;
}


.wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 18px 16px 40px;
}