@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Courier+Prime:wght@400;700&display=swap');



/* GLOBAL */

* {

    font-family: 'Poppins', sans-serif;

}



/* CODE EDITOR */

.code-editor {

    font-family: 'Courier Prime', monospace;

    font-size: 14px;

    line-height: 1.6;

    background: #1e1e2e !important;

    color: #e8d4f1 !important;

    resize: none;

    outline: none;

}



/* EDITOR HEADER */

.editor-header {

    background: #2d2d3d;

    padding: 12px 16px;

    border-bottom: 1px solid #3a3a4a;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* OUTPUT HEADER */

.output-header {

    background: #2d2d3d;

    padding: 3px 16px;

    border-bottom: 1px solid #3a3a4a;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* OUTPUT BOX */

.output-box {

    background: #1e1e2e;
    color: #90ee90;
    font-family: 'Courier Prime', monospace;
    border: 1px solid #3a3a4a;
    overflow-y: auto;
}



/* RUN BUTTON */

.run-button {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    transition: all 0.3s ease;

}



.run-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);

}



.run-button:active {

    transform: translateY(0);

}



/* TAB BUTTONS */

.tab-button {

    padding: 8px 16px;

    border: none;

    background: transparent;

    color: #999;

    cursor: pointer;

    font-weight: 600;

    transition: all 0.3s ease;

    border-bottom: 2px solid transparent;

}



.tab-button.active {

    color: #667eea;

    border-bottom-color: #667eea;

}



/* OUTPUT LINES */

.output-line {

    padding: 8px 0;

    border-bottom: 1px solid #3a3a4a;

    word-break: break-word;

}



.output-line:last-child {

    border-bottom: none;

}



.error-line {

    color: #ff6b6b;

}



.success-line {

    color: #90ee90;

}



.warning-line {

    color: #ffd700;

}



.info-line {

    color: #87ceeb;

}



/* SPINNER */

.loading-spinner {

    border: 2px solid #3a3a4a;

    border-top: 2px solid #667eea;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* NOTIFICATION */

.notification {

    position: fixed;

    top: 20px;

    right: 20px;

    background: #667eea;

    color: white;

    padding: 12px 24px;

    border-radius: 8px;

    animation: slideIn 0.3s ease;

    z-index: 1000;

}



@keyframes slideIn {

    from {

        transform: translateX(400px);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}



/* SYNTAX COLORS */

.syntax-highlight {

    color: #90ee90;

}



.syntax-keyword {

    color: #ff79c6;

}



.syntax-string {

    color: #f1fa8c;

}