:root {
    --system-bg: #000000;
    --text-primary: #ffffff;
}

body, html {
    margin: 0; padding: 0; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background-color: #121212;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    user-select: none; -webkit-font-smoothing: antialiased;
}

.device {
    width: 393px; height: 852px; background-color: var(--system-bg);
    border-radius: 55px;
    box-shadow: 0 0 0 4px #444, 0 0 0 12px #2a2a2a, 0 30px 60px rgba(0,0,0,0.8);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}

.screen {
    width: 100%; height: 100%; position: relative;
    background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop') center/cover;
}

.dynamic-island {
    width: 125px; height: 35px; background: #000; border-radius: 20px;
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 1000; box-shadow: inset 0 0 4px rgba(255,255,255,0.1);
}

.status-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 35px 0; color: var(--text-primary); font-size: 15px; font-weight: 600;
    z-index: 900; position: absolute; width: 100%; box-sizing: border-box; pointer-events: none;
}

.status-icons { display: flex; gap: 5px; font-size: 14px; }

.view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}
.view.active { display: flex; }

#lockScreen { padding-top: 85px; }
.lock-icon { font-size: 24px; margin-bottom: 5px; }
.date-display { font-size: 22px; font-weight: 500; color: var(--text-primary); opacity: 0.9; }
.time-display { font-size: 96px; font-weight: 700; letter-spacing: -2px; color: var(--text-primary); line-height: 1; margin-top: -5px; }

.home-bar-container {
    position: absolute; bottom: 0; width: 100%; height: 60px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 1000; cursor: pointer;
}
.unlock-text { font-size: 13px; color: var(--text-primary); opacity: 0.7; margin-bottom: 10px; animation: pulseText 2s infinite; }
.home-bar { width: 140px; height: 5px; background: var(--text-primary); border-radius: 10px; }

@keyframes pulseText {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-3px); }
}

#passcodeScreen {
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    padding-top: 100px; opacity: 0; pointer-events: none;
}
#passcodeScreen.active { opacity: 1; pointer-events: auto; }

.passcode-header { text-align: center; color: var(--text-primary); margin-bottom: 30px; }
.passcode-header h2 { font-size: 22px; font-weight: 500; margin: 10px 0 0; }

.passcode-dots { display: flex; gap: 22px; margin-bottom: 70px; }
.dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--text-primary); }
.dot.filled { background-color: var(--text-primary); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 25px; padding: 0 40px; }
.key {
    width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, 0.12);
    border: none; color: var(--text-primary); display: flex; flex-direction: column;
    justify-content: center; align-items: center; font-size: 34px; cursor: pointer;
}
.key:active { background: rgba(255, 255, 255, 0.35); }
.key.empty { background: transparent; cursor: default; }
.key-sub { font-size: 10px; font-weight: 600; letter-spacing: 2px; margin-top: -2px; }
.action-key { background: transparent; font-size: 16px; }

.shake-error { animation: shake 0.4s both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}

#homeScreen {
    opacity: 0; transform: scale(0.95); pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-between;
    padding-top: 65px; padding-bottom: 15px; box-sizing: border-box; z-index: 100;
}
#homeScreen.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 18px; padding: 0 22px; }
.app-icon-container { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.app-icon-container:active { transform: scale(0.85); filter: brightness(0.7); }
.app-icon {
    width: 62px; height: 62px; border-radius: 16px; display: flex; justify-content: center;
    align-items: center; font-size: 32px; background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.app-name { color: var(--text-primary); font-size: 11.5px; margin-top: 6px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.icon-calc { background: #FF9F0A; color: white; line-height: 1; font-size: 24px; text-align: center;}
.icon-notes { background: #FFD60A; color: #333; }
.icon-weather { background: #0A84FF; }
.icon-settings { background: #8E8E93; }
.icon-maps { background: #34C759; }
.icon-health { background: #ffffff; }
.icon-camera { background: #E5E5EA; }
.icon-photos { background: #ffffff; }

.dock-container { padding: 0 15px; margin-bottom: 5px; }
.dock {
    background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-radius: 32px; padding: 16px; display: flex; justify-content: space-around;
}
.dock .app-name { display: none; }
.icon-phone { background: #34C759; color: white; }
.icon-safari { background: #ffffff; color: #0A84FF; }
.icon-messages { background: #34C759; color: white; }
.icon-music { background: #FF2D55; color: white; }