:root {
   /* Gruvbox Light Medium by jdinhlife*/
   --primary-bg: #fbf1c7;
   --panel-bg: #f9f5d7;
   --text-color: #3c3836;
   --accent: #b57614;
   --button-bg: #b57614;
   --button-hover: #af3a03;
   --button-stop: #FB4934;
   --button-stop-hover: #9d0006;
   --button-clear: #ebdbb2;
   --button-clear-text: #282828;
   --button-clear-hover: #282828;
   --button-clear-hover-text: #ebdbb2;
   --output-bg: #ebdbb2;
   --output-text: #3c3836;
   --editor-bg: #ebdbb2;
   --editor-fg: #3c3836;
   --editor-cursor: #b57614;
   --editor-selection: #d5c4a1;
   --splitter-color: #ccc;
   --label-color: #b57614;
   --label-color-dark: #ffe066;
   --token-keyword: #9d0006;
   --token-type: #b57614;
   --token-identifier: #076678;
   --token-int: #8f3f71;
   --token-string: #79740e;
   --token-comment: #928374;
   --token-default: #3c3836;
   --token-escape: #9d0006;
   --token-punctuation: #7c6f64;
   --token-function: #427b58;
}

body.dark {
   /* Gruvbox Dark by me */
   --primary-bg: #282828;
   --panel-bg: #3c3836;
   --text-color: #ebdbb2;
   --accent: #fabd2f;
   --button-bg: #fabd2f;
   --button-hover: #b57614;
   --button-stop: #fb4934;
   --button-stop-hover: #cc241d;
   --button-clear: #3c3836;
   --button-clear-text: #ebdbb2;
   --button-clear-hover: #ebdbb2;
   --button-clear-hover-text: #3c3836;
   --output-bg: #1d2021;
   --output-text: #ebdbb2;
   --editor-bg: #1d2021;
   --editor-fg: #ebdbb2;
   --editor-cursor: #fabd2f;
   --editor-selection: #3c3836;
   --splitter-color: #232339;
   --label-color: #ffe066;
   --label-color-dark: #ffe066;
   --token-keyword: #fb4934;
   --token-type: #fabd2f;
   --token-identifier: #83a598;
   --token-int: #d3869b;
   --token-string: #b8bb26;
   --token-comment: #928374;
   --token-default: #ebdbb2;
   --token-escape: #d3869b;
   --token-punctuation: #fe8019;
   --token-function: #b8bb26;
}

body {
   background: var(--primary-bg);
   color: var(--text-color);
   font-family: 'Segoe UI', Arial, sans-serif;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   transition: background 0.3s, color 0.3s;
}

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

.topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--primary-bg);
   color: var(--output-text);
   padding: 0 24px;
   height: 56px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   position: relative;
   gap: 16px;
   border-bottom: 2px solid var(--editor-selection);
}

.logo {
   font-size: 1.3rem;
   font-weight: bold;
   letter-spacing: 1px;
   flex: 1;
}

.button-group {
   display: flex;
   align-items: center;
   gap: 10px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   margin-right: 10px;
   cursor: pointer;
   position: relative;
   transition: filter 0.3s;
   user-select: none;
   border-radius: 50%;
   background: none;
   border: none;
   outline: none;
}

.theme-toggle:active {
   filter: brightness(0.8);
}

.icon-moon,
.icon-sun {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%) scale(1);
   font-size: 1.3rem;
   transition: opacity 0.3s, transform 0.3s, color 0.3s;
   pointer-events: none;
}

.icon-moon::before {
   content: "🌙";
}

.icon-sun::before {
   content: "☀️";
}

.icon-moon {
   opacity: 0;
   color: #ffe066;
   /* text-shadow: 0 0 2px #000, 0 0 4px #000; */
}

.icon-sun {
   opacity: 1;
   color: #ffe066;
   /* text-shadow: 0 0 2px #000, 0 0 4px #000; */
}

.theme-toggle.active .icon-moon {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1.1) rotate(360deg);
}

.theme-toggle.active .icon-sun {
   opacity: 0;
   transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
}

.run-btn,
.stop-btn {
   padding: 8px 24px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-weight: bold;
   transition: background 0.2s, color 0.2s, box-shadow 0.2s;
   color: #fff;
}

