/**
 * winvista.css — Melanie OS Vista Aero Glass Theme
 * All selectors scoped under #desktop-winvista
 */

/* Segoe UI is a Windows system font — no Google Fonts import needed.
   It is referenced directly in font-family stacks below. */

/* =========================================================
   DESKTOP & WALLPAPER
   ========================================================= */
#desktop-winvista {
    font-family: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    /* Vista Aurora wallpaper approximation */
    background:
        radial-gradient(ellipse 80% 40% at 50% 60%, rgba(0, 180, 80, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 30% 55%, rgba(0, 120, 200, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 25% at 70% 50%, rgba(0, 200, 120, 0.2) 0%, transparent 55%),
        linear-gradient(180deg,
            #04052e 0%,
            #0a0f3d 15%,
            #081428 35%,
            #041a0a 55%,
            #051508 75%,
            #020c05 100%
        );
    overflow: hidden;
}

/* =========================================================
   DESKTOP ICONS
   ========================================================= */
#desktop-winvista .desktop-icons {
    position: absolute;
    top: 16px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    flex-wrap: wrap;
    max-height: calc(100vh - 100px);
}

#desktop-winvista .desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    padding: 6px 4px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    user-select: none;
    transition: background 0.15s;
    outline: none;
}

#desktop-winvista .desktop-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

#desktop-winvista .desktop-icon:focus,
#desktop-winvista .desktop-icon.selected {
    background: rgba(100, 160, 255, 0.3);
    border-color: rgba(100, 160, 255, 0.6);
}

#desktop-winvista .icon-img {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

#desktop-winvista .icon-label {
    font-size: 11px;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px #000, 0 0 6px rgba(0,0,0,0.9);
    line-height: 1.2;
    word-break: break-word;
}

/* =========================================================
   MELANIE OS — AERO GLASS CHROME
   ========================================================= */
#desktop-winvista .window {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 220px;
    border-radius: 8px 8px 4px 4px;
    border: 1px solid rgba(120, 180, 255, 0.35);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5),
        0 8px 32px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.15);
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#desktop-winvista .window.focused {
    border-color: rgba(140, 200, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 10px 40px rgba(0,0,0,0.75),
        0 0 18px rgba(80, 160, 255, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/* =========================================================
   TITLE BAR — AERO GLASS
   ========================================================= */
#desktop-winvista .title-bar {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 6px;
    background: linear-gradient(
        180deg,
        rgba(180, 210, 255, 0.55) 0%,
        rgba(100, 150, 230, 0.45) 40%,
        rgba(60, 100, 200, 0.5) 70%,
        rgba(40, 80, 180, 0.55) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 8px 8px 0 0;
    cursor: default;
}

#desktop-winvista .window:not(.focused) .title-bar {
    background: linear-gradient(
        180deg,
        rgba(180, 180, 200, 0.4) 0%,
        rgba(120, 120, 150, 0.35) 100%
    );
    border-bottom-color: rgba(100, 100, 120, 0.3);
}

#desktop-winvista .title-bar-icon {
    font-size: 16px;
    margin-right: 5px;
    flex-shrink: 0;
}

#desktop-winvista .title-bar-text {
    flex: 1;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#desktop-winvista .window:not(.focused) .title-bar-text {
    color: rgba(255,255,255,0.65);
}

/* =========================================================
   TITLE BAR BUTTONS
   ========================================================= */
#desktop-winvista .title-bar-controls {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    align-items: center;
}

#desktop-winvista .title-bar-controls button {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(180,200,240,0.2) 100%);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    transition: background 0.1s, box-shadow 0.1s;
    padding: 0;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}

#desktop-winvista .title-bar-controls button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(200,220,255,0.35) 100%);
    box-shadow: 0 1px 6px rgba(100,160,255,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}

#desktop-winvista .title-bar-controls button:active {
    background: linear-gradient(180deg, rgba(100,150,230,0.4) 0%, rgba(80,120,200,0.5) 100%);
}

