/* 
 * Xeca95 - Windows 95 Style Retro OS
 * Estética anos 80-2000
 * Cores: Verde Musgo, Escuros e Neon
 */

:root {
    /* Primary Colors - Verde Musgo e Neon */
    --win-green: #39ff14;
    --win-green-dark: #1a3a1a;
    --win-green-darker: #0d1f0d;
    --win-green-moss: #4a5d23;
    --win-green-forest: #2d4a2d;
    --win-neon-green: #00ff41;
    --win-neon-cyan: #00ffff;
    --win-neon-pink: #ff00ff;
    
    /* Windows 95 Classic Colors with Green Tint */
    --win-bg: #1a3a1a;
    --win-bg-light: #2d4a2d;
    --win-bg-lighter: #3d5a3d;
    --win-surface: #1f3f1f;
    --win-surface-light: #2a4a2a;
    
    /* Window Colors */
    --win-titlebar: linear-gradient(90deg, #1a4a1a, #2d6a2d, #39ff14);
    --win-titlebar-inactive: linear-gradient(90deg, #1a2a1a, #2d3a2d);
    
    /* 3D Border Colors */
    --win-border-light: #5a7a5a;
    --win-border-dark: #0a1a0a;
    --win-border-highlight: #7aaa7a;
    --win-border-shadow: #050f05;
    
    /* Button Colors */
    --win-button-face: #2d4a2d;
    --win-button-highlight: #4a6a4a;
    --win-button-shadow: #1a2a1a;
    
    /* Text Colors */
    --win-text: #39ff14;
    --win-text-light: #7fff7f;
    --win-text-dark: #1a3a1a;
    --win-text-inactive: #5a7a5a;
    
    /* Neon Glow Effects */
    --glow-green: 0 0 10px rgba(57, 255, 20, 0.5), 0 0 20px rgba(57, 255, 20, 0.3);
    --glow-green-strong: 0 0 20px rgba(57, 255, 20, 0.7), 0 0 40px rgba(57, 255, 20, 0.4);
    --glow-cyan: 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
    
    /* Desktop */
    --desktop-bg: #0d1f0d;
    
    /* Taskbar */
    --taskbar-bg: linear-gradient(180deg, #2d4a2d, #1a3a1a);
    --taskbar-height: 40px;
    
    /* Fonts */
    --font-system: 'MS Sans Serif', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: 'Fixedsys', 'Consolas', 'Courier New', monospace;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-system);
    font-size: 12px;
    color: var(--win-text);
    background: var(--desktop-bg);
    user-select: none;
    cursor: default;
}

/* ===== LOGIN SCREEN ===== */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.1) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.login-content {
    text-align: center;
}

.login-logo {
    margin-bottom: 40px;
}

.login-logo-text {
    font-size: 56px;
    font-weight: bold;
    color: var(--win-green);
    text-shadow: var(--glow-green-strong);
    letter-spacing: 4px;
}

.login-95 {
    color: var(--win-neon-cyan);
    text-shadow: var(--glow-cyan);
}

.login-subtitle {
    font-size: 16px;
    color: var(--win-text-light);
    margin-top: 10px;
    letter-spacing: 2px;
}

.login-box {
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    padding: 30px;
    min-width: 350px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8), var(--glow-green);
}

.login-avatar {
    font-size: 64px;
    margin-bottom: 20px;
    background: var(--win-surface);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 2px inset var(--win-border-shadow);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.login-label {
    color: var(--win-text);
    font-size: 12px;
}

.login-input {
    width: 100%;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 12px;
    outline: none;
}

.login-input:focus {
    border-color: var(--win-green);
    box-shadow: var(--glow-green);
}

.login-input::placeholder {
    color: var(--win-text-inactive);
}

.login-error {
    color: #ff4444;
    font-size: 12px;
    min-height: 18px;
    text-align: center;
}

.login-btn {
    margin-top: 10px;
    padding: 10px 30px;
}

.login-hint {
    margin-top: 30px;
    color: var(--win-text-inactive);
    font-size: 11px;
}

/* ===== BOOT SCREEN ===== */
.boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: bootFadeIn 0.5s ease;
}

