/* ==========================================================
   Edcret Practice
   Version: 0.2.0 Step 2
========================================================== */

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

body{
    background:#0f172a;
    color:#e2e8f0;
    font-family:Inter,Arial,sans-serif;
    line-height:1.7;
}

a{
    color:#60a5fa;
    text-decoration:none;
}

a:hover{
    color:#93c5fd;
}

.wrap{
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
}

/* ==========================================================
   Navigation
========================================================== */

.nav{
    background:#111827;
    border-bottom:1px solid #1e293b;
    padding:18px 24px;
    display:flex;
    gap:30px;
    align-items:center;
}

.nav a{
    color:#f8fafc;
    font-weight:600;
}

/* ==========================================================
   Problems Page
========================================================== */

.ep-problems-page h1{
    margin-bottom:30px;
}

.ep-problem-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.ep-problem-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#111827;
    border:1px solid #1e293b;
    border-radius:12px;
    padding:22px;
    transition:.2s;
}

.ep-problem-card:hover{
    border-color:#2563eb;
}

.ep-problem-card h2{
    margin-bottom:10px;
    font-size:1.25rem;
}

.ep-problem-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.ep-badge{
    background:#2563eb;
    color:#fff;
    padding:4px 12px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
}

.ep-topic{
    background:#1e293b;
    color:#cbd5e1;
    padding:4px 12px;
    border-radius:30px;
    font-size:.85rem;
}

.ep-open-button{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-weight:600;
}

.ep-open-button:hover{
    background:#1d4ed8;
    color:#fff;
}

/* ==========================================================
   Problem Page
========================================================== */

.ep-problem h1{
    margin-bottom:10px;
}

.ep-problem>.ep-meta{
    display:flex;
    gap:10px;
    margin-bottom:35px;
}

.ep-section{
    margin-bottom:35px;
    background:#111827;
    border:1px solid #1e293b;
    border-radius:12px;
    padding:22px;
}

.ep-section h2{
    margin-bottom:18px;
    color:#f8fafc;
}

.ep-section pre{
    background:#020617;
    border:1px solid #334155;
    border-radius:8px;
    padding:16px;
    overflow:auto;
    color:#e2e8f0;
    font-family:Consolas,Monaco,monospace;
    white-space:pre-wrap;
}

.ep-section code{
    font-family:Consolas,Monaco,monospace;
}

.ep-section ul{
    padding-left:20px;
}

.ep-section li{
    margin-bottom:10px;
}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .nav{
        flex-wrap:wrap;
        gap:15px;
    }

    .ep-problem-card{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .ep-open-button{
        width:100%;
        text-align:center;
    }

}

/* ==========================================================
   Playground Layout
========================================================== */

.ep-playground{
    display:flex;
    height:calc(100vh - 80px);
    overflow:hidden;
}

.ep-left-panel{
    flex:0 0 45%;
    min-width:250px;
    padding:30px;
    overflow-y:auto;
    background:#0f172a;
}

.ep-right-panel{

    flex:1;

    min-width:350px;

    display:flex;

    flex-direction:column;

    background:#020617;

    overflow:hidden;

}

.ep-problem-content{
    margin-top:25px;
}

.ep-problem-content p{
    margin-bottom:16px;
}

/* ==========================================================
   Toolbar
========================================================== */

.ep-editor-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:12px 18px;
    background:#111827;
    border-bottom:1px solid #1e293b;
    flex-wrap:wrap;
}

.ep-toolbar-left,
.ep-toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.ep-editor-toolbar select{
    background:#1e293b;
    color:#f8fafc;
    border:1px solid #334155;
    border-radius:6px;
    padding:8px 12px;
    font-size:14px;
}

.ep-editor-toolbar button{
    background:#1e293b;
    color:#f8fafc;
    border:1px solid #334155;
    border-radius:6px;
    padding:8px 14px;
    cursor:pointer;
    transition:.2s;
    font-size:14px;
}

.ep-editor-toolbar button:hover{
    background:#334155;
}

#ep-run{
    background:#2563eb;
    border-color:#2563eb;
}

#ep-run:hover{
    background:#1d4ed8;
}

#ep-submit{
    background:#16a34a;
    border-color:#16a34a;
}

#ep-submit:hover{
    background:#15803d;
}

#ep-font-size{
    min-width:28px;
    text-align:center;
    font-weight:600;
    color:#cbd5e1;
}

