body { font-family: -apple-system, "SF Pro", Arial, sans-serif; background: #2a2a3a; min-height: 100vh; padding: 40px 20px; }
.phone { max-width: 360px; margin: 0 auto; background: #000; border-radius: 40px; padding: 20px 12px; border: 10px solid #111; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.status-bar { display: flex; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; }
.notifications { min-height: 120px; padding: 8px 0; }
.notif { background: rgba(60,60,80,0.9); color: #fff; padding: 10px 12px; border-radius: 12px; margin: 6px 0; font-size: 12px; animation: slide 0.3s ease; }
.notif strong { display: block; font-size: 13px; }
@keyframes slide { from { transform: translateX(100%); opacity: 0; } }
.big-prompt { background: #fff; border-radius: 16px; padding: 20px; margin-top: 10px; text-align: center; }
.ms-logo { display: flex; gap: 2px; justify-content: center; margin-bottom: 10px; }
.sq { width: 14px; height: 14px; } .sq.r { background: #f25022; } .sq.g { background: #7fba00; } .sq.b { background: #00a4ef; } .sq.y { background: #ffb900; }
.big-prompt h2 { font-size: 17px; margin: 6px 0; }
.num { font-size: 48px; font-weight: bold; margin: 10px 0; letter-spacing: 4px; }
.dim { font-size: 12px; color: #666; }
.opts { display: flex; gap: 8px; margin-top: 14px; }
.opts button { flex: 1; padding: 12px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.ok { background: #0078d4; color: #fff; }
.no { background: #eee; color: #333; }