.boot-content {
    text-align: center;
}

.boot-logo {
    margin-bottom: 40px;
}

.boot-logo-text {
    font-size: 72px;
    font-weight: bold;
    color: var(--win-green);
    text-shadow: var(--glow-green-strong);
    letter-spacing: 4px;
    animation: bootPulse 2s infinite;
}

.boot-95 {
    color: var(--win-neon-cyan);
    text-shadow: var(--glow-cyan);
}

.boot-subtitle {
    font-size: 18px;
    color: var(--win-text-light);
    margin-top: 10px;
    letter-spacing: 2px;
}

.boot-progress {
    width: 300px;
    height: 20px;
    background: #0a1a0a;
    border: 2px solid var(--win-green);
    box-shadow: var(--glow-green);
    margin: 0 auto 20px;
}

.boot-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--win-green-dark), var(--win-green), var(--win-neon-green));
    transition: width 0.3s ease;
    box-shadow: var(--glow-green);
}

.boot-status {
    color: var(--win-text);
    font-family: var(--font-mono);
    font-size: 14px;
}

@keyframes bootPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes bootFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== DESKTOP ===== */
.desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--taskbar-height));
    background: var(--desktop-bg);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(57, 255, 20, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.03) 0%, transparent 40%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(57, 255, 20, 0.02) 2px, rgba(57, 255, 20, 0.02) 4px);
    overflow: hidden;
}

/* ===== DESKTOP ICONS ===== */
.desktop-icons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 20px;
    height: 100%;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.15s ease;
}

.desktop-icon:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--win-green);
}

.desktop-icon.selected {
    background: rgba(57, 255, 20, 0.2);
    border-color: var(--win-green);
    box-shadow: var(--glow-green);
}

.icon-image {
    font-size: 32px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 5px rgba(57, 255, 20, 0.3));
}

.icon-label {
    font-size: 11px;
    color: var(--win-text);
    text-align: center;
    text-shadow: 1px 1px 1px #000, 0 0 10px rgba(57, 255, 20, 0.3);
    word-break: break-word;
    line-height: 1.2;
}

/* ===== TASKBAR ===== */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--taskbar-height);
    background: var(--taskbar-bg);
    border-top: 2px solid var(--win-green);
    box-shadow: 0 -2px 10px rgba(57, 255, 20, 0.2);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    z-index: 9999;
}

.start-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    height: 32px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-family: var(--font-system);
    font-size: 12px;
    font-weight: bold;
    color: var(--win-text);
    cursor: pointer;
    text-shadow: 0 0 5px var(--win-green);
}

.start-button:hover {
    background: var(--win-button-highlight);
    box-shadow: var(--glow-green);
}

.start-button:active,
.start-button.active {
    border-style: inset;
    background: var(--win-button-shadow);
}

.start-icon {
    font-size: 18px;
}

.taskbar-windows {
    flex: 1;
    display: flex;
    gap: 4px;
    padding: 0 8px;
    overflow-x: auto;
}

.taskbar-window {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    height: 28px;
    min-width: 150px;
    max-width: 200px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 11px;
    color: var(--win-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskbar-window:hover {
    background: var(--win-button-highlight);
}

.taskbar-window.active {
    border-style: inset;
    background: var(--win-surface);
    box-shadow: inset var(--glow-green);
}

.taskbar-window-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    height: 32px;
    background: var(--win-surface);
    border: 2px inset var(--win-border-shadow);
}

.tray-icon {
    font-size: 14px;
    cursor: pointer;
    opacity: 0.8;
}

.tray-icon:hover {
    opacity: 1;
    text-shadow: var(--glow-green);
}

.clock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--win-green);
    text-shadow: var(--glow-green);
    padding: 0 4px;
}

/* ===== START MENU ===== */
.start-menu {
    position: fixed;
    bottom: var(--taskbar-height);
    left: 0;
    width: 400px;
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8), var(--glow-green);
    display: none;
    z-index: 10000;
}