/* ==========================================================
   Monaco Container
========================================================== */

#ep-editor{

    flex:1;

    width:100%;

    height:100%;

    min-height:0;

}

/* ==========================================
   Toast
========================================== */

#ep-toast{

    position:fixed;

    right:25px;

    bottom:25px;

    background:#16a34a;

    color:#fff;

    padding:12px 20px;

    border-radius:8px;

    font-weight:600;

    opacity:0;

    transform:translateY(15px);

    transition:.25s;

    z-index:99999;

    pointer-events:none;

}

#ep-toast.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   Splitter
========================================== */

#ep-splitter{

    width:6px;

    background:#1e293b;

    cursor:col-resize;

    transition:.2s;

    flex-shrink:0;

}

#ep-splitter:hover{

    background:#2563eb;

}

/* ==========================================
   Panel Toggle
========================================== */

#ep-toggle-panel{

    width:34px;
    border:none;
    background:#111827;
    color:#cbd5e1;
    cursor:pointer;
    transition:.2s;

}

#ep-toggle-panel:hover{

    background:#1e293b;

}

.ep-playground.panel-collapsed .ep-left-panel{

    flex-basis:0 !important;
    min-width:0;
    padding:0;
    overflow:hidden;

}

.ep-playground.panel-collapsed #ep-splitter{

    display:none;

}

.ep-playground.panel-collapsed #ep-toggle-panel{

    transform:rotate(180deg);

}

/* ==========================================
   Fullscreen
========================================== */

.ep-playground.ep-fullscreen{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    z-index:999999;

    background:#020617;

}

body.ep-fullscreen-active{

    overflow:hidden;

}

.ep-playground.ep-fullscreen #ep-editor{

    height:100%;

}

.ep-playground.ep-fullscreen .ep-left-panel,
.ep-playground.ep-fullscreen .ep-right-panel{

    height:100%;

}

#ep-fullscreen{

    min-width:110px;

}

/* ==========================================
   Output Panel
========================================== */
#ep-output{

    flex:1;

    display:flex;

    flex-direction:column;

    border-top:1px solid #1e293b;

    background:#0f172a;

}



#ep-output-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 15px;

    background:#111827;

    border-bottom:1px solid #1e293b;

}

.ep-output-tabs{

    display:flex;

    gap:10px;

}

.ep-output-tab{

    background:none;

    border:none;

    color:#94a3b8;

    cursor:pointer;

    padding:6px 10px;

}

.ep-output-tab.active{

    color:#fff;

    border-bottom:2px solid #2563eb;

}

.ep-output-actions{

    display:flex;

    gap:12px;

    align-items:center;

}

#ep-status{

    color:#22c55e;

    font-size:.9rem;

}

#ep-output-body{

    flex:1;

    display:flex;

    overflow:hidden;

}

.ep-output-pane{

    display:none;

    flex:1;

    overflow:auto;

    padding:15px;

}

.ep-output-pane.active{

    display:flex;

    flex-direction:column;

}


#ep-console{

    white-space:pre-wrap;

    font-family:Consolas,monospace;

}

#ep-custom-input{

    flex:1;

    width:100%;

    min-height:0;

    resize:none;

    background:#020617;

    color:#fff;

    border:1px solid #334155;

    padding:10px;

    font-family:Consolas,monospace;

}

/* ==========================================
   Output Buttons
========================================== */

.ep-output-actions button{

    background:#1e293b;
    color:#f8fafc;
    border:1px solid #334155;
    border-radius:6px;
    padding:6px 12px;
    cursor:pointer;
    transition:.2s;

}

.ep-output-actions button:hover{

    background:#334155;

}

/* ==========================================
   Output Resizer
========================================== */

#ep-output-resizer{

    height:6px;

    cursor:row-resize;

    background:#1e293b;

    transition:.2s;

    flex-shrink:0;

}

#ep-output-resizer:hover{

    background:#2563eb;

}

/* ==========================================
   Workspace
========================================== */

.ep-workspace{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.ep-editor-wrapper{

    flex:1 1 auto;

    min-height:150px;

    overflow:hidden;

    display:flex;

}

.ep-output-wrapper{

    flex:0 0 180px;

    min-height:120px;

    display:flex;

    overflow:hidden;

    border-top:1px solid #1e293b;

}

.ep-right-panel,
.ep-workspace,
.ep-editor-wrapper,
.ep-output-wrapper{

    min-height:0;

}