:root {
    /* Backgrounds */
    --color-bg-dark: rgb(30, 30, 50);
    --color-bg-alt: rgb(50, 50, 70);
    --color-bg-hover: rgb(70, 70, 90);

    /* Text */
    --color-text-white: rgb(255, 255, 255);
    --color-text-bright: rgb(235, 235, 235);
    --color-text-dim: rgb(200, 200, 200);
    --color-text-dark: rgb(20, 20, 20);
    --color-link: #0077cc;
    --color-link-hover: #005fa3;

    /* Accents */
    --color-accent-yellow: rgb(255, 200, 100);
    --color-accent-yellow-hover: rgb(255, 220, 120);

    --color-accent-green: rgb(0, 200, 120);
    --color-accent-green-hover: rgb(0, 220, 140);

    --color-accent-red: rgb(220, 0, 60);
    --color-accent-red-hover: rgb(240, 0, 80);

    /* Neutrals */
    --color-gray: rgb(80, 80, 80);
    --color-gray-light: rgb(100, 100, 100);

    --code-font: 'Fira Code', monospace;
    --ui-font: 'Ubuntu', sans-serif;
}

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

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

/* Layout */
body {
    display: flex;
    flex-direction: column;
    font-family: var(--ui-font);
    background-color: var(--color-bg-dark);
    color: var(--color-text-bright);
}

/* --- Top Bar --- */
#topContainer {
    height: 12%;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-gray);
    gap: 1rem;
}

/* Title */
#topContainer h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 1000;
    color: var(--color-accent-yellow);
}

.titleGroup {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Button Group */
.buttonGroup {
    display: flex;
    gap: 0.5rem;
}
.debugGroup {
    display: flex;
    gap: 0.5rem;
}

/* Run Buttons */
.executionBtn {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--ui-font);
    font-weight: 500;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}
.executionBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.svgBtn::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

#runBtn {
    color: var(--color-text-white);
    background-color: var(--color-accent-green);
    transition: background-color 0.2s;
}
#runBtn:hover {
    background-color: var(--color-accent-green-hover);
}
#runBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none' fill='none' stroke='rgb(235, 235, 235)'%3E%3Cpolygon stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='7,4 19,12 7,20'/%3E%3C/svg%3E");
}

.yellowBtn {
    color: var(--color-bg-dark);
    background-color: var(--color-accent-yellow);
    transition: background-color 0.2s;
}
.yellowBtn:hover {
    background-color: var(--color-accent-yellow-hover);
}
#debugBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='rgb(30,30,50)' fill='none' preserveAspectRatio='none'%3E%3Cellipse cx='12' cy='13' rx='6' ry='7' stroke-width='2'/%3E%3Cline x1='4' y1='7' x2='8' y2='11' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20' y1='7' x2='16' y2='11' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='2' x2='12' y2='6' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='16' y1='15' x2='20' y2='19' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8' y1='15' x2='4' y2='19' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#continueBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none' fill='none' stroke='rgb(30,30,50)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3'/%3E%3C/svg%3E");
}