.start-menu.active {
    display: block;
    animation: menuSlideUp 0.15s ease;
}

@keyframes menuSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--win-titlebar);
}

.user-avatar {
    font-size: 32px;
    background: var(--win-surface);
    padding: 8px;
    border: 2px inset var(--win-border-shadow);
}

.user-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--win-text-dark);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}

.start-menu-content {
    display: flex;
}

.start-menu-left,
.start-menu-right {
    flex: 1;
    padding: 8px 0;
}

.start-menu-left {
    background: var(--win-surface);
    border-right: 1px solid var(--win-border-dark);
}

.start-menu-right {
    background: var(--win-surface-light);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 12px;
    color: var(--win-text);
}

.menu-item:hover {
    background: var(--win-green);
    color: var(--win-text-dark);
    text-shadow: none;
}

.menu-item.shutdown:hover {
    background: #ff4444;
    color: #fff;
}

.menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.menu-divider {
    height: 1px;
    background: var(--win-border-dark);
    margin: 4px 16px;
}

/* ===== CONTEXT MENU ===== */
.context-menu {
    position: fixed;
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    min-width: 180px;
    display: none;
    z-index: 10001;
}

.context-menu.active {
    display: block;
}

.context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    color: var(--win-text);
}

.context-item:hover {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.context-divider {
    height: 1px;
    background: var(--win-border-dark);
    margin: 4px 0;
}

/* ===== WINDOWS ===== */
.window {
    position: absolute;
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(57, 255, 20, 0.1);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 150px;
}

.window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - var(--taskbar-height)) !important;
}

.window.minimized {
    display: none;
}

.window-titlebar {
    display: flex;
    align-items: center;
    padding: 3px 4px;
    background: var(--win-titlebar);
    cursor: move;
    min-height: 24px;
}

.window.inactive .window-titlebar {
    background: var(--win-titlebar-inactive);
}

.window-icon {
    font-size: 14px;
    margin-right: 6px;
}

.window-title {
    flex: 1;
    font-size: 12px;
    font-weight: bold;
    color: var(--win-text-dark);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window.inactive .window-title {
    color: var(--win-text-inactive);
}

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

.window-btn {
    width: 18px;
    height: 18px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 10px;
    font-weight: bold;
    color: var(--win-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.window-btn:hover {
    background: var(--win-button-highlight);
}

.window-btn:active {
    border-style: inset;
}

.window-btn.close:hover {
    background: #ff4444;
    color: #fff;
}

.window-menubar {
    display: flex;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
    padding: 2px 4px;
}

.window-menu-item {
    padding: 2px 8px;
    font-size: 11px;
    color: var(--win-text);
    cursor: pointer;
}

.window-menu-item:hover {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.window-content {
    flex: 1;
    background: var(--win-surface);
    overflow: auto;
    position: relative;
}

.window-statusbar {
    display: flex;
    background: var(--win-surface);
    border-top: 1px solid var(--win-border-dark);
    padding: 2px 8px;
    font-size: 11px;
    color: var(--win-text-inactive);
}

.window-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--win-border-highlight) 50%);
}

/* ===== DIALOG BOX ===== */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.dialog-box {
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
    min-width: 350px;
}

.dialog-header {
    background: var(--win-titlebar);
    padding: 4px 8px;
    font-weight: bold;
    font-size: 12px;
    color: var(--win-text-dark);
}

.dialog-content {
    padding: 20px;
    text-align: center;
}

.dialog-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.dialog-content p {
    margin-bottom: 15px;
    color: var(--win-text);
}

.dialog-options {
    text-align: left;
    padding: 0 20px;
}

.dialog-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    color: var(--win-text);
}

.dialog-option input {
    accent-color: var(--win-green);
}

.dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: var(--win-surface);
    border-top: 1px solid var(--win-border-dark);
}

/* ===== WINDOWS 95 BUTTON ===== */
.win95-btn {
    padding: 6px 24px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-family: var(--font-system);
    font-size: 12px;
    color: var(--win-text);
    cursor: pointer;
}