#desktop-winvista .btn-close {
    width: 26px !important;
    border-color: rgba(255, 100, 80, 0.4) !important;
    background: linear-gradient(180deg, rgba(255, 120, 100, 0.5) 0%, rgba(200, 60, 50, 0.45) 100%) !important;
}

#desktop-winvista .btn-close:hover {
    background: linear-gradient(180deg, rgba(255, 80, 60, 0.85) 0%, rgba(180, 30, 20, 0.9) 100%) !important;
    border-color: rgba(255, 80, 60, 0.8) !important;
    box-shadow: 0 0 8px rgba(255,60,40,0.5) !important;
}

#desktop-winvista .btn-minimize::before { content: '–'; }
#desktop-winvista .btn-maximize::before { content: '□'; font-size: 9px; }
#desktop-winvista .btn-close::before { content: '✕'; font-size: 9px; }

/* =========================================================
   WINDOW BODY
   ========================================================= */
#desktop-winvista .window-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

/* =========================================================
   MENU BAR
   ========================================================= */
#desktop-winvista .menu-bar {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 4px;
    background: #f0f0f0;
    border-bottom: 1px solid #d0d0d0;
    flex-shrink: 0;
}

#desktop-winvista .menu-item {
    padding: 2px 8px;
    font-size: 11px;
    color: #000;
    cursor: default;
    border-radius: 3px;
}

#desktop-winvista .menu-item:hover {
    background: #316ac5;
    color: #fff;
}

/* =========================================================
   TOOLBAR — GLOSSY AERO STYLE
   ========================================================= */
#desktop-winvista .toolbar {
    display: flex;
    align-items: center;
    padding: 3px 4px;
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
    border-bottom: 1px solid #c8c8c8;
    gap: 2px;
    flex-shrink: 0;
}

#desktop-winvista .toolbar-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-family: inherit;
    color: #333;
    background: linear-gradient(180deg, #fefefe 0%, #e8e8e8 100%);
    border: 1px solid #b8b8b8;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#desktop-winvista .toolbar-btn:hover {
    background: linear-gradient(180deg, #e8f0ff 0%, #ccdaff 100%);
    border-color: #6699cc;
    color: #000;
}

#desktop-winvista .toolbar-btn:active {
    background: linear-gradient(180deg, #ccdaff 0%, #99bbee 100%);
}

/* =========================================================
   WINDOW CONTENT
   ========================================================= */
#desktop-winvista .window-content {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #fff;
}

/* =========================================================
   STATUS BAR
   ========================================================= */
#desktop-winvista .status-bar {
    display: flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    background: #f0f0f0;
    border-top: 1px solid #d0d0d0;
    flex-shrink: 0;
    font-size: 11px;
    color: #555;
}

/* =========================================================
   SYSTEM INFO — VISTA SYSTEM PANEL
   ========================================================= */
#desktop-winvista .sysinfo-layout {
    display: flex;
    height: 100%;
}

#desktop-winvista .sysinfo-nav {
    width: 160px;
    background: linear-gradient(180deg, #2060c0 0%, #1040a0 100%);
    padding: 12px 0;
    flex-shrink: 0;
    overflow-y: auto;
}

#desktop-winvista .sysinfo-nav-item {
    display: block;
    padding: 8px 14px;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    cursor: default;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}

#desktop-winvista .sysinfo-nav-item:hover {
    background: rgba(255,255,255,0.12);
}

#desktop-winvista .sysinfo-nav-item.active {
    background: rgba(255,255,255,0.18);
    border-left-color: #fff;
    color: #fff;
    font-weight: 600;
}

#desktop-winvista .sysinfo-main {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #fff;
    color: #000;
}

#desktop-winvista .sysinfo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 14px;
}

#desktop-winvista .sysinfo-win-logo {
    width: 56px;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    flex-shrink: 0;
}

