*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

#desktop {
    height: 100vh; 
    width: 100vw; 
    position: relative;
    padding: 22px; 
    background-color: #16213e;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: Arial, sans-serif; 
    background-color: #1a1a2e;
    color: #eaeaea;
}

.calc-btn {
    height: 44px; 
    background-color: #0d0d1a; 
    border: 1px solid #333333; 
    border-radius: 4px;
    color: #eaeaea; 
    font-size: 17px;
    cursor: pointer; 
}

#icon-terminal { top: 20px; left: 25px; }

.window-content.notes { 
    display: flex; 
    flex-direction: column; 
}

.window {
    position: absolute; 
    min-width: 290px; 
    min-height: 195px;
    background-color: #1f1f38; 
    border: 1px solid #444444; 
    border-radius: 6px;
    z-index: 100; 
    resize: both; 
    overflow: hidden;
}

#notes-textarea {
    flex: 1; 
    background-color: #0d0d1a;
    border: 1px solid #333333; 
    border-radius: 5px; 
    padding: 12px;
    font-size: 14px; 
    color: #eaeaea;
    resize: none; 
    outline: none;
}

#icon-notes { top: 20px; right: 25px; }

.window-controls button:hover { 
    background-color: rgba(255, 255, 255, 0.08); 
}

.window-header {
    height: 36px; 
    background-color: #0d0d1a;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0 12px; 
    border-bottom: 1px solid #333333;
    cursor: move; 
    user-select: none;
}

.calc-btn:hover { 
    background-color: rgba(255, 255, 255, 0.1); 
}

.calc-btn.operator { 
    color: #00d4ff; 
}

.window-controls .close:hover { 
    background-color: #ff4444; 
    color: white; 
}

.browser-nav { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 8px; 
}

.icon {
    width: 82px; 
    height: 82px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    position: absolute !important;
}

.calculator-buttons { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 6px; 
}

.window-title { 
    font-size: 14px; 
    color: #00d4ff; 
    font-weight: bold;
}

.icon:hover { 
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.window-content.calculator { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.clock { 
    font-size: 14px; 
    color: #00d4ff; 
}

#taskbar {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 46px;
    background-color: #0b0b1a; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0 16px; 
    border-top: 1px solid #333333; 
    z-index: 1000;
}

.icon:active { 
    transform: scale(0.96); 
}

.window-content.browser { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

.start-button {
    padding: 7px 16px; 
    background-color: #00d4ff; 
    color: white;
    border: none; 
    border-radius: 4px; 
    cursor: pointer;
    font-weight: bold;
}

.window-tab {
    padding: 6px 12px; 
    background-color: rgba(0, 212, 255, 0.15);
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
}

.start-button:hover { 
    background-color: #00b0d4; 
}

.icon-img { 
    font-size: 38px; 
    margin-bottom: 4px; 
}

#icon-calculator { bottom: 75px; left: 25px; }

.window-content.terminal { 
    font-family: 'Courier New', monospace; 
    background-color: #050505; 
    padding: 12px; 
}

.calc-btn.clear { 
    background-color: #ff4444; 
    color: white; 
}

#startMenu {
    position: absolute; 
    bottom: 50px; 
    left: 15px; 
    width: 240px;
    background-color: #1f1f38; 
    border: 1px solid #444444; 
    border-radius: 8px;
    z-index: 1001; 
}

.taskbar-left, .taskbar-right { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.icon-label { 
    font-size: 12px; 
    text-align: center; 
    color: #ffffff;
}

.window-controls { 
    display: flex; 
    gap: 6px; 
}

.start-menu-header { 
    padding: 12px; 
    border-bottom: 1px solid #333333; 
    text-align: center; 
}

.window-controls button {
    width: 24px; 
    height: 24px; 
    border: none; 
    background: transparent;
    color: #eaeaea; 
    cursor: pointer; 
    font-size: 13px;
}

.calculator-display {
    height: 48px; 
    background-color: #000000;
    border: 1px solid #333333; 
    border-radius: 4px;
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    padding: 0 12px; 
    font-size: 22px; 
    color: #00d4ff;
    overflow: hidden;
}

.taskbar-center { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex: 1; 
    justify-content: center; 
}

.user-info { 
    font-size: 11px; 
    color: #eaeaea; 
    opacity: 0.7; 
}

.calc-btn.equals { 
    background-color: #00d4ff; 
    color: white; 
}

.calc-btn.equals:hover { 
    background-color: #00b0d4; 
}

.browser-content { 
    flex: 1; 
    border: 1px solid #333333; 
    border-radius: 4px; 
    overflow: hidden; 
}

.window-tab:hover, .window-tab.active { 
    background-color: #00d4ff; 
    color: white; 
}

#browser-go {
    padding: 7px 14px; 
    background-color: #00d4ff; 
    color: white;
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
}

.terminal-input { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

#browser-url {
    flex: 1; 
    padding: 7px 10px; 
    background-color: #0d0d1a;
    border: 1px solid #333333; 
    border-radius: 4px;
    color: #eaeaea; 
    font-size: 13px; 
    outline: none;
}

.terminal-input span { 
    color: #00d4ff; 
}

.browser-content iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
}

.window-content { 
    height: calc(100% - 36px); 
    padding: 12px; 
    overflow: auto; 
}

.hidden { 
    display: none !important; 
}

@media (max-width: 768px) {
    .icon { width: 62px; height: 62px; }
    .icon-img { font-size: 28px; }
    .window { min-width: 240px; min-height: 175px; }
    #startMenu { width: 190px; }
}

#icon-browser { bottom: 75px; right: 25px; }

.start-menu-apps { 
    padding: 8px; 
}

.start-app { 
    padding: 8px 12px; 
    margin: 4px 0; 
    cursor: pointer; 
    border-radius: 4px; 
    font-size: 13px; 
}

.start-app:hover { 
    background-color: rgba(0, 212, 255, 0.15); 
}

.terminal-output { 
    height: calc(100% - 35px); 
    overflow-y: auto; 
    margin-bottom: 8px; 
    color: #00ff88; 
    font-size: 13px; 
    white-space: pre-wrap; 
}

.terminal-input input { 
    flex: 1; 
    background: transparent; 
    border: none; 
    color: #00ff88; 
    font-family: 'Courier New', monospace; 
    font-size: 13px; 
    outline: none; 
}