.win95-btn:hover {
    background: var(--win-button-highlight);
}

.win95-btn:active {
    border-style: inset;
    background: var(--win-button-shadow);
}

.win95-btn:focus {
    outline: 1px dotted var(--win-text);
    outline-offset: -4px;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: repeating-linear-gradient(
        135deg,
        var(--win-surface) 0px,
        var(--win-surface) 2px,
        var(--win-surface-light) 2px,
        var(--win-surface-light) 4px
    );
}

::-webkit-scrollbar-thumb {
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--win-button-highlight);
}

::-webkit-scrollbar-button {
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
}

::-webkit-scrollbar-corner {
    background: var(--win-surface);
}

/* ===== APP SPECIFIC STYLES ===== */

/* Notepad */
.notepad-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notepad-toolbar {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
    flex-wrap: wrap;
    align-items: center;
}

.notepad-toolbar-group {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid var(--win-border-dark);
    margin-right: 8px;
}

.notepad-toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
}

.notepad-tool-btn {
    padding: 4px 8px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 12px;
    cursor: pointer;
    color: var(--win-text);
    min-width: 28px;
}

.notepad-tool-btn:hover {
    background: var(--win-button-highlight);
}

.notepad-tool-btn:active,
.notepad-tool-btn.active {
    border-style: inset;
    background: var(--win-surface);
}

.notepad-tool-btn.bold {
    font-weight: bold;
}

.notepad-tool-btn.italic {
    font-style: italic;
}

.notepad-tool-btn.underline {
    text-decoration: underline;
}

.notepad-font-select {
    background: var(--win-button-face);
    border: 2px inset var(--win-border-shadow);
    color: var(--win-text);
    font-family: var(--font-system);
    font-size: 11px;
    padding: 2px 4px;
}

.notepad-size-select {
    background: var(--win-button-face);
    border: 2px inset var(--win-border-shadow);
    color: var(--win-text);
    font-family: var(--font-system);
    font-size: 11px;
    padding: 2px 4px;
    width: 60px;
}

.notepad-textarea {
    width: 100%;
    flex: 1;
    background: #0a1a0a;
    border: none;
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px;
    resize: none;
    outline: none;
    line-height: 1.5;
}

.notepad-textarea::selection {
    background: var(--win-green);
    color: var(--win-text-dark);
}

/* Calculator */
.calculator {
    padding: 10px;
    background: var(--win-surface);
}

.calc-display {
    width: 100%;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 24px;
    text-align: right;
    padding: 8px 12px;
    margin-bottom: 10px;
}

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

.calc-btn {
    padding: 12px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-family: var(--font-system);
    font-size: 14px;
    font-weight: bold;
    color: var(--win-text);
    cursor: pointer;
}

.calc-btn:hover {
    background: var(--win-button-highlight);
}

.calc-btn:active {
    border-style: inset;
}

.calc-btn.operator {
    color: var(--win-neon-cyan);
}

.calc-btn.equals {
    background: var(--win-green-dark);
    color: var(--win-green);
}

.calc-btn.clear {
    color: #ff6b6b;
}

/* Paint */
.paint-container {
    display: flex;
    height: 100%;
}

.paint-toolbar {
    width: 60px;
    background: var(--win-surface);
    border-right: 1px solid var(--win-border-dark);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.paint-tool {
    width: 100%;
    aspect-ratio: 1;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paint-tool:hover {
    background: var(--win-button-highlight);
}

.paint-tool.active {
    border-style: inset;
    background: var(--win-surface);
}

.paint-colors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-top: auto;
    padding: 4px;
    background: var(--win-surface-light);
    border: 1px solid var(--win-border-dark);
}

.paint-color {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--win-border-dark);
    cursor: pointer;
}

.paint-color.active {
    border: 2px solid var(--win-text);
    box-shadow: 0 0 5px currentColor;
}

