style.css

:root{
 --desktop:#1b1740;--glass:rgba(29,31,38,.88);--glass2:rgba(40,43,52,.92);--border:rgba(255,255,255,.12);
 --text:#f7f8fa;--muted:#aeb4c0;--blue:#8ab4f8;--shadow:0 18px 50px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,"Google Sans",Roboto,sans-serif}
body{background:#111}
.hidden{display:none!important}
#desktop{position:fixed;inset:0;overflow:hidden;color:var(--text);
 background:
 radial-gradient(45% 70% at 14% 102%,rgba(170,93,255,.92),transparent 58%),
 radial-gradient(50% 80% at 80% 10%,rgba(80,114,255,.72),transparent 65%),
 linear-gradient(135deg,#b45fdc 0%,#5f43e8 38%,#14183f 100%);
}
#desktop:after{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(125deg,rgba(255,255,255,.08),transparent 40%),
 radial-gradient(circle at 35% 35%,rgba(255,255,255,.06),transparent 30%);}
#windows{position:absolute;inset:0 0 66px;pointer-events:none;z-index:10}
#windows>*{pointer-events:auto}
.window{position:absolute;min-width:330px;min-height:220px;max-width:calc(100vw - 18px);max-height:calc(100vh - 78px);
border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#17191e;box-shadow:var(--shadow);overflow:hidden;resize:both}
.window.active{outline:1px solid rgba(138,180,248,.35)}
.window.maximized{left:6px!important;top:6px!important;width:calc(100vw - 12px)!important;height:calc(100vh - 78px)!important;resize:none}
.titlebar{height:38px;display:flex;align-items:center;gap:9px;padding:0 7px 0 12px;background:#202226;border-bottom:1px solid rgba(255,255,255,.08);user-select:none}
.titlebar .title{font-size:12px;font-weight:600;flex:1;color:#eef0f3}
.win-actions{display:flex;gap:2px}.win-btn{width:28px;height:26px;border:0;background:transparent;color:#aeb4c0;border-radius:5px}
.win-btn:hover{background:rgba(255,255,255,.08);color:#fff}.window-content{height:calc(100% - 38px);overflow:hidden;background:#111}
.app-shell{width:100%;height:100%;display:flex;flex-direction:column}
.app-toolbar{height:48px;display:flex;align-items:center;gap:6px;padding:7px;background:#23262c;border-bottom:1px solid rgba(255,255,255,.08)}
.tool-btn{height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.1);background:#2b2f36;color:#dce1e8;border-radius:7px;font-size:11px}
.tool-btn:hover{background:#353a43}
.path,.browser-address{min-width:0;flex:1;height:32px;border:1px solid rgba(255,255,255,.12)!important;background:#15171b!important;color:#f4f5f6!important;border-radius:18px!important;padding:0 13px!important;font-size:12px!important;outline:none}
.terminal-wrap{height:100%;padding:8px;background:#0e1013}.terminal{width:100%;height:100%}
.file-layout{display:grid;grid-template-columns:190px 1fr;height:100%}.file-side{padding:10px;background:#17191e;border-right:1px solid rgba(255,255,255,.08)}
.file-side button{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#aeb4c0;text-align:left;font-size:11px}
.file-side button:hover,.file-side button.active{background:#282b31;color:#fff}.file-main{display:flex;flex-direction:column;min-width:0}
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:12px;overflow:auto}
.file-card{padding:12px;border:1px solid transparent;border-radius:9px;background:#181b20;min-height:80px}.file-card:hover{border-color:rgba(255,255,255,.11);background:#1f2228}
.file-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.file-card span{display:block;margin-top:5px;color:#8e96a2;font-size:10px}
.file-editor{position:absolute;inset:0;background:#0d0f12;display:flex;flex-direction:column;z-index:20}.file-editor textarea{flex:1;background:#0d0f12;color:#eef0f3;border:0;outline:0;resize:none;padding:15px;font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.browser-shell{display:flex;flex:1;min-height:0;position:relative;background:#f7f8fa}.browser-frame{width:100%;height:100%;border:0;background:#fff}.browser-info{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:#f7f8fa;color:#202124}.browser-info.hidden{display:none}.browser-info-title{font-size:19px;font-weight:500}.browser-info p{max-width:520px;color:#5f6368;line-height:1.6;font-size:12px}
.browser-loading{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:7px;color:#3c4043;background:#f7f8fa}.browser-loading span{color:#5f6368;font-size:11px}.spinner{width:26px;height:26px;border:3px solid #dadce0;border-top-color:#1a73e8;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.store{height:100%;overflow:auto;padding:20px;background:#111317}.store h2{margin:0;font-size:20px}.store-sub{margin:6px 0 16px;color:#8f97a2;font-size:11px}.store-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.store-card{padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#181b20}.store-card-head{display:flex;gap:10px;align-items:center}.store-card-icon{width:38px;height:38px;border-radius:10px;background:#292d34;display:grid;place-items:center}.store-card h3{margin:0;font-size:12px}.store-card p{min-height:32px;margin:8px 0 12px;color:#8e96a2;font-size:10px;line-height:1.5}.store-card button{height:30px;padding:0 11px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#252931;color:#eaeef2;font-size:10px}.store-card button.primary{background:#8ab4f8;color:#101319;border-color:transparent;font-weight:700}
.settings{height:100%;overflow:auto;padding:20px;background:#111317}.settings h2{margin:0;font-size:20px}.settings-section{margin-top:20px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}.setting-row strong{font-size:11px}.setting-row span{display:block;margin-top:4px;color:#8f97a2;font-size:10px;line-height:1.45}.tool-select{height:32px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:#252931;color:#e8eaed;padding:0 8px;font-size:10px}
.monitor{height:100%;overflow:auto;padding:18px;background:#111317}.monitor h2{margin:0;font-size:18px}.process-list{margin-top:15px;border:1px solid rgba(255,255,255,.08);border-radius:9px;overflow:hidden}.process-row{display:grid;grid-template-columns:45px 1fr 90px 80px;gap:8px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.07);font-size:10px}.process-row:last-child{border-bottom:0}.process-row span{color:#8f97a2}.kernel-log pre{margin:14px 0 0;min-height:90px;background:#090a0c;border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:11px;color:#95a0ab;font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:66px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 12px;z-index:7000;background:rgba(24,24,30,.84);backdrop-filter:blur(22px);border-top:1px solid rgba(255,255,255,.1)}
.task-button{border:0;background:transparent;color:#dce1e8;border-radius:9px}.launcher{width:44px;height:44px;background:rgba(255,255,255,.08);display:grid;place-items:center}.launcher:hover{background:rgba(255,255,255,.14)}
.task-list{display:flex;gap:3px}.task{min-width:110px;max-width:180px;height:42px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#aeb4c0;text-align:left;font-size:11px}.task:hover,.task.active{background:rgba(255,255,255,.08);color:#fff}
.taskbar-spacer{flex:1}.status-user{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbd0d8;font-size:11px}.clock{min-width:94px;text-align:center;padding:5px 10px;color:#f0f2f5;font-size:11px}
.launcher-menu{position:absolute;left:12px;bottom:74px;width:420px;max-height:min(620px,calc(100vh - 92px));overflow:auto;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(31,33,40,.95);backdrop-filter:blur(30px);box-shadow:0 22px 70px rgba(0,0,0,.45);z-index:8000}.launcher-menu.hidden{display:none}
.launcher-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:12px}.launcher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.app-launch{min-height:92px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.035);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:10px}.app-launch:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.1)}.app-icon{width:34px;height:34px;border-radius:10px;background:#2c3038;display:grid;place-items:center;color:#dce8f7;font-size:11px;font-weight:800}
.context-menu{position:absolute;min-width:190px;padding:5px;background:#202226;border:1px solid rgba(255,255,255,.1);border-radius:9px;z-index:9000;box-shadow:var(--shadow)}.context-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;color:#e7eaef;border-radius:6px;font-size:10px}.context-menu button:hover{background:#2e3239}
.quick-panel,.notif-panel{position:absolute;right:12px;bottom:74px;width:360px;max-height:calc(100vh - 90px);overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(34,36,43,.96);backdrop-filter:blur(26px);box-shadow:0 24px 75px rgba(0,0,0,.5);z-index:8500}
.quick-panel.hidden,.notif-panel.hidden{display:none}
.panel-user{display:flex;align-items:center;gap:10px;padding:4px 2px 14px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:#1e3a8a;font-weight:700}.panel-user b{display:block;font-size:12px}.panel-user span{display:block;margin-top:3px;color:#9ea5ae;font-size:10px}
.qs-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.qs{min-height:70px;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.04);color:#f3f4f6;text-align:left}.qs.on{background:#355e9a;border-color:#6f9de0}.qs b{display:block;font-size:11px}.qs span{display:block;margin-top:7px;color:#c7cdd5;font-size:10px}
.qs-foot{display:flex;justify-content:flex-end;gap:5px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.panel-btn{height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#e7eaf0;border-radius:7px;font-size:10px}
.notif-panel h3{margin:0;font-size:15px}.notif{margin-top:8px;padding:11px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.notif b{font-size:10px}.notif p{margin:5px 0 0;color:#b8bec7;font-size:10px;line-height:1.5}
#desktop-status{position:absolute;right:15px;bottom:79px;color:rgba(255,255,255,.5);font:9px ui-monospace,SFMono-Regular,Consolas,monospace;z-index:5}
@media(max-width:720px){.launcher-menu{left:8px;right:8px;width:auto}.launcher-grid{grid-template-columns:repeat(3,1fr)}.task{min-width:0}.status-user{display:none}.quick-panel,.notif-panel{right:8px;left:8px;width:auto}.window{min-width:0;max-width:calc(100vw - 10px)!important}.file-layout{grid-template-columns:145px 1fr}}