body {
    background-color: #008080;
    background-image: url('desktop.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    overflow: hidden;
    font-family: "MS Sans Serif", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

#desktop { width: 100vw; height: calc(100vh - 30px); position: relative; }

.desktop-icon {
    position: absolute; width: 75px; display: flex; flex-direction: column;
    align-items: center; color: white; text-shadow: 1px 1px #000;
    font-size: 11px; text-align: center; cursor: pointer;
}
.desktop-icon img { width: 32px; height: 32px; pointer-events: none; margin-bottom: 4px; }

.window { position: absolute; z-index: 10; display: none; flex-direction: column; }
.title-bar { cursor: move; }
.resizable { resize: both; overflow: hidden; }

.notepad-body { height: calc(100% - 35px); padding: 0 !important; }
#note-text { width: 100%; height: 100%; border: none; padding: 10px; box-sizing: border-box; outline: none; font-family: 'Courier New', monospace; font-size: 14px; }

.explorer-window { background: #c0c0c0 !important; }
.menu-bar { display: flex; gap: 10px; padding: 2px 5px; font-size: 11px; }

.toolbar { display: flex; padding: 3px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; gap: 2px; }
.toolbar-separator { width: 2px; height: 32px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 4px; }
.tool-btn { display: flex; flex-direction: column; align-items: center; min-width: 42px; font-size: 10px; cursor: default; }
.tool-btn img { width: 20px; height: 20px; pointer-events: none; }

.address-row { display: flex; align-items: center; padding: 3px 5px; gap: 5px; font-size: 11px; border-bottom: 1px solid #808080; }
.address-input { flex-grow: 1; background: white; border: 1px solid #808080; box-shadow: inset 1px 1px #000; display: flex; align-items: center; padding: 1px 4px; }
.address-arrow { margin-left: auto; width: 14px; height: 14px; background: #c0c0c0; border: 1px outset #fff; }

.explorer-container { display: flex; height: calc(100% - 130px); background: white !important; border: 2px inset #fff; padding: 0 !important; }
.explorer-sidebar { width: 180px; background: linear-gradient(to bottom, #7da5d8 0%, #ffffff 100%); padding: 20px 15px; border-right: 1px solid #808080; flex-shrink: 0; }
.sidebar-title { font-size: 20px; margin: 0; font-family: 'Arial Black', sans-serif; }
.sidebar-rainbow-hr { height: 2px; background: linear-gradient(to right, red, orange, yellow, green, blue, purple); margin: 10px 0; }
.explorer-content { flex-grow: 1; padding: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start; }
.file-icon-item { width: 85px; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; font-size: 10px; }
.file-icon-item img { width: 32px; margin-bottom: 4px; display: block; }

.paint-main-body { display: flex; height: calc(100% - 100px); padding: 0 !important; border: 2px inset #fff; }
.paint-sidebar { width: 56px; background: #c0c0c0; border-right: 1px solid #808080; padding: 2px; }
.toolbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.paint-canvas-wrapper { flex-grow: 1; background: #808080; overflow: scroll; padding: 5px; }
#paintCanvas { background: white; border: 1px solid #000; }
.paint-footer { height: 48px; background: #c0c0c0; border-top: 1px solid #808080; display: flex; align-items: center; padding: 2px 10px; }
.active-color-display { width: 32px; height: 32px; border: 2px inset #fff; position: relative; margin-right: 10px; }
.color-pri { width: 15px; height: 15px; background: black; position: absolute; top: 4px; left: 4px; z-index: 2; border: 1px solid #000; }
.color-sec { width: 15px; height: 15px; background: white; position: absolute; bottom: 4px; right: 4px; z-index: 1; border: 1px solid #000; }
.color-palette { display: grid; grid-template-columns: repeat(14, 15px); gap: 1px; }
.swatch { width: 14px; height: 14px; border: 1px inset #fff; cursor: pointer; }

.taskbar { position: fixed; bottom: 0; width: 100%; height: 30px; background: #c0c0c0; border-top: 2px solid #fff; display: flex; align-items: center; padding: 2px; box-sizing: border-box; z-index: 999999; }
.start-btn { font-weight: bold; display: flex; align-items: center; gap: 4px; height: 22px; }
.taskbar-divider { width: 2px; height: 20px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 5px; }
#taskbar-apps { display: flex; gap: 4px; flex-grow: 1; }
.app-btn { height: 22px; width: 140px; text-align: left; font-size: 11px; padding: 0 5px; border: 2px inset #fff !important; background: #dcdcdc; display: flex; align-items: center; gap: 5px; }
.system-tray { border: 2px inset #fff; padding: 2px 8px; display: flex; align-items: center; gap: 10px; font-size: 11px; margin-left: auto; }