.paint-canvas-container {
    flex: 1;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.paint-canvas {
    background: #fff;
    cursor: crosshair;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Minesweeper */
.minesweeper {
    padding: 10px;
    background: var(--win-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mine-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px;
    background: var(--win-surface-light);
    border: 2px inset var(--win-border-shadow);
    margin-bottom: 10px;
}

.mine-counter {
    background: #0a0a0a;
    color: #ff0000;
    font-family: var(--font-mono);
    font-size: 24px;
    padding: 4px 8px;
    min-width: 60px;
    text-align: center;
    text-shadow: 0 0 10px #ff0000;
}

.mine-face {
    font-size: 24px;
    padding: 4px 8px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    cursor: pointer;
}

.mine-face:active {
    border-style: inset;
}

.mine-grid {
    display: grid;
    gap: 0;
    border: 3px inset var(--win-border-shadow);
}

.mine-cell {
    width: 24px;
    height: 24px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mine-cell.revealed {
    border: 1px solid var(--win-border-dark);
    background: var(--win-surface);
}

.mine-cell.mine {
    background: #ff0000;
}

.mine-cell.flagged::after {
    content: '🚩';
}

.mine-cell[data-number="1"] { color: #0000ff; }
.mine-cell[data-number="2"] { color: #008000; }
.mine-cell[data-number="3"] { color: #ff0000; }
.mine-cell[data-number="4"] { color: #000080; }
.mine-cell[data-number="5"] { color: #800000; }
.mine-cell[data-number="6"] { color: #008080; }
.mine-cell[data-number="7"] { color: #000000; }
.mine-cell[data-number="8"] { color: #808080; }

/* File Explorer */
.explorer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.explorer-toolbar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
}

.explorer-address {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
}

.explorer-address-label {
    color: var(--win-text);
    font-size: 11px;
}

.explorer-address-input {
    flex: 1;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
}

.explorer-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.explorer-sidebar {
    width: 180px;
    background: var(--win-surface-light);
    border-right: 1px solid var(--win-border-dark);
    overflow-y: auto;
    padding: 8px;
}

.explorer-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    color: var(--win-text);
}

.explorer-tree-item:hover {
    background: rgba(57, 255, 20, 0.1);
}

.explorer-files {
    flex: 1;
    background: var(--win-surface);
    overflow-y: auto;
    padding: 8px;
}

.explorer-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.explorer-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.explorer-file:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--win-green);
}

.explorer-file-icon {
    font-size: 32px;
    margin-bottom: 4px;
}

.explorer-file-name {
    font-size: 11px;
    text-align: center;
    word-break: break-word;
    color: var(--win-text);
}

/* Terminal */
.terminal {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    padding: 8px;
    overflow-y: auto;
}

.terminal-output {
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
    white-space: pre-wrap;
    line-height: 1.4;
}

.terminal-input-line {
    display: flex;
    align-items: center;
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
}

.terminal-prompt {
    color: var(--win-neon-cyan);
    margin-right: 8px;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
    caret-color: var(--win-green);
}

/* Settings */
.settings-container {
    display: flex;
    height: 100%;
}

.settings-sidebar {
    width: 180px;
    background: var(--win-surface-light);
    border-right: 1px solid var(--win-border-dark);
    padding: 8px;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--win-text);
    border: 1px solid transparent;
}

.settings-item:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--win-green);
}

.settings-item.active {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.settings-content {
    flex: 1;
    padding: 16px;
    background: var(--win-surface);
    overflow-y: auto;
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section h3 {
    color: var(--win-text);
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--win-border-dark);
}

.settings-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-label {
    color: var(--win-text);
    font-size: 12px;
    min-width: 120px;
}

.settings-input {
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
}

.settings-select {
    background: var(--win-button-face);
    border: 2px inset var(--win-border-shadow);
    color: var(--win-text);
    font-family: var(--font-system);
    font-size: 12px;
    padding: 4px 8px;
}

/* Settings Tabs */
.settings-tab {
    display: none;
}

.settings-tab.active {
    display: block;
}

.settings-color {
    width: 40px;
    height: 28px;
    border: 2px inset var(--win-border-shadow);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.settings-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-color::-webkit-color-swatch {
    border: none;
}

.color-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--win-text-inactive);
    margin-left: 8px;
}

.settings-info {
    background: var(--win-surface-light);
    border: 2px inset var(--win-border-shadow);
    padding: 12px;
}

.settings-info p {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--win-text);
}

.settings-info strong {
    color: var(--win-green);
}

.settings-preview {
    margin-top: 16px;
    padding: 16px;
    background: var(--desktop-bg);
    border: 2px inset var(--win-border-shadow);
}

.preview-window {
    width: 200px;
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    margin: 0 auto;
}

.preview-titlebar {
    background: var(--win-titlebar);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    color: var(--win-text-dark);
}

.preview-content {
    padding: 16px;
    font-size: 11px;
    color: var(--win-text);
    background: var(--win-surface);
}

/* Music Player */
.music-player {
    padding: 16px;
    background: var(--win-surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.player-display {
    background: #0a0a0a;
    border: 2px inset var(--win-border-shadow);
    padding: 16px;
    text-align: center;
}

.player-visualizer {
    display: flex;
    justify-content: center;
    gap: 4px;
    height: 60px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.visualizer-bar {
    width: 8px;
    background: var(--win-green);
    animation: visualize 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 10px var(--win-green);
}

.visualizer-bar:nth-child(1) { animation-delay: 0s; }
.visualizer-bar:nth-child(2) { animation-delay: 0.1s; }
.visualizer-bar:nth-child(3) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(4) { animation-delay: 0.3s; }
.visualizer-bar:nth-child(5) { animation-delay: 0.4s; }
.visualizer-bar:nth-child(6) { animation-delay: 0.3s; }
.visualizer-bar:nth-child(7) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(8) { animation-delay: 0.1s; }

@keyframes visualize {
    from { height: 10px; }
    to { height: 60px; }
}

.player-title {
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 14px;
    text-shadow: var(--glow-green);
}

.player-time {
    color: var(--win-neon-cyan);
    font-family: var(--font-mono);
    font-size: 12px;
    margin-top: 8px;
}

.player-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.player-btn {
    width: 40px;
    height: 40px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 18px;
    cursor: pointer;
}

.player-btn:hover {
    background: var(--win-button-highlight);
}

.player-btn:active {
    border-style: inset;
}

.player-progress {
    background: #0a0a0a;
    border: 2px inset var(--win-border-shadow);
    height: 20px;
    position: relative;
}

.player-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--win-green-dark), var(--win-green));
    width: 45%;
    box-shadow: var(--glow-green);
}

.player-playlist {
    background: #0a0a0a;
    border: 2px inset var(--win-border-shadow);
    max-height: 120px;
    overflow-y: auto;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--win-text);
    font-size: 12px;
}

.playlist-item:hover {
    background: rgba(57, 255, 20, 0.1);
}

.playlist-item.active {
    background: var(--win-green);
    color: var(--win-text-dark);
}

/* About */
.about-container {
    padding: 20px;
    text-align: center;
    background: var(--win-surface);
}

.about-logo {
    font-size: 64px;
    margin-bottom: 16px;
}

.about-logo-text {
    font-size: 48px;
    font-weight: bold;
    color: var(--win-green);
    text-shadow: var(--glow-green-strong);
}

.about-version {
    font-size: 14px;
    color: var(--win-text);
    margin-bottom: 20px;
}

.about-info {
    text-align: left;
    padding: 16px;
    background: var(--win-surface-light);
    border: 2px inset var(--win-border-shadow);
    margin-bottom: 16px;
}

.about-info p {
    margin-bottom: 8px;
    color: var(--win-text);
    font-size: 12px;
}

.about-info strong {
    color: var(--win-green);
}

/* Recycle Bin */
.recycle-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--win-text-inactive);
}

.recycle-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.recycle-items {
    padding: 16px;
}

.recycle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.recycle-item:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--win-green);
}

