:root {
    --bg-dark: #09060B; --panel-purple: #1A1124; --accent-purple: #3A2350;
    --text-green: #00FF66; --text-muted: #A199AB; --danger-red: #FF3366;
    --morning-gold: #FFD700; --evening-orange: #FF8C00; --night-blue: #4A90E2; 
    --mood-color: #66CCCC; --state-pink: #FF66CC; --pain-orange: #FF8C00;
}

body { background-color: var(--bg-dark); color: var(--text-green); font-family: -apple-system, sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center; }
.app-container { width: 100%; max-width: 450px; padding-bottom: 80px; }
.card { background-color: var(--panel-purple); border-radius: 12px; padding: 20px; margin-bottom: 20px; border-left: 4px solid var(--accent-purple); }
#pinScreen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100%; }
.pin-display { font-size: 30px; letter-spacing: 15px; margin-bottom: 30px; min-height: 40px; color: var(--text-green); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 250px; }
.pin-btn { background: var(--panel-purple); border: 2px solid var(--accent-purple); width: 75px; height: 75px; border-radius: 50%; font-size: 24px; color: var(--text-green); cursor: pointer; }
/* THE RED X STYLING */
.pin-btn.clear {
    border-color: var(--danger-red) !important;
    color: var(--danger-red) !important;
}

.pin-btn.clear:active {
    background: rgba(255, 51, 102, 0.2);
}