* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

:root {
    --ui-scale: 1;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    color: white;
}

.desktop {
    width: 100vw;
    height: 100vh;
    background-image: url('wallp.png');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 48px;
}

.notepad-window {
    width: 1040px;
    height: 707px;
    background-color: #272727;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    border: 1px solid #353637;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 92px);
    max-height: calc(100vh - 48px - 92px);
}

.notepad-header {
    width: 100%;
    height: 41px;
    background-color: #000000;
    position: relative;
    flex-shrink: 0;
}

.window-icon {
    position: absolute;
    left: calc(18px * var(--ui-scale));
    top: calc(17px * var(--ui-scale));
    width: calc(12px * var(--ui-scale));
    height: calc(16px * var(--ui-scale));
    image-rendering: pixelated;
    z-index: 5;
}

.tab-item {
    position: absolute;
    width: 193px;
    height: 32px;
    top: 11px;
    display: flex;
    align-items: center;
    z-index: 10;
    cursor: pointer;
}

#t1 { left: calc(48px * var(--ui-scale)); }
#t2 { left: calc(241px * var(--ui-scale)); }
#t3 { left: calc(434px * var(--ui-scale)); }
#t4 { left: calc(627px * var(--ui-scale)); }

.tab-item.active {
    background-color: #1F1F20;
    border-radius: 8px 8px 0 0;
    margin-left: -1px; 
}

.tab-item.active::before,
.tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 8px;
    background: transparent;
    z-index: 11;
}
.tab-item.active::before { left: -8px; border-bottom-right-radius: 8px; box-shadow: 4px 0 0 0 #1F1F20; }
.tab-item.active::after { right: -8px; border-bottom-left-radius: 8px; box-shadow: -4px 0 0 0 #1F1F20; }

.tab-item:not(.active):hover {
    background-color: #181818;
    border-radius: 8px 8px 0 0;
    margin-left: -1px;
    width: 191px; 
    height: 30px; 
}

.tab-text {
    position: absolute;
    left: 9px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    top: 7px;
}

.tab-item.active .tab-text {
    font-weight: bold;
    color: #ffffff;
    left: 10px; 
}

.tab-item:not(.active) .tab-text {
    font-weight: normal;
    color: #ADABAA;
}

.tab-item:not(.active):hover .tab-text {
    left: 10px;
}

.tab-separator {
    position: absolute;
    right: 0;
    width: 1px;
    height: 16px;
    background-color: #333333;
    top: 7px;
}
.tab-item.active .tab-separator, .tab-item:hover .tab-separator { display: none; }

.window-controls {
    position: absolute;
    top: 0;
    right: 0;
    height: 41px;
    display: flex;
    gap: 36px;
    padding-right: 18px; 
    align-items: center;
    z-index: 30;
}

.control-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.min-icon { 
    width: 10px; height: 1px; 
    background-color: #565655; 
    transform: translateY(-6px); 
}

.max-icon { 
    width: 10px; height: 10px; 
    border: 1.2px solid #565655; 
    border-radius: 1px; 
    transform: translateY(-7px); 
}

.close-btn svg { 
    width: 10px !important; height: 10px !important; 
    display: block; 
    transform: translateY(-7px); 
}

.control-btn:hover { background-color: transparent; }

.notepad-menu-bar {
    width: 100%;
    height: 33px;
    background-color: #1F1F20;
    border-bottom: 1px solid #1C1C1C;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 14px;
}

.menu-item {
    font-size: 14px;
    color: #898989;
    cursor: default;
}

.m-edit { margin-left: calc(28px * var(--ui-scale)); }
.m-view { margin-left: calc(27px * var(--ui-scale)); }

.notepad-content {
    flex-grow: 1;
    padding: calc(16px * var(--ui-scale));
    font-family: 'Lucida Console', monospace;
    font-size: calc(12px * var(--ui-scale));
    color: #ffffff;
    overflow-y: auto;
    background-color: #272727;
    white-space: pre-wrap;
    line-height: 1.2;
}

.notepad-status-bar {
    width: 100%;
    height: 32px;
    background-color: #1E1F21;
    border-top: 1px solid #1B1C1E;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: calc(23px * var(--ui-scale));
}

.status-info {
    font-size: 11px !important;
    color: #B3B3B3;
    font-family: 'Segoe UI', sans-serif;
}

.status-separator {
    width: 1px;
    height: 16px;
    background-color: #313133;
    margin: 0 9px;
    margin-top: -1px;
}

.watermark {
    position: absolute;
    bottom: 49px;
    right: 0;
    text-align: right;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    pointer-events: none;
    z-index: 50;
}
.watermark p { margin: 0; padding: 0; }

.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: #202020;
    border-top: 1px solid #424242;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 1000;
}

.taskbar-left, .taskbar-right { flex: 1; display: flex; align-items: center; }
.taskbar-right { justify-content: flex-end; }
.taskbar-center { display: flex; align-items: center; justify-content: center; gap: 6px; }

.start-btn {
    width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 5px; cursor: pointer;
}
.start-btn:hover { background: rgba(255, 255, 255, 0.1); }
.start-icon { width: 24px; height: 24px; image-rendering: crisp-edges; }

.taskbar-notepad {
    height: 41px;
    margin: 3.5px 0;
    background-color: #2F2F30;
    border: 1px solid #3D3D3D;
    border-radius: 4px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    min-width: fit-content;
}

.notepad-content-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 11px;
    gap: 8px;
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.notepad-icon { height: 24px; width: auto; }
.notepad-label { font-size: 12px; color: #ffffff; }

.active-indicator {
    position: absolute;
    bottom: 0px;
    width: 16px;
    height: 3px;
    background-color: #4CC2FF;
    border-radius: 2px;
}

.clock {
    padding: 0 8px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-radius: 5px;
    gap: 14px;
}
.clock:hover { background: rgba(255, 255, 255, 0.1); }
.clock span { font-size: 12px; line-height: 1.35px; }
#date { font-size: 11px; }