/* My Computer */
.my-computer {
    padding: 16px;
}

.drive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
}

.drive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    border: 1px solid transparent;
}

.drive-item:hover {
    background: rgba(57, 255, 20, 0.1);
    border-color: var(--win-green);
}

.drive-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.drive-label {
    font-size: 12px;
    text-align: center;
    color: var(--win-text);
}

.drive-space {
    width: 100%;
    height: 8px;
    background: #0a0a0a;
    border: 1px solid var(--win-border-dark);
    margin-top: 8px;
}

.drive-space-used {
    height: 100%;
    background: var(--win-green);
}

/* File Dialog */
.file-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.file-dialog {
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
    min-width: 450px;
    max-width: 600px;
}

.file-dialog-header {
    background: var(--win-titlebar);
    padding: 4px 8px;
    font-weight: bold;
    font-size: 12px;
    color: var(--win-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-dialog-close {
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    width: 18px;
    height: 18px;
    font-size: 10px;
    cursor: pointer;
    color: var(--win-text);
}

.file-dialog-close:hover {
    background: #ff4444;
    color: #fff;
}

.file-dialog-content {
    padding: 16px;
}

.file-dialog-path {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.file-dialog-path-label {
    color: var(--win-text);
    font-size: 12px;
    min-width: 80px;
}

.file-dialog-path-input {
    flex: 1;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
}

.file-dialog-files {
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.file-dialog-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--win-text);
    font-size: 12px;
}

.file-dialog-item:hover {
    background: rgba(57, 255, 20, 0.1);
}

.file-dialog-item.selected {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.file-dialog-item.folder {
    color: var(--win-neon-cyan);
}

.file-dialog-filename {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.file-dialog-filename-label {
    color: var(--win-text);
    font-size: 12px;
    min-width: 80px;
}

.file-dialog-filename-input {
    flex: 1;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
}

.file-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Explorer enhancements */
.explorer-toolbar-btn {
    padding: 4px 8px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 11px;
    cursor: pointer;
    color: var(--win-text);
}

.explorer-toolbar-btn:hover {
    background: var(--win-button-highlight);
}

.explorer-toolbar-btn:active {
    border-style: inset;
}

.explorer-context-menu {
    position: fixed;
    background: var(--win-bg);
    border: 2px outset var(--win-border-highlight);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    min-width: 150px;
    z-index: 10002;
}

.explorer-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    color: var(--win-text);
}

.explorer-context-item:hover {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.explorer-context-divider {
    height: 1px;
    background: var(--win-border-dark);
    margin: 4px 0;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Selection */
::selection {
    background: var(--win-green);
    color: var(--win-text-dark);
}

/* CRT Effect (optional retro feel) */
.crt-effect {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 99998;
}

/* ===== EMBEDDED BROWSER ===== */
.browser-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--win-surface);
}

.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
}

.browser-nav-buttons {
    display: flex;
    gap: 2px;
}

.browser-btn {
    padding: 4px 8px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 12px;
    cursor: pointer;
    color: var(--win-text);
    min-width: 28px;
}

.browser-btn:hover {
    background: var(--win-button-highlight);
}

.browser-btn:active {
    border-style: inset;
}

.browser-address-bar {
    flex: 1;
    display: flex;
    gap: 4px;
}

.browser-url-input {
    flex: 1;
    background: #0a1a0a;
    border: 2px inset var(--win-border-shadow);
    color: var(--win-green);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
}

.browser-url-input:focus {
    outline: none;
    border-color: var(--win-green);
}

.browser-go-btn {
    padding: 4px 12px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 11px;
    cursor: pointer;
    color: var(--win-text);
}

.browser-go-btn:hover {
    background: var(--win-button-highlight);
}

.browser-bookmarks-bar {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: var(--win-surface-light);
    border-bottom: 1px solid var(--win-border-dark);
    flex-wrap: wrap;
}

.browser-bookmark {
    padding: 2px 8px;
    background: var(--win-button-face);
    border: 1px solid var(--win-border-dark);
    font-size: 11px;
    cursor: pointer;
    color: var(--win-text);
}

.browser-bookmark:hover {
    background: var(--win-button-highlight);
    border-color: var(--win-green);
}

.browser-viewport {
    flex: 1;
    position: relative;
    background: #fff;
    overflow: hidden;
}

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

.browser-loading,
.browser-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--win-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.browser-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--win-border-dark);
    border-top-color: var(--win-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.browser-error-icon {
    font-size: 64px;
    opacity: 0.5;
}

.browser-error h3 {
    color: var(--win-text);
    margin: 0;
}

.browser-error p {
    color: var(--win-text-inactive);
    margin: 0;
    font-size: 12px;
}

.browser-status-bar {
    display: flex;
    padding: 2px 8px;
    background: var(--win-surface);
    border-top: 1px solid var(--win-border-dark);
    font-size: 11px;
    color: var(--win-text-inactive);
}

/* ===== TASK MANAGER ===== */
.task-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--win-surface);
}