.run-btn {
   background: #B8BB26;
   box-shadow: 0 2px 8px rgba(184, 187, 38, 0.15);
}

.run-btn:hover {
   background: #a9b820;
   box-shadow: 0 4px 16px rgba(184, 187, 38, 0.25);
}

.stop-btn {
   background: var(--button-stop);
}

.stop-btn:hover {
   background: var(--button-stop-hover);
}

.clear-btn {
   margin-left: auto;
   background: transparent;
   border: 1.5px solid var(--button-clear-text);
   color: var(--button-clear-text);
   font-size: 1rem;
   font-weight: bold;
   border-radius: 4px;
   padding: 8px 16px;
   cursor: pointer;
   transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.clear-btn:hover {
   background: var(--button-clear-hover);
   color: var(--button-clear-hover-text);
   border-color: var(--button-clear-hover-text);
}

.topbar {
   background: var(--primary-bg);
   color: var(--output-text);
   border-bottom: 2px solid var(--editor-selection);
}

.main-content {
   flex: 1 1 auto;
   height: calc(100vh - 56px);
   display: flex;
   flex-direction: column;
   min-height: 0;
}

.split-container {
   flex: 1 1 auto;
   display: flex;
   height: 100%;
   min-height: 0;
}

.editor-panel,
.io-panel {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-width: 80px;
   min-height: 0;
}

.editor-panel {
   border-right: 2px solid var(--editor-selection);
}

.io-panel {
   border-right: none;
   border-left: none;
}

.editor-panel label,
.io-panel label {
   padding: 8px 0 4px 8px;
   font-weight: bold;
   color: var(--label-color);
}

.editor-panel textarea,
.io-panel textarea {
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
   outline: none;
   background: var(--output-bg);
   color: var(--output-text);
   font-family: 'Fira Mono', 'Consolas', monospace;
   font-size: 1rem;
   padding: 12px;
   box-sizing: border-box;
   border-radius: 0px;
   min-height: 0;
   overflow: auto;
}

.splitter {
   width: 4px;
   cursor: col-resize;
   background: var(--splitter-color);
   transition: background 0.2s;
   z-index: 2;
}

.splitter:hover {
   background: #ffe066;
}

#console {
   width: 100%;
   height: 100%;
   min-height: 0;
   max-height: none;
   resize: none;
   font-family: 'Fira Mono', 'Consolas', monospace;
   font-size: 1rem;
   padding: 12px;
   border-radius: 0px;
   background: var(--output-bg);
   box-sizing: border-box;
   color: var(--output-text);
   transition: background 0.3s, color 0.3s;
}

.editor-wrapper {
   position: relative;
   flex: 1 1 auto;
   min-height: 0;
   height: 100%;
   width: 100%;
   margin-bottom: 0;
   background: var(--editor-bg) !important;
}

/* Highlight overlay */
.editor-wrapper pre {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   pointer-events: none;
   font-family: 'Fira Mono', 'Consolas', monospace;
   font-size: 1rem;
   padding: 12px;
   box-sizing: border-box;
   border-radius: 0px;
   z-index: 1;
   white-space: pre-wrap;
   word-break: break-word;
   overflow: auto;
   background: transparent !important;
   color: var(--token-default);
}

/* Il textarea deve essere trasparente sopra il pre */
.editor-wrapper textarea {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
   outline: none;
   font-family: 'Fira Mono', 'Consolas', monospace;
   font-size: 1rem;
   padding: 12px;
   box-sizing: border-box;
   border-radius: 0px;
   z-index: 2;
   min-height: 0;
   overflow: auto;
   color: transparent !important;
   background: transparent !important;
   caret-color: var(--editor-cursor);
}

/* Token styles */
.tg-keyword {
   color: var(--token-keyword);
}

.tg-type {
   color: var(--token-type);
}

.tg-identifier {
   color: var(--token-identifier);
}

.tg-int {
   color: var(--token-int);
}

.tg-string {
   color: var(--token-string);
}

.tg-comment {
   color: var(--token-comment);
   font-style: italic;
}

.tg-default {
   color: var(--token-default);
}

.tg-escape {
   color: var(--token-escape);
}

.tg-punctuation {
   color: var(--token-punctuation);
}

.tg-function {
   color: var(--token-function);
}