#desktop-winvista .sysinfo-win-logo span {
    border-radius: 2px;
}

#desktop-winvista .sysinfo-win-logo span:nth-child(1) { background: #f04040; }
#desktop-winvista .sysinfo-win-logo span:nth-child(2) { background: #40c040; }
#desktop-winvista .sysinfo-win-logo span:nth-child(3) { background: #4080f0; }
#desktop-winvista .sysinfo-win-logo span:nth-child(4) { background: #f0c000; }

#desktop-winvista .sysinfo-edition {
    font-size: 18px;
    font-weight: 300;
    color: #1040a0;
}

#desktop-winvista .sysinfo-edition strong {
    font-weight: 600;
    color: #000;
}

#desktop-winvista .sysinfo-section {
    margin-bottom: 16px;
}

#desktop-winvista .sysinfo-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #1040a0;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#desktop-winvista .sysinfo-row {
    display: flex;
    padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px solid #f0f0f0;
}

#desktop-winvista .sysinfo-label {
    width: 180px;
    color: #555;
    flex-shrink: 0;
}

#desktop-winvista .sysinfo-value {
    color: #000;
    font-weight: 400;
}

/* WEI Score */
#desktop-winvista .wei-box {
    border: 1px solid #c0c8e0;
    border-radius: 4px;
    padding: 10px;
    background: linear-gradient(180deg, #eef2ff 0%, #dde6ff 100%);
    margin-bottom: 12px;
}

#desktop-winvista .wei-score-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#desktop-winvista .wei-number {
    font-size: 40px;
    font-weight: 300;
    color: #1040a0;
    line-height: 1;
}

#desktop-winvista .wei-label {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
}

#desktop-winvista .wei-label strong {
    display: block;
    font-size: 13px;
    color: #000;
    margin-bottom: 2px;
}

#desktop-winvista .wei-subscore {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 11px;
}

#desktop-winvista .wei-subscore-name {
    width: 130px;
    color: #333;
    flex-shrink: 0;
}

#desktop-winvista .wei-bar-track {
    flex: 1;
    height: 6px;
    background: #c0c8e0;
    border-radius: 3px;
    overflow: hidden;
}

#desktop-winvista .wei-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4080f0, #2060d0);
    border-radius: 3px;
    width: 0;
    transition: width 1s ease-out;
}

#desktop-winvista .wei-subscore-val {
    width: 28px;
    text-align: right;
    font-weight: 600;
    color: #1040a0;
}

/* =========================================================
   MELANIE MAIL
   ========================================================= */
#desktop-winvista .mail-layout {
    display: flex;
    height: 100%;
}

#desktop-winvista .mail-folder-panel {
    width: 160px;
    background: #f5f7fa;
    border-right: 1px solid #d0d8e8;
    padding: 6px 0;
    overflow-y: auto;
    flex-shrink: 0;
}

#desktop-winvista .mail-folder-title {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    padding: 4px 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#desktop-winvista .mail-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    color: #333;
    cursor: default;
    border-left: 3px solid transparent;
}

#desktop-winvista .mail-folder-item:hover {
    background: #e4ecf8;
}

#desktop-winvista .mail-folder-item.active {
    background: #ccdaff;
    border-left-color: #316ac5;
    font-weight: 600;
}

#desktop-winvista .mail-compose-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

#desktop-winvista .mail-compose-header {
    background: linear-gradient(180deg, #e8efff 0%, #d8e4ff 100%);
    border-bottom: 1px solid #b0c0e0;
    padding: 0;
}

#desktop-winvista .mail-field {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid #d0d8f0;
    min-height: 26px;
}

#desktop-winvista .mail-field-label {
    width: 60px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

#desktop-winvista .mail-field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-family: inherit;
    color: #000;
    outline: none;
    padding: 2px;
}

#desktop-winvista .mail-field input[readonly] {
    color: #555;
}

