.tokyo-night {
    --bg: #1a1b26;
    --fg: #a9b1d6;
    --cursor: #73daca;
    --highlight: #2f334d;
    --accent: #7aa2f7;
}

.gruvbox-light {
    --bg: #fbf1c7;
    --fg: #3c3836;
    --cursor: #7c6f64;
    --highlight: #d5c4a1;
    --accent: #076678;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'JetBrains Mono', monospace;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    height: 100vh;
    padding: 1rem;
}

.editor, .preview {
    height: 100%;
    position: relative;
}

#codeInput {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    border: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    transition: background-color 0.3s, color 0.3s;
}

#themeToggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    color: var(--fg);
    cursor: pointer;
    font-size: 14px;
    z-index: 1000;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#themeToggle:hover {
    opacity: 1;
}

.preview pre {
    margin: 0;
    padding: 1rem;
    background: var(--bg) !important;
    height: 100%;
}

.preview code {
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    background: none !important;
    text-shadow: none !important;
    color: var(--fg) !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--highlight);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.token.comment { color: #565f89 !important; }
.token.string { color: #9ece6a !important; }
.token.number { color: #ff9e64 !important; }
.token.keyword { color: #bb9af7 !important; }
.token.function { color: #7aa2f7 !important; }
.token.operator { color: #89ddff !important; }
.token.class-name { color: #f7768e !important; }
.token.variable { color: #e0af68 !important; }

#notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    max-width: 400px;
}

#notification img {
    width: 100%;
    display: block;
    border-radius: 8px;
}