.task-manager-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--win-surface);
    border-bottom: 1px solid var(--win-border-dark);
}

.task-tab {
    padding: 6px 16px;
    background: var(--win-button-face);
    border: 2px outset var(--win-border-highlight);
    font-size: 11px;
    cursor: pointer;
    color: var(--win-text);
}

.task-tab:hover {
    background: var(--win-button-highlight);
}

.task-tab.active {
    background: var(--win-surface);
    border-bottom-color: var(--win-surface);
}

.task-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.task-tab-content {
    display: none;
    height: 100%;
    flex-direction: column;
}

.task-tab-content.active {
    display: flex;
}

.task-list-header {
    display: flex;
    padding: 4px 8px;
    background: var(--win-button-face);
    border-bottom: 1px solid var(--win-border-dark);
    font-size: 11px;
    font-weight: bold;
    color: var(--win-text);
}

.task-list {
    flex: 1;
    overflow-y: auto;
    background: #0a0a0a;
}

.task-col-name {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-col-cpu,
.task-col-mem {
    width: 60px;
    text-align: right;
}

.task-col-status {
    width: 80px;
    text-align: center;
}

.task-item {
    display: flex;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    color: var(--win-text);
    border-bottom: 1px solid #1a1a1a;
}

.task-item:hover {
    background: rgba(57, 255, 20, 0.1);
}

.task-item.selected {
    background: var(--win-green);
    color: var(--win-text-dark);
}

.task-empty {
    padding: 16px;
    text-align: center;
    color: var(--win-text-inactive);
    font-size: 12px;
}

.performance-graphs {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.perf-graph-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perf-graph-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--win-text);
}