#desktop-winvista .mail-body-area {
    flex: 1;
    padding: 8px;
    overflow: hidden;
}

#desktop-winvista .mail-body-area textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    font-size: 12px;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #000;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}

/* =========================================================
   EXPLORER / PROJECTS WINDOW
   ========================================================= */
#desktop-winvista .explorer-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
    border-bottom: 1px solid #d0d0d0;
    flex-shrink: 0;
}

#desktop-winvista .explorer-nav-btn {
    width: 24px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.1s;
}

#desktop-winvista .explorer-nav-btn:hover {
    background: linear-gradient(180deg, #e0ecff 0%, #ccd8ff 100%);
    border-color: #88aadd;
}

#desktop-winvista .explorer-breadcrumb {
    flex: 1;
    background: #fff;
    border: 1px solid #a0b0c8;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    box-sizing: border-box;
}

#desktop-winvista .breadcrumb-sep {
    color: #888;
    font-size: 10px;
}

#desktop-winvista .explorer-search {
    width: 120px;
    height: 22px;
    border: 1px solid #a0b0c8;
    border-radius: 11px;
    padding: 0 24px 0 8px;
    font-size: 11px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='%23888' stroke-width='2'/%3E%3Cline x1='15' y1='15' x2='22' y2='22' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 8px center;
    outline: none;
    box-sizing: border-box;
}

#desktop-winvista .explorer-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#desktop-winvista .explorer-sidebar {
    width: 150px;
    background: #f0f4fc;
    border-right: 1px solid #d0d8e8;
    padding: 8px 0;
    overflow-y: auto;
    flex-shrink: 0;
}

#desktop-winvista .explorer-sidebar-group {
    margin-bottom: 8px;
}

#desktop-winvista .explorer-sidebar-title {
    font-size: 10px;
    font-weight: 700;
    color: #1040a0;
    padding: 4px 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#desktop-winvista .explorer-sidebar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    color: #1040a0;
    cursor: default;
}

#desktop-winvista .explorer-sidebar-item:hover {
    background: #dde8ff;
    text-decoration: underline;
}

#desktop-winvista .explorer-content {
    flex: 1;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

#desktop-winvista .file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    transition: background 0.1s;
}

#desktop-winvista .file-icon:hover {
    background: rgba(49, 106, 197, 0.12);
    border-color: rgba(49, 106, 197, 0.4);
}

#desktop-winvista .file-icon .icon-img {
    font-size: 36px;
    margin-bottom: 4px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

#desktop-winvista .file-icon .icon-label {
    font-size: 11px;
    text-align: center;
    color: #000;
    text-shadow: none;
    word-break: break-word;
    line-height: 1.2;
}

#desktop-winvista .explorer-details-pane {
    height: 44px;
    background: linear-gradient(180deg, #e8efff 0%, #d8e4ff 100%);
    border-top: 1px solid #c0d0ee;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================
   TASKBAR — AERO GLASS
   ========================================================= */
#desktop-winvista .taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    z-index: 9000;
    background: rgba(20, 30, 60, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(100, 160, 255, 0.3);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(180,210,255,0.15);
}

/* =========================================================
   START ORB
   ========================================================= */
#desktop-winvista .start-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(80, 140, 255, 0.5);
    background: radial-gradient(circle at 45% 35%,
        rgba(255,255,255,0.9) 0%,
        rgba(120,180,255,0.7) 30%,
        rgba(40,100,220,0.85) 60%,
        rgba(20,60,180,0.95) 100%
    );
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: box-shadow 0.2s, transform 0.1s;
    box-shadow:
        0 0 10px rgba(80,140,255,0.4),
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
    text-shadow: none;
    color: transparent;
    position: relative;
    overflow: hidden;
}

#desktop-winvista .start-button::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-image: url('../images/flower.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

#desktop-winvista .start-button::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
    border-radius: 50%;
}

#desktop-winvista .start-button:hover {
    box-shadow:
        0 0 18px rgba(100,180,255,0.7),
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.6);
    transform: scale(1.05);
}

#desktop-winvista .start-button:active {
    transform: scale(0.97);
}

/* =========================================================
   TASKBAR PROGRAMS
   ========================================================= */
#desktop-winvista .taskbar-programs {
    display: flex;
    gap: 2px;
    flex: 1;
    overflow: hidden;
    align-items: center;
    height: 100%;
    padding: 4px 0;
}

#desktop-winvista .taskbar-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    height: 30px;
    min-width: 100px;
    max-width: 160px;
    border: 1px solid rgba(100,160,255,0.25);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(200,220,255,0.2) 0%, rgba(100,140,220,0.2) 100%);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s;
}

#desktop-winvista .taskbar-btn:hover,
#desktop-winvista .taskbar-btn.active {
    background: linear-gradient(180deg, rgba(160,200,255,0.35) 0%, rgba(80,120,200,0.3) 100%);
    border-color: rgba(140,180,255,0.5);
}

/* =========================================================
   SYSTEM TRAY
   ========================================================= */
#desktop-winvista .system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    height: 100%;
    border-left: 1px solid rgba(100,160,255,0.2);
    flex-shrink: 0;
}

#desktop-winvista .tray-clock {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    text-align: center;
    white-space: nowrap;
    min-width: 52px;
    cursor: default;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* =========================================================
   START MENU — TWO COLUMN VISTA STYLE
   ========================================================= */
#desktop-winvista .start-menu {
    position: fixed;
    bottom: 40px;
    left: 0;
    width: 420px;
    background: rgba(240,244,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(100,160,255,0.4);
    border-radius: 8px 8px 0 0;
    box-shadow:
        0 -4px 30px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,0,0,0.3);
    z-index: 9001;
    overflow: visible;
    display: none;
}

#desktop-winvista .start-menu.visible {
    display: flex;
    flex-direction: column;
}

#desktop-winvista .start-menu-columns {
    display: flex;
    min-height: 300px;
}

#desktop-winvista .start-menu-left {
    flex: 1;
    padding: 8px 0;
    background: #fff;
    border-right: 1px solid #d0d8ee;
}

#desktop-winvista .start-menu-right {
    width: 160px;
    padding: 8px 0;
    background: rgba(210,225,255,0.9);
}

#desktop-winvista .start-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 11px;
    color: #000;
    cursor: default;
    transition: background 0.1s;
}

#desktop-winvista .start-menu-item:hover {
    background: rgba(49,106,197,0.15);
}

#desktop-winvista .start-menu-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

#desktop-winvista .start-menu-right .start-menu-item {
    color: #000;
    font-size: 11px;
}

#desktop-winvista .start-menu-right .start-menu-item:hover {
    background: rgba(49,106,197,0.2);
}

#desktop-winvista .start-menu-separator {
    height: 1px;
    background: #d0d8ee;
    margin: 4px 8px;
}

#desktop-winvista .start-menu-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(180deg, #1840a0 0%, #102880 100%);
    gap: 4px;
}

#desktop-winvista .start-menu-bottom button {
    padding: 4px 12px;
    font-size: 11px;
    font-family: inherit;
    color: #fff;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
}

#desktop-winvista .start-menu-bottom button:hover {
    background: rgba(255,255,255,0.28);
}

/* =========================================================
   QUICK LAUNCH
   ========================================================= */
#desktop-winvista .quick-launch {
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 2px;
    border-right: 1px solid rgba(100,160,255,0.2);
    margin-right: 4px;
    height: 100%;
}

#desktop-winvista .quick-launch-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    transition: background 0.1s;
}

#desktop-winvista .quick-launch-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(140,180,255,0.3);
}

/* =========================================================
   SCROLLBARS
   ========================================================= */
#desktop-winvista ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#desktop-winvista ::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

