:root {
    --glass: rgba(255, 255, 255, 0.72);
    --border: rgba(255, 255, 255, 0.4);
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    --ease-apple: cubic-bezier(0.2, 1, 0.3, 1);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; outline: none; }
body, html { margin:0; padding:0; height:100%; font-family: 'Inter', sans-serif; overflow:hidden; background:#000; }

/* Desktop Environment */
.desktop {
    width: 100vw; height: 100vh;
    background-size: cover; background-position: center;
    position: relative; transition: background-image 0.8s ease;
    will-change: background-image;
}

.desktop-grid {
    position: absolute; top: 50px; left: 25px;
    display: grid; grid-template-rows: repeat(auto-fill, 100px);
    grid-auto-flow: column; gap: 20px; z-index: 1;
}

.d-icon {
    width: 85px; display: flex; flex-direction: column; align-items: center; cursor: pointer;
}

.icon-box {
    width: 64px; height: 64px; background: rgba(255,255,255,0.18);
    backdrop-filter: blur(20px); border-radius: 14px; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 38px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s, background 0.2s;
}

.d-icon:hover .icon-box { transform: scale(1.06); background: rgba(255,255,255,0.3); }
.d-icon span { margin-top: 6px; font-size: 11px; color: white; text-shadow: 0 1px 4px rgba(0,0,0,0.7); background: rgba(0,0,0,0.25); padding: 2px 7px; border-radius: 5px; }

/* Top System Bar */
.top-bar {
    position: fixed; top:0; width:100%; height:32px; background: rgba(255,255,255,0.15);
    backdrop-filter: blur(30px); display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; color: white; font-size: 13px; z-index: 10000; border-bottom: 0.5px solid rgba(255,255,255,0.1);
}
.bar-left { display: flex; gap: 18px; align-items: center; }
.apple-icon { font-size: 18px; cursor: pointer; transition: 0.2s; }
.apple-icon:hover { opacity: 0.7; }

/* Window System with Genie Effect */
.window {
    position: absolute; width: 680px; height: 480px; background: var(--glass);
    backdrop-filter: blur(40px); border-radius: 14px; border: 1px solid var(--border);
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    top: 80px; left: 200px; z-index: 100;
    transition: transform 0.65s var(--ease-apple), opacity 0.4s;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.window.hidden { display: none !important; }
.window.minimized { transform: scale(0.02) translateY(1000px); opacity: 0; pointer-events: none; }

.win-header { height: 42px; display: flex; align-items: center; padding: 0 15px; cursor: move; }
.traffic-lights { display: flex; gap: 8px; }
.dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.dot:hover { filter: brightness(0.8); }
.win-title { flex:1; text-align: center; font-size: 13px; font-weight: 600; margin-right: 55px; color: #222; opacity: 0.8; }
.win-body { flex:1; padding: 25px; overflow-y: auto; scrollbar-width: none; }

/* OS Dialogs */
.dialog-overlay { position: fixed; inset:0; background: rgba(0,0,0,0.35); backdrop-filter: blur(12px); z-index: 50000; display: flex; align-items: center; justify-content: center; }
.dialog-box { background: var(--glass); backdrop-filter: blur(50px); padding: 30px; border-radius: 22px; width: 330px; text-align: center; border: 1px solid var(--border); box-shadow: var(--shadow); animation: pop 0.35s var(--ease-apple); }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Dock Styling */
.dock-container { position: fixed; bottom: 14px; width: 100%; display: flex; justify-content: center; z-index: 10000; }
.dock { background: rgba(255,255,255,0.22); backdrop-filter: blur(35px); padding: 10px 22px; border-radius: 24px; display: flex; gap: 18px; align-items: flex-end; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.dock-item { font-size: 40px; cursor: pointer; transition: 0.3s var(--ease-apple); position: relative; }
.dock-item:hover { transform: scale(1.4) translateY(-12px); margin: 0 8px; }
.dock-item .dot { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 4.5px; height: 4.5px; background: #fff; border-radius: 50%; display: none; }
.active .dot { display: block; }
.dock-sep { width: 1px; height: 42px; background: rgba(255,255,255,0.25); }

/* Buttons & Elements */
.btn-main { background: #0071e3; color: white; border: none; padding: 12px 20px; border-radius: 12px; cursor: pointer; font-weight: 600; width: 100%; transition: 0.2s; }
.btn-main:hover { filter: brightness(1.1); }
.btn-sub { background: rgba(0,0,0,0.06); color: #222; border: none; padding: 12px 20px; border-radius: 12px; cursor: pointer; margin-right: 6px; }
.os-input { width: 100%; padding: 12px; margin: 15px 0; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.6); }

/* Loading State */
#boot-screen { position: fixed; inset: 0; background: #000; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.boot-logo { font-size: 85px; color: white; margin-bottom: 45px; animation: glow 2s infinite alternate; }
.boot-loader { width: 200px; height: 4.5px; background: #222; border-radius: 3px; overflow: hidden; }
.fill { height: 100%; background: #fff; width: 0%; transition: 1.8s ease-in-out; }

@keyframes glow { from { opacity: 0.6; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.hidden { display: none !important; }
.luxury-card { display: block; background: #fff; padding: 22px; border-radius: 18px; text-decoration: none; color: #222; text-align: center; margin-bottom: 18px; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.04); }
.luxury-card:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }