:root{--bg-main:#1e1e1e;--bg-sidebar:#252526;--bg-card:#2d2d2d;--text-color:#bebebe;--heading-color:#e6e6e6;--accent-blue:#007acc;--border-color:#404040;--bg-top-and-active-bar:#323230;--icon-color:#d4d4d4;--title:#4ec9b0;--label-title:#4ec94e;--features-bg:#3741514d;--features-border:#4b5563;--btn-purple:#c084fc}.light-theme{--bg-main:#f8f8f8;--bg-sidebar:#f3f3f3;--bg-card:#fff;--text-color:#333;--heading-color:#444;--border-color:#ccc;--bg-top-and-active-bar:#e5e7eb;--icon-color:#333;--title:#007acc;--label-title:#333;--features-bg:#f3f4f6;--features-border:#d1d5db;--btn-purple:#c084fc}body{background-color:var(--bg-main);color:var(--text-color);flex-direction:column;height:100vh;margin:0;font-family:Consolas,Monaco,Courier New,monospace;font-style:normal;font-weight:400;display:flex;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex}p{margin:0}.main-layout{flex-grow:1;display:flex;overflow:hidden}.activity-bar{background-color:var(--bg-top-and-active-bar);flex-direction:column;flex-shrink:0;align-items:center;gap:20px;width:50px;min-width:50px;padding-top:15px;display:flex}.activity-bar .icon{opacity:.5;cursor:pointer;font-size:20px}.activity-bar .icon.active{opacity:1;border-left:2px solid var(--icon-color);padding-left:2px}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;color:#fff;font-size:28px}.icon.active .material-symbols-outlined{color:var(--icon-color)}.container-right{flex-direction:column;flex-grow:1;height:calc(100vh - 36px);display:flex;overflow:hidden}.working-area{flex-grow:1;height:100%;display:flex;overflow:hidden}.top-bar{background-color:var(--bg-top-and-active-bar);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;height:36px;padding:0 20px;font-size:13px;display:flex}.controls{align-items:center;gap:10px;display:flex}.control-btn{width:27px;height:27px;color:var(--text-color);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;font-family:Consolas,monospace;font-size:16px;transition:background-color .2s;display:flex}.control-btn:hover{background-color:var(--bg-card)}.control-btn .material-symbols-outlined{color:var(--text-color);font-size:18px!important}.content-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-sizing:border-box;border-radius:8px;width:100%;max-width:calc(100% - 40px);margin:20px;padding:30px}.profile-header{align-items:top;gap:20px;display:flex}.profile-pic{border:3px solid var(--accent-blue);object-fit:cover;border-radius:50%;align-self:center;width:150px;height:150px}.code-block{color:var(--text-color)}.sidebar{background-color:var(--bg-sidebar);border-right:var(--border-color) 1px solid;flex-direction:column;width:255px;min-width:255px;height:auto;padding:12px 0;font-size:14px;display:flex}#explorer-title{color:var(--text-color);flex-shrink:0;margin-bottom:10px;padding:0 15px;font-size:12px;font-weight:600}.file-list{padding:0;list-style:none}.file{cursor:pointer;align-items:center;gap:8px;height:20px;padding:4px 15px;font-size:14px;transition:background-color .2s;display:flex}.file .material-symbols-outlined{font-size:16px!important}.file:hover{background-color:var(--bg-card)}.file.active{background-color:#007acc80}.file span{align-items:center;display:flex;font-size:18px!important}.main-content{flex-direction:column;flex-grow:1;min-width:0;height:100%;display:flex}.tabs{background-color:var(--bg-sidebar);border-bottom:1px solid var(--border-color);height:35px;display:flex;overflow-x:auto}.tab{background-color:var(--bg-card);border-top:1px solid var(--border-color);border-right:1px solid var(--border-color);cursor:pointer;color:#858585;-webkit-user-select:none;user-select:none;align-items:center;min-width:120px;padding:0 10px;font-size:13px;display:flex;position:relative}.tab.active{background-color:var(--bg-main);color:var(--text-color);border-top:1px solid var(--accent-blue)}.tab-icon{margin-right:8px;font-size:16px!important}.tab-close{visibility:hidden;border-radius:4px;margin-left:auto;padding:2px;font-size:14px!important}.tab:hover .tab-close,.tab.active .tab-close{visibility:visible}.tab-close:hover{background-color:var(--border-color)}.editor-view{background-color:var(--bg-main);flex-grow:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow-y:auto}.download-btn{background-color:var(--accent-blue);color:#fff;cursor:pointer;border:none;border-radius:2px;margin-top:15px;padding:8px 15px;font-family:Consolas,monospace;font-size:14px}.download-btn:hover{background-color:#189cff}.status-bar{background-color:var(--accent-blue);color:#fff;z-index:10;box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;height:22px;min-height:22px;padding:0 10px;font-size:12px;display:flex;position:relative}.status-left span{margin-right:15px}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.large-icon{color:#3e3e3e;font-size:40px!important}#empty-msg{color:#555;margin:0;font-size:18px}.container{box-sizing:border-box;width:100%;min-height:100%;padding:24px}.title{color:var(--title);margin-top:0;margin-bottom:24px;font-family:Consolas,monospace;font-size:24px;font-weight:700}.text{color:var(--text-color);white-space:pre-wrap;font-family:Consolas,monospace;font-size:16px;line-height:1.6}.button{color:#e5e7eb;border-radius:4px;align-items:center;gap:8px;padding:8px 16px;font-family:Consolas,monospace;font-size:14px;text-decoration:none;display:flex}.button:hover{opacity:.8}.labels-container{flex-wrap:wrap;gap:8px;margin-top:15px;display:flex}.label{color:var(--label-title);border:1px solid var(--border-color);background-color:#569cd65b;border-radius:4px;padding:4px 10px;font-family:Consolas,monospace;font-size:14px}.features-container{margin-top:15px}.toggle-features-btn{color:var(--btn-purple);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;margin-bottom:16px;padding:0;font-family:Consolas,monospace;font-size:14px;transition:opacity .2s;display:flex}.toggle-features-btn:hover{opacity:.8}.toggle-features-btn svg{transition:transform .3s;transform:rotate(180deg)}.toggle-features-btn.open svg{transform:rotate(0)}.features-box{border:1px solid var(--features-border);background-color:var(--features-bg);border-radius:4px;margin-bottom:16px;padding:16px;display:none}.features-list{margin:0;padding:0;font-size:14px;list-style:none}.features-list li{color:var(--text-color);margin-bottom:4px}.project-actions{gap:10px;margin-top:20px;display:flex}.action-btn{color:#fff;border-radius:4px;align-items:center;gap:8px;padding:6px 12px;font-family:Consolas,monospace;font-size:13px;text-decoration:none;transition:opacity .2s;display:flex}.github-btn{background-color:#333}.demo-btn{background-color:#007acc}.action-btn:hover{opacity:.8}.keyword{color:#569cd6}.variable{color:#9cdcfe}.string{color:#ce9178}.class-name{color:#4ec9b0}.function{color:#f1e05a}.tag{color:#569cd6}.prop{color:#9cdcfe}.comment{color:#6a9955;font-style:italic}.fw-bold{font-weight:700}.fs-14{font-size:14px}.fs-20{font-size:20px}.mt-0{margin-top:0}.mt-10{margin-top:10px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.ml-10{margin-left:10px}.ml-20{margin-left:20px}.my-10{margin:10px 0}.lh-16{line-height:1.6}.flex-col{flex-direction:column;display:flex}.flex-row{align-items:center;display:flex}.gap-8{gap:8px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.w-fit{width:fit-content}.border-none{border:none}.cursor-pointer{cursor:pointer}.color-pink{color:#d60076}.color-blue{color:#007acc}.color-green{color:#0c1}.color-purple{color:#8335cc}.color-cyan{color:#4ec9b0}.color-yellow{color:#f1e05a}.color-darkblue{color:#3776ab}.color-folder{color:#995590}.color-title{color:var(--title)}.color-heading{color:var(--heading-color)}.color-text{color:var(--text-color)}.color-btn-purple{color:var(--btn-purple)}.icon-sm{font-size:16px!important}.icon-md{font-size:18px!important}.icon-lg{font-size:20px!important}