.perf-graph {
    background: #0a0a0a;
    border: 2px inset var(--win-border-shadow);
    height: 100px;
}

.perf-graph canvas {
    width: 100%;
    height: 100%;
}

.perf-value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--win-green);
    text-align: center;
}

.performance-stats {
    padding: 8px 16px;
    background: var(--win-surface-light);
    border-top: 1px solid var(--win-border-dark);
}

.perf-stat {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
}

.perf-stat-label {
    color: var(--win-text);
}

.perf-stat-value {
    color: var(--win-green);
    font-family: var(--font-mono);
}

.task-manager-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px;
    background: var(--win-surface);
    border-top: 1px solid var(--win-border-dark);
}

/* ===== ENHANCED SETTINGS ===== */
.settings-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--win-text);
}

.settings-checkbox input {
    accent-color: var(--win-green);
    width: 16px;
    height: 16px;
}

.settings-slider {
    width: 150px;
    accent-color: var(--win-green);
}

.settings-range-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--win-text-inactive);
    min-width: 40px;
}

.settings-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--win-green);
}

.storage-usage {
    margin-top: 16px;
}

.storage-label {
    font-size: 11px;
    color: var(--win-text);
    margin-bottom: 4px;
}

.storage-bar {
    height: 20px;
    background: #0a0a0a;
    border: 2px inset var(--win-border-shadow);
    position: relative;
}

.storage-bar-used {
    height: 100%;
    background: linear-gradient(90deg, var(--win-green-dark), var(--win-green));
}

.storage-info {
    font-size: 11px;
    color: var(--win-text-inactive);
    margin-top: 4px;
}