#desktop-winvista ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b0c0e0, #8090c0);
    border-radius: 4px;
    border: 1px solid #90a0c8;
}

#desktop-winvista ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #90a8d8, #6070b8);
}

/* =========================================================
   MISSING RULES — matching desktop_vista.php class names
   ========================================================= */

/* --- Start menu visibility (JS toggles .visible class) --- */
#desktop-winvista .start-menu {
    display: none;
}
#desktop-winvista .start-menu.visible {
    display: block;
}

/* --- User Banner --- */
#desktop-winvista .vista-start-user-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #e8f0ff, #b0c8ff);
    border-bottom: 1px solid #90a8d8;
    border-radius: 8px 8px 0 0;
}
#desktop-winvista .vista-start-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 24px;
}
#desktop-winvista .vista-start-username {
    font-size: 14px;
    font-weight: 600;
    color: #1040a0;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

/* --- Start menu two-column layout --- */
#desktop-winvista .vista-start-columns {
    display: flex;
    min-height: 320px;
}
#desktop-winvista .vista-start-left {
    flex: 1;
    background: #fff;
    border-right: 1px solid #d0d8ee;
    padding: 8px 0;
    overflow: visible !important;
}
#desktop-winvista .vista-start-right {
    width: 170px;
    background: rgba(210, 225, 255, 0.92);
    padding: 8px 0;
}
#desktop-winvista .vista-start-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: linear-gradient(180deg, #1840a0 0%, #102880 100%);
    border-top: 1px solid rgba(255,255,255,0.15);
}
#desktop-winvista .vista-start-bottom-left {
    display: flex;
    gap: 4px;
}
#desktop-winvista .vista-start-bottom-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-family: inherit;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
}
#desktop-winvista .vista-start-bottom-btn:hover {
    background: rgba(255,255,255,0.25);
}
#desktop-winvista .vista-start-shutdown-btn {
    padding: 4px 14px;
    font-size: 11px;
    font-family: inherit;
    color: #fff;
    background: rgba(200, 50, 30, 0.6);
    border: 1px solid rgba(255,100,80,0.4);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
}
#desktop-winvista .vista-start-shutdown-btn:hover {
    background: rgba(200, 50, 30, 0.85);
}
#desktop-winvista .submenu-arrow {
    margin-left: auto;
    font-size: 10px;
    color: #888;
}
#desktop-winvista .vista-all-programs {
    font-style: italic;
}

/* --- Quick-launch (taskbar) --- */
#desktop-winvista .ql-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    transition: background 0.1s;
}
#desktop-winvista .ql-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(140,180,255,0.3);
}

/* --- Tray icons --- */
#desktop-winvista .tray-icon {
    font-size: 14px;
    cursor: default;
    opacity: 0.85;
}

/* --- System Info layout (matches vista-sysinfo-layout etc.) --- */
#desktop-winvista .vista-sysinfo-layout {
    display: flex;
    height: 100%;
}
#desktop-winvista .vista-sysinfo-sidebar {
    width: 170px;
    background: linear-gradient(180deg, #e8f0ff 0%, #d8e8ff 100%);
    border-right: 1px solid #c0d0ee;
    padding: 10px 0;
    flex-shrink: 0;
    overflow-y: auto;
}
#desktop-winvista .sysinfo-nav-group {
    margin-bottom: 10px;
}
#desktop-winvista .sysinfo-nav-heading {
    font-size: 10px;
    font-weight: 700;
    color: #1040a0;
    padding: 4px 12px 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#desktop-winvista .sysinfo-nav-link {
    display: block;
    padding: 5px 14px;
    font-size: 11px;
    color: #1040a0;
    text-decoration: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.1s;
}
#desktop-winvista .sysinfo-nav-link:hover {
    background: rgba(49, 106, 197, 0.12);
    text-decoration: underline;
}
#desktop-winvista .sysinfo-nav-link.active {
    border-left-color: #1040a0;
    font-weight: 600;
    background: rgba(49,106,197,0.1);
}
#desktop-winvista .vista-sysinfo-main {
    flex: 1;
    padding: 14px 16px;
    overflow-y: auto;
    background: #fff;
    color: #000;
}
#desktop-winvista .sysinfo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d8e4ff;
    margin-bottom: 14px;
}
#desktop-winvista .sysinfo-header-icon {
    font-size: 20px;
}
#desktop-winvista .sysinfo-header-text {
    font-size: 14px;
    font-weight: 300;
    color: #1040a0;
    margin: 0;
}
#desktop-winvista .sysinfo-section {
    margin-bottom: 14px;
}
#desktop-winvista .sysinfo-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #1040a0;
    border-bottom: 1px solid #d8e4ff;
    padding-bottom: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#desktop-winvista .sysinfo-edition-name {
    font-size: 15px;
    font-weight: 300;
    color: #000;
    margin-bottom: 2px;
}
#desktop-winvista .sysinfo-edition-copy {
    font-size: 11px;
    color: #666;
}

