@font-face {
    font-family: 'FiraCode Nerd Font';
    src: url('./fonts/FiraCodeNerdFont.woff2') format('woff2'),
         url('./fonts/FiraCodeNerdFont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0f1720;
    --panel: #0b1220;
    --accent: #7c5cff;
    --text: #cfe3ff;
    --muted: #8b98a8;
}

html,body{
    height:100%;
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: 'FiraCode Nerd Font', monospace;
    -webkit-font-smoothing:antialiased;
}

#app{
    display:flex;
    height:100vh;
}

#sidebar{
    width:300px;
    background:var(--panel);
    border-right:1px solid rgba(255,255,255,0.03);
    display:flex;
    flex-direction:column;
}

#sidebar header{
    padding:12px 16px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,0.03);
}

#file-tree{
    padding:8px 6px;
    overflow:auto;
    flex:1;
}

.tree-item{
    padding:6px 10px;
    border-radius:4px;
    color:var(--text);
    cursor:pointer;
    font-size:14px;
}
.tree-item:hover{background:rgba(255,255,255,0.02)}
.tree-item.dir::before{content:'▸ ';color:var(--accent);}
.tree-item.file::before{content:'▹ ';opacity:0.6}

.tree-item:focus{outline:2px solid rgba(124,92,255,0.18); background:rgba(124,92,255,0.03)}
.tree-item.selected{background:rgba(124,92,255,0.08); font-weight:700}

#editor-area{
    flex:1;
    display:flex;
    flex-direction:column;
}

#editor-header{
    height:44px;
    display:flex;
    align-items:center;
    padding:0 12px;
    background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
    border-bottom:1px solid rgba(255,255,255,0.03);
    color:var(--muted);
}

#code{ 
    margin:0;
    padding:16px;
    overflow:auto;
    font-size:13px;
    line-height:1.5;
}

.hljs{
    background:transparent;
    color:var(--text);
}

/* Editor preferences */
/* font ligatures and weight handled by font files */
code, pre { font-variant-ligatures: contextual; font-weight:600; }