@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{ margin:0; padding:0; box-sizing:border-box }
body,html{ font-family:"Inter",sans-serif; width:100%; height:100% }
#desktop{ overflow:hidden; width:100%; height:100vh; background:url("/assets/wallpapers/wallpaper.svg") no-repeat center center; background-size:cover; background-attachment:fixed; position:relative }
#desktop .top-nav{ display:flex; align-items:center; padding:6px 20px; justify-content:space-between; width:100%; height:1.9rem; background-color:hsla(0,0%,100%,.3); backdrop-filter:blur(3px) }
#desktop .top-nav .nav-text{ display:flex; align-items:center }
#desktop .top-nav .nav-text span{ font-size:.9rem; display:flex; align-items:center }
#desktop .top-nav .nav-icons{ user-select:none; cursor:pointer; gap:5px; display:flex; align-items:center }
#desktop .top-nav .nav-icons img{ width:.9rem }
#desktop .bottom-nav{ z-index:10000001; height:50px; gap:10px; position:absolute; bottom:1.2rem; width:100%; display:flex; justify-content:center; align-items:center }
#desktop .bottom-nav .taskbar{ border:1px solid hsla(0,0%,100%,.3); height:100%; border-radius:10px; background-color:hsla(0,0%,100%,.3); padding:10px 20px; backdrop-filter:blur(3px); display:flex; gap:10px }
#desktop .bottom-nav .taskbar img{ transition:all ease .2s; width:1.7rem; cursor:pointer }
#desktop .bottom-nav .taskbar img:hover{ width:2.5rem; scale:1.2 }
#desktop .bottom-nav .taskbar .search{ display:flex; align-items:center; border-radius:8px; width:80px }
#desktop .bottom-nav .taskbar .search input{ border:none; background:rgba(0,0,0,0); outline:none; font-size:14px; width:100%; color:#fff }
#desktop .bottom-nav .taskbar .search input::placeholder{ color:#fff }
#desktop .bottom-nav .taskbar .search i{ color:#fff; margin-right:12px }
#desktop .bottom-nav .v-line{ margin:0 10px 0 2px; height:100%; width:3px; border-radius:1.7rem; background-color:#bebebe }
#desktop .bottom-nav .widgets{ border:1px solid hsla(0,0%,100%,.3); align-items:center; height:100%; border-radius:10px; background-color:hsla(0,0%,100%,.3); padding:10px 20px; backdrop-filter:blur(3px); display:flex; gap:10px }
#desktop .bottom-nav .widgets .clock{ gap:10px; display:flex }
#desktop .bottom-nav .widgets .clock .time{ font-weight:700 }
#desktop .windows{ width:100%; position:relative; height:calc(100% - 1.9rem) }
#desktop .windows .trash{ position:absolute; top:50px; left:50px; width:500px; height:400px; min-width:300px; min-height:100px; max-height:100%; border-radius:10px; background-color:hsla(0,0%,100%,.65); backdrop-filter:blur(5px); box-shadow:rgba(0,0,0,.15) 0px 3px 3px 0px; transition:opacity .2s ease,margin .2s ease; user-select:none; display:flex; flex-direction:column; overflow:hidden }
#desktop .windows .trash .trash-top{ border-radius:10px 10px 0 0; background-color:#222; padding:10px; width:100%; min-height:2rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; position:relative; font-weight:bold }
#desktop .windows .trash .trash-top .navigation{ position:absolute; right:10px; display:flex; gap:10px }
#desktop .windows .trash .trash-top .navigation i{ cursor:pointer; font-size:1rem; color:#fff; transition:transform .2s }
#desktop .windows .trash .trash-top .navigation i:hover{ transform:scale(1.2) }
#desktop .windows .trash .clear-btn:hover{ background-color:#c8c8c8 }
#desktop .windows .resizer{ position:absolute; z-index:10; background:rgba(0,0,0,0) }
#desktop .windows .resizer.top{ top:0; left:0; height:5px; width:100%; cursor:ns-resize }
#desktop .windows .resizer.right{ top:0; right:0; width:5px; height:100%; cursor:ew-resize }
#desktop .windows .resizer.bottom{ bottom:0; left:0; height:5px; width:100%; cursor:ns-resize }
#desktop .windows .resizer.left{ top:0; left:0; width:5px; height:100%; cursor:ew-resize }
#desktop .windows .apps{ height:90vh; width:auto; display:flex; flex-wrap:wrap; flex-direction:column; gap:30px; padding:20px; align-content:flex-start; overflow:hidden }
#desktop .windows .apps img{ cursor:pointer; width:2.2rem }
#desktop .windows .app-window{ z-index:2000 }
#desktop .windows .app-window.fullscreen{ z-index:4000 }
#desktop .start-div{ z-index:1000; transition:all ease .5s; opacity:0; padding:1rem; position:absolute; gap:1.2rem; transform:translate(50%); align-items:center; bottom:-100vh; border:1px solid hsla(0,0%,100%,.3); box-shadow:0 4px 16px rgba(0,0,0,.08); background-color:rgba(0,0,0,.37); backdrop-filter:blur(5px); width:50%; height:70%; display:flex; flex-direction:column; border-radius:8px }
#desktop .start-div .search-bar{ width:100% }
#desktop .start-div .search-bar input{ transition:all ease .3s; color:#bebebe; background-color:rgba(0,0,0,0); border:none; padding:5px 10px; width:100%; border-bottom:2px solid #a2a9af }
#desktop .start-div .search-bar input:focus{ outline:none; border-bottom:2px solid rgba(29,127,212,.726) }
#desktop .start-div .search-bar input:focus::placeholder{ color:#d3cece }
#desktop .start-div .start-apps-text{ padding:0 15px; width:100%; display:flex; justify-content:space-between }
#desktop .start-div .start-apps-text span{ color:#fff }
#desktop .start-div .start-apps-text button{ border:none; padding:5px 10px; font-size:.8rem; border-radius:5px; background-color:#bebebe; cursor:pointer }
#desktop .start-div .start-apps{ width:100%; display:grid; overflow-y:scroll; scrollbar-width:none; -ms-overflow-style:none; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:2.2rem }
#desktop .start-div .start-apps::-webkit-scrollbar{ display:none }
#desktop .start-div .start-apps .start-apps-perticular{ cursor:pointer; text-align:center; align-items:center; display:flex; gap:1.2rem; flex-direction:column }
#desktop .start-div .start-apps .start-apps-perticular img{ width:2.2rem }
#desktop .start-div .start-apps .start-apps-perticular span{ color:#bebebe; font-size:.8rem }
body.fullscreen-active .start-div,body.fullscreen-active .bottom-nav{ display:none !important }
.trash .text-content{ flex:1; width:100%; height:100%; min-height:100%; position:relative; overflow:hidden; display:flex; flex-direction:column }
.trash .text-content div iframe::-webkit-scrollbar{ display:none; scrollbar-width:none; -ms-overflow-style:none }
.trash .terminal-window{ flex:1; width:100%; height:100%; background-color:#1e1e1e; color:#c5c5c5; font-family:"Consolas",monospace; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,.6); overflow:hidden; border:1px solid #333; margin:0; display:flex; flex-direction:column }
.trash .terminal-title{ background-color:#2d2d2d; padding:10px 15px; font-weight:bold; color:#fff; border-bottom:1px solid #444; flex-shrink:0 }
.trash .terminal-body{ scrollbar-width:none; -ms-overflow-style:none; flex:1; padding:15px; white-space:pre-wrap; line-height:1.4; overflow-y:auto }
.trash .terminal-body::-webkit-scrollbar{ display:none }
.fake-terminal{ width:100%; height:100vh; padding:1rem; overflow-y:auto; background:#000 !important }
.terminal-body{ display:flex; flex-direction:column; gap:.4rem; background:#000 !important; color:#e5e5e5 !important }
.line{ display:flex; align-items:center; flex-wrap:wrap; color:#e5e5e5 !important }
.user{ color:#0f8 !important; margin-right:.4rem }
.terminal-input{ background:rgba(0,0,0,0) !important; border:none; color:#e5e5e5 !important; font:inherit; outline:none; flex:1; min-width:100px; caret-color:#0f8 }
.terminal-input::placeholder{ color:#555 !important }
.output{ margin-left:1rem; white-space:pre-wrap; color:#b5e853 !important }
.file-explorer{ width:100%; height:100%; border:1px solid #ccc; display:flex; flex-direction:column; font-family:"Segoe UI",sans-serif; background-color:#fff }
.file-explorer .title-bar{ display:flex; justify-content:space-between; align-items:center; background-color:#0078d7; color:#fff; padding:5px 10px }
.file-explorer .title-bar .title{ font-weight:500 }
.file-explorer .title-bar .window-controls button{ background:rgba(0,0,0,0); border:none; color:#fff; font-size:14px; margin-left:8px; cursor:pointer }
.file-explorer .title-bar .window-controls button:hover{ background-color:hsla(0,0%,100%,.2) }
.file-explorer .title-bar .window-controls button.close:hover{ background-color:red }
.file-explorer .toolbar{ display:flex; background-color:#f1f1f1; padding:5px 10px; gap:10px }
.file-explorer .toolbar button{ background:#e5e5e5; border:none; padding:5px 10px; cursor:pointer }
.file-explorer .toolbar button:hover{ background-color:#dcdcdc }
.file-explorer .address-bar{ display:flex; justify-content:space-between; align-items:center; background-color:#fafafa; padding:5px 10px; border-bottom:1px solid #ddd }
.file-explorer .address-bar .path{ font-size:14px; color:#555 }
.file-explorer .address-bar .search{ padding:4px 8px; border:1px solid #ccc; border-radius:4px }
.file-explorer .main{ flex:1; display:flex }
.file-explorer .main .sidebar{ width:200px; background-color:#f3f3f3; border-right:1px solid #ddd; padding:10px }
.file-explorer .main .sidebar ul{ list-style:none; padding:0 }
.file-explorer .main .sidebar ul li{ padding:6px 0; cursor:pointer }
.file-explorer .main .sidebar ul li:hover{ background-color:#e5e5e5 }
.file-explorer .main .file-grid{ max-height:100%; height:100%; flex:1; overflow-y:auto !important; display:flex; flex-wrap:wrap; gap:10px; padding:15px }
.file-explorer .main .file-grid .file-item{ min-width:150px; white-space:nowrap; height:fit-content; background-color:#f9f9f9; border:1px solid #ddd; padding:20px 30px; text-align:center; border-radius:6px; cursor:pointer }
.file-explorer .main .file-grid .file-item:hover{ background-color:#e6f0ff }
.file-explorer .main .file-grid .file-item.selected{ background-color:#cce5ff; border-color:#99c7ff }
.custom-modal{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border:1.5px solid #b3b3b3; box-shadow:0 8px 32px rgba(0,0,0,.18); border-radius:14px; z-index:1000000; padding:32px 28px 20px 28px; display:none; font-family:"Inter",sans-serif; color:#222 }
.custom-modal .modal-content{ margin-bottom:18px; font-size:1.08rem }
.custom-modal .modal-content label{ display:block; margin-bottom:12px; font-weight:500 }
.custom-modal .modal-content input[type=text],.custom-modal .modal-content select{ width:100%; padding:8px 10px; margin-top:6px; border:1.2px solid #b3b3b3; border-radius:6px; font-size:1rem; background:#f7f7fa; color:#222; transition:border .2s }
.custom-modal .modal-content input[type=text]:focus,.custom-modal .modal-content select:focus{ border:1.5px solid #1976d2; outline:none; background:#fff }
.custom-modal .modal-content button{ background:linear-gradient(90deg,#2196f3 0%,#2196f3 100%); color:#fff; border:none; border-radius:6px; padding:8px 22px; font-size:1rem; font-weight:500; cursor:pointer; margin-top:10px; box-shadow:0 2px 8px rgba(25,118,210,.08); transition:background .2s }
.custom-modal .modal-content button:hover{ background:linear-gradient(90deg,#1565c0 0%,#1976d2 100%) }
.custom-modal .modal-content .delete-yes{ background:linear-gradient(90deg,#d32f2f 0%,#b71c1c 100%); color:#fff; border:none; border-radius:6px; padding:8px 22px; font-size:1rem; font-weight:500; cursor:pointer; margin-top:10px; margin-right:8px; box-shadow:0 2px 8px rgba(211,47,47,.08); transition:background .2s }
.custom-modal .modal-content .delete-yes:hover{ background:linear-gradient(90deg,#b71c1c 0%,#d32f2f 100%) }
.custom-modal .modal-content .create-name,.custom-modal .modal-content .create-type{ width:100%; padding:8px 10px; margin-top:6px; border:1.2px solid #b3b3b3; border-radius:6px; font-size:1rem; background:#f7f7fa; color:#222; transition:border .2s,box-shadow .2s; box-shadow:none; outline:none }
.custom-modal .modal-content .create-name:focus,.custom-modal .modal-content .create-type:focus{ border:1.5px solid #2196f3; background:#fff; box-shadow:0 0 0 2px rgba(33,150,243,.08) }
.custom-modal .modal-close{ background:#e5e5e5; border:none; border-radius:5px; padding:6px 16px; cursor:pointer; font-size:1rem; float:right; margin-top:8px; color:#333; transition:background .2s }
.custom-modal .modal-close:hover{ background:#dcdcdc }
.custom-modal::before{ content:""; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.18); z-index:-1; border-radius:14px }
.editor-full-area .txt-save{ background:linear-gradient(90deg,#2196f3 0%,#1976d2 100%); color:#fff; border:none; border-radius:6px; padding:8px 22px; font-size:1rem; font-weight:500; cursor:pointer; margin-top:10px; margin-bottom:10px; align-self:flex-end; box-shadow:0 2px 8px rgba(25,118,210,.08); transition:background .2s }
.editor-full-area .txt-save:hover{ background:linear-gradient(90deg,#1565c0 0%,#1976d2 100%) }