#infoBtn, #shareBtn, #pickVersionBtn, .exampleBtn {
    color: var(--color-text-bright);
    background-color: var(--color-bg-alt);
    transition: background-color 0.2s;
}
#infoBtn:hover, #shareBtn:hover, #pickVersionBtn:hover, .exampleBtn:hover {
    background-color: var(--color-bg-hover);
}
#infoBtn {
    border-radius: 30px;
}
#shareBtn, #pickVersionBtn, .exampleBtn {
    border-radius: unset;
}
#infoBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='none' stroke='rgb(235, 235, 235)' width='24' height='24'%3E%3Crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3E%3Cg class='currentLayer'%3E%3Cline x1='8' y1='4' x2='16' y2='12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cline x1='16' y1='12' x2='8' y2='20' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    transform: rotate(var(--arrow-rotation, 0deg));
    transition: transform 0.3s ease;
}
#shareBtn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='none' stroke='rgb(235,235,235)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cmask id='cutout'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='6' y='5' width='12' height='15' rx='2' fill='black'/%3E%3C/mask%3E%3Cg mask='url(%23cutout)'%3E%3Crect x='9' y='5' width='12' height='15' rx='2' stroke-width='2'/%3E%3C/g%3E%3Cg%3E%3Crect x='6' y='5' width='12' height='15' rx='2' stroke-width='2'/%3E%3Cline x1='9' y1='9' x2='15' y2='9' stroke-linecap='round' stroke-width='1'/%3E%3Cline x1='9' y1='12.5' x2='15' y2='12.5' stroke-linecap='round' stroke-width='1'/%3E%3Cline x1='9' y1='16' x2='15' y2='16' stroke-linecap='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    transition: background-image 0.3s ease;
}
#shareBtn.copied::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='none' stroke='rgb(0, 220, 140)' width='24' height='24' viewBox='0 0 24 24'%3E%3Cmask id='cutout'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='6' y='5' width='12' height='15' rx='2' fill='black'/%3E%3C/mask%3E%3Cg mask='url(%23cutout)'%3E%3Crect x='9' y='5' width='12' height='15' rx='2' stroke-width='2'/%3E%3C/g%3E%3Cg%3E%3Crect x='6' y='5' width='12' height='15' rx='2' stroke-width='2'/%3E%3Cline x1='9' y1='9' x2='15' y2='9' stroke-linecap='round' stroke-width='1'/%3E%3Cline x1='9' y1='12.5' x2='15' y2='12.5' stroke-linecap='round' stroke-width='1'/%3E%3Cline x1='9' y1='16' x2='15' y2='16' stroke-linecap='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
#shareBtn {
    min-width: 100px;
    border: 1px solid var(--color-bg-hover);
    transition: border 0.3s ease;
}
#shareBtn.copied {
    border: 1px solid var(--color-accent-green-hover);
}

#infoSection {
    z-index: 12;
    width: 100%;
    height: 100%;
    padding: 12px;
    position: absolute;
    background-color: var(--color-bg-dark);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
#infoSection.active {
    transform: translateX(0);
}

#sections {
    height: 100%;
    display: flex;
}

@media (max-width: 600px) {
    #topContainer h1 {
        display: none !important;
    }
    #output,
    #scopeVariables,
    .modalFrame-header span,
    .modalFrame-row span {
        font-size: 14px !important;
    }
}
@media (max-width: 380px) {
    #topContainer .executionBtn {
        font-size: 0 !important;
        gap: 0 !important;
    }
    #output,
    #scopeVariables,
    .modalFrame-header span,
    .modalFrame-row span {
        font-size: 12px !important;
    }
}

/* --- Main Split --- */
#mainSection {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Editor --- */
#editor {
    height: 61.8%;
    width: 100%;
    overflow: hidden;
}

/* Breakpoints */
.monaco-editor .glyph-margin-widgets .debugBreakpoint {
  background: url("data:image/svg+xml;utf8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='5' fill='red'/></svg>") center no-repeat;
}
.monaco-editor .glyph-margin-widgets .invalidDebugBreakpoint {
  background: url("data:image/svg+xml;utf8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='5' fill='darkred'/></svg>") center no-repeat;
}

/* Highlight the entire glyph margin on hover */
.monaco-editor .margin-view-overlays > div:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.monaco-editor .debugHighlightLine {
    background-color: rgba(200, 50, 50, 0.3);
}

/* --- Output Section --- */
#outputDiv {
    display: flex;
    flex-direction: column;
    height: 38.2%;
}
#debugOptions {
    flex: 0 0 auto;
}
#output.active, #scopeVariables.active {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    white-space: pre-wrap;
}
#output {
    display: none;
    background-color: var(--color-bg-alt);
    color: var(--color-text-bright);
    margin: 0;
    padding: 12px;
    font-size: 16px;
    font-family: var(--code-font);
    width: 100%;
}
#scopeVariables {
    display: none;
    background-color: var(--color-bg-alt);
}