/* --- WEI Badge --- */
#desktop-winvista .vista-wei-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #c0d0f0;
    border-radius: 4px;
    background: linear-gradient(180deg, #eef4ff 0%, #dde8ff 100%);
    margin-bottom: 8px;
}
#desktop-winvista .vista-wei-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #1050c0, #0830a0);
    border-radius: 6px;
    padding: 10px 14px;
    color: #fff;
    flex-shrink: 0;
    min-width: 80px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#desktop-winvista .wei-badge-label {
    font-size: 9px;
    text-align: center;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
#desktop-winvista .wei-badge-score {
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 2px;
}
#desktop-winvista .wei-badge-sublabel {
    font-size: 9px;
    opacity: 0.75;
}
#desktop-winvista .vista-wei-subscores {
    flex: 1;
}
#desktop-winvista .wei-subscore-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}
#desktop-winvista .wei-subscore-label {
    width: 120px;
    color: #333;
    flex-shrink: 0;
}
#desktop-winvista .wei-subscore-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(49,106,197,0.2);
}
#desktop-winvista .wei-subscore-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4488ee, #2266cc);
    border-radius: 4px;
    transition: width 1.2s ease-out;
}
#desktop-winvista .wei-subscore-value {
    width: 30px;
    text-align: right;
    font-weight: 600;
    color: #1040a0;
    font-size: 11px;
}

/* --- Sysinfo table --- */
#desktop-winvista .sysinfo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
#desktop-winvista .sysinfo-key {
    width: 160px;
    color: #555;
    padding: 4px 0;
    vertical-align: top;
}
#desktop-winvista .sysinfo-val {
    color: #000;
    padding: 4px 0;
}

/* --- Mail compose in Vista --- */
#desktop-winvista .vista-mail-layout {
    display: flex;
    height: 100%;
}
#desktop-winvista .vista-mail-folders {
    width: 150px;
    background: #f5f7fa;
    border-right: 1px solid #d0d8e8;
    padding: 6px 0;
    overflow-y: auto;
    flex-shrink: 0;
}
#desktop-winvista .mail-folder-title {
    font-size: 10px;
    font-weight: 700;
    color: #555;
    padding: 4px 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#desktop-winvista .mail-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    color: #333;
    cursor: default;
    border-left: 3px solid transparent;
}
#desktop-winvista .mail-folder-item:hover {
    background: #e4ecf8;
}
#desktop-winvista .mail-folder-item.active {
    background: #ccdaff;
    border-left-color: #316ac5;
    font-weight: 600;
}
#desktop-winvista .vista-mail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
#desktop-winvista .compose-header-label {
    font-size: 13px;
    font-weight: 300;
    color: #1040a0;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #d0d8f0;
    background: linear-gradient(180deg, #eef2ff, #e4ecff);
}
#desktop-winvista .compose-field {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid #e8eeff;
    min-height: 26px;
}
#desktop-winvista .compose-label {
    width: 60px;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    flex-shrink: 0;
}
#desktop-winvista .compose-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-family: inherit;
    color: #000;
    outline: none;
    padding: 2px;
}
#desktop-winvista .compose-input[readonly] {
    color: #555;
}
#desktop-winvista .compose-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px;
}
#desktop-winvista .compose-textarea {
    flex: 1;
    width: 100%;
    border: 1px solid #d0d8f0;
    resize: none;
    font-size: 12px;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 6px;
    color: #000;
    outline: none;
    border-radius: 2px;
    box-sizing: border-box;
}
#desktop-winvista .compose-textarea:focus {
    border-color: #6699cc;
    box-shadow: 0 0 3px rgba(49,106,197,0.3);
}
#desktop-winvista .compose-altcha {
    padding: 6px 8px;
    border-top: 1px solid #e8eeff;
    flex-shrink: 0;
}

/* --- Vista Explorer window classes --- */
#desktop-winvista .vista-explorer-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #eef2fa;
    border-bottom: 1px solid #d0d8ee;
    flex-shrink: 0;
}
#desktop-winvista .vista-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #333;
}
#desktop-winvista .breadcrumb-seg {
    color: #1040a0;
    cursor: default;
}
#desktop-winvista .breadcrumb-seg.active {
    color: #000;
    font-weight: 600;
}
#desktop-winvista .breadcrumb-sep {
    color: #888;
    font-size: 10px;
}
#desktop-winvista .vista-search-box {
    position: relative;
}
#desktop-winvista .vista-search-input {
    width: 130px;
    height: 22px;
    border: 1px solid #a0b0c8;
    border-radius: 11px;
    padding: 0 24px 0 8px;
    font-size: 11px;
    font-family: inherit;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
#desktop-winvista .vista-explorer-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}
#desktop-winvista .vista-explorer-sidebar {
    width: 150px;
    background: #eef2fa;
    border-right: 1px solid #d0d8ee;
    padding: 8px 0;
    overflow-y: auto;
    flex-shrink: 0;
}
#desktop-winvista .vista-sidebar-group-title {
    font-size: 10px;
    font-weight: 700;
    color: #1040a0;
    padding: 4px 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#desktop-winvista .vista-sidebar-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    color: #1040a0;
    cursor: default;
    text-decoration: none;
}
#desktop-winvista .vista-sidebar-link:hover {
    background: #dde8ff;
    text-decoration: underline;
}
#desktop-winvista .vista-explorer-content {
    flex: 1;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}
#desktop-winvista .vista-details-pane {
    height: 44px;
    background: linear-gradient(180deg, #e8efff, #d8e4ff);
    border-top: 1px solid #c0d0ee;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Minesweeper / terminal window content background --- */
#desktop-winvista #winvista-minesweeper .window-content,
#desktop-winvista #winvista-terminal .window-content {
    background: #000;
    padding: 0;
}

#desktop-winvista #winvista-terminal .terminal-container {
    width: 100%;
    height: 100%;
}


/* --- Start Menu Submenu --- */
#desktop-winvista .has-submenu {
    position: relative;
}

#desktop-winvista .start-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: rgba(240, 245, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 99999 !important;
    flex-direction: column;
    padding: 4px 0;
    margin-left: 2px;
}

#desktop-winvista .start-submenu .start-menu-item {
    color: #000 !important;
    background: transparent !important;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    margin: 2px 4px;
    cursor: pointer;
}

#desktop-winvista .start-submenu .start-menu-item:hover {
    background: linear-gradient(to bottom, #dbeaff, #b6d5ff) !important;
    border: 1px solid #7da2ce !important;
    color: #000 !important;
}

#desktop-winvista .start-menu-item.has-submenu:hover > .start-submenu {
    display: flex !important;
}