:root { --border: rgba(255, 255, 255, 0.08); }

* { box-sizing: border-box; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: default; }
button, .dock-item, .shortcut-card, .icon-box-square { cursor: pointer !important; }

body, html { margin: 0; padding: 0; height: 100vh; width: 100vw; background: #000; font-family: 'Outfit', sans-serif; color: white; overflow: hidden; }

.wallpaper-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('waterfall.jpg') no-repeat center center/cover;
    filter: brightness(0.4); z-index: -1;
}

.overlay-view { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); z-index: 2000; 
    display: flex; align-items: center; justify-content: center; 
    backdrop-filter: blur(25px); opacity: 0; pointer-events: none;
}
.overlay-view.active { opacity: 1; pointer-events: auto; }

.ui-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; }
.ui-wrapper.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }

#clock { font-size: 7.5rem; font-weight: 200; margin: 0; letter-spacing: -3px; }
#date { font-size: 0.8rem; letter-spacing: 5px; margin-bottom: 30px; opacity: 0.5; text-transform: uppercase; }

.search-bar { 
    width: 450px; height: 38px; background: rgba(15,15,15,0.8); 
    border: 1px solid var(--border); border-radius: 10px; 
    display: flex; align-items: center; padding: 0 15px; margin-bottom: 50px; 
}
#search-input { background: transparent; border: none; outline: none; color: white; width: 100%; font-size: 0.9rem; cursor: text !important; }
.search-icon { width: 14px; opacity: 0.3; margin-right: 10px; }

.shortcut-grid { display: flex; gap: 20px; margin-bottom: 60px; }
.icon-box-square {
    width: 50px; height: 50px; background: #000;
    border: 1px solid var(--border); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.icon-box-square img { width: 22px; height: 22px; }
.shortcut-card:hover { transform: translateY(-10px); }
.shortcut-card span { font-size: 0.6rem; opacity: 0.4; margin-top: 10px; letter-spacing: 1px; }

#view-container { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: #000; z-index: 1500; display: flex; flex-direction: column; 
    opacity: 0; pointer-events: none; transform: scale(1.02);
}
#view-container.active { opacity: 1; pointer-events: auto; transform: scale(1); }

.nav-controls { background: #000; padding: 12px 25px; display: flex; align-items: center; border-bottom: 1px solid var(--border); position: relative; }
.centered-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.8rem; opacity: 0.4; letter-spacing: 2px; }

.nav-btn-pure-black { background: #000; border: 1px solid #111; color: #444; padding: 8px 12px; border-radius: 8px; }
.nav-btn-pure-black:hover { color: #fff; border-color: #333; }

.view-content { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; text-align: center; }
.maintenance-box h2 { font-weight: 200; margin: 10px 0 5px; }
.maintenance-box p { opacity: 0.4; font-size: 0.9rem; }

#browser-frame { flex: 1; border: none; width: 100%; height: 100%; background: #fff; }

.dock-container { position: absolute; bottom: 35px; width: 100%; display: flex; justify-content: center; }
.dock { background: rgba(10,10,10,0.9); border: 1px solid var(--border); border-radius: 20px; padding: 8px 18px; display: flex; align-items: center; gap: 8px; }
.divider { width: 1px; height: 22px; background: rgba(255,255,255,0.1); margin: 0 8px; }

.hidden { display: none !important; }