/* Scrollbar */
#output::-webkit-scrollbar, #scopeVariables::-webkit-scrollbar, #inspectVariables::-webkit-scrollbar {
    width: 8px;
}
#output::-webkit-scrollbar-thumb, #scopeVariables::-webkit-scrollbar-thumb, #inspectVariables::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-light);
}

/* --- Debug Options --- */
#debugOptions {
    display: flex;
    background-color: var(--color-bg-alt);
    width: 100%;
}

.debugOption {
    color: var(--color-text-bright);
    background-color: var(--color-bg-alt);
    border: none;
    width: 100px;
    padding: 10px;
    font-family: var(--ui-font);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
    z-index: 11;
}
.debugOption:hover {
    background-color: var(--color-bg-hover);
}
.debugOption.debugOptionSelected {
    background-color: var(--color-accent-yellow);
    color: var(--color-text-dark);
}
.debugOption.debugOptionSelected:hover {
    background-color: var(--color-accent-yellow-hover);
}

#debugScope {
    display: none;
}

/* --- Resizer --- */
#resizer {
    position: relative;
    height: 8px;
    background-color: var(--color-gray);
    cursor: row-resize;
    transition: background-color 0.2s;
    user-select: none;
    touch-action: none;
    z-index: 10;
}
#resizer:hover, #resizer.active {
    background-color: var(--color-accent-yellow);
}
#resizer::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    bottom: -18px;
    pointer-events: auto;
    background: transparent;
}

#statusBar {
    position: absolute;
    bottom: 0;
    height: 16px;
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--code-font);
    font-size: 12px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

#statusBar.active {
    transform: translateY(0);
}
#statusBar.success {
    background: var(--color-accent-green);
    color: var(--color-text-white);
}
#statusBar.error {
    background: var(--color-accent-red);
    color: var(--color-text-white);
}

#infoSection a {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

#infoSection a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

#infoSection a[target="_blank"]::after {
  content: "↗";
  font-size: 0.85em;
  margin-left: 3px;
}

#scopeVariables table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-family: var(--code-font);
}

#scopeVariables th, #scopeVariables td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    padding: 8px;
    text-align: left;
    width: 30%;
}

#scopeVariables th {
    background-color: var(--color-bg-dark);
    position: sticky;
    top: 0;
    z-index: 10;
}

#scopeVariables td.var-value {
    border-bottom: 1px solid var(--color-bg-hover);
}
#scopeVariables td.var-value.copied {
    border-bottom: 1px solid var(--color-accent-green-hover);
    color: var(--color-accent-green-hover)
}
#scopeVariables td.var-value:hover {
    background-color: var(--color-bg-hover);
}

#codeExamples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.exampleBtn {
    min-width: fit-content;
    max-width: fit-content;
}

.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalContainer {
    width: 80%;
    height: 50%;
    z-index: 12;
    overflow-y: auto;
    white-space: pre-wrap;
}
.modalFrame {
    background-color: var(--color-bg-alt);
    font-family: var(--code-font);
    color: var(--color-text-bright);
    min-height: 100%;
}
.modalFrame-header span, .modalFrame-row div.contentDiv {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.modalFrame-header {
    background-color: var(--color-bg-dark);
    display: flex;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
    padding: 5px;
    padding-left: 10px;
}
.modalFrame-row {
    display: flex;
    align-items: center;
    width: 100%;
    border-top: 1px solid var(--color-bg-hover);
}
.modalFrame-row span.titleSpan {
    flex: 0 0 auto;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    min-width: 30px;
    color: var(--color-accent-yellow);
}
.modalFrame-row div.contentDiv {
    flex: 1;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    width: 100%;
    cursor: pointer;
}
.modalFrame-row div.contentDiv.copied {
    border-bottom: 1px solid var(--color-accent-green-hover);
    color: var(--color-accent-green-hover)
}
.modalFrame-row div.contentDiv:hover {
    background-color: var(--color-bg-hover);
}